Changes for page JSXGraph-Objekte einbinden
Last modified by Carina Enke on 18.03.2025
To version 18.1
edited by Carina Enke
on 06.11.2024
on 06.11.2024
Change comment:
There is no comment for this version
Summary
-
Page properties (2 modified, 0 added, 0 removed)
-
Attachments (0 modified, 3 added, 0 removed)
Details
- Page properties
-
- Title
-
... ... @@ -1,1 +1,1 @@ 1 -JSXGraph 1 +JSXGraph-Objekte nutzen - Content
-
... ... @@ -1,8 +1,11 @@ 1 1 {{section}} 2 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 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 + 8 + 6 6 {{/column}} 7 7 8 8 {{column width="30%"}} ... ... @@ -15,7 +15,8 @@ 15 15 {{/panel}} 16 16 17 17 {{panel title="Weiterführende Inhalte"}} 18 -* [[JSXGraph (Uni Bayreuth)>>https://jsxgraph.uni-bayreuth.de/wp/index.html]] 21 +* [[JSXGraph>>https://jsxgraph.org/wp/index.html]] 22 +* [[Beispielsammlung zur Erstellung von JSXGraph-Objekten>>https://jsxgraph.org/share/]] 19 19 {{/panel}} 20 20 {{/column}} 21 21 {{/section}} ... ... @@ -22,17 +22,17 @@ 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 [[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.29 +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 [[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. 31 +Ö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 29 29 [[image:Editor - JSX im Tiny_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] 30 30 31 -Es öffnet sich ein Dialog zum Bearbeiten des JSX-Objektes. Darin enthalten ist bereits der JavaScript-Code für ein JSX-Beispielobjekt.35 +Es öffnet sich ein Dialog zum Bearbeiten des JSXGraph-Objektes. Darin enthalten ist bereits der JavaScript-Code für ein Beispielobjekt. 32 32 33 33 [[image:Editor - JSX Dialog geöffnet_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] 34 34 35 -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. uni-bayreuth.de/wp/index.html]].39 +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]] 36 36 37 37 Mit Klick auf den Button Fertig wird das Objekt eingefügt. 38 38 ... ... @@ -43,17 +43,22 @@ 43 43 [[image:Editor - Aufgabenstellung mit JSX-Objekt_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] 44 44 45 45 50 +=== Variablenwerte an JSX-Objekte übergeben === 46 46 47 - ==Beispielaufgaben mit JSXGraph-Objekten==52 +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:Autorenbereich.AutorONYX2.01 ONYX Logseiten.Log_JSX-Graph Objekte.JSXGraph Objekte nutzen.Beispiele zur Nutzung von JSX-Graph Objekten.Beispiel Punkte im Koordinatensystem.WebHome]] 48 48 49 - EinigeBeispielaufgabenundderenErstellungrdauf folgendenSeitenerläutert:54 +[[image:Editor - Variablenwerte im JSXCode_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] 50 50 51 -* [[Beispielaufgabe Punkte im Koordinatensystem>>doc:Autorenbereich.AutorONYX2.01 ONYX Logseiten.Log_JSX-Graph Objekte.JSXGraph Objekte nutzen.Beispiele zur Nutzung von JSX-Graph Objekten.Beispiel Punkte im Koordinatensystem.WebHome]] 52 -* [[Beispielaufgabe Schnittpunkt x-Achse>>doc:.Beispielaufgabe Schnittpunkt x-Achse.WebHome]] 53 -* [[Beispielaufgabe Schnittpunkt x-Achse II>>doc:Autorenbereich.AutorONYX2.01 ONYX Logseiten.Log_JSX-Graph Objekte.JSXGraph Objekte nutzen.Beispiele zur Nutzung von JSX-Graph Objekten.Beispielaufgabe Schnittpunkt x-Achse II.WebHome]] 56 +=== Lernerantworten mit JSXGraph-Objekten nutzen === 54 54 55 - ==Interaktivität des JSXGraph-Objekt ausprobieren==58 +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]] 56 56 60 +[[image:Editor - Lücke in JSXCode_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] [[image:Editor - JSX an Lücke_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] 61 + 62 + 63 + 64 +== Vorschau zum JSXGraph-Objekt == 65 + 57 57 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. 58 58 59 59
- Editor - JSX an Lücke_de.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.carina - Size
-
... ... @@ -1,0 +1,1 @@ 1 +103.2 KB - Content
- Editor - Lücke in JSXCode_de.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.carina - Size
-
... ... @@ -1,0 +1,1 @@ 1 +86.2 KB - Content
- Editor - Variablenwerte im JSXCode_de.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.carina - Size
-
... ... @@ -1,0 +1,1 @@ 1 +59.1 KB - Content