Adding JavaScript to a GeoGebra Applet

In this tutorial we'll discuss augmenting an applet by adding some JavaScript control.  This will be very basic, but it helps if you have some familiarity with editing html documents and doing a little JavaScript programming.

Open the GeoGebra file Tutorial-7.ggb.
Our goal is to make the online applet here.

This is a simple demonstration of a right-endpoint Riemann sum.  The following commands were entered in the Input Bar:
  • f(x) = sin(2 x) - (1/10) x² + 3
  • a = 1
  • b = 7
  • n = 12
  • dx = (b - a)/n
  • rightpoints = Sequence[ f(a + i dx), i, 1, n ]
  • rightsum = BarChart[ a, b, rightpoints ]
Next, I hid the algebra view and exported the worksheet to an applet.



Browse to Tutorial_7.html and view the page source (this is a right-click option in most browsers).  You'll see three main sections: applet, form, and script.

The applet section is automatically created when a worksheet is exported.

The form section tells the browser which controls to use.  There are text boxes, buttons, and a selector control.

The script section provides functions that take input from the form section and tell the GeoGebra applet what to do with that information.


<applet name="ggbApplet" ... >
...
</applet>


<form name="MyForm">
...
</form>


<script type="text/javascript">
...
</script>



Mostly, what you need to do is take time to examine the source code and see how it is reflected in the behavior of the html page.

Consider the first four input text boxes.  Each has a name, and value.  When the button "Set Window" is clicked, the function  setView  is called.  This function will pull in the values from the four text boxes.

In the setView function, the first line makes the variable  applet  refer to the GeoGebra applet.  This is merely a convenience; now when we want to refer to the GeoGebra applet we can simply write "applet" instead of "document.ggbApplet".  The next four lines create variables and assign them the values in the four boxes.  Finally, we make the applet execute a command, setCoordSystem, which resizes the viewing window.

Consider the function setFunction.  Here we create a variable  func  which is just a text string.  We make the applet execute the command  evalCommand  which essentially puts that string into the Input Bar of the GeoGebra worksheet.

...

...


Further thoughts:
Back to Home Tutorial Page