JSXGraph Example: Intersection x-Axis II

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. 

In the example, learners will not see the gap when they open the task. It only appears once the task has been handed in.

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

Explanations of the used code

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.”

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.

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

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.

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: