Skip to Content
Last modified by Carina Enke on 18.03.2025
Hide last authors
Carina Enke 10.1 1 {{section}}
2 {{column width="60%"}}
Carina Enke 4.1 3 In diesem Beispiel wird ein JSXGraph-Objekt genutzt, um die Nutzereingabe einer Lücke in einem Koordinatensystem anzuzeigen.
Carina Enke 12.2 4
5 [[image:Beispiel2 - Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
6
Carina Enke 14.1 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"]]
Carina Enke 10.1 8
9 {{/column}}
Carina Enke 1.1 10
Carina Enke 10.1 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
Carina Enke 1.1 21 Um dieses Beispiel selbst zu erstellen, gehen Sie wie folgt vor:
22
Carina Enke 4.1 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"]]
Carina Enke 1.1 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"}}
Carina Enke 4.1 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});
Carina Enke 1.1 38 {{/code}}
Carina Enke 3.1 39
40
41 (% class="western" style="margin-bottom:11px" %)
Carina Enke 4.1 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
Carina Enke 3.1 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
Carina Enke 4.1 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
Carina Enke 3.1 66
Carina Enke 4.1 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"]]
Carina Enke 1.1 69