# JSXGraph--dynamic mathematics running on (nearly) every device.

1 IntroductionIn the late 1990s the availability of graphical web browsers that enabled easy access to the World Wide Web brought many fresh ideas to the classroom and to mathematics education. The programming language Java became the dominant tool to raise interactivity in dynamic mathematics to a new level. Countless new Java based mathlets came to existence to visualize many aspects of mathematics from elementary school to university. Also, powerful Java based software systems were developed that combined geometry and calculus under one graphical user interface. The most prominent examples are Cinderella [8], [GEONE.sub.x]T [3] and GeoGebra [5] to name a few of them. But also, non-java-based desktop programs are still of importance. Examples are The Geometer's Sketchpad (1) and Cabri II plus (2). Both are available for Windows and MacOS and their vendors provide Java based web viewers.

But now a new hardware generation is on the horizon which appears to be better suited for the class room than the old clumsy Personal Computer. The revolution started with the success of small and cheap netbooks and the appearance of powerful smartphones. In the near future these two complementary worlds--phones and computers--seem to melt together into tablet computers. The success of the iPad by Apple confirms this. Probably, very soon many other hardware manufacturer will follow and produce cheaper tablet computers having more features than the iPad.

Now, mathematics education faces the challenge that most of the existing web-based software for dynamic mathematics is implemented in Java. But a Java plug-in will not be available on most of these new machines. Without suitable good software the new hardware is useless for learning mathematics in class room.

With the project JSXGraph (3) at the University of Bayreuth we tried to take up this challenge and offer first class dynamic mathematics software that runs on every device including smartphones, netbooks, tablet computers and Desktop PCs. Moreover, the goal is to provide compatibility for existing resources for mathematics education.

JSXGraph is a free software library for mathematical visualizations in a web browser. Its feature set covers dynamic Geometry, plotting of function graphs and curves of various types, charts, and turtle graphics.

Usually, JSXGraph is embedded in web pages, for on- and offline viewing. The download size is a mere 80 kByte, when embedded in web pages. JSXGraph enhanced web pages can be viewed with all major web browsers on nearly every hardware platform and operating system. The supported hardware ranges from smartphones and tablet computers running iOS or Android to Desktop PC running Windows, MacOS X or Linux.

At the time of writing, JSXGraph is the only dynamic geometry system that runs on such a broad range of devices and web browsers--without installation of any plug-in or wathsoever additional software. JSXGraph is usable even on devices with limited computing resources, like older Desktop PCs running Microsoft Internet Explorer 6. Thus, this library may prove to be helpful for the introduction of technology in mathematical education in developing countries.

2 Computers in mathematics education

As of today three types of computers are used by students in class room: Desktop PCs, Programmable Desktop Calculators, and mobile computers like Laptops and netbooks, see Table 1. Soon, the new generation of tablet computers will be available and these devices will be well suited for the class room: cheap to medium priced, robust hardware, medium computing power, long battery life, running special purpose desktop programs (so called apps) and web based software, Java plug-in is not available, Flash plug-in will be sometimes available.

The tablet computers seem to combine the advantages of the Programmable Desktop Calculator and the laptop computer.

The most notable disadvantages of these tablet devices for mathematics education are that typing is still not as easy as with a physical keyboard and that none of the available software for dynamic mathematics is available for these platforms.

From an implementors view the situation is getting more difficult than before because there will exist a variety of incompatible hardware and software platforms used by these devices. Thus, web-based software seems to be the only managable solution to provide dynamic mathematics software for all platforms simultaneously.

3 Background on web based visualization

For implementing web-based dynamic mathematics software running on all platforms the only possible programming language is JavaScript [2]. In the first years of its availability JavaScript was running very slow, but recently the browsers are equipped with very advanced Just-in-Time compilers for JavaScript, ehancing the speed enormously. Moreover, the initalisation time of a JavaScript program is close to zero in contrast to some Java plug-ins, see the online versions of Figures 1, 2, and 3.

For realizing graphical output in the web browser that can be manipulated by JavaScript there exist several possibilities, depending on the browser:

* SVG: (4) Scalable Vector Graphics, vector graphics format.

