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 eine Nutzereingabe in der JSX-Grafik in einer ONYX-Lücke gespeichert.
4
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"]]
6
7 Beispielaufgabe aus Nutzersicht  Auswertung der Aufgabe mit Abgabe
8
9
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"]]
11 {{/column}}
12
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}}
20
21
22
23 Um dieses Beispiel selbst zu erstellen, gehen Sie wie folgt vor:
24
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
28 Im Beispiel wird der Lernende die Lücke bei Aufruf der Aufgabe nicht sehen. Sie erscheint erst mit Abgabe der Aufgabe.
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"]]
30 |(% style="width:680px" %)(((
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"}}
34 document.getElementById({GAP_1}).setAttribute('hidden', 'hidden');
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));});
39 {{/code}}
40
41 (% id="HErlE4uterungzumgenutztenCode" style="margin-bottom: 11px;" class="western" %)
42 ==== Erläuterung zum genutzten Code ====
43
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.
46
47 (% class="western" style="margin-bottom:11px" %)
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
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
56 (% class="western" style="margin-bottom:11px" %)
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.
58
59 (% class="western" style="margin-bottom:11px" %)
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.
61
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}}
65
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.
67
68 {{warning}}
69 Nutzeraktionen in der Grafik unterliegen einer Ungenauigkeit. Bedenken Sie diese bei Angabe der korrekten Lösung.
70 {{/warning}}
71
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}}
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"]]
81
82 [[image:Beispiel3 - Korrekte Lösung anpassen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
83 )))
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"]]