Including Geogebra¶

Geogebra is an exciting application for doing geometry, albegra, and other mathematical exercises online. You access it here: https://www.geogebra.org/

This notebook is not a tutorial on Geogebra; you’ll need to figure that out yourself. Also note this probably doesn’t work in a static Jupyter Book. You will need to run it in Callysto by clicking on the “Open in Callysto” button above.

However, once you know how to make a Geogebra application, you can then include it into a Jupyter notebook.

First step is to use the geogebra.org website to create your app, then export it (download it) as a .ggb file.

Second step is to upload it onto the Jupyter hub, using the “upload” on the hub menu.

Third, you set up some initialization in your Jupyter notebook, that looks like this:

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

Fourth, you now read in the file (in this case, names geo-test.ggb) into a cell in the Jupyter notebook, like this:

%%html
<div id="ggb-point"></div>

<script>
  var ggbApp = new GGBApplet({
      "height": 400,
      "showToolBar": false,
      "showMenuBar": false,
      "showAlgebraInput": false,
      "showResetIcon": true,
      "enableLabelDrags": false,
      "enableRightClick": false,
      "enableShiftDragZoom": true,
      "useBrowserForJS": false,
      "filename": "geo-test.ggb"
  }, 'ggb-point');

  ggbApp.inject();
</script>

You now will have a working Geogebra application running inside the Jupyter notebook. Note in the commands above, there are a bunch of true/false options for turning on and off various features in the Geogebra application. You can experiment with these until you get the right collection of options desired.

Example 1¶

First, we do the setup. Note the following is a “code” cell, not markdown.

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

Next we load in the Geogebra app with the following code. Note the local file name here is geo-test.ggb. You will have to use the name of your file to get it to load.

%%html

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

<script>
  var ggbApp = new GGBApplet({
      "height": 400,
      "showToolBar": false,
      "showMenuBar": false,
      "showAlgebraInput": false,
      "showResetIcon": true,
      "enableLabelDrags": false,
      "enableRightClick": false,
      "enableShiftDragZoom": true,
      "useBrowserForJS": false,
      "filename": "geo-test.ggb"
  }, 'ggb-point');

  ggbApp.inject();
</script>

Example 2¶

Let’s try this using the D3 example of how to do Javascript in a solid way.

from IPython.core.display import display, HTML

html_text = '''
<div id="ggb-point2"></div>
<script> 
    require.config({paths: {gb: "https://cdn.geogebra.org/apps/deployggb"}});
    require(["gb"], function(gb) {
      var ggbApp = new GGBApplet({
          "height": 400,
          "showToolBar": false,
          "showMenuBar": false,
          "showAlgebraInput": false,
          "showResetIcon": true,
          "enableLabelDrags": false,
          "enableRightClick": false,
          "enableShiftDragZoom": true,
          "useBrowserForJS": false,
          "filename": "geo-test.ggb"
      }, 'ggb-point2');

  ggbApp.inject();
    });
</script>
'''

display(HTML(html_text))

## sometime we need to run this a few times!
display(HTML(html_text))
display(HTML(html_text))
display(HTML(html_text))

Notes.¶

In a Jupyter Book, the %%html script may not work. I don’t know why.

The display(HTML(…)) command seems to work better. But maybe you have to run it twice!

Callysto Shorts

Including Geogebra¶

Example 1¶

Example 2¶

Notes.¶