5 – H5P: Interaktive Elemente und Branching Szenario
Wie können wir helfen?
1. Einleitung
H5P ist eine einfache Möglichkeit, interaktive Inhalte in Ihre Kurse einzubinden. Damit werden zB. auch Lernzielkontrollen erstellt. Einen Überblick über diese Funktionsvielfalt erhalten Sie in einer sehr guten Dokumentation auf der H5P-Webseite.
Möglichkeiten H5P
In diesem Lernmodul erhalten Sie einen Überblick der 5 häufigsten H5P-Elemente mit Beispielen
2. Wie erstelle ich ein H5P-Element?
H5P-Inhalte können Sie in einem separatem Menü erstellen. Dieses befindet sich in der linken Seitenleiste in dem Dozierendenbereich und heißt H5P-Inhalte. Dort können Sie ein neues H5P-Element erstellen und sich Ihren gewünschten Inhalt aussuchen. H5P bietet vielfältige Möglichkeiten interaktive Inhalte zu erstellen.
2.1 Übersicht der H5P Inhaltstypen in WordPress
Mit Klick auf die oberste Leiste öffnen sich alle Inhaltstypen von H5P. Diese Liste kann nach Belieben geordnet werden nach:
1. zuletzt verwendete zuerst, 2. neueste zuerst und 3. von A bis Z. Zudem kann man in der Suche nach einem bestimmten Inhaltstypen suche
Mit einem Klick auf “Details” wird der Inhaltstyp auf englisch mit Bildern genauer beschrieben. In einer Inhalts-Demo kann man den ausgewählten Inhalts-Typ ausprobieren. Im gleichen Fenster kann man anschließend den Inhaltstyp benutzen.
2.2 H5P Element Detaildarstellung
3. Verbreitung & Datenschutz
Das Ziel der Digilehre-Plattform ist es Open Education Resources bereitzustellen. Essenziell dazu ist es, die gelieferten Inhalten zur Weiterverwendung bereitzustellen. H5P bietet hier die Möglichkeit eine “Einbettungsleiste” einzubauen. Dazu sollten Sie folgendes beachten:
4. Branching Scenario
Das Branching Scenario ermöglicht Autor*innen den Lernenden eine Vielzahl von Inhalten (Course Presentations, Bilder, Texte, interaktive Hotspot) sowie Antwortmöglichkeiten zu präsentieren. Die Lernenden treffen eine Auswahl unter mehreren Lösungsvorschlägen. Die vorher ausgewählten Antworten bestimmen fortlaufend den Inhalt, den sie als nächstes sehen werden.
4.1 Vorzeige-Beispiel
Es wurde ein Vorzeige-Beispiel in H5P entwickelt, darin können Sie direkt alle Möglichkeiten sehen und ausprobieren, die ein Branching Scenario bietet.
Direkt zum Beispiel: “Vorzeige Beispiel Branching Scenario“
Sie finden diese Vorlage unter allen H5P-Elementen auch in der Suche.
Sie haben die Auswahl zwischen sechs verschiedenen H5P Content-Typen.
4.2 Nutzungsmöglichkeiten
Auf der Seite von H5P (https://h5p.org/branching-scenario#example=439819) werden zwei Beispiele auf Englisch vorgestellt, die zwei verschiedene Nutzungsmöglichkeiten eines Branching Scenarios zeigen:
- Ein videobasiertes Branching Scenario “Skills Practice: A Home Visit”
- Ein nicht videobasiertes oder dilemmabasiertes Branching Scenario “Arts of Europe”, dessen Inhalt auf Course Presentations basiert.
4.3 Neues Branching Scenario anlegen und benennen
Wie finde ich die Branching Scenarios?
Die Branching Scenarios befinden sich in den H5P-Inhalten. Suchen Sie dafür in der linken Taskleiste in WordPress nach dem H5P Plugin “H5P- Inhalt”.
Um ein neues Branching Scenario anzulegen, gibt es zwei Optionen:
- (empfehlenswert) Sie duplizieren das Element “ZfL_Branching Scenario Vorlage_Kopie_Abstellen der Klingel”.
(Es ist eine Kopie des Branching Scenarios “Gelingend Kommunizieren” im Fallbeispiel Abstellen der Klingel.) - Sie erstellen ein neues Branching Scenario über “Neue hinzufügen” am oberen Seitenrand.
1. Option (empfehlenswert): Kopieren der Vorlage
- Dafür suchen Sie die Vorlage unter den H5P Elementen.
Die Vorlage heißt: “ZfL_Branching Scenario Vorlage_Kopie_Abstellen der Klingel”.
Dafür geben Sie den Titel oder einzelne passende Wörter in die Suchleiste ein und klicken anschließend links auf den Titel des Branching Scenarios, um es zu öffnen.
Alternativ können Sie auf folgenden Link klicken, um zur Vorlage zu gelangen: “ZfL_Branching Scenario Vorlage_Kopie_Abstellen der Klingel“
2. Wenn Sie das Branching Scenario geöffnet haben, klicken Sie anschließend auf “Bearbeiten”.
3. Nun erscheint über dem Branching Scenario-Fenster folgende Leiste von H5P mit den Optionen “Kopieren” und “Einfügen & Ersetzen”. Da Sie die Vorlage kopieren möchten, klicken Sie auf “Kopieren”. Damit haben Sie das Branching Scenario erfolgreich kopiert.
4. Sie erstellen ein neues H5P-Element, indem Sie zurück auf die Übersicht aller H5P Elemente gehen.
5. Dann klicken Sie ganz oben auf der Seite neben “All H5P-Inhalte” auf “Neue hinzufügen”.
6. Anschließend erscheint folgende Ansicht mit einer H5P-Leiste mit der Option “Einfügen”. Klicken Sie nun bitte auf “Einfügen”. (Es dauert nur ein paar Sekunden, um die Inhalte der Vorlage einzufügen.)
7. Dann erscheint der gleiche Titel der Vorlage in der Titelzeile, deshalb nennen Sie Ihr neues H5P-Element bitte um.
Benennen Sie das Branching Scenario – wie alle anderen H5P-Elemente auch – nach folgendem Schema nach der Struktur der Website “zfl-lernen.de”:
“ZfL_Lernmodulname_Lektion_(Websitebereiche)_ Element”
Hier ein Beispiel: “Zfl_Veränderung in der Schule bewirken_Kommunikation_Fallbeispiel_Abstellen der Klingel”
Hinweis:
ZfL kann wahlweise auch durch digiLL oder Auftraggeber/Projektpartner (Mercator, sdw, Hans-Riegel, …) ersetzt oder ergänzt werden.
8. Klicken Sie anschließend rechts auf „Erstellen“. Ihrem Branching Scenario wird nun automatisch eine H5P-ID zugewiesen.
9. Sie haben erfolgreich eine Kopie der Vorlage erstellt und können diese anschließend bearbeiten. Wie Sie das Branching Scenario bearbeiten, wird Ihnen in den nächsten Kapiteln erläutert.
2. Option: Neues Branching Scenario erstellen
1. Sie erstellen ein neues Branching Scenario über “Neue hinzufügen” am oberen Seitenrand auf der Seite aller H5P Elemente.
(Siehe 5. unter 1. Kopieren der Vorlage)
2. Wenn Sie ein neues H5P-Element erstellt haben, müssen Sie die Art des H5P-Elements auswählen. In diesem Fall klicken Sie bitte auf “Branching Scenario (beta)”. Es erscheint eine alphabetisch geordnete Liste, in der Sie Ihr Element auswählen oder Sie können sich die Suchfunktion zu Nutze machen. Sie haben auch die Möglichkeit sich die zuletzt verwendeten H5P-Elemente oder sich auch die neuesten H5P-Elemente zuerst anzeigen zu lassen.
3. Wenn Sie ein neues H5P-Element erstellt haben, müssen Sie diesem H5P Element einen Namen geben und anschließend auf “Erstellen” klicken. (Siehe 7. und 8. unter Option 1.)
Benennen Sie das Branching Scenario – wie alle anderen H5P-Elemente auch – nach folgendem Schema nach der Struktur der Website “zfl-lernen.de”:
“ZfL_Lernmodulname_Lektion_(Websitebereiche)_ Element”
4. Sie haben erfolgreich ein neues erstellt und können diese anschließend bearbeiten. Wie Sie das Branching Scenario bearbeiten, wird Ihnen in den nächsten Kapiteln erläutert.
4.4 Allgemeine Einstellungen
Wenn Sie das Branching Scenario erstellt haben, erscheint folgendes Bearbeitungsfenster:
Hinweis: Bei Verwendung der Vorlage sind bereits Elemente enthalten. Die Information “No content has been added yet” erscheint nur, wenn ein leeres Branching Scenario erstellt wurde.
In der linken Taskleiste mit den fünf Symbolen können Sie verschiedene Reiter wählen:
1. Der Stift – Info Content: Hier können Sie Ihr Branching Scenario mit den einzelnen Pfaden erstellen.
2. Das Zahnrad – Settings: Hier können Sie verschiedene Einstellungen zur allgemeinen Gestaltung des Branching Scenario konfigurieren.
Weitere Informationen zu 2. Das Zahnrad – Settings:
- Sie können den Anfang von Ihrem Branching Scenario bearbeiten:
– einen Titel vergeben
– ein Bild hinzufügen (Format PNG z.B.: 521 x 347px oder 1255x710px)
– evtl. eine kurze Kursbeschreibung hinzufügen - Sie können das Ende von Ihrem Branching Scenario bearbeiten:
– ein Bild (Format PNG z.B.: 521 x 347px oder 1255 x 710px) hinzufügen
– Text hinzufügen - (Die Evaluation ist mit oder ohne Bepunktung möglich. Das ZfL hat bisher ohne Evaluation gearbeitet.)
Unter “Settings” können Sie ein Kursbild hinzufügen.
Hinweis: Für alle extern genutzten Elemente (Bilder, Videos, usw.) sollten auch die Metadaten bzw. die Urheberrechte hinzugefügt werden, falls Sie von den allgemeinen Metadaten des Branching Scenarios abweichen.
OER-Input:
Hier finden Sie eine Übersicht zu den Creative Commons Lizenzen: https://creativecommons.org/licenses/by-sa/4.0/
Hier finden Sie weitere Informationen zu Open Educational Resources und deren Lizenzierung: https://digill.de/course/einfuehrung-in-die-open-educational-resources/
3. Die Buchstaben – Übersetzung: Hier können Übersetzungen für Ihr Branching Scenario ausgewählt werden.
4. Das Fragezeichen – Tutorial: Hier finden Sie ein englischsprachiges Tutorial zur Erstellung von Branching Scenarios.
5. Der Zettel – Metadaten: Hier geben Sie bitte die entsprechenden Metadaten ein.
Weitere Informationen zu 5. Der Zettel – Metadaten:
Hinweis: Bitte geben Sie die Metadaten direkt zu Beginn der Erstellung des Branching Scenarios an, damit Sie diesen wichtigen Schritt nicht vergessen.
-
- Titel: entspricht dem von Ihnen angegebenen Titel nach dem Schema (“ZfL_Lernmodul_Lektion_(Websitebereiche)_Element”)
- Lizenz: Bitte wählen Sie CC BY-SA aus. Alle Inhalte der Lernmodule von unserer Website sollen unter dieser CC-Lizenz veröffentlicht werden. Achten Sie darauf, dass alle Inhalte Dritter in Ihrem Branching Scenario CC-lizensiert oder gemeinfrei sind.
- Autor: Geben Sie Ihren Namen bzw. den Namen Ihrer Organisation ein. Zum Beispiel: “Zentrum für LehrerInnenbildung Köln -Digitale Lehre.”
- Jahr: Geben Sie bitte das Erstellungsjahr an.
4.5 Aufbau mit Pfaden
Das Branching Scenario kann sich in beliebig viele Pfade aufteilen lassen.
Die einzelnen Pfade bestehen aus einzelnen Content-Typen (von oben nach unten). Neue Pfade entstehen nur, wenn es mindestens zwei verschiedene Antwortmöglichkeiten gibt und eine davon die richtige ist.
(Die Antwortmöglichkeiten verlaufen von rechts nach links.)
Hinweis: Die einzelnen Content-Typen werden Ihnen im Kapitel 8 “Die Inhalts- bzw. Content-Typen” erläutert.
1. Option mit einer vorhandenen Vorlage:
Sie können nun die kopierte Vorlage bearbeiten, indem sie die vorhandenen Elemente bearbeiten, löschen oder neue Elemente hinzufügen. Die Benutzung ist sehr intuitiv.
Hinweis: In dieser Ansicht kann nicht die komplette Pfadstruktur angezeigt werden. Sie können in Ihrem Browserfenster die Prozentzahl der Webansicht unter “Zoomen” (z.B. in Chrome) von 100 % auf 75 % reduzieren. Dadurch können Sie mehrere Elemente sehen.
2. Option mit einem leeren Branching Scenario:
Um die Pfade zu erstellen, einfach die Elemente aus der zweiten linken Spalte in das Bearbeitungsfenster an die Stellen mit den blauen “Plus-Symbol” ziehen. Die sechs Elemente werden im Folgenden erläutert.
4.6 Preview-Modus und Benennung
- Im Laufe der Erstellung Ihres Branching Scenario können Sie jederzeit den Preview Modus (oben rechts, neben dem Vollbild Modus) wechseln, um sich eine Vorschau anzusehen.
- Das Autorentool kann im Vollbild Modus verwendet werden und ermöglicht es den Autoren, den Inhalt als Baum mit mehreren Zweigen und Endungen zu strukturieren. Der Vollbild Modus lässt sich mit einem Klick auf dieses Symbol oben rechts öffnen.
Zum Preview Modus:
Wenn Sie im Preview Modus sind, können Sie auch direkt zum gewünschten Element navigieren, je nach Länge, lohnt es sich auch die verschiedene Elemente zu nummerieren, um diese schneller finden zu können.
Die folgende Abbildung zeigt, wie Sie durch eine strukturierte Benennung alle H5P-Elemente schnell finden können.
Wir empfehlen folgende Benennungen:
- Textelemente: Herzliche willkommen, etc…
- Videos:
“1. Szene: Abstellen der Klingel”
“2. Szene: …”
etc. - Reaktionen:
Reaktion 1.1 – Komm schon
Reaktion 1.2 – Lets try!
etc.
4.7 Die Inhalts- bzw. Content-Typen
Das Branching Scenario besitzt sechs verschiedene Content-Typen. Über das Element “Branching Question” können Sie beliebig viele Antwortmöglichkeiten hinzufügen und neue Pfade erstellen.
1. Course Presentations
Besonders gut eignen sich die Präsentationsfolien, um kleinere zusammenhängende Einheiten (linear) vorzustellen. Praktisch ist die Präsentation besonders, um viel Inhalt (Bilder, Text etc.) platzsparend auf einer Seite darzustellen.
Im Branching Scenario kann man die Course Presentations beispielsweise zu Beginn verwenden, um den Willkommenstext mit einem einleitenden Bild abzubilden.
Hier finden Sie neben der Course Presentation außerdem eine Übersicht über weitere H5P-Elemente.
2. Textelemente
Gestaltungsmöglichkeiten
Im Textfenster finden Sie in den oberen zwei Zeilen gängige Symbole zur Bearbeitung (von links nach rechts):
- in der 1. Zeile:
- 1: fett
- 2: kursiv
- 3: durchgestrichen
- 4: tief gestellt
- 5: hoch gestellt
- 6: Formatierung entfernen
- 7: linksbündig
- 8: zentriert
- 9: rechtsbündig
- 10: Liste mit Stichpunkten
- 11: nummerierte Liste
- 12: Link einfügen
- 13: Link entfernen
- 14: horizontale Linie
- 15: Absatzformate (Überschrift 2, Überschrift 3, Formatiert, Normal)
- 16: Schriftgrößen in Prozentangaben
- in der 2. Zeile: 17: Textfarbe & 18: Hintergrundfarbe
3. Bildelemente
Hinweis: Bitte denken Sie immer an die Alternativtexte (zur Einhaltung der Barrierefreiheit) und bitte denken Sie stets daran die Metadaten auszufüllen.
Bisher sind die Alternativtexte auf die Anzahl von 255 Zeichen (mit Leerzeichen) begrenzt. Kontrollieren Sie bitte daher, ob der vollständige Text lesbar ist und bitte verwenden Sie nicht zu viel Text in den Info-Grafiken.
Start- und Endbilder:
- Es bietet sich an ein Standbild aus dem Video zu nehmen
- Damit das Bild jedoch von H5P akzeptiert wird, muss es folgende Kriterien erfüllen:
- Bildformat: PNG, dateiname.png, Pixelangaben: 1255 x 710px
6. Videos
Hier können Sie Ihre Videos hochladen.
Dazu benennen Sie bitte Ihr Video und fügen es unter Videoquellen mit einem Klick auf das “graue Plus” ein.
H5P unterstützt externe Videodateien im Format mp4, webm oder ogv, wie bei Vimeo Pro, und unterstützt YouTube-Links.
Es wird empfohlen die Videos in WebM und in MP4 hinzuzufügen.
Untertitel und Barrierefreiheit:
Um die Barrierefreiheit zu gewährleisten, sollte ein Untertitel erstellt werden.
Diese Informationen können Sie dem Wiki “Hinweise zur Barrierefreiheit” entnehmen.
Untertitel können Sie z.B. mit der Website https://subtitle-horse.com/ erstellen.
Weitere Informationen erfahren Sie unter:
https://bik-fuer-alle.de/untertitelung.html
7. Branching Questions
Hier können Sie Fragen mit beliebig vielen Antwortmöglichkeiten aufschreiben und entscheiden, ob diese Antwortmöglichkeiten richtig oder falsch sind bzw. wo es nach den einzelnen Fragen weiter geht.
- Anzahl der Zeichen: Die Fragen und die möglichen Antworten dürfen nicht zu lange sein. Richtwert: höchstens 150 – 200 Zeichen pro Frage oder Antwort verwenden.
- Anzahl der möglichen Antworten: beliebig, es ist jedoch empfehlenswert, nicht zu viele zur Auswahl zu geben. (Zwei, drei oder vier Antworten zur Auswahl reichen aus.)Hinweis: Wir empfehlen nach falschen Antwortmöglichkeiten zurück zum vorherigen Content-Typ (z.B. zu den Branching-Videos vor der jeweiligen Frage) zurück zu springen. So kann das Video noch einmal angeschaut werden. Es ist auch möglich andere Szenen auszuwählen, jedoch kann das Branching Scenario so schnell unübersichtlich werden. Behalten Sie einen bestmöglichen Überblick über Ihre Pfade.
4.8 Wichtige Informationen zur Bearbeitung der Pfade
Dieses Kapitel beschäftigt sich mit der Bearbeitung der Pfade:
- Erst durch das Klicken auf den Button “Aktualisieren” können alle Änderungen final abgespeichert werden.
- Vorsicht: Der Button “Löschen” löscht das komplette H5P-Element.
- Das Zahnrad eignet sich besonders gut, um die Pfade bearbeiten zu können.
Aktionen: Aktualisieren und Löschen
Sobald Sie mit der Bearbeitung des Branching Scenarios fertig sind oder, wenn Sie die Änderungen speichern wollen, klicken Sie bitte immer ganz rechts unter Aktionen in der WordPressumgebung auf “Aktualisieren”. Erst dann können alle Änderungen final abgespeichert werden.
Wenn Sie auf “Löschen” klicken, wir das komplette H5P-Element gelöscht.
Ohne das “Aktualisieren” wären alle Änderungen nicht mehr aufrufbar.
Hinweis: Daher denken Sie bitter immer an das Aktualisieren.
Das Zahnrad
Um ein Element zu bearbeiten, klicken Sie auf das Zahnrad (immer rechts auf dem ausgewählten Element bei Mouseover) und dann auf den Stift “Edit Content”.
Auf diese Weise können Sie alle Elemente bearbeiten. Sie können dann beispielsweise die Metadaten bearbeiten, den Verlauf bestimmen (wo geht es nach diesem Element hin) und auswählen, ob der Titel des Elements angezeigt werden soll oder nicht.
Bevor Sie das Fenster Schließen bitte auf “Done” klicken, sodass der letzte Schritt gespeichert werden kann. Mit einem Klick auf “Remove” kann das Element gelöscht werden.
Unter dem Zahnrad befinden sich auch die Schaltflächen “Start preview”, “Copy” und “Delete”.
Mit dem Klick auf ein bestimmtes Element und der Auswahl
“Start preview” können Sie aus der Pfadansicht direkt Elemente auswählen, die Sie anschauen möchten.
Mit “Copy” können sie das Element kopieren und an einer anderen Stelle einfügen und mit “Delete” können Sie das Element löschen.
4.9 Zum Inhalt, Konzept und Dreh
Wie erstelle ich ein Konzept für ein Branching Scenario?
4.9.1 Branching Scenario Grundgerüst & Vorlage
- Mit Hilfe folgender Vorlage in Form einer Tabelle können Sie ein Branching Scenario planen.
- In der Zusammenfassung erhalten Sie alle Elemente, die für ein Branching Scenario essenziell sind.
4.9.2 Film & Drehbuch
In diesem Kapitel erfahren Sie, wie Sie sich auf ein Branching Scenario vorbereiten können (Vorlagen, Drehbuch entwickeln).
Außerdem werden hilfreiche Tipps zum Erstellen und zum Hochladen bereitgestellt.
Deutsch 
English