forked from elb-min-uhh/elearn.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
560 lines (509 loc) · 37.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Key, Words">
<meta name="description" content="Hier Beschreibung einfügen">
<meta name="author" content="Name Autor">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="assets/css/elearn.css">
<script type="text/javascript" src="assets/js/min.js"></script> <!-- von UHH verwendetes JQuery -->
<script type="text/javascript" src="assets/js/elearn.js"></script> <!-- eLearn.js -->
<!--
Diese Erweiterungen finden sie in den jeweiligen Repositories.
Die Repositories sind in den zugehörigen Abschnitten verlinkt.
-->
<!-- quiz.js https://github.com/elb-min-uhh/quiz.js-->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/elb-min-uhh/quiz.js/6d4885b0/assets/css/quiz.css">
<script type="text/javascript" src="https://cdn.rawgit.com/elb-min-uhh/quiz.js/6d4885b0/assets/js/quiz.js"></script>
<!-- elearnvideo.js https://github.com/elb-min-uhh/elearnvideo.js-->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/elb-min-uhh/elearnvideo.js/b744f7f8/assets/css/elearnvideo.css">
<script type="text/javascript" src="https://cdn.rawgit.com/elb-min-uhh/elearnvideo.js/b744f7f8/assets/js/elearnvideo.js"></script>
<!-- clickimage.js https://github.com/elb-min-uhh/clickimage.js-->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/elb-min-uhh/clickimage.js/3f54e6de/assets/css/clickimage.css">
<script type="text/javascript" src="https://cdn.rawgit.com/elb-min-uhh/clickimage.js/3f54e6de/assets/js/clickimage.js"></script>
<!-- timeslider.js https://github.com/elb-min-uhh/timeslider.js-->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/elb-min-uhh/timeslider.js/master/assets/css/timeslider.css">
<script type="text/javascript" src="https://cdn.rawgit.com/elb-min-uhh/timeslider.js/master/assets/js/moment.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/elb-min-uhh/timeslider.js/master/assets/js/timeslider.js"></script>
<script>
window.onload = function() {
// Erweiterungen hier einfügen
// Ende der Erweiterungen
/* Mögliche Erweiterungen
Alle nachfolgenden Erweiterungen sind 'auskommentiert'.
Das bedeutet, sie haben keine Funktion solange sie innerhalb
des /* ... * / Blocks sind. (Abschluss ohne Leerzeichen zwischen * und /)
Möchte man also etwas einbauen/nutzen, muss die jeweilige Zeile
außerhalb des Kommentarblocks stehen.
Jeder Befehl endet mit einem ';'. Alles hinter den // ist
ein weiterer erklärender Kommentar.
eLearnJS.setLanguage("en"); // selects English as language
eLearnJS.toggleAllSections(); // Zeigt alle Sections an
eLearnJS.setNavigationTitle("Überschrift"); // Die Überschrift, wenn alle Sections sichtbar sind
// Folgendes fügt einen zusätzlichen Knopf in der Navigationsleiste ein
// Eine beispielhafte Verwendung ist in quiz-types.html zu finden.
// Auf die quiz-types.html wird auch hier in der section "Quiz" verwiesen.
eLearnJS.setBackButtonEnabled(true); // Zurück button im Header aktivieren
eLearnJS.setBackButtonText("Übersicht"); // "Übersicht" als Text, statt "Zurück" für den Button
// Beispiele für BackPages (Was geöffnet wird beim Back button):
// Der erste Parameter entspricht dem jeweiligen Ziel
// der zweite Parameter gibt die Art des Ziels an.
// Bei "index" wird der erste Parameter als Index einer
// Section erkannt. "name" wäre der Name einer Section.
// "link" funktioniert wie ein href link eines <a>
eLearnJS.setBackPage(2, "index"); // Die 3. section
eLearnJS.setBackPage("Inhaltsverzeichnis", "name"); // Die section mit name="Inhaltsverzeichnis"
eLearnJS.setBackPage("../", "link"); // Im Pfad einen Schritt zurück
eLearnJS.setBackPage("http://google.de", "link"); // Google wird geöffnet
eLearnJS.generalDirectionButtonsEnabled(false); // keine Nav. Buttons
eLearnJS.setKeyNavigationEnabled(false); // keine Tastaturnavigation
eLearnJS.generalProgressbarEnabled(false); // keine Fortschrittsleiste
*/
}
</script>
<title>elearn.js Template</title>
</head>
<body>
<!-- #wrap muss bleiben, sonst funktioniert eLearn.js nicht -->
<div id="wrap">
<!-- Page Info -->
<div class="lb-wrap" id="info">
<div class="lightbox">
<div class="info-wrapper">
<!--Der Inhalt der Info-Box kann frei mit html-Inhalt gefüllt werden. -->
<h4>elearn.js Template</h4>
<p>
Prof. Dr. Name des Autors<br>
Universität Hamburg
<p>
<p>
<small>
Das <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">elearn.js Template</span>
von <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Universität Hamburg</span>
ist lizenziert unter einer <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
Creative Commons Namensnennung</a> - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz
</small>
</p>
</div>
</div>
</div>
<div class="page">
<!--Hier den Markdown-Export einfügen-->
<section name="Template Titel" class="hide-in-overview">
<h1>Template elearn.js</h1>
<p><strong>Name des Autors</strong><br>
Institution des Autors<br>
cc by-sa | 2015</p>
<p><img src="assets/img/template-media/illu-concept.png" alt="Titelbild"></p>
</section>
<section name="Inhaltsverzeichnis" class="hide-in-overview">
<h2>Inhaltsverzeichnis</h2>
<!-- Zusatz class="kachel" ändert die Darstellung -->
<!-- Zusatz class="hide-read" verhindert die Anzeige gelesener Sections -->
<div id="content-overview" class="kachel">
<!--
Hier wird automatisch ein Inhaltsverzeichnis
eingefügt, wenn das div#content-overview vorhanden
ist.
-->
</div>
</section>
<section name="Textebenen" desc="Beispielbeschreibung für einen <b>kleinen</b> Textblock. Sollte nicht zu lang sein.">
<h2>Überschrift 2. Ordnung</h2>
<blockquote>
<p>Dies ist nur eine Template-Datei. Eine Erklärung und Dokumentation finden Sie im <a href="http://www.sumo.uni-hamburg.de/DigitaleSkripte/">Whitepaper „Digitale Skripte“</a>.</p>
</blockquote>
<p>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.</p>
<h3>Überschrift dritter Ordung</h3>
<p>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.</p>
<h4>Und hier ist die vierte Ordnung</h4>
<p>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.</p>
<h5>Wenn man noch eine fünfte Ebene braucht</h5>
<p>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.</p>
</section>
<section name="Sprache"><h3 id="sprache">Sprache</h3>
<p>Die Sprache des <em>elearn.js</em> lässt sich anpassen.
Hierzu kann man beliebigen Elementen das Attribut <code>lang</code> ergänzen, was
hauptsächlich für das <em>quiz.js</em> interessant sein könnte. Möglich ist aber auch
<code><html lang="de"></code> 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 <code>eLearnJS.setLanguage("de")</code> auf Deutsch
und mit <code>eLearnJS.setLanguage("en")</code> interaktiv auf Englisch stellen.</p>
<p>Beispiel:</p>
<p>
<button onclick="eLearnJS.setLanguage('de')">Deutsch/German</button>
<button onclick="eLearnJS.setLanguage('en')">Englisch/English</button>
</p>
<h4 id="eigenebersetzungeneinfgen">Eigene Übersetzungen einfügen</h4>
<p>
Um eigene Übersetzungen hinzuzufügen kann man die Funktion <code>addTranslation</code> oder
<code>addTranslations</code> verwenden. Hier ein Beispiel:
</p>
<pre><code>eLearnJS.addTranslation("de", { "loading": "Lädt..." });
eLearnJS.addTranslation("en", { "loading": "Loading..." });</code></pre>
<p>oder</p>
<pre><code>eLearnJS.addTranslations({
"de": { "loading": "Lädt..." },
"en": { "loading": "Loading..." },
});</code></pre>
<p>
Beide Blöcke tun dasselbe.
</p>
<script>
eLearnJS.addTranslation("de", { "loading": "Lädt..." });
eLearnJS.addTranslation("en", { "loading": "Loading..." });
</script>
<p>
Beispiel mit <span lang-code="loading"></span> Anzeige (nur während des Ladevorgangs):
</p>
<p>
<button onclick="$('#lang-loading').show(); eLearnJS.setLanguage('de', function() { $('#lang-loading').hide(); })">Deutsch/German</button>
<button onclick="$('#lang-loading').show(); eLearnJS.setLanguage('en', function() { $('#lang-loading').hide(); })">Englisch/English</button>
</p>
<div id="lang-loading" style="display: none;" lang-code="loading"></div>
</section>
<section name="Abbildungen">
<h3>Bilder</h3>
<p>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.</p>
<div class="slider preview-nav loop" style="max-height: 500px">
<ul class="img-gallery">
<li><img src="assets/img/template-media/md-illu_1.png" alt="md-produktion" /><p>Markdown ist <b>kinderleicht</b> zu erlernen.</p></li>
<li><img src="assets/img/template-media/md-illu_2.png" alt="Components" /><p>Zusammenspiel der Komponenten bei der Produktion von digitalen Skripten mit Markdown.</p></li>
<li><img src="assets/img/template-media/md-illu_3.png" alt="Future" /><p>Die Zukunft von Markdown als Autorensprache.</p></li>
<li><img src="assets/img/template-media/md-illu_4.png" alt="Media" /><p>Markdown kann viele verschiedene Medientypen in Html einfügen.</p></li>
<li><img src="assets/img/template-media/md-illu_5.png" alt="Hello" /><p>Versuche auch mal, ein Markdown-Dokument zu erstellen. Ist gar nicht schwer!</p></li>
</ul>
</div>
<p>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:</p>
<ul>
<li><code><div class="slider"></code> ist ohne Vorschau und ohne Loop</li>
<li><code><div class="slider preview-nav"></code> ist mit Vorschaubildern und ohne Loop</li>
<li><code><div class="slider preview-nav loop"></code> ist mit Vorschaubildern und mit Loop</li>
</ul>
<p>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 <code>ul</code>-Elements definiert.</p>
<ul>
<li><code><ul class="img-gallery"></code> ist eine Galerie mit unterschiedlicher Bilderhöhe.</li>
<li><code><ul class="img-gallery fixed-size"></code> ist eine Galerie mit der Höhe des größten Bildes.</li>
<li><code><ul class="img-gallery fixed-size" style="max-height: 400px"></code> ist eine Galerie mit der Höhe von 400px.</li>
</ul>
</section><section name="Medien">
<h3>Medieneinbindung</h3>
<p>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.</p>
<h4>Videos als Asset</h4>
<p>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
<a href="https://github.com/elb-min-uhh/elearnvideo.js">elearnvideo.js</a> möglich.</p>
<!-- Nachfolgendes Video mit Kommentaren nur mit dem video.js und zugehörigem video.css möglich -->
<!-- Nutzer können selbst Notizen (Text) hinterlegen. Diese werden der Video-Src zugeordnet. Ändert man diese
Sind die persönlichen Notizen zu dem Video weg (werden gelöscht wenn passendes Video nicht gefunden). -->
<video preload="auto" controls="controls" class="allow_user_notes">
<source src="assets/img/template-media/beispiel-video.mp4" type="video/mp4"></source>
<source src="assets/img/template-media/beispiel-video.webm" type="video/webm"></source>
Dein Browser unterstützt kein HTML5-Video. Um dir das Video dennoch ansehen zu können,
folge einfach diesem <a href="assets/img/template-media/beispiel-video.mp4">Link</a>.
</video>
<div class="video_notes timestamps">
<h4>Videoannotationen</h4>
<div class="video_note" timefrom="0m01s" timeto="0m5s">
Hier werden zusätzliche Informationen zu dem Videoabschnitt eingeblendet. Es scheint, als nehmen wir den nächsten Schritt.
<img src="assets/img/template-media/md-illu_3.png" alt="future of md">
</div>
<div class="video_note" timefrom="0m14s">
Das war 's eigentlich auch schon damit.
</div>
<div class="video_note" timefrom="0m5s" timeto="0m14s">
Hallo! Hier nur ein kurzes Beispielvideo, um zu zeigen,
wie man mit einem HTML-Video-Tag ein Video in ein Markdown
Dokument einbinden kann.
</div>
</div>
<h4>Videos von einem Streaming Server</h4>
<p>Hier ist ein Video von einem Streaming-Server eingebunden.</p>
<p>
<video controls><source src='https://fms1.rrz.uni-hamburg.de/abo/00.000_MichaelHeinecke_2016-09-06_17-56.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
</p>
<h4>Audio-Files</h4>
<p>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:</p>
<audio preload="auto" controls="controls">
<source src="assets/img/template-media/beispiel-audio.mp3" type="audio/mpeg"></source>
Dein Browser unterstützt kein HTML5-Audio. Um dir das Audio-File dennoch anhören zu können, folge einfach diesem <a href="img/beispiel-audio.mp3">Link</a>.
</audio>
</section><section name="Mathematische Formeln">
<h3>Mathematische Formeln</h3>
<p>Mathematische Formeln finden in vielen Texten Verwendung, können aber nicht immer vernünftig dargestellt werden.</p>
<h4>Formeldarstellung via MathJax</h4>
<p>MathJax kann genutzt werden, um mathematische Formeln darzustellen. Hierzu wird die LaTeX Syntax verwendet. Es existieren Blockformeln wie diese</p>
<p>$$
M_i = \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}_i
$$</p>
<p>
und auch Inline-Formeln wie $P\left(A=2\middle|\frac{A^2}{B}>4\right)$,
welche in einem Fließtext angezeigt werden können.
Um im Text dennoch ein \$ verwenden zu können, muss dieses escaped werden.
Hierzu schreibt man <code>\\$</code> anstatt des einfachen <code>$</code> Symbols, für jedes einzelne
anzuzeigende Zeichen, um durch das <code>\\</code> in der Ausgabe ein <code>\</code> zu erzeugen,
welches MathJax wiederum als <em>escape</em> für das darauffolgende <code>$</code> sieht.
Weitere Formeln wie $x_{i}$ = $y_{i}$, mit enthaltener Markdown Syntax,
können auch im Template verwendet werden, wenn die Escape Syntax korrekt
verwendet wird. Hierbei müssen keine doppelten Backslashs <code>\</code> verwendet werden,
da das Zeichen für den ersten Schritt der Bearbeitung des Codes gedacht ist
und selbst nicht im HTML Code auftauchen soll.
</p>
</section><section name="Textblöcke">
<h3>Textblöcke</h3>
<h4>Hervorgehobene Blöcke</h4>
Es existieren verschieden Blöcke, welche bestimmten Text
hervorheben können.
<blockquote class="task">
<p>
Überschrift
<br>
Dies ist ein Aufgabenblock.
</p>
</blockquote>
<blockquote class="hint emph-heading">
<p>
Überschrift
<br>
Dies ist ein Hinweisblock.
</p>
</blockquote>
<blockquote class="links emph-heading">
<p>
Überschrift
<br>
Dies ist ein Block für Links.
</p>
</blockquote>
<h4>Informationen per Mouseover/Klick</h4>
Bei solchen Blöcken werden zusätzliche
<div class="hover-info">
Informationen
<div>Zusätzliche Informationen sind in den meisten Fällen
Texte. Es könnten theoretisch aber auch Bilder eingefügt
werden.
</div>
</div>
angezeigt, wenn man mit der Maus hinüber geht oder bei Touch-Geräten
darauf klickt. Dazu wird in einem <b>div.hover-info</b>
zunächst der markierte Bereich angegeben. In einem zusätzlichen
<b>div</b> direkt dahinter können darauf hin die weiterführenden
Informationen angezeigt werden. Diese können auch eine bestimmte maximale
<div class="hover-info full" id="info-full-1" data-width="80%" data-full-width="440">
Breite
<div>
Die maximale Breite wird durch die <code>data-width="80%"</code> auf 80% der verfügbaren Breite
festgelegt. Ab einer Fensterbreite von <code>440px</code>
(<code>data-full-width="440"</code>, immer in px) wird automatisch die volle Breite verwendet.
</div>
</div>
füllen, wenn man die Klasse <code>full</code> ergänzt.
Die <code>data-width</code> kann in % und px angegeben werden.
<h4>Ausklappbare Bereiche</h4>
<p>Der folgende Block ist mit einem Knopf aus- und einklappbar.</p>
<div class="hideable visible" show="Zeige Übersetzung" hide="Verberge Übersetzung">
Hier steht ein Beispieltext.
</div>
<p>
Das entscheidende hierbei sind die Attribute.<br>
Dabei wird dem ganzen ein <b>name</b> gegeben, der in
dem Knopf immer eingesetzt wird. Zusätzlich werden
die Wörter für <b>show</b> und <b>hide</b> angegeben.
So kann man hier auch bspw. andere Sprachen verwenden.
Es ist auch möglich das Feld <b>name</b> wegzulassen
und nur <b>show</b> und <b>hide</b> zu verwenden.
</p>
<h4>Multiboxes</h4>
<p>
Der folgende Block besteht aus mehreren Boxen, zwischen
denen man wählen kann.
</p>
<div class="tabbed-box">
<div class="tab" name="Deutsch">
Dieser Block wird unter dem deutschen Tab angezeigt.
</div>
<div class="tab" name="English">
This block will be visible when english is selected.
</div>
</div>
<p>
Hier wird ein umschließendes <b>div.tabbed-box</b> erstellt.
Innerhalb dieses Blocks können dann beliebig viele
<b>div.tab</b> erstellt werden, die jeweils einen <b>name</b>
haben unter dem der Tab ausgewählt werden kann.
Innerhalb eines jeden <b>div.tab</b> kann dann alles
beliebig verändert werden.
</p>
</section><section name="Quiz">
<!-- Nachfolgende Quiz-Elemente sind nur mit dem quiz.js und zugehörigem quiz.css möglich -->
<h3>Quizfragen</h3>
<p>Auf dieser Seite sind einige Quiz-Fragen Beispielhaft dargestellt.
Diese Quizfragen benötigen das <a href="https://github.com/elb-min-uhh/quiz.js">quiz.js</a>.</p>
<div class="question">
<h4>Auf welcher Technologie basieren die digitalen Skripte? </h4> <!-- Fragentext -->
<div class="answers">
<label>Lösung: <input type="text" name="q"></label>
</div>
<div class="feedback correct">
Deine Antwort ist richtig.
</div>
<div class="feedback incorrect">
Leider nein, schaue Dir doch nochmal die Dokumentation an.
</div>
<a class="ans">4c4ad5fca2e7a3f74dbb1ced00381aa4</a>
<a class="ans">2182a74bab7188d959e795d9301e87ff</a>
<a class="ans">590fc197fe73db0aa2ec03687a372eea</a>
<a class="ans">686155af75a60a0f6e9d80c1f7edd3e9</a>
<a class="ans">fc35fdc70d5fc69d269883a822c7a53e</a>
<a class="ans">65e232ed43477b2f5cb4413023548fce</a>
<a class="ans">644e5bfeb12517406338d351c4375248</a>
</div>
<div class="question">
<h4>Welche Unterordner werden in der Dateistruktur von digitalen Skripten erwartet?</h4>
<div class="answers">
<label><input type="checkbox" name="q" value="Frage2-1">assets</label>
<label><input type="checkbox" name="q" value="Frage2-2">movies</label>
<label><input type="checkbox" name="q" value="Frage2-3">img</label>
<label><input type="checkbox" name="q" value="Frage2-4">css</label>
<label><input type="checkbox" name="q" value="Frage2-5">lang</label>
</div>
<div class="feedback correct">
Genau, diese Ordner werden auf jeden Fall benötigt. Sogar noch ein paar mehr.
</div>
<div class="feedback incorrect">
Deine Antwort ist leider nicht ganz richtig. Entweder fehlt ein Ordner, oder du hast einen ausgewählt, der nicht benötigt wird.
</div>
<a class="ans">b5ceb729a1b347aa357790e1588c88b3</a>
<a class="ans">1fd302a9c89fc92eead418857a7e5a07</a>
<a class="ans">4fc364339b2127eb81c13ab986a27085</a>
</div>
<p>
Es existieren auch noch andere Fragetypen, diese sind in der Dokumentation vom quiz.js beschrieben.
</p>
</section>
<section name="Interaktive Grafik"><h3 id="interaktivegrafik">Interaktive Grafik</h3>
<p>Mit der Erweiterung
<a href="https://github.com/elb-min-uhh/clickimage.js">clickImage.js</a> ist es möglich,
interaktive Grafiken zu erstellen. Hier ein Beispiel:</p>
<div class="clickimage">
<div class="imagebox invert">
<img src="assets/img/template-media/schiff.jpg" alt="Schiff" data-pins="10,10,'right'; 50,60,'left'; 42,25; 80,80,'top'">
</div>
<div class="pininfo">
<div>
<h3><span class="highlight">Aufgabe 1</span> Wie lauten die Bestandteile des Kopfes?</h3>
<blockquote class="task"><p>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.</p></blockquote>
<blockquote class="hint"><p>Hinweis<br>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.</p></blockquote>
<blockquote class="links">
<p>
<ul class="links">
<li><a href="https://de.wikipedia.org/wiki/The_Bird_and_the_Bee">https://de.wikipedia.org/wiki/The_Bird_and_the_Bee</a><br>Dies ist eine Link-Beschreibung, die weitere Informationen zu der zugehörigen URL liefert</li>
<li><a href="https://de.wikipedia.org/wiki/The_Bird_and_the_Bee">https://de.wikipedia.org/wiki/The_Bird_and_the_Bee</a><br>Dies ist eine Link-Beschreibung, die weitere Informationen zu der zugehörigen URL liefert</li>
</ul>
</p>
</blockquote>
</div>
<div>
<h3><span class="highlight">Aufgabe 2</span> Wie lauten die Bestandteile des Rumpfes?</h3>
<p>
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.
</p>
</div>
<div class="inline">
<h3>Der Mast</h3>
<p>Als Schiffsmast bezeichnet man einen ganz oder annähernd vertikal
auf Schiffen aufgestellten Mast aus Holz, Metall oder anderen festen
Materialien.</p>
</div>
<div>
<h3><span class="highlight">Aufgabe 3</span> Wie lauten die Bestandteile des Rumpfes?</h3>
<p>
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.
</p>
</div>
</div>
</div>
</section>
<section name="TimeSlider"><h3 id="timeslider">TimeSlider</h3>
<p>
Die Erweiterung <a href="https://github.com/elb-min-uhh/timeslider.js">timeSlider.js</a>
erlaubt es, Zeitleisten zu erstellen, um sich so interaktiv über zeitlich
aufgelistete Informationen zu arbeiten.
</p>
<div class="timeslider" data-interval="year" data-mode="date" data-zoom="1" lang="de">
<div>
<h3><span>2014</span> Das Jahr 2014</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
</p>
<p>
At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</div>
<div>
<h3><span>2016 - 2018</span> Weitere Jahre</h3>
<p>
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.
</p>
</div>
</div>
</section>
<section name="Literatur">
<h3>Literatur</h3>
<div class="lit">
<p>Adapt learning community. (o. J.). Abgerufen 11. September 2015, von <a href="https://community.adaptlearning.org">https://community.adaptlearning.org</a></p>
<p>H5P – Create, share and reuse interactive HTML5 content in your browser. (o. J.). Abgerufen 11. September 2015, von <a href="https://h5p.org">https://h5p.org</a></p>
<p>The Ultimate List of HTML5 eLearning Authoring Tools. (o. J.). Abgerufen von <a href="http://elearningindustry.com/the-ultimate-list-of-html5-elearning-authoring-tools">http://elearningindustry.com/the-ultimate-list-of-html5-elearning-authoring-tools</a></p>
<p>Wenz, C. (2014). JavaScript: das umfassende Handbuch (11. Aufl). Bonn: Galileo Press.</p>
<p>Zillgens, C. (2013). Responsive Webdesign: reaktionsfähige Websites gestalten und umsetzen. München: Hanser.</p>
</div>
</section>
<!--Ende des Einfüge-Bereichs-->
<!--MathJax-Einbindung für die Formeldarstellung-->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js"></script>
</div>
</div>
</body>
</html>