Template elearn.js

Name des Autors
Institution des Autors
cc by-sa | 2015

Titelbild

Inhaltsverzeichnis

Überschrift 2. Ordnung

Dies ist nur eine Template-Datei. Eine Erklärung und Dokumentation finden Sie im Whitepaper „Digitale Skripte“.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Überschrift dritter Ordung

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Und hier ist die vierte Ordnung

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Wenn man noch eine fünfte Ebene braucht

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Bilder

Bilder können als einzelne Abbildungen oder als Galerien eingebunden werden. Für die Galerien wird das elearn.js benötigt. es bietet verschiedene Varianten. Das erste Beispiel zeigt eine Slideshow mit Vorschau und Loop-Funktion.

Die Galerie kann mit oder ohne Vorschaubilder sowie mit oder ohne Loop genutzt werden. Hierzu existieren verschiedene Klassen, die dem Slider zugeordnet werden können. Das sieht folgendermaßen aus:

  • <div class="slider"> ist ohne Vorschau und ohne Loop
  • <div class="slider preview-nav"> ist mit Vorschaubildern und ohne Loop
  • <div class="slider preview-nav loop"> ist mit Vorschaubildern und mit Loop

Die Höhe der Gaalerie kann vorgegeben werden, damit der Content unter der Galerie nicht springt. Dies geht in Abhängigkeit des größten Bildes oder einer vorgegebenen maximalen Höhe. Dies wird durch die Klasse des umschließenden ul-Elements definiert.

  • <ul class="img-gallery"> ist eine Galerie mit unterschiedlicher Bilderhöhe.
  • <ul class="img-gallery fixed-size"> ist eine Galerie mit der Höhe des größten Bildes.
  • <ul class="img-gallery fixed-size" style="max-height: 400px"> ist eine Galerie mit der Höhe von 400px.

Medieneinbindung

Hier sollen vor allem Video und Audio-Einbindung demonstriert werden. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Videos als Asset

Hier wird ein Video eingebunden, welches sich direkt im Asset-Ordner des Skrips befindet. Diese Lösung ist nur für relativ kurze Videos empfehlenswert (max. fünf Minuten).

Videos von einem Streaming Server

Hier ist ein Video von eineme Streamin-Server als iFrame eingebunden.

Audio-Files

Da Audio-Dateien als mp3s in der Regel nicht so groß sind, dass ein Streaming-Server benötigt wird, können diese aus dem Assets-Ordner progressiv als Download eingebunden wrden. Hier ein Beispiel:

Mathematische Formeln

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Formeldarstellung via MathJax

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

\(M = \begin{bmatrix} \frac{5}{6} & \frac{1}{6} & 0 \\[0.3em] \frac{5}{6} & 0 & \frac{1}{6} \\[0.3em] 0 & \frac{5}{6} & \frac{1}{6} \end{bmatrix} \)

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

\(P\left(A=2\middle|\frac{A^2}{B}>4\right)\)

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur

Textblöcke

Informationen per Mouseover/Klick

Bei solchen Blöcken werden zusätzliche
Informationen
Zusätzliche Informationen sind in den meisten Fällen Texte. Es könnten theoretisch aber auch Bilder eingefügt werden.
angezeigt, wenn man mit der Maus hinüber geht oder bei Touch-Geräten darauf klickt. Dazu wird in einem div.hover-info zunächst der markierte Bereich angegeben. In einem zusätzlichen div direkt dahinter können darauf hin die weiterführenden Informationen angezeigt werden.

Ausklappbare Bereiche

Der folgende Block ist mit einem Knopf aus- und einklappbar.

Hier steht ein Beispieltext.

Das entscheidende hierbei sind die Attribute.
Dabei wird dem ganzen ein name gegeben, der in dem Knopf immer eingesetzt wird. Zustäzlich werden die Wörter für show und hide angegeben. So kann man hier auch bspw. andere Sprachen verwenden.

Multiboxes

Der folgende Block besteht aus mehreren Boxen, zwischen denen man wählen kann.

Dieser Block wird unter dem deutschen Tab angezeigt.
This block will be visible when english is selected.

Hier wird ein umschließendes div.tabbed-box erstellt. Innerhalb dieses Blocks können dann beliebig viele div.tab erstellt werden, die jeweils einen name haben unter dem der Tab ausgewählt werden kann. Innerhalb eines jeden div.tab kann dann alles beliebig verändert werden.

Quizfragen

Auf dieser Seite sind einige Quiz-Fragen Beispielhaft dargestellt.

Auf welcher Technologie basieren die digitalen Skripte?

4c4ad5fca2e7a3f74dbb1ced00381aa4 2182a74bab7188d959e795d9301e87ff 590fc197fe73db0aa2ec03687a372eea 686155af75a60a0f6e9d80c1f7edd3e9 fc35fdc70d5fc69d269883a822c7a53e 65e232ed43477b2f5cb4413023548fce 644e5bfeb12517406338d351c4375248

Welche Unterordner werden in der Dateistruktur von digitalen Skripten erwartet?

b5ceb729a1b347aa357790e1588c88b3 1fd302a9c89fc92eead418857a7e5a07 4fc364339b2127eb81c13ab986a27085

Es existieren auch noch andere Fragetypen, diese sind in der Dokumentation vom quiz.js beschrieben. Beispiele sind hier zu finden: Link.

Literatur

Adapt learning community. (o. J.). Abgerufen 11. September 2015, von https://community.adaptlearning.org

H5P – Create, share and reuse interactive HTML5 content in your browser. (o. J.). Abgerufen 11. September 2015, von https://h5p.org

The Ultimate List of HTML5 eLearning Authoring Tools. (o. J.). Abgerufen von http://elearningindustry.com/the-ultimate-list-of-html5-elearning-authoring-tools

Wenz, C. (2014). JavaScript: das umfassende Handbuch  (11. Aufl). Bonn: Galileo Press.

Zillgens, C. (2013). Responsive Webdesign: reaktionsfähige Websites gestalten und umsetzen. München: Hanser.