Zum Inhalt springen

Wiki-Quellcode von JSXGraph-Objekte einbinden

Zuletzt geändert von Carina Enke am 18.03.2025
Zeige letzte Bearbeiter
1 {{section}}
2 {{column width="60%"}}
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.
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.
6
7 [[image:Beispiel - Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true"]]
8
9
10 {{/column}}
11
12 {{column width="30%"}}
13 {{panel title="Inhalt"}}
14 {{toc start="2"/}}
15 {{/panel}}
16
17 {{panel title="Verwandte Themen"}}
18 * [[3D-Objekt einbinden>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.3D-Objekte einbinden.WebHome]]
19 {{/panel}}
20
21 {{panel title="Weiterführende Inhalte"}}
22 * [[Onyx-Beispiele zur Nutzung von JSX-Graph Objekten >>doc:.Beispiele zur Nutzung von JSX-Graph Objekten.WebHome]])
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/]]
25 {{/panel}}
26 {{/column}}
27 {{/section}}
28
29 == JSXGraph-Objekt im Editor einbinden ==
30
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.
32
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.
34
35 [[image:Editor - JSX im Tiny_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
36
37 Es öffnet sich ein Dialog zum Bearbeiten des JSXGraph-Objektes. Darin enthalten ist bereits der JavaScript-Code für ein Beispielobjekt.
38
39 [[image:Editor - JSX Dialog geöffnet_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
40
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]].
42
43 {{info}}
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".
45 {{/info}}
46
47 Mit Klick auf den Button Fertig wird das Objekt eingefügt.
48
49 [[image:Editor - JSX Objekt speichern_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
50
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.
52
53 [[image:Editor - Aufgabenstellung mit JSX-Objekt_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
54
55
56 === Variablenwerte an JSXGraph-Objekte übergeben ===
57
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]]
59
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"]]
61
62 === Lernerantworten mit JSXGraph-Objekten nutzen ===
63
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]]
65
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"]]
67
68
69
70 == Vorschau zum JSXGraph-Objekt ==
71
72 Eine vollständige Vorschau mit allen eventuell zusätzlichen Medieninhalten erhalten Sie durch Aufruf der Vorschau der erstellten Aufgabe bzw. des Tests.
73
74
75
76 == Bestehendes JSXGraph-Objekt bearbeiten ==
77
78 Ein bereits eingebundenes JSX-Objekt können Sie wie folgt editieren:
79
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.
81
82 [[image:Editor - JSX Objekt bearbeiten_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
83
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
86
87
88 == JSXGraph-Objekt in einem PDF-Dokument ==
89
90 Bitte beachten Sie, dass ein JSXGraph-Element **nicht** in einem PDF-Dokument dargestellt werden kann. Es erscheint an dessen Stelle ein allgemeines Icon.
91
92
93
94 == JSXGraph-Objekt in Auswertungsansichten ==
95
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"]] .