Wiki source code of JSXGraph-Objekte einbinden
Last modified by Anna Paul-Hasenfuss on 10.05.2025
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
1.1 | 1 | {{section}} |
| 2 | {{column width="60%"}} | ||
 |
56.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 supports the integration of JSXGraph objects. |
| |
3.3 | 4 | |
| |
56.1 | 5 | JSXGraph is a JavaScript library that allows you the creation of interactive mathematical graphs and diagrams on the web. JSXGraph objects are the backbone of visualizations and can take various forms such as points, lines, circles and graphs of functions. Integrating JSXGraph objects supports a variety of mathematical and geometric constructions and facilitates the visualization of complex mathematical concepts. |
| |
16.1 | 6 | |
| |
23.1 | 7 | [[image:Beispiel - Vorschau der Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true"]] |
| |
16.1 | 8 | |
| 9 | |||
| |
1.1 | 10 | {{/column}} |
| 11 | |||
| 12 | {{column width="30%"}} | ||
| |
56.1 | 13 | {{panel title="Content"}} |
| |
1.1 | 14 | {{toc start="2"/}} |
| 15 | {{/panel}} | ||
| 16 | |||
| |
56.1 | 17 | {{panel title="Related Topics"}} |
| 18 | * [[Integrating 3D Objects>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.3D-Objekte einbinden.WebHome]] | ||
| |
1.1 | 19 | {{/panel}} |
| 20 | |||
| |
56.1 | 21 | {{panel title="Further Content"}} |
| 22 | * [[Onyx: How JSXGraph objects can be used - examples>>doc:.Beispiele zur Nutzung von JSX-Graph Objekten.WebHome]] | ||
| 23 | * [[Reference page for the JSXGraph library (jsxgraph.org)>>https://jsxgraph.org/wp/index.html]] | ||
| 24 | * [[Sample collection for creating JSXGraph objects (jsxgraph.org)>>https://jsxgraph.org/share/]] | ||
| |
1.1 | 25 | {{/panel}} |
| 26 | {{/column}} | ||
| 27 | {{/section}} | ||
| 28 | |||
| |
56.1 | 29 | == How to integrate JSXGraph objects in the editor == |
| |
2.1 | 30 | |
| |
56.1 | 31 | You can include JSXGraph objects in all areas where the HTML editor is available and the icon [[image:Icon_JSX.png]] is visible. |
| |
3.3 | 32 | |
| |
56.1 | 33 | (% id="cke_bm_34921S" style="display:none" %) |
| |
3.3 | 34 | |
| |
56.1 | 35 | To do this, open the task or test in which you want to add a JSXGraph object and click on [[image:Icon_JSX.png]] in the header of the HTML editor. |
| 36 | |||
| |
7.1 | 37 | [[image:Editor - JSX im Tiny_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] |
| |
5.1 | 38 | |
| |
56.1 | 39 | A dialog for editing the JSXGraph object opens, which already contains the JavaScript code for a sample object. |
| |
5.1 | 40 | |
| |
7.1 | 41 | [[image:Editor - JSX Dialog geöffnet_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] |
| |
5.1 | 42 | |
| |
56.1 | 43 | Replace this content with your own JSX code. If you need more information on creating JSXGraph objects, visit [[JSXGraph Projects>>https://jsxgraph.org/wp/index.html]] or check some examples that can be found here [[How JSXGraph objects can be used - examples.>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.Beispiele zur Nutzung von JSX-Graph Objekten.WebHome]] |
| |
5.1 | 44 | |
| |
32.1 | 45 | {{info}} |
| |
56.1 | 46 | If you use the codes from the [[JSXGraph Projects>>https://jsxgraph.org/share/]] examples, rename the placeholders such as "BOARDID", and use "JSX_CONTAINER_ID" instead. |
| |
32.1 | 47 | {{/info}} |
| 48 | |||
| |
56.1 | 49 | Once you click on the Finish button, you insert the object. |
| |
5.1 | 50 | |
| |
7.1 | 51 | [[image:Editor - JSX Objekt speichern_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] |
| |
5.1 | 52 | |
| |
56.1 | 53 | All inserted JSXGraph objects are marked with the [[image:Icon_JSX.png]] icon in the HTML editor. |
| |
5.1 | 54 | |
| |
7.1 | 55 | [[image:Editor - Aufgabenstellung mit JSX-Objekt_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] |
| |
5.1 | 56 | |
| 57 | |||
| |
56.1 | 58 | === How to transfer variable values to JSXGraph objects === |
| |
5.1 | 59 | |
| |
56.1 | 60 | Onyx variables can be passed to JSXGraph objects. You can do this by using the variable name in the JavaScript code of the JSXGraph object. The [[Task example - Points in a coordinate system>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.Beispiele zur Nutzung von JSX-Graph Objekten.Beispiel Punkte im Koordinatensystem.WebHome]] shows a simple way to do this. |
| |
5.1 | 61 | |
| |
40.1 | 62 | [[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"]] |
| |
5.1 | 63 | |
| |
56.1 | 64 | === How to use learner responses with JSXGraph objects === |
| |
5.1 | 65 | |
| |
56.1 | 66 | You can also use JSXGraph objects to display learner responses in object gaps or to evaluate user actions in the JSXGraph object, such as marking a point, as learner responses to a gap. Instructions for the implementation can be found in the following examples: [[Task example: Intersection x-axis>>doc:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.JSXGraph Objekte nutzen.Beispiele zur Nutzung von JSX-Graph Objekten.Beispielaufgabe Schnittpunkt x-Achse.WebHome]] and [[Example task: Intersection x-axis 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]]. |
| |
15.1 | 67 | |
| |
19.1 | 68 | [[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"]] |
| |
15.1 | 69 | |
| |
3.3 | 70 | |
| |
56.1 | 71 | == JSXGraph object preview == |
| |
18.1 | 72 | |
| |
56.1 | 73 | A detailed preview with all possible additional media content is available by opening the preview of the created task or test. |
| |
16.1 | 74 | |
| |
3.3 | 75 | |
| |
56.1 | 76 | == How to edit an existing JSXGraph object == |
| |
9.2 | 77 | |
| |
56.1 | 78 | You can edit an already integrated JSXGraph object as follows: |
| |
9.2 | 79 | |
| |
56.1 | 80 | Open the relevant task in the editor. Now, click on the[[image:Icon_JSX.png]] icon for the JSXGraph object in the editor field, and then select the [[image:Icon_JSX.png]]button in the editing options. |
| |
3.3 | 81 | |
| 82 | |||
| |
7.1 | 83 | [[image:Editor - JSX Objekt bearbeiten_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] |
| |
5.1 | 84 | |
| |
56.1 | 85 | This opens the "Edit JSX" dialogue to make your adjustments. Click on "Finish" to save and apply the changes. |
| |
7.1 | 86 | |
| |
9.2 | 87 | |
| 88 | |||
| |
56.1 | 89 | == JSXGraph objects in a PDF document == |
| |
3.3 | 90 | |
| |
56.1 | 91 | Please note that a JSXGraph element cannot be displayed in a PDF document. In its place, you will find a standard icon. |
| |
3.3 | 92 | |
| |
9.2 | 93 | |
| 94 | |||
| |
56.1 | 95 | == JSXGraph objects in evaluation views == |
| |
3.3 | 96 | |
| |
56.1 | 97 | The evaluation documents of a learner's test attempt show the individual JSXGraph objects. However, the JSXGraph element cannot be displayed in the statistical analysis. In its place, you will find a standard icon [[image:Icon_JSX.png]]. |