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 Werte angelegter Variablen als Punkt in einem Koordinatensystem anzuzeigen.
4
5 [[image:Beispiel1 Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="210" width="500"]]
6
7 [[image:Editor - Variablenwerte im JSXCode_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="263" width="800"]]
8
9
10 {{/column}}
11
12 {{column width="30%"}}
13 {{panel title="Verwandte Themen"}}
14 * [[JSXGraph-Objekte nutzen>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.WebHome]]
15 * [[Variablen verwenden>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Variablen verwenden.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:847px" %)Erstellen Sie eine Lückentextaufgabe. Legen Sie die Variablen 'var_x' und 'var_y' mit dem gewünschten Wertebereich an.|(% style="width:633px" %)[[image:Beispiel1_Variablen anlegen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
26 |(% style="width:847px" %)Erstellen Sie den Text der Aufgabenstellung und die benötigten Lücken für die Eingabe. Referenzieren Sie dort die angelegten Variablen.|(% style="width:633px" %)[[image:Beispiel1_Lücken mit Variablen verknüpfen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
27 |(% style="width:847px" %)(((
28 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:
29
30 {{code language="none"}}
31 let x={var_x};
32 let y={var_y};
33 var brd= JXG.JSXGraph.initBoard('JSX_CONTAINER_ID',
34 {axis:true, boundingbox:[-12, 12, 12, -12]});
35 brd.create('point', [x, y], {name:'P'});
36
37 {{/code}}
38
39 (% class="western" style="margin-bottom:11px" %)
40 (% lang="en-GB" %)Dabei erzeugt die Methode **JXG.JSXGraph.initBoard()** das Feld für die Grafik.
41 Die Optionen **axis **bzw. **boundingbox **fügen dem Feld  eine Achse hinzu bzw. bestimmen die Begrenzungskoordinaten des angezeigten Teils des Feldes.
42 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)
43
44 {{warning}}
45 **Bitte beachten Sie**: Ändern Sie die Bezeichnung 'JSX_CONTAINER_ID' nicht, da diese von ONYX benötigt wird.
46 {{/warning}}
47
48
49 )))|(% style="width:633px" %)[[image:Beispiel1 JSX-Objekt anlegen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
50 |(% style="width:847px" %)Prüfen Sie in der Vorschau ihre Angaben und Speichern Sie die Aufgabe|(% style="width:633px" %)[[image:Beispiel1 Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]