Skip to Content
Last modified by Anna Paul-Hasenfuss on 19.06.2025
Hide last authors
Carina Enke 18.4 1 {{section}}
2 {{column width="60%"}}
Carina Enke 47.1 3 This example shows how user input can be stored in an ONYX gap in the JSX graphic.
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 47.1 7 Question as it is seen by the learner Question evaluation plus hand-in      
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%"}}
Carina Enke 47.1 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]]
Carina Enke 18.4 17 {{/panel}}
18 {{/column}}
19 {{/section}}
Carina Enke 18.1 20
Carina Enke 18.4 21
22
Carina Enke 47.1 23 To create this example, proceed as follows:
Carina Enke 1.1 24
Carina Enke 5.1 25 |(% style="width:680px" %)(((
Carina Enke 47.1 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.
Carina Enke 5.1 27
Carina Enke 47.1 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
Carina Enke 44.1 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"]]
Carina Enke 5.1 34 |(% style="width:680px" %)(((
Carina Enke 47.1 35 Add a JSXGraph object by clicking on the [[image:Icon_JSX.png]] icon. Now, change the JavaScript code in the dialog as follows:
Carina Enke 1.1 36
37 {{code language="none"}}
Carina Enke 5.1 38 document.getElementById({GAP_1}).setAttribute('hidden', 'hidden');
Carina Enke 30.1 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));});
Carina Enke 1.1 43 {{/code}}
Carina Enke 3.1 44
Carina Enke 7.1 45 (% id="HErlE4uterungzumgenutztenCode" style="margin-bottom: 11px;" class="western" %)
Carina Enke 47.1 46 ==== Explanations of the used code ====
Carina Enke 6.1 47
Carina Enke 5.1 48 (% class="western" style="margin-bottom:11px" %)
Carina Enke 47.1 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.”
Carina Enke 3.1 50
51 (% class="western" style="margin-bottom:11px" %)
Carina Enke 47.1 52 The **JXG.JSXGraph.initBoard()** method creates the field for the graphic.
Carina Enke 3.1 53
Carina Enke 47.1 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
Carina Enke 3.1 58 {{warning}}
Carina Enke 47.1 59 **Please note**: Do not change the name 'JSX_CONTAINER_ID', as this is required by ONYX.
Carina Enke 3.1 60 {{/warning}}
61
Carina Enke 4.1 62 (% class="western" style="margin-bottom:11px" %)
Carina Enke 47.1 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.
Carina Enke 4.1 64
65 (% class="western" style="margin-bottom:11px" %)
Carina Enke 47.1 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.
Carina Enke 4.1 67
Carina Enke 47.1 68
Carina Enke 5.1 69 {{info}}
Carina Enke 47.1 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.
Carina Enke 5.1 71 {{/info}}
Carina Enke 4.1 72
Carina Enke 47.1 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.
Carina Enke 4.1 74
Carina Enke 5.1 75 {{warning}}
Carina Enke 47.1 76 You should be aware that learner actions shown in the graphic are subject to inaccuracy.
Carina Enke 5.1 77 {{/warning}}
Carina Enke 4.1 78
Carina Enke 47.1 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.
Carina Enke 30.1 80
Carina Enke 47.1 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:
Carina Enke 30.1 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}}
Carina Enke 5.1 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"]]
Carina Enke 1.1 88
Carina Enke 5.1 89 [[image:Beispiel3 - Korrekte Lösung anpassen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
90 )))
Carina Enke 47.1 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"]]