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
• 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
• 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 ein Studierender die Präsentation gesehen hat, ein Lehrender zwischenzeitlich aber Änderungen dran vorgenommen hat, wird dem Studierenden 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.
• Documentation Tool
  • Erlaubt die Erstellung einer strukturierten Abfolge, für einen Schreibprozess.
  • Es können Unterpunkte (Abfolge) gesetzt werden.
• Drag and Drop
  • Die Autorin/ der Autor kann 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 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 Autorin/ der Autor kann 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).
    • Nutzer 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 Autorin/ der Autor erstellt 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.