|
|
| (80 intermediate revisions by 13 users not shown) |
| Line 1: |
Line 1: |
| − | To include a material from GeoGebra into a webpage you can either embed it as an iframe or use the script deployggb.js to inject it directly to your webpage.
| + | https://geogebra.github.io/docs/reference/en/GeoGebra_Apps_Embedding/ |
| − | | |
| − | __TOC__
| |
| − | =Embed as iframe=
| |
| − | You can automatically get the iframe code by clicking on the "Embed" button on the material page. Here is an example:
| |
| − | <pre>
| |
| − | <iframe scrolling="no"
| |
| − | src="http://www.geogebra.org/material/iframe/id/23587/width/1600/height/715/border/888888/rc/false/ai/false/sdz/false/smb/false/stb/false/stbh/true/ld/false/sri/false/at/preferhtml5"
| |
| − | width="1600px"
| |
| − | height="715px"
| |
| − | style="border:0px;">
| |
| − | </iframe>
| |
| − | </pre>
| |
| − | | |
| − | {| class="wikitable"
| |
| − | |-
| |
| − | ! Description !! Code !! Example
| |
| − | |-
| |
| − | | Force HTML5 on newer browsers || at || /at/preferhtml5
| |
| − | |-
| |
| − | | Enable Right Click, Zooming and Keyboard Editing || rc || /rc/true
| |
| − | |-
| |
| − | | Show Input Bar || ai || /ai/true
| |
| − | |-
| |
| − | | Enable Shift-Drag & Zoom || sdz || /sdz/true
| |
| − | |-
| |
| − | | Show Menu Bar|| smb || /smb/true
| |
| − | |-
| |
| − | | Show Toolbar|| stb || /stb/true
| |
| − | |-
| |
| − | | Show Toolbar Help || stbh || /stbh/true
| |
| − | |-
| |
| − | | Allow label dragging || ld || /ld/true
| |
| − | |-
| |
| − | | Show reset icon (top-right) || sri || /sri/true
| |
| − | |}
| |
| − | | |
| − | =Embed using deployggb.js=
| |
| − | This method is recommended when multiple HTML5 applets are embedded in one page. In this case they can share one instance of the GeoGebraWeb codebase and load faster.
| |
| − | Here is an example web page that shows how to embed applets: [http://dev.geogebra.org/partners/geogebra-applet-embed/example1.html Example page]
| |
| − | | |
| − | You need to include the following three parts in your HTML file:
| |
| − | | |
| − | {{Step|num=1}} The javascript library deployggb.js needs to be included with this tag:
| |
| − | | |
| − | <pre> <script type="text/javascript" src="http://www.geogebra.org/scripts/deployggb.js"></script></pre>
| |
| − | | |
| − | {{Step|num=2}} For each applet a javaScript object of the type GGBApplet needs to be created. It takes at least the material ID from tube as a parameters.
| |
| − | | |
| − | Here is the according code from the [http://dev.geogebra.org/partners/geogebra-applet-embed/example1.html example page] that creates 3 applets:
| |
| − | var applet1 = new GGBApplet({material_id: "27876"}, true);
| |
| − | var applet2 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
| |
| − | var applet3 = new GGBApplet({material_id: "17501", showMenuBar:true}, true);
| |
| − | | |
| − | By default the applet will be created using the dimensions (width and height) and the applet parameters defined in the material settings on GeoGebra. Optionally you can override these settings by passing them in the parameters. See [[Reference:Applet_Parameters]] for a list of applet parameters.
| |
| − | | |
| − | In the example the parameter 'showMenuBar:true' overrides the material setting from tube to show the menu bar for applet3.
| |
| − | | |
| − | {{Step|num=3}} Finally, you need to determine where the applet should appear in the document and inject the applet. In our example file we create a div as parent for each applet, like this:
| |
| − | | |
| − | <pre> <div id="applet_container1"></div></pre>
| |
| − | | |
| − | At the end of the script section the applets are injected to this divs using the inject function:
| |
| − | <pre> window.onload = function() {
| |
| − | applet1.inject('applet_container1', 'preferHTML5');
| |
| − | applet2.inject('applet_container2', 'preferHTML5');
| |
| − | applet3.inject('applet_container3', 'preferHTML5');
| |
| − | }</pre>
| |
| − | | |
| − | The parameters of the method <code>inject()</code> are:
| |
| − | <table style="width: 100%;" class="pretty">
| |
| − | <tr>
| |
| − | <th>Parameter</th>
| |
| − | <th>Description</th>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td>containerID</td>
| |
| − | <td> A string with the id of the HTML object that will be the parent of the applet. </td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td>appletType</td>
| |
| − | <td> This can be one of the following keywords:
| |
| − | ; preferHTML5 (default)
| |
| − | : use HTML5 whenever possible (on tablets and with modern browsers), only fall back on Java otherwise (e.g. with Internet Explorer 8)
| |
| − | ; preferJava
| |
| − | : use Java when installed, otherwise use HTML5
| |
| − | ; html5
| |
| − | : use HTML5 applet
| |
| − | ; java
| |
| − | : use Java applet. Note: in this case your applet will not work on tablets.
| |
| − | ; auto
| |
| − | : automatically decide the best technology (HTML5 or Java) based on the client and GeoGebra version number provided
| |
| − | </td>
| |
| − | </tr>
| |
| − | </table>
| |
| − | [[es:Referencia:Applet Embebido]]
| |
