Zum Inhalt springen
Zuletzt geändert von Carina Enke am 18.03.2025
Verstecke letzte Bearbeiter
Carina Enke 18.4 1 {{section}}
2 {{column width="60%"}}
Carina Enke 42.2 3 In diesem Beispiel wird eine Nutzereingabe in der JSX-Grafik in einer ONYX-Lücke gespeichert.
Carina Enke 1.1 4
Carina Enke 42.2 5 [[image:Beispiel3 - Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="284" width="443"]] [[image:Beispiel3 - Abgegebene Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="284" width="500"]]
Carina Enke 20.1 6
Carina Enke 42.2 7 Beispielaufgabe aus Nutzersicht  Auswertung der Aufgabe mit Abgabe
Carina Enke 35.2 8
Carina Enke 42.2 9
Carina Enke 20.1 10 [[image:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.WebHome@Editor - JSX an Lücke_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 18.4 11 {{/column}}
Carina Enke 1.1 12
Carina Enke 18.4 13 {{column width="30%"}}
14 {{panel title="Verwandte Themen"}}
15 * [[JSXGraph-Objekte nutzen>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.WebHome]]
16 * [[Lückentextaufgabe>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Lückentextaufgabe.WebHome]]
17 {{/panel}}
18 {{/column}}
19 {{/section}}
Carina Enke 18.1 20
Carina Enke 18.4 21
22
Carina Enke 1.1 23 Um dieses Beispiel selbst zu erstellen, gehen Sie wie folgt vor:
24
Carina Enke 5.1 25 |(% style="width:680px" %)(((
26 Erstellen Sie eine Lückentextaufgabe. Legen Sie die Aufgabenstellung fest und erstellen Sie die benötigte Lücke. Im Beispiel wird nur eine Lücke für das JSX-Objekt genutzt. Merken Sie sich die ID dieser Lücke.
27
Carina Enke 6.1 28 Im Beispiel wird der Lernende die Lücke bei Aufruf der Aufgabe nicht sehen. Sie erscheint erst mit Abgabe der Aufgabe.
Carina Enke 44.1 29 )))|(% style="width:646px" %)[[image:Beispiel3 - Aufgabenstellung mit Lücke_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="482" width="500"]]
Carina Enke 5.1 30 |(% style="width:680px" %)(((
Carina Enke 1.1 31 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:
32
33 {{code language="none"}}
Carina Enke 5.1 34 document.getElementById({GAP_1}).setAttribute('hidden', 'hidden');
Carina Enke 30.1 35 var brd=JXG.JSXGraph.initBoard('JSX_CONTAINER_ID',{axis:true, boundingbox:[-5, 5, 5, -5]});
36 var x=0;
37 let p=brd.create('point', [x, 0], {name:'P'});
38 p.on('drag', function() {setOnyxGapValue({GAP_1}, p.X().toFixed(1));});
Carina Enke 1.1 39 {{/code}}
Carina Enke 3.1 40
Carina Enke 7.1 41 (% id="HErlE4uterungzumgenutztenCode" style="margin-bottom: 11px;" class="western" %)
Carina Enke 6.1 42 ==== Erläuterung zum genutzten Code ====
43
Carina Enke 5.1 44 (% class="western" style="margin-bottom:11px" %)
45 (% lang="en-GB" %)Die Methode **document.getElementById()** zeigt auf das Objekt mit dem angegebenen Bezeichner (hier die Onyx-Lücke GAP_1) und erzwingt dann über die Methode **setAttribute()**, dass diese Lücke für den Lernenden nicht sichtbar, sondern zunächst „versteckt“ ist.
Carina Enke 3.1 46
47 (% class="western" style="margin-bottom:11px" %)
Carina Enke 4.1 48 (% lang="en-GB" %)Die Methode **JXG.JSXGraph.initBoard()** erzeugt das Feld für die Grafik.
49 Die Optionen **axis **bzw. **boundingbox **fügen dem Feld  eine Achse hinzu bzw. bestimmen die Begrenzungskoordinaten des angezeigten Teils des Feldes.(%%)
50
Carina Enke 3.1 51
52 {{warning}}
53 **Bitte beachten Sie**: Ändern Sie die Bezeichnung 'JSX_CONTAINER_ID' nicht, da diese von ONYX benötigt wird.
54 {{/warning}}
55
Carina Enke 4.1 56 (% class="western" style="margin-bottom:11px" %)
Carina Enke 5.1 57 (% 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.
Carina Enke 4.1 58
59 (% class="western" style="margin-bottom:11px" %)
Carina Enke 26.1 60 (% lang="en-GB" %)Die Methode brd.create() mit dem Bezeichner 'button' wird verwendet, um eine Schaltfläche zu erstellen. In den Argumenten werden der Titel der Schaltfläche und eine Methode zur Übernahme der Eingaben aus der Grafik übergeben.
Carina Enke 4.1 61
Carina Enke 5.1 62 {{info}}
63 Die Eingabe des Nutzers in der Grafik wird nur von Onyx übernommen, wenn der Nutzer den erstellten Button in der Grafik verwendet. Weisen Sie den Lernenden explizit darauf hin.
64 {{/info}}
Carina Enke 4.1 65
Carina Enke 5.1 66 (% lang="en-GB" %)Die Methode **setOnyxGapValue**() schreibt das zweite Argument (hier die x-Koordinate des Punktes p) in die durch das erste Argument angegebene Onyx-Lücke (hier die Onyx-Lücke mit dem Bezeichner GAP_1). Mit Abgabe der Aufgabe kann ONYX überprüfen, ob die Aktion des Benutzers innerhalb des JSXGraph-Boards zu einer korrekten Lösung geführt hat.
Carina Enke 4.1 67
Carina Enke 5.1 68 {{warning}}
69 Nutzeraktionen in der Grafik unterliegen einer Ungenauigkeit. Bedenken Sie diese bei Angabe der korrekten Lösung.
70 {{/warning}}
Carina Enke 4.1 71
Carina Enke 30.1 72 Mit der letzten Zeile **p.on('drag',** **function()** **{setOnyxGapValue({GAP_1}, p.X().toFixed(1));}); **erfolgt bei Verschiebung des Punkts eine automatische Wertübernahme in die Lücke.
73
74 Alternativ kann man einen Button in der Grafik anzeigen mit der der verschobene Punkt aktiv bestätigt werden muss, ehe er in die Lücke übernommen wird. Für diesen Fall verwenden Sie statt der letzten Zeile folgenden Code:.
75
76 {{code language="none"}}
77 const butt = brd.create('button', [2, 3, "Punkt bestätigen", function(){setOnyxGapValue({GAP_1}, p.X()); }],{fixed:true});
78 {{/code}}
Carina Enke 5.1 79 )))|(% style="width:646px" %)(((
80 [[image:Beispiel3 - JSX-Objekt anlegen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 1.1 81
Carina Enke 5.1 82 [[image:Beispiel3 - Korrekte Lösung anpassen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
83 )))
Carina Enke 8.1 84 |(% style="width:680px" %)Prüfen Sie in der Vorschau ihre Angaben und speichern Sie die Aufgabe.|(% style="width:646px" %)[[image:Beispiel3 - Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]