Difference between revisions of "Reference:GeoGebra Apps Embedding"

From GeoGebra Manual
Jump to: navigation, search
(removed applet type)
Line 15: Line 15:
  
 
<pre>    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre>
 
<pre>    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre>
−
In case you are using the Math Apps Bundle, please use
+
{{Step|num=2}} For each applet a javaScript object of the type GGBApplet needs to be created. It takes at least the material ID or URL as a parameter.
−
<pre>    <script src="GeoGebra/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/examples/html/example2.html example page] that creates 2 applets:
 
Here is the according code from the [http://dev.geogebra.org/examples/html/example2.html example page] that creates 2 applets:
−
    var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
+
<pre>    var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
 
     var applet2 = new GGBApplet({filename: "../ggb/sine-curves.ggb","showtoolbar":true}, true);
 
     var applet2 = new GGBApplet({filename: "../ggb/sine-curves.ggb","showtoolbar":true}, true);
 +
  window.addEventListener("load", function() {
 +
        applet1.inject('applet_container1');
 +
        applet2.inject('applet_container2');
 +
    });</pre>
  
−
The above example shows how to load a file using the filename or the id of the material on GeoGebra Materials Platform. For offline use you will need to specify the file using a base64 encoded string (press Ctrl+Shift+B to export ggbBase64 string to clipboard).
+
The above example shows how to load a file using the filename or the id of the material on GeoGebra Materials Platform. For offline use you will need to specify the file using a base64 encoded string (press Ctrl+Shift+B to export ggbBase64 string to clipboard).  
  
 
When used with the id parameter, the applet will be created using the dimensions (width and height) and the applet parameters defined in the material settings on GeoGebra Materials Platform.  Optionally you can override these settings by passing them in the parameters. See [[Reference:Applet_Parameters]] for a list of applet parameters.
 
When used with the id parameter, the applet will be created using the dimensions (width and height) and the applet parameters defined in the material settings on GeoGebra Materials Platform.  Optionally you can override these settings by passing them in the parameters. See [[Reference:Applet_Parameters]] for a list of applet parameters.
Line 29: Line 31:
 
In the example the parameter 'showMenuBar:true' overrides the material setting from tube to show the menu bar for applet3.
 
In the example the parameter 'showMenuBar:true' overrides the material setting from tube to show the menu bar for applet3.
  
−
Add also: (if the applets contain 3D view)
+
The parameter of the method <code>inject()</code> is a string with the id of the HTML object that will be the parent of the applet.  
−
<pre>   applet1.setHTML5Codebase('https://app.geogebra.org/5.0/web3d/');
 
−
    applet2.setHTML5Codebase('https://app.geogebra.org/5.0/web3d/');</pre>
 
−
 
 
−
In case you are using the Math Apps Bundle, please use
 
−
<pre>    applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
 
−
    applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
 
  
 
{{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:
 
{{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:
Line 41: Line 37:
 
<pre>    <div id="applet_container1"></div></pre>
 
<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:
+
{{note|In case you are using the Math Apps Bundle, please change the first script tag to
−
<pre>    window.onload = function() {
+
<pre>    <script src="GeoGebra/deployggb.js"></script></pre>
−
        applet1.inject('applet_container1', 'preferHTML5');
+
and include the following two lines below the definition of applet2
−
        applet2.inject('applet_container2', 'preferHTML5');
+
<pre>   applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
−
        applet3.inject('applet_container3', 'preferHTML5');
+
    applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>}}
−
    }</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)
 
−
; html5
 
−
: force HTML5 to be used -- prevents Java from loading, old browser users won't be able to use the applet
 
−
Other values are deprecated.
 
−
      </td>   
 
−
      </tr>
 
−
</table>
 
−
 
 
 
=Examples=
 
=Examples=
 
* [http://dev.geogebra.org/examples/html/example-single.html Single applet]
 
* [http://dev.geogebra.org/examples/html/example-single.html Single applet]

Revision as of 22:02, 25 April 2017

GeoGebra API Documentation

This article describes how to embed GeoGebra Math Apps into your website or offline HTML materials using Javascript.

Note: Alternative solution is to embed materials from GeoGebra Materials Platform in your website as an iframe. See Reference:Material_Embedding_(Iframe) for details.

Location of Math Apps

You can use Math Apps from our CDN (app.geogebra.org) or you can download them as Math Apps Bundle that you can host on your own server or use offline.

Download Math Apps Bundle

Embed using Javascript

This method is recommended when multiple HTML5 applets are embedded in one page, or if you need to use the JavaScript API. In this case they can share one instance of the GeoGebra codebase and load faster. Here is an example web page that shows how to embed applets: Example page.

You need to include the following three parts in your HTML file:

1 The javascript library deployggb.js needs to be included with this tag: 

    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script>

2 For each applet a javaScript object of the type GGBApplet needs to be created. It takes at least the material ID or URL as a parameter.

Here is the according code from the example page that creates 2 applets: 

    var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
    var applet2 = new GGBApplet({filename: "../ggb/sine-curves.ggb","showtoolbar":true}, true);
   window.addEventListener("load", function() {
        applet1.inject('applet_container1');
        applet2.inject('applet_container2');
    });

The above example shows how to load a file using the filename or the id of the material on GeoGebra Materials Platform. For offline use you will need to specify the file using a base64 encoded string (press Ctrl+Shift+B to export ggbBase64 string to clipboard).

When used with the id parameter, the applet will be created using the dimensions (width and height) and the applet parameters defined in the material settings on GeoGebra Materials Platform. 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.

The parameter of the method inject() is a string with the id of the HTML object that will be the parent of the applet.

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: 

    <div id="applet_container1"></div>
Note: In case you are using the Math Apps Bundle, please change the first script tag to 
    <script src="GeoGebra/deployggb.js"></script>

and include the following two lines below the definition of applet2 

    applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
    applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');

Examples

es:Referencia:Applet Embebido fr:Référence:Appliquettes_imbriquées it:Riferimenti:Incorporare_Applet

Retrieved from "http://wiki.geogebra.org/s/en/index.php?title=Reference:GeoGebra_Apps_Embedding&oldid=54542"
© 2024 International GeoGebra Institute