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 Bereicht 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 nichtgrid:true/false
Gitter sichtbar oder nichtshowNavigation: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
undy
sind die Koordinaten undgraph
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 fslider.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
Funktionn
Anzahl der Riemann-Flächentype
'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