H5P

Einleitung

H5P (HTML5 Package) ist ein sogenanntes Content Collaboration Framework. Das heißt, 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 es den Text in einzelnen 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.
• Advent Calendar (beta)
• Agamotto
  • Ermöglicht die Ansicht von Bildern, die der Reihe nach angeschaut oder detailreicher dargestellt werden sollen, in der Art eines Zoomeffektes.
  • Es besteht die Möglichkeit, Text bzw. Informationen die das aktuelle Bild beschreiben hinzuzufügen.
  • Wird über einen Slider gesteuert.
• AR Scavenger
  • Gestattet die Umsetzung einfacher Augmented Reality Szenarien, wobei die reale Umgebung (z.B. Arbeitsblätter oder Foliensätze) mithilfe digitaler Inhalte „erweitert“ wird.
  • Ausgangspunkt bilden individuell festgelegte, visuelle Marker (z.B. QR Codes). Werden diese mithilfe einer Kamera (Smartphone o.ä.) gefilmt, werden zwei Interaktionsmöglichkeiten angeboten:
    • Entweder wird ein 3D-Objekt (unterstützt wird das GLB- bzw. GLTF-Format) auf den Marker projiziert.
    • Oder eine H5P-basierte Interaktion (z.B. Inhaltstyp SingleChoice) wird nachgeladen.
• Branching Scenario
  • Dient der Erstellung einer Form adaptiven Lernens.
  • Verzweigte Storylines: Lernende bekommen auf Grundlage ihrer Auswahl/ Entscheidungen unterschiedliche Lernmaterialien angezeigt.
• 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.
• Cornell Notes
  • H5P-seitige Unterstützung zur Anwendung der sogenannten Cornell Methode.
  • Die Cornell Methode wurde, zur effizienten Erstellung von Notizen und deren (nachträglicher) Organisation, in den 1950er Jahren von Walter Pauk an der Cornell University entwickelt. Weitere Informationen sind unter dem nachfolgenden Link zu finden: https://lsc.cornell.edu/how-to-study/taking-notes/cornell-note-taking-system/
• 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 erstellte Präsentation 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.
• Crossword
  • Ermöglicht die Erstellung eines Kreuzworträtsels.
  • Im Bedarfsfall können zu den gesuchten Wörtern Hinweise gegeben werden.
  • Auch die Deklaration eines Lösungswortes ist möglich. Dabei ist jedoch darauf zu achten, dass sich dieses aus den gesuchten Wörtern bilden lässt.
• 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 anderer Inhaltstypen verwendet werden.
• Find the words
• 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 Choice
  • Die Autorin/ der Autor können eine Bildauswahl-Frage erstellen.
  • Dabei werden die Lernenden durch eine Frage dazu aufgefordert, eine bestimmte Teilmenge zuvor durch den/ die Autor:in eingestellter Bilder auszuwählen.
• 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.
• Information Wall
  • Ermöglicht die Darstellung einer simplen, strukturierten und durchsuchbaren Liste
• Interactive Book
  • Mehrere H5P Inhaltstypen können integriert bzw. verwendet werden. Dabei sind beliebig viele Inhalte auf einer Seite sowie beliebig viele „Buchseiten“ möglich.
  • Das Layout wird automatisch an die verwendeten Inhalte (Inhaltstypen) angepasst.
  • Stellt eine (erweiterte) Alternative, im Buch-Stil, z.B. zum Typ Course Presentation dar.
• Interactive Video
  • 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.
• KewAr Code
  • Bietet eine einfache und direkte Möglichkeit, QR-Codes zu erstellen.
  • Folgende Informationen können kodiert werden: Kontakt (u.a. Name, E-Mail-Adresse, Telefonnummer, Webseite, etc.), Event (u.a. Uhrzeiten, Örtlichkeit, Beschreibung, etc.), E-Mail-Adresse, ausgewählte H5P Inhaltstypen, Örtlichkeit, Telefonnummer, SMS (Vorlage), Text und URLs (Links).
• 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.
• Sort the Paragraphs
  • Ermöglicht die Deklaration mehrerer Texte (Absätze), welche zufällig vom System gemischt und von den Lernenden wieder in die korrekte Reihenfolge zu bringen sind.
• Structure Strip
  • Dient der Strukturierung und Anleitung in Schreibprozessen.
  • Dabei wird, zur Unterstützung der Lernenden, ein Strukturgerüst vorgegeben, welches den Aufbau sowie die Länge verschiedener Textabschnitte vorgibt.
• 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
...Kurzübersicht zu allen H5P-Inhaltstypen (losgelöst vom Moodle der UDE): Datei:Kurzübersicht - H5P Inhaltstypen 2022.03.pdf

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

Video-Tutorial
Explizit sei hier auf das Video-Tutorial Interaktive Lernmodule in Moodle erstellen mit H5P hingewiesen.
Produziert von Laura-Marie Schmidt, für den Showroom Lehre digital (Germanistik, 2020).

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

Bewertungsübersicht in Moodle

Welche H5P-Inhaltstypen das Gradebook (Bewertungsübersicht) in Moodle nutzen können, d.h. Punkte der Lernenden speichern bzw. übertragen können, haben wir Ihnen in dem nachfolgenden Dokument zusammengestellt: Datei:H5P-Bewertungsübersicht-in-Moodle.pdf

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ändig zentrierte Formel.

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

Wichtige Hinweise

Bitte beachten Sie, dass es aktuell (11.2020) zu Problemen kommt, wenn der Inhaltstyp Single Choice in andere Inhaltytpen (z.B. Course Presentation) eingebettet wird. Sofern Sie eine solche Konstellation umsetzen möchten, nutzen Sie hierzu den Inhaltstyp Multiple Choice und realisieren Sie diesen in der Art und Weise einer Single-Choice-Fragestellung. Die autonome Nutzung des Inhaltstyps Single Choice ist hingegen problemlos möglich.

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.

März 2020

• Kurzübersicht zu allen H5P-Inhaltstypen (PDF, im Abschnitt "Weiterführende Informationen") wurde hinzugefügt.

Mai 2020

• Hinweis auf Video-Tutorial (Interaktive Lernmodule in Moodle erstellen mit H5P) hinzugefügt.

August 2020

• Der Inhaltstyp "Interactive Book" steht nun zur Verfügung.

Oktober 2020

• Der Inhaltstyp "KewAr Code" steht nun zur Verfügung.

Dezember 2020

• Informationen zur 'Bewertungsübersicht in Moodle' wurden bereitgestellt.

September 2021

• Der Inhaltstyp "Crossword" steht nun zur Verfügung.
• Der Inhaltstyp "Image Choice" steht nun zur Verfügung.
• Der Inhaltstyp "Sort the Paragraphs" steht nun zur Verfügung.

März 2022

• Der Inhaltstyp "AR Scavenger" steht nun zur Verfügung.
• Der Inhaltstyp "Cornell Notes" steht nun zur Verfügung.
• Der Inhaltstyp "Structure Strip" steht nun zur Verfügung.

August 2022

• Der Inhaltstyp "Advent Calendar (beta)" steht nun zur Verfügung.
• Der Inhaltstyp "Find the words" steht nun zur Verfügung.

August 2023

• Der Inhaltstyp "Information Wall" steht nun zur Verfügung..