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 nutzt JACK Javascript-Bibliothek JSXGraph, die von der Universität Bayreuth bereitgestellt wird. Zum Einbinden in eine JACK-Aufgabe 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] Bestimmt den Bereich des Koordinatensystems, der angezeigt werden soll. Der anzuzeigende Bereich wird durch das Rechteck bestimmt, das durch die Punkte (x1, y1) (obere linke Ecke) und (x2, y2) (untere rechte Ecke) aufgespannt wird.
• 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});

• Plottet den Funktionsgraphen einer in [parents] angegebenen Funktion. Es können zusätzlich die Grenzen des Intervalls angegeben werden, auf dem die Funktion geplottet wird.

  [function(x){return x*x;},-1,1]

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

• Wenn das erste Element in [parents] aus einem Array von Werten besteht, lässt sich eine Kurve durch die entsprechenden Funktionswerte plotten. Das zweite Element kann in diesem Fall entweder ebenfalls ein Werte-Array oder eine Funktionsvorschrift sein.

  var f = board.create('curve',[[1,2,3,4,5,6,7],function(t) {return t-1/t^2;}]

var spline = board.create('spline',[p1,p2,...],{attributes});

• [p1,p2,...] sind die Punkte, über die interpoliert werden soll.

var riemann = board.create('riemannsum',[f,n,type],{attributes});

• f Funktion
• n Anzahl der Riemann-Flächen
• type 'left', 'right', 'middle', 'trapezodial', 'upper', 'lower'

var integral = board.create('integral',[[a,b],f],{attributes});

• Gibt die Fläche von <math>\textstyle \int_a^b f(x)dx</math> wieder

Sonstiges

• Text

  text = board.create('text',[x,y,"Hello"]);

• Bilder

  image = board.create('image',[uri-string,[x,y][w,h]]);

  [x,y] Position der unteren linken Ecke

  [w,h] Breite, Höhe

Attribute

Attribute können den meisten Objekten jeweils am Ende in den geschweiften Klammern mitgegeben werden. Mehrere Attribute sind dabei durch Komma zu trennen.

Mögliche Attribute sind

• Allgemein
  • strokeWidth:Zahl
  • strokeColor:Farbbezeichung,fillColor:Farbbezeichung,highlightFillColor:Farbbezeichung,highlightStrokeColor:Farbbezeichung,labelColor:Farbbezeichung
  • dash:0,...,6
• Punkte
  • size:Zahl
  • fixed:true/false