Graphen

In JACK gibt es die Möglichkeit, an geeigneten Stellen in Aufgaben (Fragetexten, Antworten, Hinweisen und Feedback) dynamische und interaktive Graphen anzeigen zu lassen. Hierfür muss in der Stage-Datei an der entsprechenden Position der Tag

[graph id="graph1" width="600px" height="600px" name=""] Javascript-Code für den Graphen [/graph]

geschrieben werden. Das Attribut id muss dabei einen für den Graph eindeutigen Wert enthalten für den Fall, dass man mehrere Boxen innerhalb der Datei verwenden möchte. Mit den beiden Attributen width und height gibt man die Breite und die Höhe der Box an. Über das Attribut name kann man dem Graphen eine Unterschrift geben, diese ist als einzige optional.

WICHITG! Der gesamte Text des [graph]-Tags muss in einer Zeile stehen und unnötige Leerzeichen zwischen den Semikolons im Javascript-Code müssen vermieden werden!

Box

Als nächstes muss man nun die Box initialisieren. Das geschieht mit dem Ausdruck:

var board = JXG.JSXGraph.initBoard('box1', {attributes});

Jede Box braucht einen Namen, in diesem Fall board auf den man zugreifen muss, wenn man etwas in dieser Box darstellen möchte (z.B. Graphen, Punkte, Linie usw.). Die id von oben muss wieder auftauchen. In dem Feld attributes kann man der Box einige optionale Eigenschaften geben:

• boundingbox[x1,y1,x2,y2] Koordinatensystem mit x1 und x2 als untere Grenze respektive obere Grenze der x-Achse, y1 und y2 als unter respektive obere Grenze der y-Achse.
• axis:true/false Achsen sichtbar oder nicht
• grid:true/false Gitter sichtbar oder nicht
• showNavigation:true/false Steuerelemente zur Navigation bzw. zum Zoomen sichtbar oder nicht

Punkte

Nach dem Erstellen des Grundgerüsts, können nun diverse Elemente eingezeichnet werden. Für das Zeichnen eines Punktes verwendet man folgenden Ausdruck:

var point = board.create('point',[parents],{attributes});

Dabei kann man für das [parents]-Attribut folgende Werte einsetzen:

• [x,y] euklidische Koordinaten
• [z,x,y] homogene Koordinaten

Falls ein Punkt auf einem Kreis, einer Geraden oder einer Kurve liegen soll benutzt man besser den Glider.

var glider = board.create('glider',[parents],{attributes});

Der Glider hat folgende [parents]-Elemente:

• [x,y,graph] x und y sind die Koordinaten und graph ist das Objekt, auf dem der Glider gleiten soll
• [graph] man kann auch nur das Objekt angeben, auf dem der Glider sitzen soll

Funktionen

Außerdem lassen sich Funktionen darstellen. Deren [parent]-Elemente hängen dabei häufig von der verwendeten Funktion ab und werden deswegen hier entsprechend beschrieben.

Gerade

var line = board.create('line',[parents],{attributes});

• [p1,p2] Gerade durch zwei Punkte p1 und p2
• [[x1,y1],[x2,y2]] Gerade durch zwei Koordinatenpunkte (x1,y1) und (x2,y2)

Kreis

var circle = board.create('circle',[parents],{attributes});

• [m,p] zwei Punkte: m als Mittelpunkt, p als ein Punkt auf dem Kreis
• [m,r] Punkt und Länge: m als Mittelpunkt, r als Radius

Slider

Der Slider ist ein Schieberegler mit dem man Werte einer Funktion ändern kann. Diese Änderungen sind sofort sichtbar, die Funktion passt sich dynamisch den veränderten Werten an.

var slider = board.create('slider',[[a,b],[c,d],[e,f,g]],{attributes});

• [a,b],[c,d] visuelle Start- und End-Position des Sliders
• [e,f,g] der Slider gibt die Werte zwischen e und g zurück, der Startwert ist f
• slider.Value() gibt die Position des Sliders auf dem Intervall [e,g] zurück

weitere Funktionen

var f = board.create('functiongraph',[parents],{attributes});