Name des Autors
Institution des Autors
cc by-sa | 2015
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.
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.
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.
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.
Die Sprache des elearn.js lässt sich anpassen.
Hierzu kann man beliebigen Elementen das Attribut lang ergänzen, was
hauptsächlich für das quiz.js interessant sein könnte. Möglich ist aber auch
<html lang="de"> zu verwenden, um so die Sprache für das gesamte Dokument
einzustellen. Dies muss jedoch vor dem Laden der Seite bereits geschehen sein.
Ansonsten lässt sich die Sprache mit eLearnJS.setLanguage("de") auf Deutsch
und mit eLearnJS.setLanguage("en") interaktiv auf Englisch stellen.
Beispiel:
Deutsch/German Englisch/English
Um eigene Übersetzungen hinzuzufügen kann man die Funktion addTranslation oder
addTranslations verwenden. Hier ein Beispiel:
eLearnJS.addTranslation("de", { "loading": "Lädt..." });
eLearnJS.addTranslation("en", { "loading": "Loading..." });
oder
eLearnJS.addTranslations({
"de": { "loading": "Lädt..." },
"en": { "loading": "Loading..." },
});
Beide Blöcke tun dasselbe.
<script> eLearnJS.addTranslation("de", { "loading": "Lädt..." }); eLearnJS.addTranslation("en", { "loading": "Loading..." }); </script>Beispiel mit Anzeige (nur während des Ladevorgangs):
Deutsch/German Englisch/English
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.
Markdown ist kinderleicht zu erlernen.
Zusammenspiel der Komponenten bei der Produktion von digitalen Skripten mit Markdown.
Die Zukunft von Markdown als Autorensprache.
Markdown kann viele verschiedene Medientypen in Html einfügen.
Versuche auch mal, ein Markdown-Dokument zu erstellen. Ist gar nicht schwer!
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 Galerie 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.
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.
Hier wird ein Video eingebunden, welches sich direkt im Asset-Ordner des Skripts befindet. Diese Lösung ist nur für relativ kurze Videos empfehlenswert (max. fünf Minuten). Zusätzlich enthält das Video Anmerkungen, die unter dem Video angezeigt werden. Diese sind durch die Erweiterung elearnvideo.js möglich.
Hier ist ein Video von einem Streaming-Server als iFrame eingebunden.
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 werden. Hier ein Beispiel:
Mathematische Formeln finden in vielen Texten Verwendung, können aber nicht immer vernünftig dargestellt werden.
MathJax kann genutzt werden, um mathematische Formeln darzustellen. Hierzu wird die LaTeX Syntax verwendet. Es existieren Blockformeln wie diese
und auch Inline-Formeln wie \\$ anstatt des einfachen $ Symbols, für jedes einzelne
anzuzeigende Zeichen, um durch das \\ in der Ausgabe ein \ zu erzeugen,
welches MathJax wiederum als escape für das darauffolgende $ sieht.
Weitere Formeln wie \ verwendet werden,
da das Zeichen für den ersten Schritt der Bearbeitung des Codes gedacht ist
und selbst nicht im HTML Code auftauchen soll.
Es existieren verschieden Blöcke, welche bestimmten Text hervorheben können.
Überschrift
Dies ist ein Aufgabenblock.
Überschrift
Dies ist ein Hinweisblock.
Überschrift
Dies ist ein Block für Links.
Bei solchen Blöcken werden zusätzliche
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. Diese können auch eine bestimmte maximale
data-width="80%" auf 80% der verfügbaren Breite
festgelegt. Ab einer Fensterbreite von 440px
(data-full-width="440", immer in px) wird automatisch die volle Breite verwendet.
füllen, wenn man die Klasse full ergänzt. Die data-width kann in % und px angegeben werden.
Der folgende Block ist mit einem Knopf aus- und einklappbar.
Das entscheidende hierbei sind die Attribute. Dabei wird dem ganzen ein name gegeben, der in dem Knopf immer eingesetzt wird. Zusätzlich werden die Wörter für show und hide angegeben. So kann man hier auch bspw. andere Sprachen verwenden. Es ist auch möglich das Feld name wegzulassen und nur show und hide zu verwenden.
Der folgende Block besteht aus mehreren Boxen, zwischen denen man wählen kann.
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.
Auf dieser Seite sind einige Quiz-Fragen Beispielhaft dargestellt. Diese Quizfragen benötigen das quiz.js.
Es existieren auch noch andere Fragetypen, diese sind in der Dokumentation vom quiz.js beschrieben.
Mit der Erweiterung clickImage.js ist es möglich, interaktive Grafiken zu erstellen. Hier ein Beispiel:
Wie jedes Insekt hat auch eine Biene insgesamt 6 Beine. Die Biene benutzt ihre Beine nicht nur zum Laufen, sondern auch zur Körperpflege und beim Transport der Pollen zum Stock. Jedes Bein ist in fünf Glieder unterteilt. Vom Körper aus betrachtet nennt man sie Hüfte (Coxa), Schenkelring (Trochanter), Schenkel (Femur), Schiene (Tibia) und Fuß (Tarsus). Der Fuß ist wiederum in 4 kleinere Glieder unterteilt. Das letzte Fußglied trägt eine Kralle und Haftlappen, mit denen sich Bienen auch auf sehr glatten Oberflächen, wie zum Beispiel Glas festhalten können.
Hinweis
Wie jedes Insekt hat auch eine Biene insgesamt 6 Beine. Die Biene benutzt ihre Beine nicht nur zum Laufen, sondern auch zur Körperpflege und beim Transport der Pollen zum Stock.
- https://de.wikipedia.org/wiki/The_Bird_and_the_Bee
Dies ist eine Link-Beschreibung, die weitere Informationen zu der zugehörigen URL liefert- https://de.wikipedia.org/wiki/The_Bird_and_the_Bee
Dies ist eine Link-Beschreibung, die weitere Informationen zu der zugehörigen URL liefert
Wie jedes Insekt hat auch eine Biene insgesamt 6 Beine. Die Biene benutzt ihre Beine nicht nur zum Laufen, sondern auch zur Körperpflege und beim Transport der Pollen zum Stock. Jedes Bein ist in fünf Glieder unterteilt. Vom Körper aus betrachtet nennt man sie Hüfte (Coxa), Schenkelring (Trochanter), Schenkel (Femur), Schiene (Tibia) und Fuß (Tarsus). Der Fuß ist wiederum in 4 kleinere Glieder unterteilt. Das letzte Fußglied trägt eine Kralle und Haftlappen, mit denen sich Bienen auch auf sehr glatten Oberflächen, wie zum Beispiel Glas festhalten können.
Als Schiffsmast bezeichnet man einen ganz oder annähernd vertikal auf Schiffen aufgestellten Mast aus Holz, Metall oder anderen festen Materialien.
Wie jedes Insekt hat auch eine Biene insgesamt 6 Beine. Die Biene benutzt ihre Beine nicht nur zum Laufen, sondern auch zur Körperpflege und beim Transport der Pollen zum Stock. Jedes Bein ist in fünf Glieder unterteilt. Vom Körper aus betrachtet nennt man sie Hüfte (Coxa), Schenkelring (Trochanter), Schenkel (Femur), Schiene (Tibia) und Fuß (Tarsus). Der Fuß ist wiederum in 4 kleinere Glieder unterteilt. Das letzte Fußglied trägt eine Kralle und Haftlappen, mit denen sich Bienen auch auf sehr glatten Oberflächen, wie zum Beispiel Glas festhalten können.
Die Erweiterung timeSlider.js erlaubt es, Zeitleisten zu erstellen, um sich so interaktiv über zeitlich aufgelistete Informationen zu arbeiten.
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.
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.
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.