Skip to Content
Last modified by Anna Paul-Hasenfuss on 19.06.2025
Show last authors
1 {{section}}
2 {{column width="60%"}}
3 In this example, a JSXGraph object is used to display the values of created variables as points in a coordinate system.
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="Related Topics"}}
14 * [[Integrating JSXGraph Objects>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.WebHome]]
15 * [[Using Variables>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Variablen verwenden.WebHome]]
16 * [[Text Entry Interaction >>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Lückentextaufgabe.WebHome]]
17 {{/panel}}
18 {{/column}}
19 {{/section}}
20
21
22 To create this example, proceed as follows:
23
24 |(% style="width:847px" %)Create a text entry interaction with the variables 'var_x' and 'var_y' and your intended value range.|(% style="width:633px" %)[[image:Beispiel1_Variablen anlegen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
25 |(% style="width:847px" %)Now, write the text for the task and create the gaps that need to be filled in. Also, reference the variables you have created there.|(% 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"]]
26 |(% style="width:847px" %)(((
27 Add a JSXGraph object by clicking on [[image:Icon_JSX.png]]. In the dialog box, adjust the JavaScript code as follows:
28
29 {{code language="none"}}
30 let x={var_x};
31 let y={var_y};
32 var brd= JXG.JSXGraph.initBoard('JSX_CONTAINER_ID',
33 {axis:true, boundingbox:[-12, 12, 12, -12]});
34 brd.create('point', [x, y], {name:'P'});
35
36 {{/code}}
37
38 (% class="western" style="margin-bottom:11px" %)
39 The **JXG.JSXGraph.initBoard() **method creates the field for the graphic.
40 The option **axis** or **boundingbox** adds an axis to the field or determines the boundary coordinates of the displayed part of the field.
41 The method **brd.create() **with the identifier 'point' is used to draw a point with the given coordinates and a given name, which is displayed in the graphic at the beginning. If no name is specified, it is labelled automatically.
42
43 {{warning}}
44 **Please note**: Do not change the name 'JSX_CONTAINER_ID', as it is required by ONYX.
45 {{/warning}}
46
47
48 )))|(% style="width:633px" %)[[image:Beispiel1 JSX-Objekt anlegen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
49 |(% style="width:847px" %)Check your details in the preview and save the task.|(% style="width:633px" %)[[image:Beispiel1 Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]