Zum Inhalt springen
Zuletzt geändert von Carina Enke am 18.03.2025
Zeige letzte Bearbeiter
1 {{section}}
2 {{column width="60%"}}
3 In diesem Beispiel wird ein JSXGraph-Objekt genutzt, um die Nutzereingabe einer Lücke in einem Koordinatensystem anzuzeigen.
4
5 [[image:Beispiel2 - Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
6
7 [[image:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.WebHome@Editor - Lücke in JSXCode_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="233" width="500"]]
8
9 {{/column}}
10
11 {{column width="30%"}}
12 {{panel title="Verwandte Themen"}}
13 * [[JSXGraph-Objekte nutzen>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.WebHome]]
14 * [[Lückentextaufgabe>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Lückentextaufgabe.WebHome]]
15 {{/panel}}
16 {{/column}}
17 {{/section}}
18
19
20
21 Um dieses Beispiel selbst zu erstellen, gehen Sie wie folgt vor:
22
23 |(% 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"]]
24 |(% style="width:503px" %)(((
25 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:
26
27 {{code language="none"}}
28 var brd=JXG.JSXGraph.initBoard('JSX_CONTAINER_ID',
29 {axis:true, boundingbox:[-10, 10, 10, -10]});
30 var x=0;
31 var p=brd.create('point', [0, 0], {name:'P'});
32 const butt = brd.create('button', [5, 8, "Punkt aktualisieren", function() {
33 x=Number(getOnyxGapValue({GAP_1}));
34 brd.removeObject(p);
35 p=brd.create('point', [x, 0], {name:'P'});
36 brd.update();
37 }],{fixed:true});
38 {{/code}}
39
40
41 (% class="western" style="margin-bottom:11px" %)
42 (% lang="en-GB" %)Die Methode **JXG.JSXGraph.initBoard()** erzeugt das Feld für die Grafik.
43 Die Optionen **axis **bzw. **boundingbox **fügen dem Feld  eine Achse hinzu bzw. bestimmen die Begrenzungskoordinaten des angezeigten Teils des Feldes.(%%)
44
45
46 {{warning}}
47 **Bitte beachten Sie**: Ändern Sie die Bezeichnung 'JSX_CONTAINER_ID' nicht, da diese von ONYX benötigt wird.
48 {{/warning}}
49
50 (% class="western" style="margin-bottom:11px" %)
51 (% 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.
52
53 (% class="western" style="margin-bottom:11px" %)
54 (% 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.
55
56 (% lang="en-GB" %)
57 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: ..."
58
59 (% lang="en-GB" %)
60 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.
61
62 (% class="western" style="margin-bottom:11px" %)
63 (% lang="en-GB" %)Die Methode **brd.update()** dient zur manuellen Aktualisierung der Grafik, d.h. das Feld wird neu gezeichnet.
64
65
66
67 )))|(% style="width:758px" %)[[image:Beispiel2 - JSX-Objekt anlegen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
68 |(% 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"]]