Skip to Content

JSXGraph Example: Points in a Coordinate System

Last modified by Anna Paul-Hasenfuss on 19.06.2025

In this example, a JSXGraph object is used to display the values of created variables as points in a coordinate system.

Beispiel1 Vorschau der Aufgabe_de.png

Editor - Variablenwerte im JSXCode_de.png

 

Related Topics

To create this example, proceed as follows:

Create a text entry interaction with the variables 'var_x' and 'var_y' and your intended value range.Beispiel1_Variablen anlegen_de.png
Now, write the text for the task and create the gaps that need to be filled in. Also, reference the variables you have created there.Beispiel1_Lücken mit Variablen verknüpfen_de.png

Add a JSXGraph object by clicking on Icon_JSX.png. In the dialog box, adjust the JavaScript code as follows:

let x={var_x};
let y={var_y};
var brd= JXG.JSXGraph.initBoard('JSX_CONTAINER_ID',
{axis:true, boundingbox:[-12, 12, 12, -12]});
brd.create('point', [x, y], {name:'P'});

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. If no name is specified, it is labelled automatically.

Warning

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

 

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