squareCircleZ

The problem

GeoGebra is an excellent free tool for exploring math. (See my GeoGebra software – a Review). It’s also a great tool for math teachers to create interactive math applets for students.

A big advantage of GeoGebra is that it is very easy to use. You can have a graph on the screen in minutes and start finding slopes, intersections, angle size and many other goodies.

The downside with GeoGebra is that the user’s computer needs Java (not javascript). Steve Jobs is now refusing to allow Java on any of his iPhones or iPads, and this means users of such devices will miss out on being able to use GeoGebra files.

(He’s also refusing to allow Flash, and this is leading to a re-think for many of us that create Web pages. What is the future of Java and Flash?)

One Solution

JSXGraph is a neat javascript-based (not Java) interactive mathematics tool (see my overview at JSXGraph: interactive javascript graphs).

JSXGraph also allows you to build interactive graphs that are delivered on a Web page. But the downside is you have to have fairly good javascript skills – it is essentially a coding exercise, whereas GeoGebra uses a graphic interface.

Import GeoGebra files into JSXGraph

One handy thing you can do is to import the GeoGebra output files (.GGB extension) into JSXGraph. Well, you don’t really "import" the files – more accurately you get JSXGraph to interpret the Geogebra GGB file, and display it on your HTML page.

This is how it’s done.

• Create a new HTML file that will contain the embedded GeoGebra file. Make sure your saved GeoGebra file (something.ggb) is in the same directory as the HTML file.
• The HTML file needs 2 simple scripts at the top (these call the JSXGraph code and an extra GeoGebra interpreter code). Put these lines just before the </head> (closing head tag) at the top of your page. (If you are doing this on a blog, put these 2 lines at the beginning of your blog post,)

<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js" type=’text/javascript’></script>
<script src="http://jsxgraph.uni-bayreuth.de/distrib/GeogebraReader.js" type="text/javascript" ></script>

• In the body of your HTML file, import the GeoGebra file as follows (the only thing you will need to change for your own case will be the name of the GGB file):

<div id="box" style="width:500px;height:500px;border:1px solid #cfcfcf"></div>
<script type="text/javascript">
var b = JXG.JSXGraph.loadBoardFromFile(‘box’, ‘something.ggb‘, ‘Geogebra’);
</script>

And that’s it!

Example 1

Below is an example of a file I created in GeoGebra. You are seeing it as interpreted by JSXGraph. If you are viewing this on an iPhone or iPad, you should also be able to see the graph.

The blue curve is f(x) = log_e(x), and the magenta line is the tangent at a point on the curve.

You can drag the dot representing the point (lower left corner), and observe the slope as it changes. Some observation will tell you the slope is the reciprocal of whatever the x-value is at that point. (Pause at x = 1, x = 2, x = 3, etc and observe the slope at those points.)

Example 2

I recently rewrote the Radius of Curvature page on Interactive Mathematics. This is an application of differentiation that I’ve always found interesting.

The "Exploration" section on that page (about 1/2 way down) involves a graph I created in GeoGebra and have rendered using JSXGraph.

The reader can investigate what a "radius of curvature" really means using the interactive graph.

Known Issues

I’ve found that some text that works fine in GeoGebra does not appear when rendered in JSXGraph.

Concluding Remarks

JSXGraph has a lot of promise as a cross-platform, cross-browser interactive math tool. GeoGebra is very good for creating applets in a visual interface.

Putting the 2 together has lots of potential – especially when we let the students do it!

Related posts:

1. GeoGebra math software – a review GeoGebra impresses with its versatility, ease of use and power....
2. JSXGraph: interactive javascript graphs JSXGraph is a method for producing interactive graphs on a...
3. IntMath Newsletter: radius of curvature, log curve, free math videos In this Newsletter: 1. Math of the great summer brain...
4. Friday math movie – Trigonometric Graphs Here's a light-hearted introduction to the concepts of trigonometric graphs....
5. Friday math movie – NUMB3RS and Bayes’ Theorem Charlie explains to his class about the Monty Hall problem,...