* VML: (5) Vector Markup Language, vector graphics format.

* Canvas: (6) bitmap graphics.

Table 2 shows that if a software wants to support graphical output on all major web browsers then it has to support at least the canvas element and VML. In the context of dynamic geometry, the SVG format--if available--seems to be slightly better suited than the canvas element, see [6].

For tablet computers Safari and the Android version of Chrome will most likely become the predominant browsers, since many of these devices are announced to be based on Android. For a future release of Android, SVG support of Chrome has been announced.

Even with the availability of the Internet Explorer 9 the need for support of VML will remain for some years, because Internet Explorer 9 will not be available on older machines running Windows XP. This seems to be especially the case for schools and public institutions which are typically slow on updating their computing infrastructure. The slow adaption rate is also underpinned by the survey [10] which shows that in August 2010 the Internet Explorer 6 still had a market share of 16.18% despite the availability of versions 7 and 8 since several years.

4 The library JSXGraph for dynamic mathematics

The open-source library JSXGraph, developed at the University of Bayreuth, addresses the compatibility problems described in Section 3. JSXGraph is a pure JavaScript implementation of dynamic mathematics for the web browser, it does not rely on any other library. By default, JSXGraph uses the vector graphics format SVG for graphical output. If SVG is not supported by the web browser it falls back to either VML or canvas.

Another pure JavaScript implementation of a Dynamic Geometry System (DGS) is GeometryEditor (7), formerly known as GeoSVG. But there, the graphical output is restricted to SVG. Further, it seems that its development has stopped 2009.

First publicly presented in 2008 [4], JSXGraph offers all functionality of a DGS, including conic sections. Meanwhile, the features of JSXGraph go far beyond the possibilities of most DGS. The following list gives an overview of possibilities of JSXGraph.

Geometry elements: point, glider, intersection, line, segment, parallel, perpendicular, axis, tangent, normal, vector, circle, circumcircle, ellipse, hyperbola, parabola, conic defined by five points, polygon, regular polygon, midpoint, mirror point, reflection point, semicircle, circumcircle arc, circumcircle sector, angle, bisector, bisector lines, exact loci computation, homogeneous and affine coordinates

Calculus: function graph, parametric curve, polar plot, Lagrange interpolation, cubic spline, B-spline, Bezier curve, regression polynomials of arbitrary degree, Riemann sums, numerical differentiation, numerical integration, numerical solution of systems of ordinary differential equations, matrix computions, root finding, Eigenvalues, -vectors

Charts: bar chart, line chart, point chart, radar chart, cartogram

Other: slider, images, projective transformation, turtle graphics, various types of animation, various R-like statistical functions, Lindenmayer systems

Display options: HSV color palette, shadows, color gradients, flexible layers, dynamic texts with LATEX-support via MathJax (8)

The goal of JSXGraph is to be real dynamic. For example, it is an easy task to make the degree of a regression polynomial (9) or the fill color of certain elements (10) dependent on other elements.

The size of the JSXGraph code is about 380 kByte. If the web server delivering the content has data compression enabled (which should be the default anyhow) the size of the transmitted code is about 80 kByte. To compare it with Java software, for example the size of the [GEONE.sub.x]T archive is about 1 Mbyte.

In order to use JSXGraph the web developer has to include only two files in the HTML file: the JSXGraph code and a CSS file. JSXGraph is released under the Lesser GNU General Public License (LGPL), the source code is available at Sourceforge (11).

As explained in Section 3, JSXGraph runs on every hardware and operating system which has a graphical web browser. All the mainstream web browser are supported, Firefox 3+, Internet Explorer 6+ (including the upcoming version 9), Google Chrome (all versions). The browsers Safari, Opera are supported since at least 2008. The range of supported hardware thus reaches from Desktop PCs down to tablet computers and smartphones.

With JSXGraph it is possible to access modern mathematical content even with old computers running Internet Explorer 6. But even on more powerful computers JSXGraph has the advantage over Java based software that the downloading time and the initialization time is much shorter than for comparable Java applets.

