H5P

Einleitung

H5P (HTML5 Package) ist ein sogenanntes Content Collaboration Framework. D.h., dass es eine Basis zur gemeinschaftlichen Erstellung von interaktiven Inhalten bereitstellt.
Dazu nutzt H5P moderne Webtechnologien (HTML5, CSS3 und JavaScript), um Inhalte interaktiv darzustellen und auf unterschiedlichen Geräten und Plattformen verfügbar zu machen.
Hierbei werden verschiedene, sogenannte Content Types (siehe unten) angeboten, die unterschiedliche Bedürfnisse und Szenarien adressieren. Hierbei bietet die H5P-Lernaktivität in Moodle verschiedene Umsetzungsmöglichkeiten an, wie beispielsweise interaktive Präsentationen, Lernkarten oder die intuitive Einbettung von iFrames. Die im UDE-Moodle unterstützten Content Types sollen im Folgenden kurz bechrieben werden.

Verfügbare H5P-Inhaltstypen an der UDE

• Accordion
  • Ermöglicht den Text in einzelne Bereiche anzuzeigen, die dann einzeln aufgeblättert werden können
• Advanced fill the blanks
  • In einem zuvor definierten Lückentext müssen die darin deklarierten Lücken schriftlich ausgefüllt werden.
  • Nach dem Ausfüllen bekommen die Lernenden ein Feedback, ob die Antwort korrekt oder nicht korrekt ist.
  • Advanced bedeutet, dass die Verfügbarmachung von erweitertem Feedback (z.B. direkte Referenzierung auf den textuellen Kontext, der auszufüllenden Lücke) möglich ist.
• Agamotto
  • Ermöglicht die Ansicht von Bildern, die der Reihe nach angeschaut oder detailreicher dargestellt werden sollen, i.d. Art eines Zoomeffektes.
  • Es besteht die Möglichkeit, Text bzw. Informationen die das aktuelle Bild beschreiben hinzuzufügen.
  • Wird über einen Slider gesteuert.
• Branching Scenario (beta)
  • Dient der Erstellung einer Form adaptiven Lernens
  • Verzweigte Storylines: Lernende bekommen auf Grundlage ihrer Auswahl/ Entscheidungen unterschiedliche Lernmaterialien angezeigt
  • Dieser Inhaltstyp befindet sich aktuell noch aktiv in der Entwicklung!
• Chart
  • Visuelle Ansicht für den Vergleich von Zahlen (Diagramme)
  • Zwei Varianten: Bar und Pie
    • Bar: Ansicht der Zahlen in Stabdiagrammen
    • Pie: Ansicht der Zahlen im Kreisdiagramm
• Column
  • Dient der Organisation von H5P Inhaltstypen mit ähnlicher Thematik.
  • D.h., dass ähnliche Themen - Inhaltstyp-übergreifend - gruppiert werden können.
• Course Presentation
  • Hier können neue interaktive Präsentationen für Moodle erstellt werden
  • Interaktiv bedeutet, dass in der Präsentation Fragen beantwortet werden können (Multiple Choice), die dann auch in die Bewertung eingetragen werden
  • Es besteht allerdings weder die Möglichkeit eine bereits vorhandene Präsentation hochzuladen, noch eine in h5p erstellt in einem weiterverwendbaren Format (wie ppt oder pdf) herunterzuladen
  • Wenn eine Person die Präsentation gesehen hat, zwischenzeitlich aber Änderungen daran vorgenommen wurden, wird der jeweiligen Person bei der nächsten Ansicht der Präsentation angezeigt, dass eine Veränderung vorgenommen wurde
• Dialog Cards
  • Dienen dem Memorieren von Wörtern, Ausdrücken oder Sätzen.
  • Auf der Vorderseite befindet sich ein Hinweis. Beim Drehen der Karte erfährt man den damit zusammenhängenden Ausdruck (Begriff).
  • Es können z.B. Bilder, Audio-Dateien oder Tipps hinzugefügt werden. Durch die Integration von Audio-Dateien eignet sich dieser Inhaltstyp insbesondere für Szenarien im Kontext des Spracherwerbs.
