JSXGraph

Mit JSXGraph können in STACK adaptive Grafiken erzeugt werden, in denen Funktionsgraphen und andere mathematische Objekte mit interaktiven Elementen (zum Beispiel verschiebbaren Punkten) zu sehen sind. Der folgenden Artikel bietet eine kurze Einführung in die Erstellung interaktive Grafiken mit JSXGraph und ihrer Verwendung in STACK-Aufgaben.

Allgemeines

JSXGraph ist eine JavaScript-Bibliothek, daher werden Grafiken mit JavaScript-Code erstellt.
Im Frage- oder Feedcbacktext einer STACK-Aufgabe wird der Quelltext für JSXGraph-Grafiken zwischen die Platzhalter [[jsxgraph]] und [[/jsxgraph]] eingefügt, dazu später mehr.
Wichtig: Beim Schreiben des Codes muss auf die Groß- und Kleinschreibung geachtet und jede Zeile mit einem Semikolon beendet werden.
Variablen (z. B. eine zufällige Zahl) werden zunächst wie gewohnt in den Aufgabenvariablen der STACK-Aufgabe definiert. Um diese dann in einer JSXGraph-Grafik zu verwenden, muss im JavaScript-Code der Name der Variablen von geschweiften Klammern und #- statt @-Zeichen umgeben werden, z. B. {#a1#}.
Wie man eine Maxima-Funktion, die zuvor in den Aufgabenvariablen der STACK-Aufgabe definiert wurde, in einer JSXGraph-Grafik nutzt, wird weiter unten (Abschnitt "Funktionsgraph") erklärt.

Tipps zum Umgang mit JavaScript-Code:

Zum Schreiben von JavaScript-Code in einer STACK-Aufgabe, sollte im Idealfall der Texteditor auf "Einfacher Text" umgestellt werden. Klicken Sie dazu in Moodle oben rechts auf Ihr Profilfoto bzw. Ihre Initialien und dann auf Einstellungen. In dem sich dann öffnenden Fenster klicken Sie auf Texteditor wählen und wählen dann aus der Drodown-Liste Einfacher Text aus. Speichern Sie nun.

Alternativ können Sie auch den Moodle-Standardeditor in den Quellcode-Modus umschalten, indem Sie auf Werkzeuge und dann auf Quellcode klicken. Diese Vorgehensweise ist aber weniger sinnvoll, weil der Code so seine Formatierung verliert, sobald die STACK-Aufgabe gespeichert wird.
Bei der Erstellung einer JSXGraph-Grafik kann der Workflow verbessert werden, wenn der JavaScript-Code in einem externen Programm vorgeschrieben wird. Viele Texteditoren beinhalten ein hilfreiches Code-Highlighting und eine automatische Erkennung von Fehlern. Einige bieten sogar die Möglichkeit, während der Programmierung den Zwischenstand der Grafik in Echtzeit zu sehen (z. B. Visual Studio Code, das an der HRW auch in AppsAnywhere verfügbar ist in Kombination mit der Erweiterung HTML Preview). Eine Vorlage für eine HTML-Datei, in der JavaScript-Code für JSXGraph-Grafiken vorgeschrieben werden kann, ist in diesem Moodle-Kurs zu finden.

Konstruktionen

In einer JSXGraph-Grafik können verschiedene Objekte erzeugt werden, darunter ein Koordinatensystem, Funktionsgraphen, verschiebbare Punkte, Schieberegler ("Slider") und Linien.

Allgemeine Hinweise zu Konstruktionen/Objekten:

Bevor Objekte wie Punkte und Graphen angezeigt werden können, muss zunächst ein Koordinatensystem (Board) erzeugt werden. Wie das geht, wird im Abschnitt "Koordinatensystem (Board)" vorgestellt.
Für jedes Objekt, das in der JSXGraph-Grafik erzeugt wird, muss eine Variable angelegt werden, die einen Namen erhält. Dies funktioniert mit var Name = <NameDerVariablen>. Darauf folgt der Text zum Erzeugen der Konstruktion, der meistens mit board.create beginnt.
- Beispiel: Ein Objekt mit dem Namen a erzeugt man durch die Zeile var a = board.create(...);
Zwischen den runden Klammern folgt die Art der Konstruktion, z. B. ein Punkt (angegeben zwischen zwei Hochkommata '...'), notwendige Daten zum Zeichnen des Objektes in eckigen Klammern [ ] und zum Schluss weitere optionale Eigenschaften in geschweiften Klammern { }. Dies können beispielsweise folgende Eigenschaften sein:
- name: 'Text' → Name, der an dem Objekt angezeigt wird
- withLabel: true/false → Ein- bzw. Ausblenden des Labels, das den Namen eines Objekts oder den Wert eines Sliders anzeigt
- Weitere Eigenschaften mit Beispielen finden Sie in den Abschnitten zu den einzelnen Konstruktionen/Objekten.