In summary, JSXGraph is usable on a huge amount of devices and should be able to take up the challenge and support dynamic mathematics on the upcoming hardware generation. At the time of writing, there is no other software for dynamic mathematics that can be used on such a wide range of platforms.

5 JSXGraph as DGS viewer

JSXGraph is able to read and display the following file formats:

* [GEONE.sub.x]T (12)

* Intergeo (13)

* GeoGebra (14)

* Cinderella (15)

The support of the [GEONE.sub.x]T file format [3, 4] by JSXGraph is close to 100%. Only very few [GEONE.sub.x]T resources are misinterpreted by JSXGraph. In Figure 1 the construction to the right is the [GEONE.sub.x]T Java applet, to the left is the same file displayed by JSXGraph.

[FIGURE 1 OMITTED]

The Intergeo [7] format is an upcoming common file format supported by most European implementors of dynamic geometry systems. JSXGraph possesses one of the most complete implementations of the file formats. At the time of writing, the file format just starts to gain popularity.

The support of the GeoGebra file format [5] is not complete, but covers the most common features of GeoGebra. In Figure 2 the construction to the right is the GeoGebra Java applet, to the left is the same file displayed by JSXGraph.

The support of the Cinderella file format [8] by JSXGraph is in a very early development stage. At the moment it comprises most of the Euclidean Geometry part of Cinderella. In Figure 3 the construction to the right is the Cinderella Java applet, to the left is the same file displayed by JSXGraph.

6 Constructing with JessieScript

JSXGraph comes with a simple geometric construction language called JessieScript, which is closely related to the syntax students use in school to describe their construction by compass and ruler. An example is shown in Figure 4, the online version is available at http://jsxgraph.uni-bayreuth.de/jessie. The whole web page consists of three elements: the form for the text input of the construction, the display of the construction and a log window. Another positive side effect of JessieScript regards security issues. In the web application of Figure 4 input is restricted to JessieScript syntax, all other input is ignored. This makes it difficult to infiltrate malicious JavaScript code.

[FIGURE 2 OMITTED]

The most important JessieScript commands are:

* A(1,1) : Point with name 'A' at position (1,1)

* ZY(0.5|1) : Point with name 'ZY' at position (0.5,1)

* ]AB[: straight line through points A and B

* [AB[: ray through points A and B, stopping at A

* ]AB]: ray through points A and B, stopping at B

* [AB]: segment through points A and B

* g=[AB]: segment through points A and B, named by 'g'

* k(A,1) : circle with center A and radius 1

* k(A,B) : circle with center A through point B on the circle line

* k(A,[BC]) : circle with center A and radius defined by the length of the (not necessarily existing) segment [BC]

* k_1=k(A,1) : circle with center A and radius 1, named by 'k_1'

The JessieScript wiki page contains the full description of the syntax.

[FIGURE 3 OMITTED]

7 Developing mathlets with JSXGraph

With JSXGraph it is possible to create special purpose programs for mathematics visualizations. These are sometimes called mathlets (16).

JSXGraph provides an API (application programming interface) to build JavaScript based dynamic mathematics applications for the web browser. The differential equation plotter in the JSXGraph wiki is one example for using JSXGraph in mathematics education on the university level. Other applications are function plotting, turtle graphics, and support for various possibilities to create charts. Further, communication between JSXGraph and special purpose software on server side is very simple, see Section 8 for advanced examples. JSXGraph meanwhile is used in situations that are different from mathematics education, see for example the landslide prediction project.

The JSXGraph wiki contains more than 170 examples for dynamic mathematics, covering many areas like charts, function plotting, calculus, geometry, and turtle graphics.

Thus, JSXGraph should be well suited for demands of publishers of e-books or providers of e-learning content to produce really interactive material for inquiry-based learning.

For some wide-spread content management systems there exist plug-ins to ease the integration of JSXGraph code. At the moment, plug-ins exist for drupal, mediawiki, moodle, and wordpress. For example, the code to include JSXGraph code into a wiki page powered by mediawiki with JSXGraph plug-in installed looks the following (online version):

<jsxgraph width="500" height="500"> var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-2,2,2,-2]}); var p = brd.create('point',[1.5,1.5],{face:'o', size:8}); var q = brd.create('point',[-1,-0.5],{face:'x', size:5}); brd.create('segment',[p,q],{dash:3}); </jsxgraph>

