Zum Inhalt springen

Änderungen von Dokument JSXGraph-Objekte einbinden

Zuletzt geändert von Anna Paul-Hasenfuss am 17.05.2025
Von Version 5.1
bearbeitet von Carina Enke
am 25.10.2024
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 53.1
bearbeitet von Anna Paul-Hasenfuss
am 10.05.2025
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Titel
... ... @@ -1,1 +1,1 @@
1 -JSXGraph Objekte nutzen
1 +JSXGraph-Objekte einbinden
Übergeordnete Seite
... ... @@ -1,1 +1,1 @@
1 -Autorenbereich.AutorONYX2.01 ONYX Logseiten.Log_JSX-Graph Objekte.WebHome
1 +ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.WebHome
Dokument-Autor
... ... @@ -1,1 +1,1 @@
1 -XWiki.carina
1 +XWiki.anna
Inhalt
... ... @@ -1,8 +1,12 @@
1 1  {{section}}
2 2  {{column width="60%"}}
3 -(% style="background-color:#f1c40f" %)(Icon) (%%)ONYX unterstützt die Einbindung von JSXGraph Objekten.
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 4  
5 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 +
6 6  {{/column}}
7 7  
8 8  {{column width="30%"}}
... ... @@ -11,11 +11,13 @@
11 11  {{/panel}}
12 12  
13 13  {{panel title="Verwandte Themen"}}
14 -* [[3D-Objekt einbinden>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.3D-Objekte einbinden.WebHome]]
18 +* [[Integrating 3D Objects>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.3D-Objekte einbinden.WebHome]]
15 15  {{/panel}}
16 16  
17 17  {{panel title="Weiterführende Inhalte"}}
18 -* [[JSXGraph (Uni Bayreuth)>>https://jsxgraph.uni-bayreuth.de/wp/index.html]]
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/]]
19 19  {{/panel}}
20 20  {{/column}}
21 21  {{/section}}
... ... @@ -22,49 +22,69 @@
22 22  
23 23  == JSXGraph-Objekt im Editor einbinden ==
24 24  
25 -Sie können JSX-Objekte in alle Bereiche einbinden in denen der HTML-Editor verfügbar ist und das JSX-Icon (% style="background-color:#f1c40f" %)(Icon)(%%) zu sehen ist.
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.
26 26  
27 -Öffnen Sie die Aufgabe oder den Test in dem ein JSX-Objekt eingebunden werden soll. Klicken Sie auf das  Icon (% style="background-color:#f1c40f" %)(Icon)(%%) im Kopfbereich des HTML-Editors.
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.
28 28  
35 +[[image:Editor - JSX im Tiny_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
29 29  
30 -Mit Klick auf dieses Icon öffnet sich ein Dialog zur Eingabe der JSX-Objekte Beschreibung. Als einfaches Beispiel ist im Textfeld die JSX-Objekte Beschreibung einer einfachen Würfeldarstellung hinterlegt.
37 +Es öffnet sich ein Dialog zum Bearbeiten des JSXGraph-Objektes. Darin enthalten ist bereits der JavaScript-Code für ein Beispielobjekt.
31 31  
39 +[[image:Editor - JSX Dialog geöffnet_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
32 32  
33 -Tauschen Sie diesen Inhalt gegen Ihre eigene JSX-Objekte-Beschreibung aus. Informationen zur Erstellung vonJ SX-Objekten erhalten Sie auf den Webseiten des [[JSXGraph Projektes>>https://jsxgraph.uni-bayreuth.de/wp/index.html]].
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]].
34 34  
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 +
35 35  Mit Klick auf den Button Fertig wird das Objekt eingefügt.
36 36  
49 +[[image:Editor - JSX Objekt speichern_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
37 37  
38 -Im HTML-Editor wird ein eingefügtes JSX-Objekt mit dem Symbol (% style="background-color:#f1c40f" %)(Icon)(%%) gekennzeichnet.
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.
39 39  
53 +[[image:Editor - Aufgabenstellung mit JSX-Objekt_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
40 40  
41 -? Zusätzliche Inhalte können Sie im Tab "Optionen" als externe Dateien hochladen. CSS- und JavaScript-Inhalte werden zur Anzeige automatisch geladen. Medieninhalte können Sie über den Pfad "media/filename" im x3dom referenzieren.
42 42  
56 +=== Variablenwerte an JSXGraph-Objekte übergeben ===
43 43  
44 -== Beispielaufgaben mit JSXGraph-Objekten ==
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]]
45 45  
46 -Einige Beispielaufgaben und deren Erstellung wird auf folgenden Seiten erläutert:
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"]]
47 47  
48 -* ...
62 +=== Lernerantworten mit JSXGraph-Objekten nutzen ===
49 49  
50 -== Interaktivität des JSXGraph-Objekt ausprobieren ==
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]]
51 51  
52 -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.
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"]]
53 53  
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 +
54 54  == Bestehendes JSXGraph-Objekt bearbeiten ==
55 55  
56 -Ein bereits eingebundenes JSX-Objekt können Sie wie folgt editieren:
78 +Ein bereits eingebundenes JSX-Objekt können Sie wie folgt editieren:
57 57  
58 -Öffnen Sie die betreffende Aufgabe im Editor. Klicken Sie das Symbol (% style="background-color:#f1c40f" %)(Icon)(%%) für das JSX-Objekt im Editorfeld an und wählen Sie anschließend die Schaltfläche (% style="background-color:#f1c40f" %)(Icon)(%%)zum Bearbeiten eines JSX-Objektes
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.
59 59  
60 -Es öffnet sich der Dialog "JSX bearbeiten" und Sie können Ihre Anpassungen vornehmen. Mit Klick auf den Button Fertig, werden die Änderungen gespeichert und übernommen.
82 +[[image:Editor - JSX Objekt bearbeiten_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
61 61  
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 +
62 62  == JSXGraph-Objekt in einem PDF-Dokument ==
63 63  
64 -Bitte beachten Sie, dass ein JSX-Element **nicht** in einem PDF-Dokument dargestellt werden kann. Es erscheint an dessen Stelle ein allgemeines Icon.
90 +Bitte beachten Sie, dass ein JSXGraph-Element **nicht** in einem PDF-Dokument dargestellt werden kann. Es erscheint an dessen Stelle ein allgemeines Icon.
65 65  
66 -== JSXGraph-Objekt in Auswertungsansichten ==
67 67  
68 -text2
69 69  
70 -
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"]] .
Beispiel - Vorschau der Aufgabe_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +22.9 KB
Inhalt
Beispiel3 - Vorschau der Aufgabe_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +24.6 KB
Inhalt
Editor - Aufgabenstellung mit JSX-Objekt_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +15.4 KB
Inhalt
Editor - JSX Dialog geöffnet_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +67.5 KB
Inhalt
Editor - JSX Objekt bearbeiten_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +18.0 KB
Inhalt
Editor - JSX Objekt speichern_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +74.1 KB
Inhalt
Editor - JSX an Lücke_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +103.2 KB
Inhalt
Editor - JSX im Tiny_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +15.6 KB
Inhalt
Editor - Lücke in JSXCode_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +86.2 KB
Inhalt
Icon_JSX.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.anna
Größe
... ... @@ -1,0 +1,1 @@
1 +980 bytes
Inhalt