Plugin: JSXGraph

JSXGraph ist eine leistungsstarke Javascript-Bibliothek zur (interaktiven) Visualisierung von mathematischen Inhalten. Näheres ist auf der Projektseite unter https://jsxgraph.uni-bayreuth.de/home/ zu finden. Die Lizenzbestimmung bzgl. JSXGraph entnehmen Sie bitte den dortigen Ressourcen.

Das JSXGraph-Plugin muss zunächst beim Player aktiviert werden.

Plugin aktivieren

var edmlplayer = new edML_Player("file.edml", document.querySelector('#edmloutput'));
edmlplayer.setConfig('plugins.jsxgraph.active',true);
edmlplayer.play();

Danach lässt sich das Plugin in einem objectblock-Element durch einen entsprechenden Attributwert aufrufen.

objectblock mit Plugin

<objectblock plugin="jsxgraph">
</objectblock>

Im Inhalt des objectblock-Elements werden die grundlegenden Eigenschaften im JSON-Format definiert, z. B.:

objectblock mit Plugin und JSON

<objectblock plugin="jsxgraph">
{
    "file": "test.jsx",
    "id": "box",
    "width": "400px",
    "height": "400px",
    "params": ["a","b"]
}
</objectblock>

Mit file wird die Datei definiert, in der sich der JSXGraph-Code (Javascript-Code) befindet. Durch id wird ein eindeutiger Bezeichner definiert, welcher auch im JSXGraph-Code verwendet wird. Die Anzeigegröße lässt sich durch width bzw. height kontrollieren. Befindet sich der objectblock in einer umgebenden Box, in der Parameter "gewürfelt" werden, können die Paramter durch params an JSXGraph übergeben werden. Damit ist z. B. die parametrisierte Erstellung von Schaubildern möglich!

Beispiel einer JXSGraph-Datei

var board = JXG.JSXGraph.initBoard('box', {
            boundingbox: [-10, 10, 10, -10],
            axis:true
        });
var graph = board.create('functiongraph', ['(x-'+a+')*(x-'+b+')']);

In diesem Beispiel werden die Parameter a und b durch das umgebenden edML bestimmt. Dieses könnte wie folgt aussehen:

edML-Codeausschnitt mit Parametern und JSXGraph-objectblock

<textbox>
    <parameter identifier="a">
        <range step="1">
            <value>1</value>
            <value>5</value>
        </range>
    </parameter>
    <parameter identifier="b">
        <range step="1">
            <value>1</value>
            <value>5</value>
        </range>
    </parameter>
    <p>Visualisierung von <m><calc>(x-a)*(x-b)</calc></m></p>
    <objectblock plugin="jsxgraph">{
            "file": "test.jsx",
            "id": "box",
            "width": "400px",
            "height": "400px",
            "params": ["a","b"]
        }
    </objectblock>
</textbox>

Obiges Beispiel führt zur Ausgabe (Neuladen der Seite bewirkt neue Parameterwerte):

Hinweis: Ein häufiger Fehler ist eine fehlerhafte Pfadangabe. In der Entwicklungskonsole im Browser erscheint dann eine entsprechende Mitteilung.