Beispiel:
Erzeugung eines Punktes \(p\) (Name der Variablen) mit der Koordinate \((1\mid 1)\), dem angezeigten Namen \(A\) und Größe 5:


var p = board.create('point',[1,1], {
  name: 'A',
  withLabel: true,
  size: 5
});

(Auf das Bild klicken, um das interaktive Element auszuprobieren)

Koordinatensystem (Board)

Bevor Objekte wie Punkte und Graphen angezeigt werden können, muss zunächst ein Koordinatensystem (Board) erzeugt werden. Dazu muss eine Variable angelegt werden, der aus Gründen der Konvention zumeist der Name board gegeben wird. Wählen Sie einen anderen Namen, so müssen Sie in den folgenden Konstruktionen und Beispielen jeweils board durch den selbst gewählten Namen ersetzen.

Ein Board wird mit dem folgenden Code erzeugt:


var board = JXG.JSXGraph.initBoard(divid, {
  ...
});

Zwischen die geschweiften Klammern können (mit Kommata getrennt) verschiedene Eigenschaften des Koordinatensystems festgelegt werden, zum Beispiel:

- axis: true/false → Anzeigen der Achsen
- showCopyright: true/false → Anzeigen der Copyrighteinblendung
- boundingbox: [-x,+y,+x,-y] → Größe des angezeigten Ausschnitts des Koordinatensystems (in eckigen Klammern: Länge der Achsen in der Reihenfolge \(-x\), \(+y\), \(+x\), \(-y\))

Beispiel:
Erzeugung des folgenden Koordinatensystems mit angezeigten Achsen bis jeweils 5 in positive und negative \(x\)- und \(y\)-Richtung und ausgeblendetem Copyright-Hinweis:


var board = JXG.JSXGraph.initBoard(divid, {
  boundingbox: [-5, 5, 5, -5],
  axis: true,
  showCopyright: false
});

(Auf das Bild klicken, um das interaktive Element auszuprobieren)

Statischer Funktionsgraph

Ein Funktionsgraph, der nicht von den Studierenden durch Schieberegler (Slider) oder das Verschieben von Punkten verändert werden soll, kann am einfachsten über die Aufgabenvariablen der STACK-Aufgabe erzeugt werden.

Hinweise zu statischen Funktionsgraphen:

