You are here: Home > Maths intro > Circle theorems first page > Embed Geogebra applet
I first posted a version of this site in 2007; since then Geogebra keeps changing things - I'm sure for the better!
- so the methods for embedding resources have to change too.
Here I'll explain two ways - the one that I presently use on webpages with Geogebra applets embedded, but first, a newer way.
New method - using the info from https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_Embedding
a) First, put this in the <head> section to make sure scaling works correctly (eg on mobile browsers)
<meta name=viewport content="width=device-width,initial-scale=1">
b) Then, include the javascript library deployggb.js using this tag:
<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>
I prefer to put <script> statements in the <head> section, but it would work in the <body>.
c) After that, create an element for the GeoGebra app in the body of your page:
<div id="ggb-element"></div>
d) Now, to access the applet you want to embed, go to the Geogebra website; https://wiki.geogebra.org/ then search for the one you want. eg, To find my 'discovering angle in a semicircle' resource, searching for 'discovering angle in a semicircle tim devereux' should lead you to https://www.geogebra.org/m/D9sSmw7H. The last part, D9sSmw7H, is the material id, which needed as one of the inputs in variable 'ggbApp' in the script.
e) Finally, you need to configure and insert the app, using a script:
<script>
var ggbApp = new GGBApplet({"appName": "geometry", "width": 1000, "height": 600, "showToolBar": true,
"showAlgebraInput": false, "showMenuBar": true }, true);
window.addEventListener("load", function() {
ggbApp.inject('ggb-element');
});
</script>
"appName": "geometry" - can be graphing, geometry or 3d depending on which app is needed
"width": 1000, "height": 600 - the dimensions on pixels of the applet window
"showToolBar": true - can be true to display toolbar, false otherwise. Toolbar is on top lhs of GeoGebra window
"showAlgebraInput": false - can be true to display algebra input, false otherwise. Algebra input is on lhs of Geogebra window
"showMenuBar": true - can be true to display menubar, false otherwise. Menubar is on top lhs of GeoGebra window
"material_id":"D9sSmw7H" - the id of the applet
Here's an example page: using the info from http://www.timdevereux.co.uk/maths/geompages/test_z7.html
Here's the code: www.timdevereux.co.uk/maths/geompages/test_code_z7.html
Old method
This is the method used on the current pages, uploaded in 2015.
a) Viewport statement not included; if I was doing the pages now, I'd include it!
b) The javascript library deployggb.js was included using this tag:
<script type="text/javascript" src="//www.geogebratube.org/scripts/deployggb.js"></script>
(The new link to the javascript also works - https://cdn.geogebra.org/apps/deployggb.js )
c) Create an element for the GeoGebra app in the body of the page:
<div style="width:800px;height:500px;display:block" id="applet_container1"></div>
This also specifies the size of the Geogebra window.
d) Accessing the desired applet is the same as the first method, above. It is worth noting that entering URL http://tube.geogebra.org/material/show/id/597519 will load the page https://www.geogebra.org/material/show/id/597519. Also, if you click the 'View activity'button on that page, you will get https://www.geogebra.org/m/D9sSmw7H. So the ids 597519 & D9sSmw7H are the same material.
e) Finally, the script to insert the applet is
<script type="text/javascript">
/* Create applet for material_id 597519/material_id D9sSmw7H from tube. http://tube.geogebra.org/material/show/id/597519
https://www.geogebra.org/material/show/id/597519
The second parameter, 'preferHTML5', forces not to use webSimple
(this is necessary when multiple applets are used on one page, if one cannot use webSimple).*/
var applet1 = new GGBApplet({material_id: "D9sSmw7H"}, true);
window.onload = function() {
applet1.inject('applet_container1', 'preferHTML5');
}
</script>
Here's an example page: using the info from http://www.timdevereux.co.uk/maths/geompages/test_z5.html
Here's the code: www.timdevereux.co.uk/maths/geompages/test_code_z5.html
Comparing the two methods, the new one has two advantages: 1) You have control over more parameters 2) It's new!!