• Dictation
  • Ermöglicht die Überprüfung von orthografischen Kenntnissen (Diktat-Übung).
  • Audiodateien, optional in unterschiedlichen Geschwindigkeitsstufen und/oder einer festgeschriebenen Anzahl an Abspielmöglichkeiten, können eingestellt werden.
  • Zu den Audiodateien werden korrespondierende Eingabefelder angelegt, mithilfe derer die Nachschrift für das Gesprochene eingegeben und automatisch überprüft werden kann.
• Documentation Tool
  • Erlaubt die Erstellung einer strukturierten Abfolge, für einen Schreibprozess.
  • Es können Unterpunkte (Abfolge) gesetzt werden.
• Drag and Drop
  • Die Autorin*innen können zwei oder mehr Elemente (Text oder Bild) per „Drag and Drop“ miteinander verknüpfen.
  • Kann eigenständig oder innerhalb anderen Inhaltstypen verwendet werden.
• Flashcards
  • Hier können Lernkarten erstellt werden
  • Es können Tipps gegeben werden
  • Aktive Eintragung von Wörtern möglich
  • Groß- und Kleinschreibung wird nicht berücksichtigt
  • Wird in die Bewertung übernommen
• Iframe Embedder
  • Ermöglicht die intuitive und effiziente Einbindung von (externen) Ressourcen, wie z.B. Webseiten oder JavaScript-Applikationen
  • Die Breite, Mindestbreite sowie Höhe des iFrames können eingestellt werden
  • Der iFrame-Inhalt kann für den Vollbildmodus des Browsers "freigegeben" werden
• Image Hotspots
  • Die Autorin/ der Autor kann ein Bild hochladen und beliebig viele interaktive Hotspots definieren.
  • Ein Hotspot kann mit Text oder einem Video befüllt werden.
  • Die Farbe eines Hotspots (auf dem Bild) kann individuell gewählt werden.
• Image Juxtaposition
  • Ermöglicht das Überblenden zweier Abbildungen
  • Die Ansicht zwischen Abbildung 1 und 2 kann dabei mittels Schieberegler anteilig gewechselt werden
    • Die Startposition (in %) sowie die Richtung (horizontal vs. vertikal) des Schiebereglers können voreingestellt werden
  • Wichtig: die Abbildungen sollten dieselben Proportionen (Breite u. Höhe) haben, da sonst der (fehlende) Differenzbereich weiß-aufgefüllt wird
• Image pairing
  • Lernende bekommen Bilder angezeigt, deren zuvor definierte Paare sie identifizieren und korrekt einander zuordnen müssen.
  • Bilderpaare müssen nicht aus demselben Bild bestehen, wodurch die Überprüfung von (impliziten) Relationen möglich ist.
• Image Sequencing
  • Lernaufgabe, bei der die Lernenden mehrere Abbildungen angezeigt bekommen.
  • Die Abbildungen können dabei eine optionale Beschreibung erhalten.
  • Diese müssen anschließend, in einer zuvor definierten Reihenfolge, korrekt angeordnet werden.
• Image Slider
  • Hier bekommen die Lernenden mehrere Bilder in einem Slider (horizontal-navigierbare Folge von Abbildungen) angezeigt.
• Interactive Video (für Videos bis 50MB)
  • Die Autor*innen können ein Video hochladen.
  • Das Video kann an frei wählbaren Punkten gestoppt und mit anderen H5P Inhaltstypen erweitert werden.
    • Richtige/falsche Antworten (u.a. über MC-Fragen-Elemente) können z.B. die Reihenfolge die Wiedergabe ändern (richtige Antwort überspringt einen Teil, falsche Antwort zeigt den Teil des Videos, der die richtige Antwort gibt).
    • Die Nutzer*innen können zu den verschiedenen Lesezeichen/Stopps in der Wiedergabe springen.
  • Darüber Hinaus lässt sich das Video durch optionale oder verpflichtende Elemente (z.B. Text) ergänzen.
• Mark the Word
  • In einem vorgegebenen Text müssen die Lernenden eine bestimmte Anzahl zuvor definierter Wörter (richtig) markieren
• Personality Quiz
  • Dient der Erstellung einer Fragenfolge, mit alternativen Antwortmöglichkeiten.
  • Fragen beziehen sich hierbei auf persönliche Präferenzen.
• Quiz (Question Set)
  • Die Autor*innen erstellen eine Folge verschiedener Fragentypen.
  • Mehrere H5P Inhaltstypen können integriert bzw. verwendet werden.
  • Das Aussehen der Fragen kann mit Bildern etc. erweitert werden.
