JSXGraph-Objekte einbinden

[[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"]]

* [[3D-Objekte einbinden>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.3D-Objekte einbinden.WebHome]]

* [[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/]]

== 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

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

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"]]

== 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.

== 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.

== 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.

== 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"]] .

Wiki-Quellcode von JSXGraph-Objekte einbinden

Suchen

ONYXGlobal

ONYXMenü

author	version	line-number	content
		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-Objekte 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"]] .