Difference between revisions of "Reference:GeoGebra Apps Embedding"

From GeoGebra Manual
Jump to: navigation, search
(removed applet type)
(cleanup)
Line 1: Line 1:
 
{{Reference}}
 
{{Reference}}
−
This article describes how to embed GeoGebra Math Apps into your website or offline HTML materials using Javascript.
+
{{Note|In case you want to embed your materials in a webpage without any programming, you can just use the click the Share button on the material page and select Embed from the dialog that appears.  
−
{{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.
 
  
−
[https://www.geogebra.org/partner/portal Download Math Apps Bundle]
+
The method described on this page provides better performance, more flexibility and allows deeper integration.}}
−
=Embed using Javascript=
+
=Embed using JavaScript=
−
This method is recommended when multiple HTML5 applets are embedded in one page, or if you need to use the [https://www.geogebra.org/manual/en/Reference:JavaScript JavaScript API]. In this case they can share one instance of the GeoGebra codebase and load faster.
+
You can use JavaScript to easily embed GeoGebra Math Apps into your website and interact with them using the [https://www.geogebra.org/manual/en/Reference:JavaScript JavaScript API].
−
Here is an example web page that shows how to embed applets: [http://dev.geogebra.org/examples/html/example2.html Example page].
+
Here is an example web page that shows how to embed applets:
 +
 
 +
* [http://dev.geogebra.org/examples/html/example2.html Live demo]
 +
* [https://github.com/geogebra/math-apps-examples/blob/master/html/example-multiple.html Source code]
  
 
You need to include the following three parts in your HTML file:
 
You need to include the following three parts in your HTML file:
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>
−
{{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.
+
{{Step|num=2}} Create elements in which the applets should be embedded
−
 
+
<pre>    <div id="applet_container1"></div>
−
Here is the according code from the [http://dev.geogebra.org/examples/html/example2.html example page] that creates 2 applets:
+
    <div id="applet_container2"></div></pre>
−
<pre>   var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
+
{{Step|num=3}} Configure and insert the applets
 +
<pre><script> 
 +
    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() {
+
    window.addEventListener("load", function() {
 
         applet1.inject('applet_container1');
 
         applet1.inject('applet_container1');
 
         applet2.inject('applet_container2');
 
         applet2.inject('applet_container2');
−
     });</pre>
+
     });
−
 
+
</script></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 snipet above embeds one applet given by ID and one given by URL and injects them into elements with ids 'applet_container1' and 'applet_container2' respectively (the alement ID is passed to the inject method) . 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 <code>inject()</code> is a string with the id of the HTML object that will be the parent of the applet.  
 
  
−
{{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:
+
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 the list of all parameters.
  
−
<pre>    <div id="applet_container1"></div></pre>
+
In the example the parameter 'showtoolbar:true' overrides the material setting from the file.
  
−
{{note|In case you are using the Math Apps Bundle, please change the first script tag to
 
−
<pre>    <script src="GeoGebra/deployggb.js"></script></pre>
 
−
and include the following two lines below the definition of applet2
 
−
<pre>    applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
 
−
    applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>}}
 
 
=Examples=
 
=Examples=
 
* [http://dev.geogebra.org/examples/html/example-single.html Single applet]
 
* [http://dev.geogebra.org/examples/html/example-single.html Single applet]
Line 55: Line 46:
 
* [http://dev.geogebra.org/examples/html/example-exercise.html Exercise (beta)]
 
* [http://dev.geogebra.org/examples/html/example-exercise.html Exercise (beta)]
  
−
[[es:Referencia:Applet Embebido]]
+
=Offline and Self-Hosted Solution=
−
[[fr:Référence:Appliquettes_imbriquées]]
+
We suggest you use use Math Apps from our CDN (cdn.geogebra.org) as shown above, but in case you need to use the materials offline or host all the necessary file yourself you can do so using the ''Math Apps Bundle''.
−
[[it:Riferimenti:Incorporare_Applet]]
+
[https://www.geogebra.org/partner/portal Download Math Apps Bundle]
 +
The embed codes are almost the same as above, with two differences: the tag for including deployggb.js needs to be changed to
 +
<pre>    <script src="GeoGebra/deployggb.js"></script></pre>
 +
and you need to include the following two lines below the definition of applet2
 +
<pre>    applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
 +
    applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>

Revision as of 00:26, 26 April 2017

GeoGebra API Documentation

Note: In case you want to embed your materials in a webpage without any programming, you can just use the click the Share button on the material page and select Embed from the dialog that appears. The method described on this page provides better performance, more flexibility and allows deeper integration.

Embed using JavaScript

You can use JavaScript to easily embed GeoGebra Math Apps into your website and interact with them using the JavaScript API. Here is an example web page that shows how to embed applets:

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 Create elements in which the applets should be embedded 

    <div id="applet_container1"></div>
    <div id="applet_container2"></div>

3 Configure and insert the applets 

<script>  
    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');
    });
</script>

The snipet above embeds one applet given by ID and one given by URL and injects them into elements with ids 'applet_container1' and 'applet_container2' respectively (the alement ID is passed to the inject method) . 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 the list of all parameters.

In the example the parameter 'showtoolbar:true' overrides the material setting from the file.

Examples

Offline and Self-Hosted Solution

We suggest you use use Math Apps from our CDN (cdn.geogebra.org) as shown above, but in case you need to use the materials offline or host all the necessary file yourself you can do so using the Math Apps Bundle. Download Math Apps Bundle The embed codes are almost the same as above, with two differences: the tag for including deployggb.js needs to be changed to 

    <script src="GeoGebra/deployggb.js"></script>

and you need to include the following two lines below the definition of applet2 

    applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
    applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
Retrieved from "http://wiki.geogebra.org/s/en/index.php?title=Reference:GeoGebra_Apps_Embedding&oldid=54544"
© 2024 International GeoGebra Institute