• Summary
  • Lernende müssen Schlüsselinformationen, die in einem Text, Video oder einer Präsentation gegeben werden, in eine (korrekte) Reihenfolge bringen.
• Timeline
  • Hier können auf einer Zeitachse verschiedene (sequentielle) Zeitpunkte und/oder -räume definiert werden
  • Diese Zeitangaben können sich überschneiden
  • Zu jeder Zeitangabe kann eine Überschrift, ein ergänzender Text sowie externe Medien (Hyperlinks, Google Maps, Twitter, Wikipedia, YouTube etc.) hinzugefügt werden
• Virtual Tour (360)
  • Ermöglicht die Einbettung eines 360°-Bildes, dass mit diversen Elementen (z.B. Fragen, Text und Interaktionen) angereichert werden kann

Weiterführende Informationen

Weiterführende Informationen:
...zur Erstellung von Content Types: https://h5p.org/documentation/for-authors/tutorials
...vollwertige Beispiele zu den Content Types: https://h5p.org/content-types-and-applications

Offener Moodle-Kurs zu H5P:
Einfach mit der Unikennung oder als "Gast" anmelden.
...Erste Schritte in Moodle: https://moodle.uni-due.de/course/view.php?id=11029

H5P Vorlagen

Für den Inhaltstyp Course Presentation stehen zwei Vorlagen als ZIP-Datei bereit, die sich am Corporate Design der UDE orientieren:

• Schmucke H5P Course Presentation: Datei:H5p-ude-design-681.zip
• Schlichte H5P Course Presentation Datei:H5p-ude-design-schlicht-683.zip

Formeln darstellen mit TeX in H5P

Innerhalb von H5P können mathematische Ausdrücke und weitere Formeln mithilfe von TeX beschrieben und dargestellt werden.
Dazu muss lediglich der jeweilige TeX-Ausdruck an die Stelle (reguläre Eingabefelder) im H5P-Editor eingetragen werden, an der später der Ausdruck bzw. die Formel erscheinen soll. Hierbei werden, unabhängig vom Inhaltstyp, alle Textfelder in H5P unterstützt.

Für die Deklaration eines TeX-Ausdrucks stehen drei mögliche Wege zur Verfügung:

• \( LaTeX Code \) für die Inline-Darstellung, d.h. für Satzteile usw.
• \[ LaTeX Code \] oder optional $$ LaTeX Code $$ für die Block-Darstellung, d.h. als eigenständige zentrierte Formel.

Eine generelle Anleitung zur Nutzung von Tex in Moodle ist hier zu finden: Formeln darstellen mit TeX in moodle

Changelog (Änderungsprotokoll)

April 2018

• Der Inhaltstyp "Image Hotspots" steht nun zur Verfügung.

Juni 2018

• Der Inhaltstyp "Drag and Drop" steht nun zur Verfügung.
• Der Inhaltstyp "Personality Quiz" steht nun zur Verfügung.
• Der Inhaltstyp "Quiz (Question Set)" steht nun zur Verfügung.

Juli 2018

• H5P Vorlagen für den Inhaltstyp Course Presentation (im Corporate Design der UDE) hinzugefügt.

August 2018

• Generelle Unterstützung von TeX in H5P, zur Darstellung von Formeln [Testphase gestartet]
• Der Inhaltstyp "Summary" steht nun zur Verfügung.

September 2018

• Der Inhaltstyp "Documentation Tool" steht nun zur Verfügung.

Oktober 2018

• Der Inhaltstyp "Interactive Video" steht nun zur Verfügung. [Testphase gestartet]

Dezember 2018

• Der Inhaltstyp "Dialog Cards" steht nun zur Verfügung.

Mai 2019

• Der Inhaltstyp "Branching Scenario (beta)" steht nun zur Verfügung.
• Der Inhaltstyp "Virtual Tour (360)" steht nun zur Verfügung.

Oktober 2019

• TeX wurde in H5P integriert.

Dezember 2019

• Der Inhaltstyp "Advanced fill the blanks" steht nun zur Verfügung.
• Der Inhaltstyp "Agamotto" steht nun zur Verfügung.
• Der Inhaltstyp "Dictation" steht nun zur Verfügung.
• Der Inhaltstyp "Image pairing" steht nun zur Verfügung.