[FIGURE 4 OMITTED]

The plug-in introduces the new tag name <jsxgraph> which is an HTML <div> element containing the JSXGraph construction.

8 Server side calculations

JSXGraph also includes a math library which provides an interface to some basic algorithms like linear equation and ode solvers. The speed of JavaScript interpreters in modern web browsers is sufficient for small to medium sized problems being calculated with pure JavaScript. More complex problems can be handled by JSXGraph by swapping the calculation from the web browser to the web server. This way even existing software solutions like computer algebra systems or numerical libraries can be used and integrated in JSXGraph.

To accomplish this, a web development technique called AJAX is used. This technique is usually used to exchange data with a web server without reloading the whole web page. Unfortunately this comes with a lot of programming overhead required for every JSXGraph mathlet which requires server side calculations: AJAX invocation, parsing data from JSXGraph on the web server, formatting the output data on the server and back in the browser one has to parse the results. In short: a whole communication protocol has to be designed and implemented. To avoid this and save the creators of JSXGraph based worksheets this repeating and extra work, JSXGraph provides a simple yet powerful server-client-framework.

This framework is Python (17) based on the server side and is organized in modules. A module is loaded by a simple function call:

JXG.Server.load('fft');

This sends a request to the server to load the modules fft.py, which in this case provides some methods to calculate fourier transforms using NumPy (18). If the module can be found it is loaded and answers with a list of available methods and data elements which are then integrated in JSXGraph. From now on, all the methods provided by the module can be used as if they were JavaScript functions.

Another example of a JSXGraph server module is the loci computation. This module is based on an algorithm developed by [1] based on ideas first mentioned in [9]. It usually takes two points as its input: One dependent point which is connected to a glider by a geometric construction. A glider is a point that is bound to an algebraic curve. First, from all points of the construction the points that are required to calculate the locus are filtered. Then JSXGraph generates a polynomial ideal and sends the ideal to the server. On the server CoCoA (19) is used to calculate the elimination ideal which is then analyzed using matplotlib (20). In a last step, JSXGraph displays the locus based on the data points the server sent. An example of the loci computation can be found on the authors website: http://jsxgraph.uni-bayreuth.de/examples/limacon.html.

9 Conclusion

JSXGraph enables the usability of mathematical resources on a broad variety of platforms including new small tablet computers and old, outdated Desktop PCs. These tablet devices seem to be very well suited for use in class room, but up to now there is a lack of good mathematical software, since Java applets are no longer supported. The goal of JSXGraph is to change this situation.

As of today, JSXGraph can be used with all major web browsers on Desktop PCs--including Internet Explorer starting from version 5.5, Firefox, Chrome, Safari, and Opera. Moreover, JSXGraph runs on every Android device and on iPad, iPhone, and iPod touch by Apple. Other platforms can display JSXGraph as long as there is a web browser available that implements SVG or canvas graphics. Presumably, this is the case for all tablet devices.

References

[1] Botana, F., Valcarce, J. L.: "A software tool for the investigation of plane loci". In: Mathematics and Computers in Simulation, 61(2):139-152 (2003).

[2] Crockford D., JavaScript: The good parts, Sebastopol, CA, O'Reilly (2008).

[3] Ehmann, M., Miller, C.: "Dynamic Mathematics with [GEONE.sub.x]T." (Part I: The Interplay between Geometry, Algebra and Calculus) in: T. Triandafillidis, K. Hatzikiriakou (Editors): Technology in Mathematics Teaching Proceedings of the 6th International Conference, University of Thessaly, Volos--Greece, (2003).

[4] Ehmann, M., Miller, C., Wassermann, A.: "Dynamic Mathematics with [GEONE.sub.x]T: New Concepts". Book of Abstracts, 4th European Workshop on Mathematical & Scientific e-Contents (2008).

