JSXGraph Example: Intersection x-Axis
In this example, a JSXGraph object is used to display the user input of a gap in a coordinate system.
Related Topics
To create this example, proceed as follows:
| 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. |  |
Add a JSXGraph object by clicking on the var brd=JXG.JSXGraph.initBoard('JSX_CONTAINER_ID', {axis:true, boundingbox:[-10, 10, 10, -10]}); var x=0; var p=brd.create('point', [0, 0], {name:'P'}); const butt = brd.create('button', [5, 8, "Punkt aktualisieren", function() { x=Number(getOnyxGapValue({GAP_1})); brd.removeObject(p); p=brd.create('point', [x, 0], {name:'P'}); brd.update(); }],{fixed:true}); The JXG.JSXGraph.initBoard() method creates the field for the graphic. 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. 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. 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: ...”. The brd.removeObject() method is used to remove an object from the graphic. The arguments expect the reference of the old JSXGraph object (here the point p). The brd.update() method is used to manually update the graphic, i.e. the field is redrawn.
|  |
| Check your details in the preview and save the task. | |
icon. Now, change the JavaScript code in the dialog as follows: