My First Web Page: Lesson 5

Home ← Live Mathematics and STEM on the Web ← My First Web Page: Introduction ← Lesson 5

My First Web Page: Lesson 5: My First GeoGebra Web Page

Create Your Own Live Mathematics and STEM Web Pages

W3Schools.com: Learn JavaScript

GeoGebra Manual

Reference: GeoGebra Apps API

Embedding: GeoGebra Apps in a Web Page: Quick Start


Introduction: A Sampler

Lesson 2: Styles and Layout

Lesson 3: Adding Beautiful Mathematics to your web page

Lesson 4: Interacting with your web page

Lesson 5a: Adding a GeoGebra Applet

Lesson 5(b): Adding a Geometry Expressions Applet

Lesson 6(a): Creating a GeoGebra Assessment Task

Lesson 6(b): Creating a Geometry Expressions Assessment Task

Lesson 7: Interacting with Third Party Apps

Lesson 8: JavaScript, STEM and Internal Device Sensors

Lesson 9: JavaScript, STEM and GPS

Lesson 10: Adding Web Bluetooth Support (1): Talking to your SensorTag

Lesson 11: Adding Web Bluetooth Support (2): Talking to your LaunchPad

Lesson 12: Introduction to HTML Graphics: Canvas



New to GeoGebra? Perhaps you should take a few minutes to have a look through their Getting Started page? Or just Google "Getting Started with GeoGebra" - there are many great YouTube videos out there!

We begin our tutorial, once again, with the simplest of exemplars - no bells and whistles: the easiest way to embed a GeoGebra applet within a web page.

Before you can embed a GeoGebra applet within your web page, you first need to create a free GeoGebra account at geogebra.org. This gives you access to their online repository of created documents. YOU will need to use one of these or to create your own and then save it to this repository using any version of GeoGebra - although I confess I much prefer GeoGebra Classic with the full array of functionality over the more limited Graphing and Geometry apps now available. The GeoGebra document that you wish to use with your web page will have an ID code - just look for share in the menu and copy the code produced.

Refer to the link above to the GeoGebra Apps API, which details the many ways in which GeoGebra supports interaction between its applet and the web page hosting it. If, initially, this page makes little sense to you, don’t worry - I felt the same way (and still do with regard to much of it!).

Instead, again, we might be better served beginning with the last of the links above and follow the steps given in the Quick Start for embedding GeoGebra apps within a web page - and you will recognise these as they occur in our example code which follows.

First, you will observe a link within the HEAD of the script to the online instruction set ("https://cdn.geogebra.org/apps/deployggb.js") which interprets the various embedding commands.

The next section looks complicated, but is simply the list of properties that we want our applet to possess. Try changing each of these and see the result! Take particular note of the "material_id" ("matID"). This is where you will paste the code that you got for your online document! Just for interest, try copying and pasting "dwxd6tcv" in place of the materials ID given and check out another GeoGebra document that I prepared earlier...

addEventListener literally injects the defined app into the div statement ("ggb-element") created in the BODY below.

Finally, the DIV line in the BODY which actually contains what will be our applet (div id="ggb-element") - this is where the applet will appear on our web page!.

If you have any questions or would like to share your experience with this utility, please drop me an email!

Back to Top



Putting GeoGebra to Work

Back to Top


Now let's jazz things up a bit!

We add some functions which illustrate just some of the power we now have at our fingertips.

setFunction() uses the input button and the textArea (called "textBox") and simulates the actual GeoGebra Input Bar which appears and disappears at the bottom of the applet window. I find writing to that Input bar a little problematic at times - sometimes it gets hidden, and typing to it can be a little tricky. So having a nice easily accessible input bar at my disposal on my web page is a great thing!

Try typing a command, like "frequency = 110" and press the Input button and you will see what I mean. Now try something like "y = x".

This function makes use of the powerful evalCommand GeoGebra function.

