Zum Inhalt springen

Wiki-Quellcode von JSXGraph-Objekte einbinden

Zuletzt geändert von Carina Enke am 18.03.2025
Verstecke letzte Bearbeiter
Carina Enke 1.1 1 {{section}}
2 {{column width="60%"}}
Carina Enke 18.1 3 [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_JSX.png||data-xwiki-image-style="img-icon" height="27" width="30"]] ONYX unterstützt die Einbindung von JSXGraph-Objekten.
Carina Enke 3.3 4
5 JSXGraph ist eine JavaScript-Bibliothek zur Erstellung interaktiver mathematischer Grafiken und Diagramme im Web. JSXGraph-Objekte bilden die Grundlage von Visualisierungen und können verschiedene Formen wie Punkte, Linien, Kreise und Funktionsgraphen annehmen. Die Einbindung von JSXGraph-Objekten unterstützt eine Vielzahl von mathematischen und geometrischen Konstruktionen und erleichtert die Visualisierung komplexer mathematischer Konzepte.
Carina Enke 16.1 6
Carina Enke 23.1 7 [[image:Beispiel - Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true"]]
Carina Enke 16.1 8
9
Carina Enke 1.1 10 {{/column}}
11
12 {{column width="30%"}}
13 {{panel title="Inhalt"}}
14 {{toc start="2"/}}
15 {{/panel}}
16
17 {{panel title="Verwandte Themen"}}
Carina Enke 3.3 18 * [[3D-Objekt einbinden>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.3D-Objekte einbinden.WebHome]]
Carina Enke 1.1 19 {{/panel}}
20
21 {{panel title="Weiterführende Inhalte"}}
Carina Enke 29.1 22 * [[Onyx-Beispiele zur Nutzung von JSX-Graph Objekten >>doc:.Beispiele zur Nutzung von JSX-Graph Objekten.WebHome]])
Carina Enke 24.1 23 * [[Referenzseite zur Bibliothek JSXGraph (jsxgraph.org)>>https://jsxgraph.org/wp/index.html]]
24 * [[Beispielsammlung zur Erstellung von JSXGraph-Objekten (jsxgraph.org)>>https://jsxgraph.org/share/]]
Carina Enke 1.1 25 {{/panel}}
26 {{/column}}
27 {{/section}}
28
Carina Enke 3.3 29 == JSXGraph-Objekt im Editor einbinden ==
Carina Enke 2.1 30
Carina Enke 18.1 31 Sie können JSXGraph-Objekte in alle Bereiche einbinden in denen der HTML-Editor verfügbar ist und das Icon [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_JSX.png||data-xwiki-image-style="img-icon" height="27" width="30"]] zu sehen ist.
Carina Enke 3.3 32
Carina Enke 18.1 33 Öffnen Sie die Aufgabe oder den Test, in dem ein JSXGraph-Objekt eingebunden werden soll. Klicken Sie auf das  Icon [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_JSX.png||data-xwiki-image-style="img-icon" height="27" width="30"]] im Kopfbereich des HTML-Editors.
Carina Enke 3.3 34
Carina Enke 7.1 35 [[image:Editor - JSX im Tiny_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 5.1 36
Carina Enke 18.1 37 Es öffnet sich ein Dialog zum Bearbeiten des JSXGraph-Objektes. Darin enthalten ist bereits der JavaScript-Code für ein Beispielobjekt.
Carina Enke 5.1 38
Carina Enke 7.1 39 [[image:Editor - JSX Dialog geöffnet_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 5.1 40
Carina Enke 37.2 41 Tauschen Sie diesen Inhalt gegen Ihren eigenen JSX-Code aus. Informationen zur Erstellung von JSX-Objekten erhalten Sie auf den Webseiten des [[JSXGraph Projektes>>https://jsxgraph.org/wp/index.html]] oder mit Hilfe der bereitgestellten Beispiele. Einen Überblick bietet die Seite [[Beispiele zur Nutzung von JSX-Graph-Objekten>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.Beispiele zur Nutzung von JSX-Graph Objekten.WebHome]].
Carina Enke 5.1 42
Carina Enke 32.1 43 {{info}}
Carina Enke 37.2 44 Benennen Sie bei Nutzung der Beispielcodes aus [[JSXGraph Projektes>>https://jsxgraph.org/share/]] dort genutzte Platzhalter wie beispielsweise "BOARDID" um, und verwenden Sie "JSX_CONTAINER_ID".
Carina Enke 32.1 45 {{/info}}
46
Carina Enke 5.1 47 Mit Klick auf den Button Fertig wird das Objekt eingefügt.
48
Carina Enke 7.1 49 [[image:Editor - JSX Objekt speichern_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 5.1 50
Carina Enke 31.1 51 Im HTML-Editor wird ein eingefügtes JSXGraph-Objekt mit dem Symbol [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_JSX.png||data-xwiki-image-style="img-icon" height="27" width="30"]] gekennzeichnet.
Carina Enke 5.1 52
Carina Enke 7.1 53 [[image:Editor - Aufgabenstellung mit JSX-Objekt_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 5.1 54
55
Carina Enke 31.1 56 === Variablenwerte an JSXGraph-Objekte übergeben ===
Carina Enke 5.1 57
Carina Enke 31.1 58 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>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.Beispiele zur Nutzung von JSX-Graph Objekten.Beispiel Punkte im Koordinatensystem.WebHome]]
Carina Enke 5.1 59
Carina Enke 40.1 60 [[image:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.Beispiele zur Nutzung von JSX-Graph Objekten.Beispiel Punkte im Koordinatensystem.WebHome@Editor - Variablenwerte im JSXCode_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="263" width="800"]]
Carina Enke 5.1 61
Carina Enke 18.1 62 === Lernerantworten mit JSXGraph-Objekten nutzen ===
Carina Enke 5.1 63
Carina Enke 31.1 64 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>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.Beispiele zur Nutzung von JSX-Graph Objekten.Beispielaufgabe Schnittpunkt x-Achse.WebHome]] und [[Beispielaufgabe Schnittpunkt x-Achse II>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.Beispiele zur Nutzung von JSX-Graph Objekten.Beispielaufgabe Schnittpunkt x-Achse II.WebHome]]
Carina Enke 15.1 65
Carina Enke 19.1 66 [[image:Editor - Lücke in JSXCode_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="250" width="537"]] [[image:Editor - JSX an Lücke_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="250" width="391"]]
Carina Enke 15.1 67
Carina Enke 3.3 68
Carina Enke 18.1 69
Carina Enke 16.1 70 == Vorschau zum JSXGraph-Objekt ==
71
Carina Enke 34.1 72 Eine vollständige Vorschau mit allen eventuell zusätzlichen Medieninhalten erhalten Sie durch Aufruf der Vorschau der erstellten Aufgabe bzw. des Tests.
Carina Enke 3.3 73
Carina Enke 9.2 74
75
Carina Enke 3.3 76 == Bestehendes JSXGraph-Objekt bearbeiten ==
77
Carina Enke 37.2 78 Ein bereits eingebundenes JSX-Objekt können Sie wie folgt editieren:
Carina Enke 3.3 79
Carina Enke 31.1 80 Öffnen Sie die betreffende Aufgabe im Editor. Klicken Sie das Symbol [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_JSX.png||data-xwiki-image-style="img-icon" height="27" width="30"]] für das JSXGraph-Objekt im Editorfeld an und wählen Sie anschließend die Schaltfläche [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_JSX.png||data-xwiki-image-style="img-icon" height="27" width="30"]] zum Bearbeiten eines JSXGraph-Objektes in den Bearbeitungsoptionen aus.
Carina Enke 5.1 81
Carina Enke 7.1 82 [[image:Editor - JSX Objekt bearbeiten_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 5.1 83
Carina Enke 7.1 84 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.
85
Carina Enke 9.2 86
87
Carina Enke 3.3 88 == JSXGraph-Objekt in einem PDF-Dokument ==
89
Carina Enke 31.1 90 Bitte beachten Sie, dass ein JSXGraph-Element **nicht** in einem PDF-Dokument dargestellt werden kann. Es erscheint an dessen Stelle ein allgemeines Icon.
Carina Enke 3.3 91
Carina Enke 9.2 92
93
Carina Enke 3.3 94 == JSXGraph-Objekt in Auswertungsansichten ==
95
Carina Enke 31.1 96 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 [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_JSX.png||data-xwiki-image-style="img-icon" height="27" width="30"]] .