Difference between revisions of "Reference:GeoGebra Apps Embedding"

From GeoGebra Manual
Jump to: navigation, search
(typo)
(https://download.geogebra.org/package/geogebra-math-apps-bundle)
(23 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{Reference}}
+
This page describes how to embed GeoGebra Apps into your website. For more information on how to interact with embedded apps, please see [[Reference:GeoGebra_Apps_API|GeoGebra Apps API]].  
{{Note|In case you want to embed your materials in a webpage without any programming, you can just tap 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.}}
+
=Quick Start=
=Embed using JavaScript=
+
In order to embed GeoGebra apps into your page, you need to add the following three parts:
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 Live demo]
+
{{Step|num=1}} Make sure you have this in the <code>&lt;head></code> section to make sure scaling works correctly:
* [https://github.com/geogebra/math-apps-examples/blob/master/html/example-multiple.html Source code]
+
<pre>    <meta name=viewport content="width=device-width,initial-scale=1"></pre>
  
You need to include the following three parts in your HTML file:
+
{{Step|num=2}} The javascript library deployggb.js needs to be included with this tag:
 +
<pre>    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre>
  
{{Step|num=1}} The javascript library deployggb.js needs to be included with this tag:
+
{{Step|num=3}} Create an element for the GeoGebra app on your page:
 +
<pre>    <div id="ggb-element"></div> </pre>
  
<pre>    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre>
+
{{Step|num=4}} Configure and insert the app:
{{Step|num=2}} Create elements in which the applets should be embedded
 
<pre>    <div id="applet_container1"></div>
 
    <div id="applet_container2"></div></pre>
 
{{Step|num=3}} Configure and insert the applets
 
 
<pre><script>   
 
<pre><script>   
     var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
+
     var ggbApp = new GGBApplet({"appName": "graphing", "width": 800, "height": 600, "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true }, true);
    var applet2 = new GGBApplet({filename: "../ggb/sine-curves.ggb","showtoolbar":true}, true);
+
     window.addEventListener("load", function() {  
     window.addEventListener("load", function() {
+
         ggbApp.inject('ggb-element');
         applet1.inject('applet_container1');
 
        applet2.inject('applet_container2');
 
 
     });
 
     });
 
</script></pre>
 
</script></pre>
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 PlatformOptionally you can override these settings by passing them in the parameters. See [[Reference:Applet_Parameters]] for the list of all parameters.
+
Simply change the <code>appName</code> parameter from <code>graphing</code> to <code>geometry</code> or <code>3d</code> to get one of our other appsTo load an activity you can use eg <code>"material_id":"RHYH3UQ8"</code> and you can customize our apps further by using various [[Reference:GeoGebra_App_Parameters|GeoGebra App Parameters]].
  
In the example the parameter 'showtoolbar:true' overrides the material setting from the file.
+
=Live Examples=
 +
The following examples and their html source code show how to use GeoGebra apps either embedded in your page or in popup dialogs:
 +
* [http://dev.geogebra.org/examples/html/example-graphing.html Graphing Calculator embedded]
 +
* [http://dev.geogebra.org/examples/html/example-geometry.html Geometry app embedded]
 +
* [http://dev.geogebra.org/examples/html/example-popup-graphing.html Graphing Calculator popup]
 +
* [http://dev.geogebra.org/examples/html/example-popup-geometry.html Geometry app popup]
  
=Examples=
+
=GeoGebra Apps API=
* [http://dev.geogebra.org/examples/html/example-single.html Single applet]
+
The following examples show how you can interact with embedded apps through the [https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_API GeoGebra Apps API]:  
* [http://dev.geogebra.org/examples/html/example-3d.html Single applet 3D]
+
* [http://dev.geogebra.org/examples/html/example-api-multiple.html Showing & hiding objects with buttons]
* [http://dev.geogebra.org/examples/html/example-multiple.html Two applets]
+
* [http://dev.geogebra.org/examples/html/example-api-save-state.html Saving & loading state]
* [http://dev.geogebra.org/examples/html/example-api.html Single applet + API]
+
* [http://dev.geogebra.org/examples/html/example-api-listeners.html Listening to update, add, remove events]
* [http://dev.geogebra.org/examples/html/example-api-multiple.html Two applets + API]
 
* [http://dev.geogebra.org/examples/html/example-api-save-state.html Single applet + API for saving]
 
* [http://dev.geogebra.org/examples/html/example-tools.html Apps with toolbar]
 
* [http://dev.geogebra.org/examples/html/example-popup.html Apps with toolbar in a popup dialog]
 
* [http://dev.geogebra.org/examples/html/example-api-listeners.html Event listeners]
 
* [http://dev.geogebra.org/examples/html/example-api-sync.html Communication between applets]
 
* [http://dev.geogebra.org/examples/html/example-exercise.html Exercise (beta)]
 
  
 
=Offline and Self-Hosted Solution=
 
=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''.
+
We suggest you to use the GeoGebra Apps from our global and super-fast server network cdn.geogebra.org as shown above, but in case you prefer to host and update the GeoGebra apps yourself, you can [https://download.geogebra.org/package/geogebra-math-apps-bundle download our GeoGebra Math Apps Bundle]
[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
 
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>
 
<pre>    <script src="GeoGebra/deployggb.js"></script></pre>
and you need to include the following two lines below the definition of applet2
+
and you need to include the following line before the inject() call:
<pre>    applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
+
<pre>    ggbApp.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
    applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
 

Revision as of 09:09, 8 May 2018

This page describes how to embed GeoGebra Apps into your website. For more information on how to interact with embedded apps, please see GeoGebra Apps API.

Quick Start

In order to embed GeoGebra apps into your page, you need to add the following three parts:

1 Make sure you have this in the <head> section to make sure scaling works correctly:

    <meta name=viewport content="width=device-width,initial-scale=1">

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

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

3 Create an element for the GeoGebra app on your page:

    <div id="ggb-element"></div> 

4 Configure and insert the app:

<script>  
    var ggbApp = new GGBApplet({"appName": "graphing", "width": 800, "height": 600, "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true }, true);
    window.addEventListener("load", function() { 
        ggbApp.inject('ggb-element');
    });
</script>

Simply change the appName parameter from graphing to geometry or 3d to get one of our other apps. To load an activity you can use eg "material_id":"RHYH3UQ8" and you can customize our apps further by using various GeoGebra App Parameters.

Live Examples

The following examples and their html source code show how to use GeoGebra apps either embedded in your page or in popup dialogs:

GeoGebra Apps API

The following examples show how you can interact with embedded apps through the GeoGebra Apps API:

Offline and Self-Hosted Solution

We suggest you to use the GeoGebra Apps from our global and super-fast server network cdn.geogebra.org as shown above, but in case you prefer to host and update the GeoGebra apps yourself, you can download our GeoGebra 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 line before the inject() call:

    ggbApp.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
© 2024 International GeoGebra Institute