Other useful commands include setValue and getValue and many others that you will find in that long API reference page!
To act upon or read values from a GeoGebra object, you will need to create that object first, either in your source document, or right there in youe web page as needed (although those you create on the fly will not be there once the page is refreshed, whereas variables created in the source document, of course, will always be available.

Why not take advantage of that excellent CAS engine using evalCommandCAS? (NOTE: You may need to press the button a time or two on first use to give the CAS engine time to come on board!)

Next, we illustrate how easily we can grab values from the applet using getValue.

The final function is even simpler - it "resets" the applet back to its original state using reset().

By the way, did you notice a nice little inclusion in the textarea definition? onchange = "setFunction();" is the textarea equivalent of onclick for a button - it makes stuff happen when you make a change and press enter!

Revisiting Something Mathematical?

Back to Top


Now let's add the power of GeoGebra to our two nice quadratic examples from the last lesson - see how easily we can integrate the GeoGebra applet with interactive prompts or text boxes.

Study the code and see the two places where we added GeoGebra elements - in the HEAD where we added to the function which solves the quadratic and tells what to do with the solutions, and in the BODY where we add the actual GeoGebra applet.

Add MathQuill and MathJax to GeoGebra

Back to Top


We have previously seen beautiful mathematics added to our web pages using MathQuill and MathJax - here we add these to GeoGebra! Now both input and output can be represented using correct mathematical notation.

To better see what is happening, try changing the lines which define myVar_latex and myVar_mtext from display:none to display:block.

To add MathJax to your page, just add the CloudFlare script source you will find at the very end of the page code. This will load any MathJax code present in the page when it loads. MathJax code is mathematical text placed between "\[" and "\]" (new line and centred) or "\(" and "\)" (in-line).

To display further MathJax code for subsequent mathematical text (such as that added as a result of a function being called) include the MathJax.Hub command at the end of the function (as in getFunction() and setCAS()).

Supporting MathQuill involves a little more effort:

You will see a MathQuill CSS stylesheet in the HEAD and calls to the MathQuill setup function in the BODY onload.

These activate any MathQuill text spans (here this has ID myVar).

Such spans replace the more usual HTML input or textarea fields which would normally be used to allow users to enter text.

In addition to the span for entry, there will be two more for each MathQuill field: one for latex output (myVar_latex), and one for simplified mathematical text output (myVar_mtext).

These supporting elements do their work behind the scenes, and are generally hidden, as noted above, since they are likely to be a distraction for students. However, for coding purposes it may well be of benefit to show these, at least temporarily, to understand the inner workings of the MathQuill process.

Finally, you will find three script sources - one for latex2mth.js, one for jquery.min.js and one for mathquill.js itself. These make the MathQuill magic happen.

Try to create your own MathQuill and MathJax enabled web page, modelled on those you find here. Please drop me a line if I can help with getting you started.

And Putting It All Together

Back to Top


As shown in lesson 2, we can add header and footer navigation links to make our web page more user-friendly and professional.

We also add the MathQuill and MathJax support discussed above, but this time in a simplified form, calling the GeoGebra code and other supporting functions from the ggb2.js and sharedcode2.js script sources you will find at the end of the page code.

To see where the (JavaScript) MathQuill and MathJax magic comes from...

GeoGebra CAS and Other Perspectives

Back to Top


GeoGebra Classic is a versatile and powerful mathematical assistant, with various perspectives for performing different types of tasks.

Study the code and see where we added the GeoGebra perspective definition.

Here we defined the CAS perspective using "C". Try changing this to "CG", and then "C/G". What do you observe? Try some more...

Don't Forget GeoGebra 3D

Back to Top


GeoGebra 3D opens possibilities for so many wonderful mathematical explorations.

Take some time to play with the code and study the effect - as always, you will learn best by doing.

NOTE: You can copy the text from the text box above, paste it into any text editor and save it with the ".html" suffix to create a fully functional HTML page. Upload this to wherever you are going to host your pages from, and you are ready to share!

If you have any questions or comments, or if you find things that have not been made clear, then please feel free to drop me an email and I will get back to you.


Back to Top

For a taste of what is possible now that you have two-way communication with your embedded applet, why not visit some or all of the following pages. Have a play, and see if you can work out how the various components work - and then use your browser to display the Page Source and see if you were right! If you have any problems with getting access to the source code, then drop me an email and I will send you the files.

The Beach Race (material_id = "mg36YWnc", perspective = "GC"),

Meeting a friend (material_id = "kdJVMhts", perspective = "GC"),

A4 paper folding (material_id = "dwxd6tcv", perspective = "GC"),

Kissing Curves (material_id = "f5ZGdnYc", perspective = "GC"),

the Case of the Diminishing Square (material_id = "PHrQnYKp", perspective = "GC"),

Half a Glass, Please! (material_id = "QFEmjnyD", perspective = "GC"),



Back to Top

Home ← Live Mathematics and STEM on the Web ← My First Web Page: Introduction ← Lesson 5

The Beach Race (material_id = "mg36YWnc", perspective = "GC"),
Meeting a friend (material_id = "kdJVMhts", perspective = "GC"),
A4 paper folding (material_id = "dwxd6tcv", perspective = "GC"),
Kissing Curves (material_id = "f5ZGdnYc", perspective = "GC"),
the Case of the Diminishing Square (material_id = "PHrQnYKp", perspective = "GC"),
Half a Glass, Please! (material_id = "QFEmjnyD", perspective = "GC"),