JSXGraph - visualizing mathematics on (nearly) every device

Michael Gerhäuser, Alfred Wassermann
University of Bayreuth, Germany

Using computers in math education



Historical remarks

Dynamic Geometry Software

  • First generation (since 1980, at least): Standalone programs
    • Geometer's Sketchpad
    • Cabri
    • Thales
    • ...

Dynamic Geometry Software

  • Second generation (since 1996): Programs running in a web browser plugin
    • Java based:
      • Cinderella, GEONExT, GeoGebra, CaR, ...
    • Flash based:
      • TracenPoche
  • Third generation (now): Web 2.0, Applications are natively embedded into the web browser (HTML 5)

Technology: Status quo 1996-2011

  • Programming Language: Java (platform independent)
  • Execution as
    • Java Application (standalone)
    • Java Applet in web browser (dynamic worksheets)
  • Requirements: Java Runtime Environment
  • Effects: Parts of the Java platform are loaded before application/applet starts (slow)
Status quo
  • Sooner or later, the Java plug-in and even Flash may disappear from the desktop PC
  • The Java plug-in does not exist on tablet computers and smartphones

A first example
Euler line [~]
Technical Background
  • JSXGraph is implemented in JavaScript
  • no plug-in or installation required
  • runs on nearly every internet device
  • runs on all major browsers, incl. IE 6-10
  • LGPL licensed: free to use, modify, distribute
  • Small footprint, only 88kByte (gzip)
  • Fast access via CDN (Content Distribution Network)
JavaScript
  • Interpreted language, comes with every browser
  • "The World's Most Misunderstood Programming Language" (Douglas Crockford)
  • JavaScript is fast: JIT (Just in Time) compilers evolving
  • Perfect interaction with the browser
  • Cross-browser, general-purpose frameworks are already there
JSXGraph vs. GEONExT
JSXGraph vs GEONExT
JSXGraph in CMS
Plug-ins for
  • moodle
  • wordpress
  • mediawiki
    <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});
    brd.create('segment',[[0,0],p],{dash:3});
    </jsxgraph>
                  
  • drupal

Usecases
  • Library for tailored mathlets
  • DGS web app
  • eBooks
Tailored mathlet
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('jxgbox',
              {boundingbox: [-2,2,2,-2], axis: true});
var p = board.create('plot',["sin(x)*x"]);
</script>
JSXGraph examples
  • Dynamic Mathematics for web applications
  • Interactive Geometry
  • Calculus
  • Turtle Graphics
  • Charts
  • Animations
Interactive Geometry
Euler line [~]
Five Circle Theorem [~]
Differential equations & animations
Oscillator [~]
Moonwalk [~]
Carps & Pikes [~]
LaTeX inside JSXGraph via MathJax
Matrix multiplication
Interaction with jQuery UI
Circles on Circles [~]

Server Side Calculations and JSXGraph

Trace Curves
Tracecurve
CAS Locus [~]
How to connect...
Matlab
Maple
CoCoA
R
Sage
sensor data
...
← AJAX! →
JSXGraph
How to integrate math software
  • AJAX is for data transfer only
  • CGI wrapper is required
  • Results must be parsed back on client side
CGI Wrapper
  • Takes parameters from JSXGraph
  • Executes math software and hands over parameters from JSXGraph
  • Collects results from math software
  • Formats results and sends them back to the client
R & PHP example: PHP
rserv.php
<?php
$input = $_POST["input"];
if (!get_magic_quotes_gpc()) {
    $input = addslashes($input);
}
$cmd = "/usr/bin/Rscript LokSkala.R '" . $input ."'";
passthru($cmd);
?>
R & PHP example: R
LokSkala.R
x <- commandArgs(TRUE)
x <- as.numeric(unlist(strsplit(x, ";")))

MW <- mean(x)
SD <- sd(x)
Med <- median(x)
Mad <- mad(x)

paste(round(c(MW, SD, Med, Mad), 3), collapse = ";")
R & PHP example: JavaScript
    var t = '';
    for (var i=0;i<p.length;i++) {
        t += p[i].Y() + ';';
    }

    new Ajax.Request('rserv.php', {
        method:'post',
        parameters:'input='+escape(t),
        onComplete: function(transport) {
            if (200 == transport.status) {
                var t = transport.responseText,
                    res = t.match(/"(.*)"/gi),
                    res = RegExp.$1,
                    a = res.split(";"),
                    m = a[0]*1.0,
                    sd = a[1]*1.0,
                    med = a[2]*1.0,
                    mad = a[3]*1.0;
            };
        }
    });
JSXGraph's JXG.Server
  • Python based
  • Takes care of all data transfers
  • Parses results sent by server
  • Integrates server modules smoothly into JSXGraph
R & PHP example: revisited
from JXGServerModule import JXGServerModule
from rpy import r
import JXG, StringIO, gzip, datetime, math, random

class RStats(JXGServerModule):
    def __init__(self):
        JXGServerModule.__init__(self)
    def init(self, resp):
        resp.addHandler(self.all, 'function(data) { }')
        return
    def all(self, resp, x):
        y = r.mean(x);
        resp.addData('mean', y)
        ...
        return
    JXG.Server.loadModule('RStats');
    var data = [g[0].Y(), ..., g[4].Y()];
    JXG.Server.modules.RStats.all(data, function() {
        alert('mean: ' + data.mean + ...);
    });
Web app - User interface
Graphical User Interface [~]
eBooks
  • May 2011: release of epub3, a new file format standard for ebooks
  • epub3 contains
    • SVG (vector graphics format)
    • JavaScript
    • MathML
eBooks
  • JSXGraph and MathJax (http://mathjax.org) enable the development of truly interactive Mathematics textbooks
  • The distinction between web-apps and ebooks seems to vanish
eBooks

eBook pros

  • can be copy protected
  • do not need online access

web app pros

  • can access server resources (e.g. CAS software)
  • social interaction
Thank you!
  • http://jsxgraph.org/
  • http://groups.google.com/group/jsxgraph
  • http://www.youtube.com/jsxgraph