Zum Inhalt springen

Änderungen von Dokument Beispielaufgabe Schnittpunkt x-Achse

Zuletzt geändert von Carina Enke am 19.06.2025
Von Version 3.2
bearbeitet von Carina Enke
am 28.10.2024
Änderungskommentar: Update document after refactoring.
Auf Version 4.1
bearbeitet von Carina Enke
am 28.10.2024
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -1,37 +1,58 @@
1 -In diesem Beispiel wird ein JSXGraph-Objekt genutzt, um Werte angelegter Variablen als Punkt in einem Koordinatensystem anzuzeigen.
1 +In diesem Beispiel wird ein JSXGraph-Objekt genutzt, um die Nutzereingabe einer Lücke in einem Koordinatensystem anzuzeigen.
2 2  
3 -[[image:Beispiel1 Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
4 4  
5 5  
6 6  Um dieses Beispiel selbst zu erstellen, gehen Sie wie folgt vor:
7 7  
8 -|(% style="width:503px" %)Erstellen Sie eine Lückentextaufgabe. Legen Sie die Variablen 'var_x' und 'var_y' mit dem gewünschten Wertebereich an.|(% style="width:758px" %)[[image:Beispiel1_Variablen anlegen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
9 -|(% style="width:503px" %)Erstellen Sie den Text der Aufgabenstellung und die benötigten Lücken für die Eingabe. Referenzieren Sie dort die angelegten Variablen.|(% style="width:758px" %)[[image:Beispiel1_Lücken mit Variablen verknüpfen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
7 +|(% style="width:503px" %)Erstellen Sie eine Lückentextaufgabe. Legen Sie die Aufgabenstellung fest und erstellen Sie die benötigten Lücken. Im Beispiel wird der Wert der ersten Lücke für das JSX-Objekt genutzt. Merken Sie sich die ID dieser Lücke.|(% style="width:758px" %)[[image:Beispiel2 - Aufgabenstellung mit Lücken_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
10 10  |(% style="width:503px" %)(((
11 11  Fügen Sie mit Klick auf das Icon [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_JSX.png||data-xwiki-image-style="img-icon" height="23" width="25"]] ein JSXGraph-Objekt hinzu. Im Dialog passen Sie den JavaScript-Code wie folgt an:
12 12  
13 13  {{code language="none"}}
14 -x={var_x};
15 -y={var_y};
16 -var brd= JXG.JSXGraph.initBoard('JSX_CONTAINER_ID',
17 -{axis:true, boundingbox:[-12, 12, 12, -12]});
18 -brd.create('point', [x, y], {name:'P'});
19 -
12 +var brd=JXG.JSXGraph.initBoard('JSX_CONTAINER_ID',
13 +{axis:true, boundingbox:[-10, 10, 10, -10]});
14 +var x=0;
15 +var p=brd.create('point', [0, 0], {name:'P'});
16 +const butt = brd.create('button', [5, 8, "Punkt aktualisieren", function() {
17 + x=Number(getOnyxGapValue({GAP_1}));
18 + brd.removeObject(p);
19 + p=brd.create('point', [x, 0], {name:'P'});
20 + brd.update();
21 +}],{fixed:true});
20 20  {{/code}}
21 21  
22 22  
23 23  (% class="western" style="margin-bottom:11px" %)
24 -(% lang="en-GB" %)Dabei erzeugt die Methode JXG.JSXGraph.initBoard() das Feld für die Grafik.
25 -Die Optionen axis bzw. boundingbox fügen dem Feld  eine Achse hinzu bzw. bestimmen die Begrenzungskoordinaten des angezeigten Teils des Feldes.
26 -Die Methode brd.create() mit dem Bezeichner 'point' wird verwendet, um einen Punkt mit den gegebenen Koordinaten und einem gegebenen Namen zu zeichnen (wenn man keinen Namen angibt, wird er automatisch beschriftet)
26 +(% lang="en-GB" %)Die Methode **JXG.JSXGraph.initBoard()** erzeugt das Feld für die Grafik.
27 +Die Optionen **axis **bzw. **boundingbox **fügen dem Feld  eine Achse hinzu bzw. bestimmen die Begrenzungskoordinaten des angezeigten Teils des Feldes.(%%)
28 +
27 27  
28 28  {{warning}}
29 29  **Bitte beachten Sie**: Ändern Sie die Bezeichnung 'JSX_CONTAINER_ID' nicht, da diese von ONYX benötigt wird.
30 30  {{/warning}}
31 31  
34 +(% class="western" style="margin-bottom:11px" %)
35 +(% lang="en-GB" %)Die Methode **brd.create()** mit dem Bezeichner 'point' wird verwendet, um einen Punkt mit den gegebenen Koordinaten und einem gegebenen Namen zu zeichnen der zu Beginn in der Grafik angezeigt wird.
36 +
37 +(% class="western" style="margin-bottom:11px" %)
38 +(% lang="en-GB" %)Die Methode brd.create() mit dem Bezeichner „button“ verwendet, um eine Schaltfläche zu erstellen. In den Argumenten werden der Titel der Schaltfläche und eine Methode zur Übernahme von Eingaben aus der Lücke übergeben.
39 +
40 +(% class="western" style="margin-bottom:11px" %)
41 +(% lang="en-GB" %)
42 +Die Methode **getOnyxGapValue()** mit dem Argument **{GAP_1}** wird verwendet, um den Wert aus der Onyx-Lücke mit der Bezeichnung GAP_1 zu übernehmen. Prüfen Sie bei mehreren Lücken, das die korrekte Lücke ausgewertet wird. Sie finden die Bezeichnung einer Lücke, in der Bearbeitungsansicht der Lücke im Feld rechts unten mit der Beschriftung "ID: ..."
43 +
44 +(% class="western" style="margin-bottom:11px" %)
45 +(% lang="en-GB" %)
46 +Die Methode **brd.removeObject()** wird verwendet, um ein Objekt aus der Grafik zu entfernen. In den Argumenten wird die Referenz des alten JSXGraph-Objekts (hier der Punkt p) erwartet.
47 +
48 +(% class="western" style="margin-bottom:11px" %)
49 +(% lang="en-GB" %)Die Methode **brd.update()** dient zur manuellen Aktualisierung der Grafik, d.h. das Feld wird neu gezeichnet.
50 +
51 +(% class="western" lang="en-GB" style="margin-bottom:11px" %)
52 +
32 32  
33 -)))|(% style="width:758px" %)[[image:Beispiel1 JSX-Objekt anlegen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
34 -|(% style="width:503px" %)Prüfen Sie in der Vorschau ihre Angaben und Speichern Sie die Aufgabe|(% style="width:758px" %)[[image:Beispiel1 Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
54 +)))|(% style="width:758px" %)[[image:Beispiel2 - JSX-Objekt anlegen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
55 +|(% style="width:503px" %)Prüfen Sie in der Vorschau ihre Angaben und Speichern Sie die Aufgabe|(% style="width:758px" %)[[image:Beispiel2 - Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
35 35  
36 36  (% class="western" %)
37 37  Der folgende Code nimmt die x-Koordinate des Punktes 'P' aus der ONYX-Variablen var_x  und malt diesen Punkt (mit der y-Koordinate 1) in eine JSXGraph-Tafel:
Beispiel2 - Aufgabenstellung mit Lücken_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +74.5 KB
Inhalt
Beispiel2 - JSX-Objekt anlegen_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +77.7 KB
Inhalt
Beispiel2 - Vorschau der Aufgabe_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +32.6 KB
Inhalt