Zum Inhalt springen

Wiki-Quellcode von JSXGraph-Objekte nutzen

Version 25.1 von Carina Enke am 06.11.2024
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 24.1 22 * [[Onyx-Beispiele zur Nutzung von JSX-Graph Objekten >>https://jsxgraph.org/wp/index.html]])
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 18.1 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:.Beispiele zur Nutzung von JSX-Graph Objekten.WebHome]]
Carina Enke 5.1 42
43 Mit Klick auf den Button Fertig wird das Objekt eingefügt.
44
Carina Enke 7.1 45 [[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 46
Carina Enke 6.3 47 Im HTML-Editor wird ein eingefügtes JSX-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 48
Carina Enke 7.1 49 [[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 50
51
Carina Enke 16.1 52 === Variablenwerte an JSX-Objekte übergeben ===
Carina Enke 5.1 53
Carina Enke 25.1 54 Onyx-Variablen können an JSX-Objekte übergeben werden. Dazu wird der Variablenname im JavaSkriptcode des JSX-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 55
Carina Enke 18.1 56 [[image:Editor - Variablenwerte im JSXCode_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 5.1 57
Carina Enke 18.1 58 === Lernerantworten mit JSXGraph-Objekten nutzen ===
Carina Enke 5.1 59
Carina Enke 18.1 60 JSXGraph-Objekte können genutzt werden, um Lernerantworten in Lücken im Objekt darzustellen oder auch um Nutzeraktionen im JSX-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:.Beispiele zur Nutzung von JSX-Graph Objekten.Beispielaufgabe Schnittpunkt x-Achse.WebHome]] und [[Beispielaufgabe Schnittpunkt x-Achse II>>doc:.Beispiele zur Nutzung von JSX-Graph Objekten.Beispielaufgabe Schnittpunkt x-Achse II.WebHome]]
Carina Enke 15.1 61
Carina Enke 19.1 62 [[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 63
Carina Enke 3.3 64
Carina Enke 18.1 65
Carina Enke 16.1 66 == Vorschau zum JSXGraph-Objekt ==
67
Carina Enke 5.1 68 Bereits im Editor wird bei der Konfiguration das Objektes im Dialog unter der JSXGraph-Beschreibung eine verkleinerte Vorschau angezeigt. Eine vollständige Vorschau mit allen eventuell zusätzlichen Medieninhalten erhalten Sie durch Aufruf der Vorschau der erstellten Aufgabe bzw. des Tests. Um das JSX-Objekt zu bewegen, halten Sie den Inhalt mit dem Mauszeiger fest und bewegen den Mauszeiger anschließend in die gewünschte Richtung.
Carina Enke 3.3 69
Carina Enke 9.2 70
71
Carina Enke 3.3 72 == Bestehendes JSXGraph-Objekt bearbeiten ==
73
Carina Enke 5.1 74 Ein bereits eingebundenes JSX-Objekt können Sie wie folgt editieren:
Carina Enke 3.3 75
Carina Enke 7.1 76 Ö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 JSX-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 JSX-Objektes in den Bearbeitungsoptionen aus.
Carina Enke 5.1 77
Carina Enke 7.1 78 [[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 79
Carina Enke 7.1 80 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.
81
Carina Enke 9.2 82
83
Carina Enke 3.3 84 == JSXGraph-Objekt in einem PDF-Dokument ==
85
Carina Enke 7.1 86 Bitte beachten Sie, dass ein JSX-Element **nicht** in einem PDF-Dokument dargestellt werden kann. Es erscheint an dessen Stelle ein allgemeines Icon.
Carina Enke 3.3 87
Carina Enke 9.2 88
89
Carina Enke 3.3 90 == JSXGraph-Objekt in Auswertungsansichten ==
91
Carina Enke 7.1 92 Die Auswertungsdokumente des Testversuches eines Lernenden zeigen die individuellen JSX-Objekte an. In der Statistischen Auswertung jedoch kann das JSX-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"]] .