[5] Hohenwarter, M., Fuchs, K.: "Combination of Dynamic Geometry, Algebra and Calculus in the Software System GeoGebra". In: Computer Algebra Systems and Dynamic Geometry Systems in Mathematics Teaching Conference 2004, Pecs, Hungary (2005).

[6] Kaipiainen, S., Paksula, M.: "SVG vs. Canvas on Trivial Drawing Application", SVG Open (2009) , http://www.svgopen.org/2009/papers/ 54-SVGv_Canva on Trivial Drawing Application/

[7] Kortenkamp, U., Dohrmann, Ch., Kreis, Y., Dording, C., Libbrecht, P., Mercat, Ch.: "Intergeo--Using the Intergeo Platform for Teaching and Research". Published at ICTMT9--The Ninth International Conference on Technology in Mathematics Teaching, Metz (2009).

[8] Kortenkamp, U., Richter-Gebert, J.: "Euklidische und Nicht-Euklidische Geometrie mit Cinderella". In:Tagungsband zum Nurnberger Kolloquium zur Didaktik der Mathematik (1999).

[9] Recio, T., Velez, M. P.:: "Automatic Discovery of Theorems in Elementary Geometry". In: Journal of Automated Reasoning, 23(1):6382 (19999).

[10] Online access to http://marketshare.hitslink.com/ browser-market-share.aspx?qprid=0 (2010)

Michael Gerhauser, Carsten Miller, Bianca Valentin, Alfred Wassermann, Peter Wilfahrt

{michael.gerhaeuser, carsten.miller, bianca.valentin, alfred.wassermann, peter.wilfahrt} @uni-bayreuth.de

Department of Mathematics, University of Bayreuth

D-95440 Bayreuth, Germany

(1) http://www.dynamicgeometry.com

(2) http://cabri.com

(3) http://jsxgraph.org

(4) http://www.w3.org/TR/SVG/

(5) http://www.w3.org/TR/NOTE-VML

(6) https://developer.mozilla.org/en/Canvas_tutorial

(7) http://wme.cs.kent.edu/geosvg/

(8) http://mathjax.org

(9) http://jsxgraph.uni-bayreuth.de/ wiki/index.php/Polynomia^_regression_I

(10) http://jsxgraph.uni-bayreuth.de/ wiki/index.php/Infinity

(11) http://sourceforge.net/projects/jsxgraph/

(12) http://geonext.org

(13) http://i2geo.eu

(14) http://geogebra.org

(15) http://cinderella.de

(16) See for example http://math.mit.edu/mathlets/

(17) http://python.org/

(18) http://numpy.scipy.org/

(19) http://cocoa.dima.unige.it/

(20) http://matplotlib.sourceforge.net/

Table 1: Computer types in mathematics education. Desktop Programm. Laptop, Tablet PC Desktop netbook PC Calculator Computing power + - o o Graphics resolution + - o/+ o/+ Battery life + o + Power plug necessary yes no yes no Computer lab required yes no no no Robustness + + - + Prize + - -/o/+ o/- Windows binaries yes no yes no Web applications yes no yes yes Java plug-in yes no yes no Flash plug-in yes no yes no Table 2: Supported graphics formats of the most popular web browsers. The market share data is from August 2010, see [10]. Firefox 3+ Internet Opera Explorer 4-8 9 SVG [check] - [check] [check] VML - [check] [check] - Canvas [check] - [check] [check] market share 22.93% 60.4% - 2.37% Chrome Safari incl. iPad Desktop Android [less than or equal to] 2.2 SVG [check] [check] - VML - - - Canvas [check] [check] [check] market share 5.16% 7.52%

Printer friendly Cite/link Email Feedback | |

Author: | Gerhauser, Michael; Miller, Carsten; Valentin, Bianca; Wassermann, Alfred; Wilfahrt, Peter |
---|---|

Publication: | Electronic Journal of Mathematics and Technology |

Article Type: | Report |

Geographic Code: | 4EUGE |

Date: | Feb 1, 2011 |

Words: | 3494 |

Previous Article: | Computer-aided explorations of modular spaces of real polynomials: giving geometric life to routine algebra. |

Next Article: | On using automated deduction techniques for loci computing in dynamic geometry environments. |

Topics: |