Difference between revisions of "Reference:GeoGebra Apps Embedding"

From GeoGebra Manual
Jump to: navigation, search
m (Text replace - "geogebratube.org" to "geogebra.org")
(https://download.geogebra.org/package/geogebra-math-apps-bundle)
(47 intermediate revisions by 7 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.
+
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]].  
  
__TOC__
+
=Quick Start=
=Embed as iframe=
+
In order to embed GeoGebra apps into your page, you need to add the following three parts:
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="https://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>
 
  
The language of the GeoGebra user interface (toolbar, menu, ...) is set to the browser language by default. If you want to use a different language you can add the parameter ''?ggbLang=<lang_code>'' at the end of the URL, eg <code>?ggbLang=fr</code>, <code>?ggbLang=zh_CN</code>, <code>?ggbLang=zh_TW</code>
+
{{Step|num=1}} Make sure you have this in the <code>&lt;head></code> section to make sure scaling works correctly:
{{Example|1=<code><nowiki>https://www.geogebra.org/material/iframe/id/23587/width/1600/height/715/border/888888/rc/false/ai/false/sdz/false/smb/true/stb/true/stbh/true/ld/false/sri/false/at/preferhtml5?ggbLang=fr</nowiki></code>}}
+
<pre>   <meta name=viewport content="width=device-width,initial-scale=1"></pre>
  
{| class="wikitable"
+
{{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>
! 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
 
|-
 
| Set user interface language (Note the different parameter format) || ggbLang ||?ggbLang=en
 
|}
 
  
=Embed using deployggb.js=
+
{{Step|num=3}} Create an element for the GeoGebra app on your page:
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.
+
<pre>    <div id="ggb-element"></div> </pre>
Here is an example web page that shows how to embed applets: [http://dev.geogebra.org/examples/geogebra-applet-embed/example1.html Example page]
 
  
You need to include the following three parts in your HTML file:
+
{{Step|num=4}} Configure and insert the app:
 +
<pre><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></pre>
  
{{Step|num=1}} The javascript library deployggb.js needs to be included with this tag:
+
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> and you can customize our apps further by using various [[Reference:GeoGebra_App_Parameters|GeoGebra App Parameters]].
  
<pre>    <script type="text/javascript" src="https://www.geogebra.org/scripts/deployggb.js"></script></pre>
+
=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]
  
{{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.
+
=GeoGebra Apps API=
 +
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]
  
Here is the according code from the [http://dev.geogebra.org/examples/geogebra-applet-embed/example1.html example page] that creates 3 applets:
+
=Offline and Self-Hosted Solution=
    var applet1 = new GGBApplet({material_id: "27876"}, true);
+
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]
    var applet2 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
+
The embed codes are almost the same as above, with two differences: the tag for including deployggb.js needs to be changed to
    var applet3 = new GGBApplet({material_id: "17501", showMenuBar:true}, true);
+
<pre>    <script src="GeoGebra/deployggb.js"></script></pre>
 
+
and you need to include the following line before the inject() call:
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.
+
<pre>    ggbApp.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
 
 
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]]
 
[[fr:Référence:Appliquettes_imbriquées]]
 
[[it:Riferimenti:Incorporare_Applet]]
 

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