JSXGraph ist eine browserübergreifende JavaScript-Bibliothek für interaktive Geometrie, Funktionsplotting, Diagramme und Datenvisualisierung im Webbrowser. Mit diesem Plugin werden in RWTHmoodle u.a. dynamische Geometriekonstruktionen Funktionsplotting ermöglicht. Unter Verwendung von JSXGraph können entsprechende Graphen wesentlich einfacher in Moodle-Aktivitäten und Materialien wie Textseite, Quiz, Buch, etc. eingebettet werden.

JSXGraph wird am Lehrstuhl für Mathematik und ihre Didaktik der Universität Bayreuth entwickelt.

 

Hinweis

Der neue Moodle Standard-Editor TinyMCE entfernt beim Speichern von JSXGraph-Boards den <jsxgraph>-Tag. Statt des Boards erscheint dadurch nur ein leerer weißer Kasten auf der gerenderten Seite.

 

Nutzen Sie daher bis auf weiteres den Atto-Editor oder den einfachen Texteditor. Beide speichern die JSXGraph-Boards korrekt ab. Um den Editor zu wechseln, gehen Sie wie folgt vor:

1. Klicken Sie rechts oben auf Ihre Initialen.
2. Wählen Sie "Einstellungen".
3. Klicken Sie auf "Texteditor wählen".
4. Wählen Sie den "Editor Atto" oder "Einfacher Text".

Inhalt

1. JSXGraph-Filter aktivieren
2. Funktionsweise von JSXGraph
3. Beispiele

1. JSXGraph-Filter aktivieren

Um JSXGraph in einem Lernraum nutzen zu können, müssen Manager*innen zunächst den Filter aktivieren. Damit wird der JSXGraph-Code für die Darstellung als Webseite gerendert. Um den Filter zu aktivieren, gehen Sie wie folgt vor:

1. Klicken Sie in der horizontalen Menüleiste auf "Mehr".
2. Wählen Sie im Kontextmenü "Filter".
3. Setzen Sie die Einstellung für den JSXGraph-Filter auf "An".
4. Speichen Sie die Änderungen ab. Rufen Sie anschließend die Stelle im Lernraum auf, an der Sie ein JSXGraph-Board hinzufügen möchten.

2. Funktionsweise von JSXGraph

Alle Nutzerinnen und Nutzer eines Lernraums können überall dort, wo ein Moodle-Editor zur Verfügung steht, JSXGraph nutzen. Also beispielsweise in Text- und Medienfeldern, Textseiten, Foren, Wikiseiten, Quizzes oder den Beschreibungsfeldern von Aktiväten. Um ein JSXGraph-Board hinzuzufügen, gehen Sie wie folgt vor:

1. Wechseln Sie in die HTML-Ansicht des Editors. Klicken Sie dazu im Atto-Editor auf den Button . Im Einfacher Text-Editor können Sie den HTML-Code direkt in das Textfeld eingeben.
2. Damit der JSXGraph-Teil erkannt und als Graph gerendert wird, sind Trennzeichen nötig, die den JSXGraph-Teil vom restlichen Text abgrenzen. Als Trennzeichen funktionieren in RWTHmoodle:
   • <jsxgraph> ... <\jsxgraph> für die Einbindung im HTML-Modus
   • [[jsxgraph]] ... [[\jsxgraph]] in der Test-Aktivität für die Einbindung in Fragen vom Fragentyp STACK.
3. Jedes <div>, das ein JSXGraph-Board enthält, benötigt eine eindeutige ID auf der Seite. Diese ID wird automatisch generiert. Sie wird innerhalb des JavaScript mit der Konstante BOARDID referenziert.

Ein einfaches Beispie und seine Darstellungl:

<jsxgraph width="500" aspect-ratio="1/1">
   var brd = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,5,5,-5], axis:true});
   var p = brd.create('point', [1,2]);
</jsxgraph>

Detailliertere Informationen bieten die aktuell nur in englischer Sprache verfügbare Anleitung zur Verwendung von JSXGraph-Notation im Moodle-Pluginverzeichnis sowie die ReadMe-Seite des Plugins. Dort wird auch erläutert, wie man mehrere Boards innerhalb eines <jsxgraph>-Tags nutzt.

Der Fragentyp STACK nutzt eine eigene Erweiterung für JSXGraph. Deren Nutzung wird auf der Seite Authoring with JSXGraph in GitHub erläutert.

3. Beispiele

Die Seite Share JSXGraph bietet zahlreiche Code-Beispiele, die per Klick für die Verwendung auf Moodle-Seiten exportiert werden können.

Die Universität Bayreuth stellt eine Reihe von Codebeispielen im JSXGraph-Wiki (auf Englisch) bereit. Eine kleinere Auswahl bietet auch die JSXGraph-Homepage. Die Beispiele stehen jeweils unter GNU Free Documentation License 1.2. Das nachfolgende Beispiel ist der Plot einer Lotka-Volterra Gleichung (auf Englisch), entnommen der JSXGraph-Homepage (auf Englisch). Über die Schieberegler können die Werte und dadurch auch die Darstellung beeinflusst werden.

Lesen Sie hierzu: 

• JSXGraph-Dokumentation (Englisch)
• Homepage des JSXGraph-Projektes (Englisch)
• JSXGraph-Wiki der Universität Bayreuth (Englisch)
• Beispielsammlung im JSXGraph-Wiki (Englisch)
• Beispielsammlung der JSXGraph-Homepage (Englisch)
• JSXGraph-Notation verwenden (Englisch)
• Share JSXGraph (Englisch)
• JSXGraph und STACK (Englisch)