Skip to Content

Wiki source code of 05 Medien einbinden

Last modified by Carina Enke on 13.11.2024
Show last authors
1 {{section}}
2 {{column width="60%"}}
3 The ONYX Testsuite provides extensive media support. Besides, all question content can be formatted 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 configure settings for font, font size, and other test and font designs. For example, content in the question text, answer alternatives, 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 == Graphics and images ==
22
23 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 (((
28 You can add images in the HTML editor using the function [[image:ONYX._Include Library.Onyx Icons und Buttons.WebHome@Icon_Bilder einfügen.png||data-xwiki-image-style="img-icon" height="32" width="33"]] (insert/edit image). This will open the "Edit image" dialogue. In the dialogue, an image resource can be selected and necessary settings for the display of the selected resource can be configured.
29
30 [[image:attach:Editor - Dialog Bild einfügen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
31
32 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 dialogue also shows a preview of the selected image.
33
34 Confirm your entries with **OK**. The inserted image will be directly displayed in the HTML editor and in the preview.
35
36 == Audio ==
37
38 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. In the "Insert audio file" dialogue, you can select the desired audio file with **Browse** and **Upload**. Once you have added the audio file, you can choose in the dialogue how the audio files should be integrated into your test content.
39
40 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"]].
41
42 [[image:attach:Testansicht - Aufgabe mit Audio.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="299" width="443"]]
43
44 == Video ==
45
46 Videos can be integrated or embedded as a reference.
47
48 For performance reasons, the direct integration of videos is not recommended, especially for large test scenarios. Instead, reference videos from a public or private video streaming system (e. g. YouTube, Magma).
49
50 === Referencing videos with YouTube ===
51
52 YouTube provides a simple function to embed videos in other websites. This embedding function can also be used to integrate videos into ONYX.
53
54 [[image:attach:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.Video einbinden.WebHome@Youtube - Video einbetten_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
55
56 Videos can be integrated into all test and question components (e. g. question texts, answer elements, and feedback). To integrate a video, copy the displayed iframe link to your test content. In the ONYX Editor, switch to the source code view, e. g. of the question text, 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"]](%%) and add the iframe link from the clipboard.
57
58 [[image:attach:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.Video einbinden.WebHome@Editor - Quellcodeansicht der Aufgabe öffnen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
59
60 [[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"]]
61
62 Confirm with **OK** to close the source code window and integrate the video into the content.
63
64 [[image:attach:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.Video einbinden.WebHome@Editor - Aufgabenstellung mit eingebettetem Video.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
65
66 Use the preview function to test the content.
67
68 [[image:attach:ONYX.Erstellung von Testinhalten.Aufgaben.Medien einbinden.Video einbinden.WebHome@Testvorschau - Beispielaufgabe mit eingebettetem Video.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
69 )))