Graphen - Versionsgeschichte

Mschypula am 10. Juni 2024 um 10:50 Uhr

2024-06-10T10:50:22Z

@@ Zeile 1: / Zeile 1: @@
-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 [https://jsxgraph.uni-bayreuth.de/wiki/index.php/Main_Page JSXGraph], die von der Universität Bayreuth bereitgestellt wird. Zum Einbinden in eine JACK-Aufgabe muss in der [[Stage (Jack2)|Stage]]-Datei an der entsprechenden Position der Tag
+In JACK gibt es die Möglichkeit im Fließtext in Aufgaben (Fragetexten, Antworten, Hinweisen, Feedback, usw.) dynamische und interaktive Graphen anzeigen zu lassen. Hierfür nutzt JACK die Javascript-Bibliothek [https://jsxgraph.uni-bayreuth.de/wiki/index.php/Main_Page JSXGraph], die von der Universität Bayreuth bereitgestellt wird.
 '''WICHITG!''' Der gesamte Text des <code>[graph]</code>-Tags muss in einer Zeile stehen und unnötige Leerzeichen zwischen den Semikolons im Javascript-Code müssen vermieden werden!
@@ Zeile 117: / Zeile 113: @@
 **<code>size:Zahl</code>
 **<code>fixed:true/false</code>
 [[Category:Anleitung]]

Mschypula am 9. Juni 2023 um 09:01 Uhr

2023-06-09T09:01:03Z

← Nächstältere Version		Version vom 9. Juni 2023, 11:01 Uhr
Zeile 1:		Zeile 1:
	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 [https://jsxgraph.uni-bayreuth.de/wiki/index.php/Main_Page 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		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 [https://jsxgraph.uni-bayreuth.de/wiki/index.php/Main_Page JSXGraph], die von der Universität Bayreuth bereitgestellt wird. Zum Einbinden in eine JACK-Aufgabe muss in der [[Stage (Jack2)\|Stage]]-Datei an der entsprechenden Position der Tag

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

PRanz am 5. Dezember 2018 um 11:08 Uhr

2018-12-05T11:08:23Z

← Nächstältere Version		Version vom 5. Dezember 2018, 13:08 Uhr
Zeile 117:		Zeile 117:
	**<code>size:Zahl</code>		**<code>size:Zahl</code>
	**<code>fixed:true/false</code>		**<code>fixed:true/false</code>
			[[Category:Anleitung]]

Bzurmaar: /* Box */

2018-06-04T08:12:15Z

Box

← Nächstältere Version		Version vom 4. Juni 2018, 10:12 Uhr
Zeile 15:		Zeile 15:
	Jede Box braucht einen Namen, in diesem Fall <code>board</code> auf den man zugreifen muss, wenn man etwas in dieser Box darstellen möchte (z.B. Graphen, Punkte, Linie usw.). Die <code>id</code> von oben muss wieder auftauchen. In dem Feld <code>attributes</code> kann man der Box einige optionale Eigenschaften geben:		Jede Box braucht einen Namen, in diesem Fall <code>board</code> auf den man zugreifen muss, wenn man etwas in dieser Box darstellen möchte (z.B. Graphen, Punkte, Linie usw.). Die <code>id</code> von oben muss wieder auftauchen. In dem Feld <code>attributes</code> kann man der Box einige optionale Eigenschaften geben:

	* <code>boundingbox[x1,y1,x2,y2]</code> Bestimmt den Bereich des Koordinatensystems, der angezeigt werden soll. Der anzuzeigende ~~Bereicht~~ wird durch das Rechteck bestimmt, das durch die Punkte <code>(x1, y1)</code> (obere linke Ecke) und <code>(x2, y2)</code> (untere rechte Ecke) aufgespannt wird.		* <code>boundingbox[x1,y1,x2,y2]</code> Bestimmt den Bereich des Koordinatensystems, der angezeigt werden soll. Der anzuzeigende Bereich wird durch das Rechteck bestimmt, das durch die Punkte <code>(x1, y1)</code> (obere linke Ecke) und <code>(x2, y2)</code> (untere rechte Ecke) aufgespannt wird.
	* <code>axis:true/false</code> Achsen sichtbar oder nicht		* <code>axis:true/false</code> Achsen sichtbar oder nicht
	* <code>grid:true/false</code> Gitter sichtbar oder nicht		* <code>grid:true/false</code> Gitter sichtbar oder nicht

Bzurmaar: /* Box */

2018-05-23T08:28:10Z

Box

← Nächstältere Version		Version vom 23. Mai 2018, 10:28 Uhr
Zeile 15:		Zeile 15:
	Jede Box braucht einen Namen, in diesem Fall <code>board</code> auf den man zugreifen muss, wenn man etwas in dieser Box darstellen möchte (z.B. Graphen, Punkte, Linie usw.). Die <code>id</code> von oben muss wieder auftauchen. In dem Feld <code>attributes</code> kann man der Box einige optionale Eigenschaften geben:		Jede Box braucht einen Namen, in diesem Fall <code>board</code> auf den man zugreifen muss, wenn man etwas in dieser Box darstellen möchte (z.B. Graphen, Punkte, Linie usw.). Die <code>id</code> von oben muss wieder auftauchen. In dem Feld <code>attributes</code> kann man der Box einige optionale Eigenschaften geben:

	* <code>boundingbox[x1,y1,x2,y2]</code> ~~Koordinatensystem mit~~ <code>x1</code> und <code>x2~~</code> als untere Grenze respektive obere Grenze der x-Achse~~, ~~<code>y1</code> und <code>~~y2</code> ~~als unter respektive obere Grenze der y-Achse~~.		* <code>boundingbox[x1,y1,x2,y2]</code> Bestimmt den Bereich des Koordinatensystems, der angezeigt werden soll. Der anzuzeigende Bereicht wird durch das Rechteck bestimmt, das durch die Punkte <code>(x1, y1)</code> (obere linke Ecke) und <code>(x2, y2)</code> (untere rechte Ecke) aufgespannt wird.
	* <code>axis:true/false</code> Achsen sichtbar oder nicht		* <code>axis:true/false</code> Achsen sichtbar oder nicht
	* <code>grid:true/false</code> Gitter sichtbar oder nicht		* <code>grid:true/false</code> Gitter sichtbar oder nicht

Mbuttgereit am 4. Juli 2017 um 08:00 Uhr

2017-07-04T08:00:21Z

@@ Zeile 1: / Zeile 1: @@
-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
+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 [https://jsxgraph.uni-bayreuth.de/wiki/index.php/Main_Page 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]
@@ Zeile 72: / Zeile 72: @@
 var f = board.create('functiongraph',[parents],{attributes});
 </syntaxhighlight>
+* Plottet den Funktionsgraphen einer in <code>[parents]</code> angegebenen Funktion. Es können zusätzlich die Grenzen des Intervalls angegeben werden, auf dem die Funktion geplottet wird.

Mbuttgereit: Die Seite wurde neu angelegt: „In JACK gibt es die Möglichkeit, an geeigneten Stellen in Aufgaben (Fragetexten, Antworten, Hinweisen und Feedback) dynamische und interaktive Graphen anzeige…“

2017-07-03T11:32:24Z

Die Seite wurde neu angelegt: „In JACK gibt es die Möglichkeit, an geeigneten Stellen in Aufgaben (Fragetexten, Antworten, Hinweisen und Feedback) dynamische und interaktive Graphen anzeige…“

Neue Seite

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 <code>id</code> 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 <code>width</code> und <code>height</code> gibt man die Breite und die Höhe der Box an. Über das Attribut <code>name</code> kann man dem Graphen eine Unterschrift geben, diese ist als einzige optional.

'''WICHITG!''' Der gesamte Text des <code>[graph]</code>-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:
<syntaxhighlight lang="javascript">
var board = JXG.JSXGraph.initBoard('box1', {attributes});
</syntaxhighlight>
Jede Box braucht einen Namen, in diesem Fall <code>board</code> auf den man zugreifen muss, wenn man etwas in dieser Box darstellen möchte (z.B. Graphen, Punkte, Linie usw.). Die <code>id</code> von oben muss wieder auftauchen. In dem Feld <code>attributes</code> kann man der Box einige optionale Eigenschaften geben:

* <code>boundingbox[x1,y1,x2,y2]</code> Koordinatensystem mit <code>x1</code> und <code>x2</code> als untere Grenze respektive obere Grenze der x-Achse, <code>y1</code> und <code>y2</code> als unter respektive obere Grenze der y-Achse.
* <code>axis:true/false</code> Achsen sichtbar oder nicht
* <code>grid:true/false</code> Gitter sichtbar oder nicht
* <code>showNavigation:true/false</code> 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:
<syntaxhighlight lang="javascript">
var point = board.create('point',[parents],{attributes});
</syntaxhighlight>
Dabei kann man für das <code>[parents]</code>-Attribut folgende Werte einsetzen:
* <code>[x,y]</code> euklidische Koordinaten
* <code>[z,x,y]</code> homogene Koordinaten

Falls ein Punkt auf einem Kreis, einer Geraden oder einer Kurve liegen soll benutzt man besser den ''Glider''.
<syntaxhighlight lang="javascript">
var glider = board.create('glider',[parents],{attributes});
</syntaxhighlight>
Der Glider hat folgende <code>[parents]</code>-Elemente:
* <code>[x,y,graph]</code> <code>x</code> und <code>y</code> sind die Koordinaten und <code>graph</code> ist das Objekt, auf dem der Glider gleiten soll
* <code>[graph]</code> man kann auch nur das Objekt angeben, auf dem der Glider sitzen soll

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

==== Gerade ====
<syntaxhighlight lang="javascript">
var line = board.create('line',[parents],{attributes});
</syntaxhighlight>

* <code>[p1,p2]</code> Gerade durch zwei Punkte p1 und p2
* <code>[[x1,y1],[x2,y2]]</code> Gerade durch zwei Koordinatenpunkte (x1,y1) und (x2,y2)

==== Kreis ====
<syntaxhighlight lang="javascript">
var circle = board.create('circle',[parents],{attributes});
</syntaxhighlight>

* <code>[m,p]</code> zwei Punkte: <code>m</code> als Mittelpunkt, <code>p</code> als ein Punkt auf dem Kreis
* <code>[m,r]</code> Punkt und Länge: <code>m</code> als Mittelpunkt, <code>r</code> 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.
<syntaxhighlight lang="javascript">
var slider = board.create('slider',[[a,b],[c,d],[e,f,g]],{attributes});
</syntaxhighlight>

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

==== weitere Funktionen ====

<syntaxhighlight lang="javascript">
var f = board.create('functiongraph',[parents],{attributes});
</syntaxhighlight>
*