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 the provided 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

Im HTML-Editor wird ein eingefügtes JSXGraph-Objekt mit dem Symbol Icon_JSX.png  gekennzeichnet.

Editor - Aufgabenstellung mit JSX-Objekt_de.png

Variablenwerte an JSXGraph-Objekte übergeben

Onyx-Variablen können an JSXGraph-Objekte übergeben werden. Dazu wird der Variablenname im JavaSkript-Code des JSXGraph-Objektes verwendet. Ein einfache Umsetzung zeigt die Beispielaufgabe Punkte im Koordinatensystem

Editor - Variablenwerte im JSXCode_de.png

Lernerantworten mit JSXGraph-Objekten nutzen

JSXGraph-Objekte können genutzt werden, um Lernerantworten in Lücken im Objekt darzustellen oder auch um Nutzeraktionen im JSXGraph-Objekt, wie beispielsweise das Markieren eines Punktes, als Lernerantwort einer Lücke auszuwerten. Erläuterungen zur Umsetzung finden Sie in der den Beispielen Beispielaufgabe Schnittpunkt x-Achse und Beispielaufgabe Schnittpunkt x-Achse 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 .