Integrate JSXGraph Objects

Last modified by Anna Paul-Hasenfuss on 10.05.2025

Icon_JSX.png ONYX supports the integration of JSXGraph objects.

JSXGraph is a JavaScript library that allows you the creation of interactive mathematical graphs and diagrams on the web. JSXGraph objects are the backbone of visualizations and can take various forms such as points, lines, circles and graphs of functions. Integrating JSXGraph objects supports a variety of mathematical and geometric constructions and facilitates the visualization of complex mathematical concepts.

Beispiel - Vorschau der Aufgabe_de.png

 

How to integrate JSXGraph objects in the editor

You can include JSXGraph objects in all areas where the HTML editor is available and the icon Icon_JSX.png is visible.

To do this, open the task or test in which you want to add a JSXGraph object and click on the Icon_JSX.png icon in the header of the HTML editor.

Editor - JSX im Tiny_de.png

A dialog for editing the JSXGraph object opens, which already contains the JavaScript code for a sample object.

Editor - JSX Dialog geöffnet_de.png

Replace this content with your own JSX code. If you need more information on creating JSXGraph objects, visit JSXGraph Projects or check some examples that can be found here How JSXGraph objects can be used - examples.

Information

If you use the codes from the JSXGraph Projects examples, rename the placeholders such as "BOARDID", and use "JSX_CONTAINER_ID" instead.

Once you click on the Finish button, you insert the object.

Editor - JSX Objekt speichern_de.png

All inserted JSXGraph objects are marked with the Icon_JSX.png icon in the HTML editor.   

Editor - Aufgabenstellung mit JSX-Objekt_de.png

How to transfer variable values to JSXGraph objects

Onyx variables can be passed to JSXGraph objects. You can do this by using the variable name in the JavaScript code of the JSXGraph object. The Task example - Points in a coordinate system shows a simple way to do this.

Editor - Variablenwerte im JSXCode_de.png

How to use learner responses with JSXGraph objects

You can also use JSXGraph objects to display learner responses in object gaps or to evaluate user actions in the JSXGraph object, such as marking a point, as learner responses to a gap. Instructions for the implementation can be found in the following examples Task example: Intersection x-axis and Example task: Intersection x-axis II

Editor - Lücke in JSXCode_de.png  Editor - JSX an Lücke_de.png

Vorschau zum JSXGraph-Objekt

Eine vollständige Vorschau mit allen eventuell zusätzlichen Medieninhalten erhalten Sie durch Aufruf der Vorschau der erstellten Aufgabe bzw. des Tests. 

Bestehendes JSXGraph-Objekt bearbeiten

Ein bereits eingebundenes JSX-Objekt können Sie wie folgt editieren: 

Öffnen Sie die betreffende Aufgabe im Editor. Klicken Sie das Symbol Icon_JSX.png für das JSXGraph-Objekt im Editorfeld an und wählen Sie anschließend die Schaltfläche Icon_JSX.png zum Bearbeiten eines JSXGraph-Objektes in den Bearbeitungsoptionen aus.

Editor - JSX Objekt bearbeiten_de.png

Es öffnet sich der Dialog "JSX bearbeiten" und Sie können Ihre Anpassungen vornehmen. Mit Klick auf den Button Fertig im Dialog, werden die Änderungen gespeichert und übernommen.

JSXGraph-Objekt in einem PDF-Dokument

Bitte beachten Sie, dass ein JSXGraph-Element nicht in einem PDF-Dokument dargestellt werden kann. Es erscheint an dessen Stelle ein allgemeines Icon. 

JSXGraph-Objekt in Auswertungsansichten

Die Auswertungsdokumente des Testversuches eines Lernenden zeigen die individuellen JSXGraph-Objekte an. In der Statistischen Auswertung jedoch kann das JSXGraph-Element nicht dargestellt werden. Es erscheint an dessen Stelle das allgemeine Icon Icon_JSX.png .