Skip to Content

Wiki source code of 05 Medien einbinden

Last modified by Anna Paul-Hasenfuss on 06.04.2025
Show last authors
1 {{section}}
2 {{column width="60%"}}
3 The ONYX Testsuite provides extensive media support plus the option of formatting all task content in HTML (IMS QTI only offers a restricted HTML subset). The following overview shows which types of media and formats are supported.
4 {{/column}}
5
6 {{column width="30%"}}
7 {{panel title="Content"}}
8 {{toc start="2" depth="2"/}}
9 {{/panel}}
10 {{/column}}
11 {{/section}}
12
13 == HTML editor ==
14
15 The ONYX Editor provides a WYSIWYG HTML editor for all author inputs, using the established system component [[TinyMCE>>url:https://www.tinymce.com/||shape="rect"]]. The built-in editor allows you to adjust the font, font size, and other test and font settings. This means that text in the task content, answer options or feedback can be highlighted in bold or italics, arranged in tables or formatted in a list.
16
17 [[image:attach:Editor - Aufgabe editieren_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="141" width="358"]]
18
19 With (% class="confluence-embedded-file-wrapper confluence-embedded-file-wrapper confluence-embedded-manual-size confluence-embedded-manual-size" %)[[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_HTML Ansicht öffnen.png||data-xwiki-image-style="img-icon" height="29" width="33"]](%%), you can edit content directly in an HTML view, where you can also use other markup languages.
20
21 == Ggraphics and images ==
22
23 You can add images in the HTML editor using the function [[image:Icon_Bilder%20einf%C3%BCgen.png]] (insert/edit image). In the opened dialogue, you can select an image resource and make the necessary settings for the display. All common image formats (JPEG / JPG, GIF, PNG) and vector graphics (SVG) are supported.
24
25 [[image:attach:Testansicht - Bilder in einer Aufgabe_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="407" width="356"]]
26
27 [[image:Editor - Aufgabenstellung mit Bild_de.png||alt="Aufgabenstellung mit Bild_de.png" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
28
29 (((
30 Click on "Browse" to upload an image (1). Enter an alternative text to be displayed if the image cannot or should not be loaded (2). The alternative text is an important criterion for barrier-free content. Images can be easily adjusted in size by specifying the dimensions (width/height) (3). The selected image can be previewed in the dialogue.
31
32 [[image:attach:Editor - Dialog Bild einfügen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
33
34 Confirm your entries with **OK**. The inserted image will be directly displayed in the HTML editor and in the preview.
35
36 == ==
37
38 == Audio ==
39
40 Audio can be added in the HTML editor using the function (% class="confluence-embedded-file-wrapper confluence-embedded-file-wrapper confluence-embedded-manual-size confluence-embedded-manual-size" %)[[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_Audio einfügen.png||data-xwiki-image-style="img-icon" height="26" width="27"]](%%) (insert audio). You can decide how the audio should be integrated into your test content.
41
42 The ONYX Testsuite is completely based on **HTML5**. Audio integration is therefore possible via the HTML5 audio tag and with the appropriate browser support. Most modern browsers (Firefox, Chrome) support the most common audio formats (MP3, Ogg, Wav). For more information on browser support, see for example the research conducted by [[W3Schools>>url:https://www.w3schools.com/html/html5_audio.asp||shape="rect"]].
43
44 [[image:Testansicht - Aufgabe mit Audio_de.png||alt="Aufgabe mit Audio_de.png" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
45
46 [[image:Editor - Audio einfügen_de.png||alt="Audio einfügen_de.png" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
47
48 In the "Insert audio file" dialogue, you can select the desired audio file with **Browse** and **Upload**.
49
50 [[image:Editor - Dialog Audio einfügen_de.png||alt="Audio einfügen_de.png" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
51
52 Confirm your entries with “Finished”. The inserted audio will be directly displayed in the HTML editor and in the preview.
53
54 == ==
55
56 == Referencing Videos ==
57
58 Videos can be integrated into all tests and tasks (e.g. questions, answer elements, feedback) or used as a reference. Due to performance considerations, we do not recommend the direct integration of videos, especially for large test scenarios. For further information, refer to [[Videos einbinden>>url:https://help.bps-system.de/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Aufgaben/Medien%20einbinden/Video%20einbinden/]].
59
60
61 [[image:Editor%20-%20Aufgabenstellung%20mit%20eingebettetem%20Video.png]]
62 [[image:attach:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.Video einbinden.WebHome@Editor - Beispielquellcode einer Aufgabe.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
63
64
65
66 == How to integrate 3D objects ==
67
68 You can integrate interactive 3D models into all tests and tasks. This is possible thanks to the integration of [[x3dom>>url:https://www.x3dom.org/]], an XML-based description language. You can use this function in the HTML editor as well. Check the following page [[Integrating 3D Objects>>url:https://help.bps-system.de/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Aufgaben/Medien%20einbinden/3D-Objekte%20einbinden/]].
69
70 [[image:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.3D-Objekte einbinden.WebHome@Editor - 3D Objekt bewegen_de.png||alt="3D Objekt bewegen_de.png" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
71
72 [[image:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.3D-Objekte einbinden.WebHome@Editor - 3D Objekt einfügen_de.png||alt="3D Objekt einfügen_de.png" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
73
74
75 == How to integrate JSXGraph objects ==
76
77 JSXGraph is a JavaScript library for creating interactive mathematical graphics and diagrams on the web. There is also a function for integrating JSXGraph objects in the HTML editor available. Further information and some examples can be found here [[How to integrate JSXGraph objects>>url:https://help.bps-system.de/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Aufgaben/Medien%20einbinden/JSXGraph%20Objekte%20nutzen/]] and [[How JSXGraph objects can be used.>>url:https://help.bps-system.de/wiki/bin/view/ONYX/Erstellung%20von%20Testinhalten/Aufgaben/Medien%20einbinden/JSXGraph%20Objekte%20nutzen/Beispiele%20zur%20Nutzung%20von%20JSX-Graph%20Objekten/]]
78
79
80
81
82 )))