Skip to Content
Last modified by Anna Paul-Hasenfuss on 19.06.2025
Hide last authors
Carina Enke 10.1 1 {{section}}
2 {{column width="60%"}}
Carina Enke 25.1 3 In this example, a JSXGraph object is used to display the user input of a gap in a coordinate system.
Carina Enke 12.2 4
5 [[image:Beispiel2 - Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
6
Carina Enke 14.1 7 [[image:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.WebHome@Editor - Lücke in JSXCode_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="233" width="500"]]
Carina Enke 10.1 8 {{/column}}
Carina Enke 1.1 9
Carina Enke 10.1 10 {{column width="30%"}}
Carina Enke 25.1 11 {{panel title="Related Topics"}}
12 * [[Integrating JSXGraph Objects>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.WebHome]]
13 * [[Text Entry Interaction>>doc:ONYX.Erstellung von Testinhalten.Aufgabentypen.Lückentextaufgabe.WebHome]]
Carina Enke 10.1 14 {{/panel}}
15 {{/column}}
16 {{/section}}
17
18
19
Carina Enke 25.1 20 To create this example, proceed as follows:
Carina Enke 1.1 21
Carina Enke 25.1 22 |(% style="width:503px" %)Create a text entry interaction. Define the task and generate the required gaps. In the example, the value of the first gap is used for the JSX object. Make a note of this gap's ID.|(% style="width:758px" %)[[image:Beispiel2 - Aufgabenstellung mit Lücken_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 1.1 23 |(% style="width:503px" %)(((
Carina Enke 25.1 24 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 25
26 {{code language="none"}}
Carina Enke 4.1 27 var brd=JXG.JSXGraph.initBoard('JSX_CONTAINER_ID',
28 {axis:true, boundingbox:[-10, 10, 10, -10]});
29 var x=0;
30 var p=brd.create('point', [0, 0], {name:'P'});
31 const butt = brd.create('button', [5, 8, "Punkt aktualisieren", function() {
32 x=Number(getOnyxGapValue({GAP_1}));
33 brd.removeObject(p);
34 p=brd.create('point', [x, 0], {name:'P'});
35 brd.update();
36 }],{fixed:true});
Carina Enke 1.1 37 {{/code}}
Carina Enke 3.1 38
39 (% class="western" style="margin-bottom:11px" %)
Carina Enke 25.1 40 The **JXG.JSXGraph.initBoard()** method creates the field for the graphic.
41 The option **axis** or **boundingbox** adds an axis to the field or determines the boundary coordinates of the displayed part of the field.
Carina Enke 3.1 42
43 {{warning}}
Carina Enke 25.1 44 **Please note**: Do not change the name 'JSX_CONTAINER_ID', as this is required by ONYX.
Carina Enke 3.1 45 {{/warning}}
46
Carina Enke 4.1 47 (% class="western" style="margin-bottom:11px" %)
Carina Enke 25.1 48 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 49
50 (% class="western" style="margin-bottom:11px" %)
Carina Enke 25.1 51 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 52
53 (% lang="en-GB" %)
Carina Enke 25.1 54 The **getOnyxGapValue()** method with the argument **{GAP_1}** is used to copy the value from the ONYX gap labeled GAP_1. If you have multiple gaps, check that the correct gap is being evaluated. You can find the name of a gap in the gap editing view in the field at the bottom right labeled “ID: ...”.
Carina Enke 4.1 55
56 (% lang="en-GB" %)
Carina Enke 25.1 57 The brd.removeObject() method is used to remove an object from the graphic. The arguments must contain the reference of the old JSXGraph object (here the point p).
Carina Enke 4.1 58
59 (% class="western" style="margin-bottom:11px" %)
Carina Enke 25.1 60 The **brd.update()** method is used to manually update the graphic, i.e. the field is redrawn.
Carina Enke 4.1 61
62
Carina Enke 3.1 63
Carina Enke 4.1 64 )))|(% style="width:758px" %)[[image:Beispiel2 - JSX-Objekt anlegen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 25.1 65 |(% style="width:503px" %)Check your details in the preview and save the task.|(% style="width:758px" %)[[image:Beispiel2 - Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]