Difference between revisions of "Reference:GeoGebra Apps Embedding"

From GeoGebra Manual
Jump to: navigation, search
(For technical reasons, you need to use <code>5.2</code> not <code>5.0</code> after version 804)
 
(39 intermediate revisions by 8 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 (eg on mobile browsers) and that Unicode works
−
* [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"> 
 +
<meta charset="utf-8"/></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://www.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 params = {"appName": "graphing", "width": 800, "height": 600, "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true };
−
     var applet2 = new GGBApplet({filename: "../ggb/sine-curves.ggb","showtoolbar":true}, true);
+
     var applet = new GGBApplet(params, true);
−
     window.addEventListener("load", function() {
+
     window.addEventListener("load", function() {  
−
         applet1.inject('applet_container1');
+
         applet.inject('ggb-element');
−
        applet2.inject('applet_container2');
 
 
     });
 
     });
 
</script></pre>
 
</script></pre>
−
The snippet 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 element 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.
+
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 apps.  To load an activity you can use eg <code>"material_id":"RHYH3UQ8"</code> or <code>"filename":"myFile.ggb"</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.
+
=Tutorial=
  
−
=Examples=
+
Please see here for a longer tutorial which explains the different embedding options:
−
* [http://dev.geogebra.org/examples/html/example-single.html Single applet]
+
https://www.geogebra.org/m/sehv2qc9
−
* [http://dev.geogebra.org/examples/html/example-3d.html Single applet 3D]
+
 
−
* [http://dev.geogebra.org/examples/html/example-multiple.html Two applets]
+
=Live Examples=
−
* [http://dev.geogebra.org/examples/html/example-api.html Single applet + API]
+
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-api-multiple.html Two applets + API]
+
* [http://dev.geogebra.org/examples/html/example-graphing.html Graphing Calculator embedded]
−
* [http://dev.geogebra.org/examples/html/example-api-save-state.html Single applet + API for saving]
+
* [http://dev.geogebra.org/examples/html/example-geometry.html Geometry app embedded]
−
* [http://dev.geogebra.org/examples/html/example-tools.html Apps with toolbar]
+
* [http://dev.geogebra.org/examples/html/example-popup-graphing.html Graphing Calculator popup]
−
* [http://dev.geogebra.org/examples/html/example-popup.html Apps with toolbar in a popup dialog]
+
* [http://dev.geogebra.org/examples/html/example-popup-geometry.html Geometry app popup]
−
* [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]
+
=GeoGebra Apps API=
−
* [http://dev.geogebra.org/examples/html/example-exercise.html Exercise (beta)]
+
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-api-multiple.html Showing & hiding objects with buttons]
 +
* [http://dev.geogebra.org/examples/html/example-api-save-state.html Saving & loading state]
 +
* [http://dev.geogebra.org/examples/html/example-api-listeners.html Listening to update, add, remove events]
  
 
=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 www.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>    applet.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
−
    applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
+
Alternatively if you just need to fix to a specific version then you can still use the CDN like this (don't change the <code>5.0.</code> just the <code>498</code>)
 +
<pre>    applet.setHTML5Codebase("https://www.geogebra.org/apps/5.0.498.0/web3d");</pre>
 +
For technical reasons, you need to use <code>5.2</code> not <code>5.0</code> after version 804 eg
 +
<pre>    applet.setHTML5Codebase("https://www.geogebra.org/apps/5.2.804.0/web3d");</pre>
 +
 
 +
=Adjusting embedded apps appearance=
 +
This feature is currently available only for GeoGebra Notes. To change the colors of the UI elements, you can set some CSS variables
 +
<pre>
 +
<style>
 +
body {
 +
  --ggb-primary-color: #ee0290; /* used for most UI elements, including the toolbar header and buttons */
 +
  --ggb-primary-variant-color: #880061; /* used for floating buttons on hover */
 +
  --ggb-dark-color: #880061; /* used for highlighted text in dialogs */
 +
  --ggb-light-color: #f186c0; /* used for progress bar */
 +
}
 +
</style>
 +
</pre>
 +
 
 +
=Speed up loading time with a service worker=
 +
You can speed up loading of the GeoGebra library by using a service worker.
 +
To use a service worker you should set a specific version of GeoGebra using <code>setHTML5Codebase()</code>.
 +
 
 +
To install the service worker, first you have to include the ''sworker-locked.js''
 +
file under your domain (e.g. ''www.example.com/path/sworker-locked.js'').
 +
The service worker file can be found under the ''GeoGebra/HTML5/5.0/web3d/'' folder
 +
in the ''GeoGebra Math Apps Bundle''.
 +
 
 +
Next, include the following snippet on the page where GeoGebra is loaded.
 +
Please change the path to the service worker. You can also set the appletLocation
 +
variable to enable the worker only in a specific folder (or leave it as '/' to use it on all pages of your domain):
 +
 
 +
    var serviceWorkerPath = '/sworker-locked.js'
 +
    var appletLocation = '/'
 +
   
 +
    function isServiceWorkerSupported() {
 +
        return 'serviceWorker' in navigator && location.protocol === "https:";
 +
    }
 +
   
 +
    function installServiceWorker() {
 +
        if (navigator.serviceWorker.controller) {
 +
            console.log("Service worker is already controlling the page.");
 +
        } else {
 +
            navigator.serviceWorker.register(serviceWorkerPath, {
 +
                scope: appletLocation
 +
            });
 +
        }
 +
    }
 +
   
 +
    if (isServiceWorkerSupported()) {
 +
        window.addEventListener('load', function() {
 +
            installServiceWorker()
 +
        });
 +
    } else {
 +
        console.log("Service workers are not supported.");
 +
    }
 +
 
 +
With this installed, when a user opens the page where the service worker is enabled,
 +
the application scripts get downloaded and cached by the service worker. This way,
 +
the next time that same user visits the page, the scripts are loaded from the
 +
cache instead of downloading them again from the servers.

Latest revision as of 13:12, 27 September 2023

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 (eg on mobile browsers) and that Unicode works 

<meta name=viewport content="width=device-width,initial-scale=1">  
<meta charset="utf-8"/>

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

<script src="https://www.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 params = {"appName": "graphing", "width": 800, "height": 600, "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true };
    var applet = new GGBApplet(params, true);
    window.addEventListener("load", function() { 
        applet.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" or "filename":"myFile.ggb" and you can customize our apps further by using various GeoGebra App Parameters.

Tutorial

Please see here for a longer tutorial which explains the different embedding options: https://www.geogebra.org/m/sehv2qc9

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 www.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: 

    applet.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');

Alternatively if you just need to fix to a specific version then you can still use the CDN like this (don't change the 5.0. just the 498) 

    applet.setHTML5Codebase("https://www.geogebra.org/apps/5.0.498.0/web3d");

For technical reasons, you need to use 5.2 not 5.0 after version 804 eg 

    applet.setHTML5Codebase("https://www.geogebra.org/apps/5.2.804.0/web3d");

Adjusting embedded apps appearance

This feature is currently available only for GeoGebra Notes. To change the colors of the UI elements, you can set some CSS variables 

<style>
body {
  --ggb-primary-color: #ee0290; /* used for most UI elements, including the toolbar header and buttons */
  --ggb-primary-variant-color: #880061; /* used for floating buttons on hover */
  --ggb-dark-color: #880061; /* used for highlighted text in dialogs */
  --ggb-light-color: #f186c0; /* used for progress bar */
}
</style>

Speed up loading time with a service worker

You can speed up loading of the GeoGebra library by using a service worker. To use a service worker you should set a specific version of GeoGebra using setHTML5Codebase().

To install the service worker, first you have to include the sworker-locked.js file under your domain (e.g. www.example.com/path/sworker-locked.js). The service worker file can be found under the GeoGebra/HTML5/5.0/web3d/ folder in the GeoGebra Math Apps Bundle.

Next, include the following snippet on the page where GeoGebra is loaded. Please change the path to the service worker. You can also set the appletLocation variable to enable the worker only in a specific folder (or leave it as '/' to use it on all pages of your domain): 

   var serviceWorkerPath = '/sworker-locked.js'
   var appletLocation = '/'
   
   function isServiceWorkerSupported() {
       return 'serviceWorker' in navigator && location.protocol === "https:";
   }
   
   function installServiceWorker() {
       if (navigator.serviceWorker.controller) {
           console.log("Service worker is already controlling the page.");
       } else {
           navigator.serviceWorker.register(serviceWorkerPath, {
               scope: appletLocation
           });
       }
   }
   
   if (isServiceWorkerSupported()) {
       window.addEventListener('load', function() {
           installServiceWorker()
       });
   } else {
       console.log("Service workers are not supported.");
   }

With this installed, when a user opens the page where the service worker is enabled, the application scripts get downloaded and cached by the service worker. This way, the next time that same user visits the page, the scripts are loaded from the cache instead of downloading them again from the servers.

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