JSXGraph

Mit einem JSXGraph können in STACK Graphen und ähnliche Objekte mit interaktiven Elementen (zum Beispiel verschiebbaren Punkten) erzeugt werden. Der folgenden Artikel zeigt, welche Anwendungen der JSXGraph hat und wie man den dazugehörigen Java-Code schreibt.
 

Allgemeines [Bearbeiten]

  • Der JSXGraph wird durch einen Java-Code im Fragetext erzeugt, der in den HTML-Text des Fragetextes geschrieben wird.
    Wichtig
    : Es muss auf die Groß- und Kleinschreibung geachtet und jede Zeile mit einem Semikolon beendet werden!

  • Der Quelltext für den JSXGraph wird zwischen die Platzhalter [[jsxgraph]] und [[/jsxgraph]] eingefügt. 
  • Falls man interaktive Elemente im Graph einsetzt, muss am Ende des Codes die Zeile
    board.unsuspendUpdate();

    eingefügt werden. Die Zeile bewirkt, dass sich der Graph ständig aktualisiert, was wichtig ist, damit die interaktiven Elemente funktionieren.
  • Variablen (z.B. eine zufällige Zahl) werden zunächst wie gewohnt in den Aufgabenvariablen definiert. Um diese dann im JSXGraph zu verwenden, muss in der JSXGraph-Umgebung im HTML-Text der Name der Variable von geschweiften Klammern und #- statt @-Zeichen umgeben werden, z.B. {#a#}.
  • Wie man eine Funktion, die zuvor in den Variablen definiert wurde, in einem JSXGraph nutzt wird, in Abschnitt 2.4 dieses Artikels ("Funktionsgraph") erklärt.




Konstruktionen [Bearbeiten]

In einem JSXGraph 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, dass im JSXGraph erzeugt wird, muss zunächst eine Variable angelegt werden, die einen Namen erhält. Dies funktioniert mit  var Name = . Darauf folgt der Text zum Erzeugen der Konstruktion, der meistens mit board.create beginnt.
    • Beispiel: Eine Variable 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 Apostroph ' '), 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 die Position eines Punktes oder Wert eines Sliders und den Name anzeigen
    • 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|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)



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 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.

Hinweise zu Boards:

  • Falls man zwei JSXGraphen in einer Frage nutzen will, müssen die zugehörigen Boards unterschiedlich benannt werden.
  • Ein Board wird mit dem folgenden Code erzeugt:
    var board = JXG.JSXGraph.initBoard(divid, {<span style="color:rgb(0,0,0);">...</span>});
  • Zwischen die geschweiften Klammern können verschiedene Eigenschaften des Koordinatensystems festgelegt werden: 
    • 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 allerdings eine eigne Variable erstellt werden, die wie folgt aussieht:
    var g = board.create('functiongraph', [f]);
    f ist hierbei der Name der Variablen, 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 Aufgabenvarieblen-Feld definiert werden. Sie können allerdings auf Aufgabenvariablen, zum Beispiel zufällige Zahlen, die zuvor definiert wurden, zurückgreifen.
  • Auch hier muss eine Variable für die Funktion erezeugt werden:
    var f = board.create('functiongraph', [function(x) {return <span style="color:rgb(0,0,0);">...</span> }]);
    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 betreffende 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], { <span style="color:rgb(0,0,0);">...</span> });
    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|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|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 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]]);
    • [x1,y1] ist der Startpunkt des Sliders
    • [x2,y2] ist der Endpunkt des Sliders
    • min ist der kleinste einstellbare Wert des Sliders
    • default ist der voreingestellt Wert des Sliders
    • max ist der größte einstellbare Wert des Sliders

  • 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|-3)\) und Endpunkt in \((4|-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
[Bearbeiten]

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 emtspricht.
  • 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 }]);
var g = board.create('glider', [-4,1,f]);
stack_jxg.bind_point(stateRef, g);
[[/jsxgraph]]


  • 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.