Haben Sie in den Aufgabenvariablen die Variable fx: 1/2*sin(x); definiert, können Sie diese Variable in eine Variable innerhalb des JSXGraph-Bereichs umwandeln. Dazu schreiben Sie
var f = board.jc.snippet('{#fx#}', true, 'x', true);,
wobei {#fx#} der Platzhalter für die Aufgabenvariable fx ist.
Mit dieser Zeile ist die Funktion definiert worden. Damit sie auch gezeichnet wird, muss noch eine weitere Variable erstellt werden, die wie folgt aussieht:
var g = board.create('functiongraph', [f]);,
wobei f der Name der obigen Variablen ist, in der die Funktion definiert wurde.

Interaktiver Funktionsgraph

Bei interaktiven Funktionsgraphen können die Studierenden die Funktion mithilfe von Schiebereglern (Slidern) oder des Verschiebens von Punkten verändern.

Hinweise zu interaktiven Funktionsgraphen:

Interaktive Graphen werden fast komplett analog zu statischen Graphen erzeugt. Allerdings muss die Funktionsvorschrift hier im JSXGraph-Bereich und nicht im Aufgabenvariablen-Feld definiert werden. Sie können allerdings auf Aufgabenvariablen zurückgreifen (zum Beispiel zufällige Zahlen, die zuvor definiert wurden).
Auch hier muss eine Variable für die Funktion erzeugt werden:
```
var f = board.create('functiongraph', [function(x) {
  return ...
}]);
```
wobei an der Stelle von ... die Funktionsvorschrift in Abhängigkeit von \(x\) eingefügt wird.
Hinweise zu den Funktionsvorschriften:
- Es können die Werte, die durch Slider oder verschiebbare Punkte bzw. Glider durch die Studierenden generiert bzw. verändert werden, benutzt werden. Wichtig hierbei: Die Werte der Slider und Punkte werden immer als Punkte, also mit einer \(x\)- und einer \(y\)-Koordinate zurückgegeben. Möchten Sie die \(x\)-Koordinate des verschiebbaren Punktes p verwenden, benutzen Sie in der Funktionsvorschrift den Platzhalter p.X() und für die \(y\)-Koordinate den Platzhalter p.Y(). Bei Slidern s kann mit s.Value() automatisch auf die veränderbare Koordiante des Sliders zugegriffen werden.
  Bitte lesen Sie zur Erzeugung von Punkten und Glidern die jeweiligen Abschnitte dieses Wiki-Eintrags zu Punkten, Slidern und Glidern.
- Es stehen die vier Grundrechenarten mit den Rechensymbolen +, -, * und / wie gewohnt zur Verfügung.
- Für weitere Funktionen empfehlen wir die entsprechende Seite im Wiki der Uni Bayreuth. Beispielsweise wird die Sinus-Funktion \(f(x)=\sin(x)\) mit der Funktionsvorschrift Math.sin(x) erzeugt.
- Sie können auf Aufgabenvariablen zurückgreifen, indem Sie als Platzhalter {#NameDerVariablen#} einfügen.

Beispiel:
Funktionsgraph einer Sinusfunktion, die vom \(x\)-Wert des Sliders (Schiebereglers) s abhängig ist:


var f = board.create ('functiongraph', [function(x) {
  return Math.sin(x)*s.Value()
}]);

(Auf das Bild klicken, um das interaktive Element auszuprobieren)

Punkt

Punkte können von den Studierenden zumeist verschoben werden, wodurch beispielsweise ein Funktionsgraph verändert wird.

Hinweise zu Punkten:

Um dem Board einen Punkt hinzuzufügen, wird wie folgt eine Variable (hier heißt sie p) erstellt:
```
var p = board.create('point',[x,y], {
  ...
});
```
wobei für [x,y] die Koordinaten, die der Punkt beim Start haben soll, eingetragen werden. An der Stelle von ... folgt dann die Definiton von Eigenschaften, die ein Punkt haben kann:
- size:Zahl → Größe des Punktes
- snapToGrid: true/false → Einstellen, ob der Punkt nur auf einem Gitter bewegt werden kann
- snapSizeX: Zahl und snapSizeY: Zahl → Größe des Gitters, auf dem sich der Punkt bewegt (in \(x\)- bzw. \(y\)-Richtung)

Beispiel:
Erzeugung eines Punktes \(p\) (Name der Variablen) mit der Koordinate \((1\mid 1)\), dem angezeigten Namen \(A\), eingeblendeter Position und Größe 5:


var p = board.create('point',[1,1], {
  name: 'A',
  withLabel: true,
  size: 5
});

(Auf das Bild klicken, um das interaktive Element auszuprobieren)

Wichtig: Punkte werden immer mit einer \(x\)- und einer \(y\)-Koordinate zurückgegeben. Möchten Sie - beispielsweise in einer Funktionsvorschrift - die \(x\)-Koordinate eines Punktes p verwenden, können Sie den Platzhalter p.X() verwenden. Für die \(y\)-Koordinate verwenden Sie p.Y().

Glider

Ein Glider ist ein Punkt, der ausschließlich über ein anderes Element des JSXGraph (z. B. eine Funktion) bewegt werden kann.

Hinweise zu Glidern:

Wie beim Punkt muss auch ein Startpunkt angegeben werden, außerdem muss man den Namen des Objektes angeben, auf dem der Glider liegt (in unserem Beispiel die Funktion \(f\)).
Falls der Startpunkt nicht auf dem Objekt liegt, legt der JSXGraph den Glider auf den nächsten Punkt auf dem Objekt.
Beispiel:
Glider mit Startpunkt im Punkt \((2\mid 1)\), der sich entlang des Graphen der Funktion f bewegt:
```
var g = board.create('glider', [2,1,f]);
```
Soll der Glider sich entlang einer unsichtbaren Linie bewegen (z. B. der \(x\)-Achse), kann für eine Linie erstellt werden, die dann anstatt f in der Variable für den Glider verwendet wird. Dies funktioniert mit folgndem Code:
```
var linie = board.create('line', [ [x1,y1],[x2,y2] ], {visible: false});
var g = board.create('glider', [x,y,linie]);
```
wobei für [x1,y1] der Startpunkt der Linie, für [x2,y2] der Endpunkt der Linie und für [x,y] der Startpunkt des Gliders eingetragen wird. visible:false bewirkt, dass die Linie unsichtbar ist. Soll sie sichtbar sein, kann man visible:true eintragen.

(Auf das Bild klicken, um das interaktive Element auszuprobieren)

Slider

Ein Slider ist ein Schieberegler, mithilfe dessen z. B. Funktionsgraphen verändert werden können.

Hinweise zu Slidern:

Eine Variable für einen Slider kann durch folgenden Code erzeugt werden:
```
var s = board.create('slider', [
  [x1,y1],[x2,y2],[min,default,max]
]);
```
wobei
- [x1,y1] der Startpunkt des Sliders ist.
- [x2,y2] der Endpunkt des Sliders ist
- min der kleinste einstellbare Wert des Sliders ist
- default der voreingestellt Wert des Sliders ist
- und max der größte einstellbare Wert des Sliders ist.
Optional können in geschweiften Klammern weitere Eigenschaften des Sliders hinzugefügt werden:
- name: 'Text' → Fügt dem Wert des Sliders einen Namen hinzu, der dann angezeigt wird
- snapWidth: Zahl → Wert des Sliders ist nur ein Vielfaches des angegebenen Wert
Wichtig: Slider werden wie Punkte immer mit einer \(x\)- und einer \(y\)-Koordinate zurückgegeben. Möchten Sie - beispielsweise in einer Funktionsvorschrift - die \(x\)-Koordinate eines Sliders s verwenden, können Sie den Platzhalter s.X() verwenden. Für die \(y\)-Koordinate verwenden Sie s.Y(). Sie können auch slider.Value() benutzen, um automatisch die veränderbare Koordiante des Sliders zu verwenden.

Beispiel 1:
Slider mit Startpunkt in \((1\mid -3)\) und Endpunkt in \((4\mid -3)\), der Werte zwischen 1 und 7 annehmen kann und auf 2 voreingestllt ist. Er kann sich mit einer Schrittweite von 0,5 bewegen.


var s = board.create('slider', [
  [1,-3],[4,-3],[1,2,7]
], {
  snapWidth: 0.5
});

Beispiel 2:
Der Funktionsgraph einer quadratischen Funktion ist vom Wert des Sliders aus Beispiel 1 abhängig:


var f = function(x){return s.Value()*x*x};
var g = board.create('functiongraph', [f]);

(Auf das Bild klicken, um das interaktive Element auszuprobieren)

Tangente

Mit Hilfe eines Gliders kann eine Tangente an einem Funktionsgraph erzeugt werden. Dazu muss man nur den Namen des Gliders angeben.

Beispiel:
var t = board.create('tangent', [g]);

(Auf das Bild klicken, um das interaktive Element auszuprobieren)

JSXGraph als Eingabe verwenden

Ein JSXGraph kann auch als Input, also als Möglichkeit zur Lösungseingabe für die Frage, genutzt werden. Dazu kann z. B. ein Punkt auf eine gewünschte Position verschoben oder ein Slider auf einen gewünschten Wert eingestellt werden.

Hinweise zu JSXGraph als Eingabe:

Um den JSXGraph als Input zu nutzen, muss zu Beginn des Codes die Zeile [[jsxgraph]] durch [[jsxgraph input-ref-ans1="stateRef"]] ersetzt werden. Die Ausdrücke ans1 und stateRef können selbst gewählt werden. Im STACK wird ans1 als die Antwort der Studierenden betrachtet.
- Falls man also ans1 ändert, muss in der restlichen Aufgabe, z. B. im Feedback, der Ausdruck ebenfalls geändert werden.
- StateRef wird später im Code benötigt. Falls dieser Ausdruck geändert wird, muss also darauf geachtet werden ihn im folgendem Code ebenfalls zu ändern.
Falls man einen Punkt als Input nutzten möchte, schreibt man folgende Zeile in die nachfolgende Zeile, nachdem man den Punkt zuvor definiert hat:
stack_jxg.bind_point(stateRef, p);,
wobei das p in der Klammer dem Namen des Punktes entspricht.
Für einen Glider verwendet man den selben Ausdruck mit dem Namen des Gliders. Bei einem Slider muss point durch slider ersetzt werden:
stack_jxg.bind_slider(stateRef, s);
Es können auch zwei Objekte in einem JSXGraph als Input genutzt werden. Dazu muss der erweiterte Ausdruck in eckigen Klammern wiederholt werden, wobei für ans1 und StateRef nicht dieselben Ausdrücke gewählt werden dürfen. Die Zeile lautet dann insgesamt z. B. so:
[[jsxgraph input-ref-ans1="stateRef" input-ref-ans2="stateRef2"]]

Beispiel:
Eine Aufgabe, in der die Studierenden den Scheitelpunkt einer Parabel markieren sollen (siehe Bild unten), kann mit folgendem Code gebaut werden:


[ㅤ[jsxgraph input-ref-ans1="stateRef"]ㅤ]
var board = JXG.JSXGraph.initBoard(divid, {
  axis: true,
  showCopyright: false,
  boundingbox: [-3,10,3,-2]
});
var f = board.create ('functiongraph',[function(x) {return x * x }]);
stack_jxg.bind_point(stateRef, g);
[ㅤ[/jsxgraph]ㅤ]

BILD

Tipp: Sie können das Eingabefeld ausblenden, indem Sie im HTML-Editor des Fragetextes Aufgabe die Platzhalter [[input:ans1]] [[validation:ans1]] zwischen die HTML-Tags <div style="display:none;"> und </div> kopieren.