Skip to Content
Last modified by Anna Paul-Hasenfuss on 17.05.2025
Show last authors
1 {{section}}
2 {{column width="60%"}}
3 In this example, a JSXGraph object is used to display the user input of a gap in a coordinate system.
4
5 [[image:Beispiel2 - Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
6
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"]]
8 {{/column}}
9
10 {{column width="30%"}}
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]]
14 {{/panel}}
15 {{/column}}
16 {{/section}}
17
18
19
20 To create this example, proceed as follows:
21
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"]]
23 |(% style="width:503px" %)(((
24 Add a JSXGraph object by clicking on the [[image:Icon_JSX.png]] icon. Now, change the JavaScript code in the dialog as follows:
25
26 {{code language="none"}}
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});
37 {{/code}}
38
39 (% class="western" style="margin-bottom:11px" %)
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.
42
43 {{warning}}
44 **Please note**: Do not change the name 'JSX_CONTAINER_ID', as this is required by ONYX.
45 {{/warning}}
46
47 (% class="western" style="margin-bottom:11px" %)
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.
49
50 (% class="western" style="margin-bottom:11px" %)
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.
52
53 (% lang="en-GB" %)
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: ...”.
55
56 (% lang="en-GB" %)
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).
58
59 (% class="western" style="margin-bottom:11px" %)
60 The **brd.update()** method is used to manually update the graphic, i.e. the field is redrawn.
61
62
63
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"]]
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"]]