Skip to Content
Last modified by Anna Paul-Hasenfuss on 19.06.2025
Show last authors
1 {{section}}
2 {{column width="60%"}}
3 This example shows how user input can be stored in an ONYX gap in the JSX graphic.
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 Question as it is seen by the learner Question evaluation plus hand-in      
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="Related Topics"}}
15 * [[Integrating JSXGraph Objects>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.WebHome]]
16 * [[Text Entry Interaction>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Lückentextaufgabe.WebHome]]
17 {{/panel}}
18 {{/column}}
19 {{/section}}
20
21
22
23 To create this example, proceed as follows:
24
25 |(% style="width:680px" %)(((
26 Create a text entry interaction. Define the task and generate the required gaps. In this example, only one gap is used for the JSX object. Make a note of the gap's ID.
27
28 In the example, learners will not see the gap when they open the task. It only appears once the task has been handed in.
29
30
31
32
33 )))|(% 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"]]
34 |(% style="width:680px" %)(((
35 Add a JSXGraph object by clicking on the [[image:Icon_JSX.png]] icon. Now, change the JavaScript code in the dialog as follows:
36
37 {{code language="none"}}
38 document.getElementById({GAP_1}).setAttribute('hidden', 'hidden');
39 var brd=JXG.JSXGraph.initBoard('JSX_CONTAINER_ID',{axis:true, boundingbox:[-5, 5, 5, -5]});
40 var x=0;
41 let p=brd.create('point', [x, 0], {name:'P'});
42 p.on('drag', function() {setOnyxGapValue({GAP_1}, p.X().toFixed(1));});
43 {{/code}}
44
45 (% id="HErlE4uterungzumgenutztenCode" style="margin-bottom: 11px;" class="western" %)
46 ==== Explanations of the used code ====
47
48 (% class="western" style="margin-bottom:11px" %)
49 The **document.getElementById() **method points to the object with the specified identifier (in this case, the Onyx gap GAP_1) and then uses the** setAttribute() **method to ensure that this gap is not visible to the learner but is initially “hidden.”
50
51 (% class="western" style="margin-bottom:11px" %)
52 The **JXG.JSXGraph.initBoard()** method creates the field for the graphic.
53
54 (% class="western" style="margin-bottom:11px" %)
55 The option **axis** or **boundingbox **adds an axis to the field or determines the boundary coordinates of the displayed part of the field.
56
57
58 {{warning}}
59 **Please note**: Do not change the name 'JSX_CONTAINER_ID', as this is required by ONYX.
60 {{/warning}}
61
62 (% class="western" style="margin-bottom:11px" %)
63 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.
64
65 (% class="western" style="margin-bottom:11px" %)
66 The method **brd.create()** with the identifier** 'button'** is used to create a button. The button title and a method for accepting the input from the gap are passed in the arguments.
67
68
69 {{info}}
70 The user's input in the graphic is only accepted by Onyx if the user applies the created button in the graphic. Make sure you explicitly point this out to your learners.
71 {{/info}}
72
73 The method **setOnyxGapValue()** writes the second argument (here the x-coordinate of point p) into the Onyx gap specified by the first argument (here the Onyx gap with the identifier GAP_1). Once the task has been submitted, ONYX can check whether the user's action within the JSXGraph board has led to a correct solution.
74
75 {{warning}}
76 You should be aware that learner actions shown in the graphic are subject to inaccuracy.
77 {{/warning}}
78
79 The last line **p.on('drag', function() {setOnyxGapValue({GAP_1}, p.X().toFixed(1));});** automatically transfers the value to the gap when the point is moved.
80
81 Alternatively, you can display a button in the graphic that must be clicked to confirm the moved point before it is transferred to the gap. If this is the case, use the following code instead of the last line:
82
83 {{code language="none"}}
84 const butt = brd.create('button', [2, 3, "Punkt bestätigen", function(){setOnyxGapValue({GAP_1}, p.X()); }],{fixed:true});
85 {{/code}}
86 )))|(% style="width:646px" %)(((
87 [[image:Beispiel3 - JSX-Objekt anlegen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
88
89 [[image:Beispiel3 - Korrekte Lösung anpassen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
90 )))
91 |(% style="width:680px" %)Check your details in the preview and save the task.|(% style="width:646px" %)[[image:Beispiel3 - Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]