Skip to Content

JSXGraph Example: Intersection x-Axis

Last modified by Anna Paul-Hasenfuss on 19.06.2025

In this example, a JSXGraph object is used to display the user input of a gap in a coordinate system.

Beispiel2 - Vorschau der Aufgabe_de.png

Editor - Lücke in JSXCode_de.png

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.Beispiel2 - Aufgabenstellung mit Lücken_de.png

Add a JSXGraph object by clicking on the Icon_JSX.png icon. Now, change the JavaScript code in the dialog as follows:

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 option axis or boundingbox adds an axis to the field or determines the boundary coordinates of the displayed part of the field.

Warning

Please note: Do not change the name 'JSX_CONTAINER_ID', as this is required by ONYX.

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.

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 must contain 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.

 

Beispiel2 - JSX-Objekt anlegen_de.png
Check your details in the preview and save the task.Beispiel2 - Vorschau der Aufgabe_de.png