How to import Geogebra files into JSXGraph
By Murray Bourne, 19 Jul 2010
Update: Jan 2014
Unfortunately, this method no longer works very well (and doesn’t work at all in some cases.)
My Example 1 below does not even display any part of the original GGB file, and I changed the second example to pure JSXGraph some time ago.
I don’t believe the Geogebra reader is a high priority for the JSXGraph developers. Fair enough, they have plenty of other things to do!
So if you follow the steps below, good luck to you if it actually works.
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.
(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?)
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,)
- 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>
var b = JXG.JSXGraph.loadBoardFromFile(‘box’, ‘something.ggb‘, ‘Geogebra’);
And that’s it!
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) = loge(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.)
Update, Jan 2014: As mentioned above, I converted the following example to pure JSXGraph some time ago (when the GGB import failed…
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.
Update: The import process described on this page doesn’t play nicely with Internet Explorer browser. (Actually, most things don’t play nicely with IE). So I re-wrote the interactive once again from scratch this time using JSXGraph, so it will work on all browsers. So it is no longer an example of this technique of importing a GGB file into JSXGraph.
I’ve found that some text that shows just fine in GeoGebra does not appear when rendered in JSXGraph.
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!
See the 9 Comments below.