H5P: Unterschied zwischen den Versionen

Aus MoodleKnowledgeBase
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
 
(33 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
=Einleitung=
=Einleitung=
H5P (HTML5 Package) ist ein sogenanntes Content Collaboration Framework. D.h., dass es eine Basis zur gemeinschaftlichen Erstellung von interaktiven Inhalten bereitstellt.<br>
H5P (HTML5 Package) ist ein sogenanntes Content Collaboration Framework. Das heißt, dass es eine Basis zur gemeinschaftlichen Erstellung von interaktiven Inhalten bereitstellt.<br>
Dazu nutzt H5P moderne Webtechnologien (HTML5, CSS3 und JavaScript), um Inhalte interaktiv darzustellen und auf unterschiedlichen Geräten und Plattformen verfügbar zu machen.<br>
Dazu nutzt H5P moderne Webtechnologien (HTML5, CSS3 und JavaScript), um Inhalte interaktiv darzustellen und auf unterschiedlichen Geräten und Plattformen verfügbar zu machen.<br>
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.
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.
Zeile 6: Zeile 6:
=Verfügbare H5P-Inhaltstypen an der UDE=
=Verfügbare H5P-Inhaltstypen an der UDE=
* Accordion
* Accordion
**ermöglicht den Text in einzelne Bereiche anzuzeigen, die dann einzeln aufgeblättert werden können
** 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
* Chart
**visuelle Ansicht für den Vergleich von Zahlen (Diagramme)
** Visuelle Ansicht für den Vergleich von Zahlen (Diagramme)
**zwei Varianten: Bar und Pie
** Zwei Varianten: Bar und Pie
***Bar: Ansicht der Zahlen in Stabdiagrammen
*** Bar: Ansicht der Zahlen in Stabdiagrammen
***Pie: Ansicht der Zahlen im Kreisdiagramm
*** 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
* Course Presentation
** hier können neue interaktive Präsentationen für Moodle erstellt werden
** 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
** 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
** 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 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
** 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
* Dialog Cards
** Dienen dem Memorieren von Wörtern, Ausdrücken oder Sätzen.
** 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).
** 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.
** 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
* Documentation Tool
** Erlaubt die Erstellung einer strukturierten Abfolge, für einen Schreibprozess.
** Erlaubt die Erstellung einer strukturierten Abfolge, für einen Schreibprozess.
** Es können Unterpunkte (Abfolge) gesetzt werden.
** Es können Unterpunkte (Abfolge) gesetzt werden.
* Drag and Drop
* Drag and Drop
** Die Autorin/ der Autor kann zwei oder mehr Elemente (Text oder Bild) per „Drag and Drop“ miteinander verknüpfen.
** 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.
** Kann eigenständig oder innerhalb anderer Inhaltstypen verwendet werden.
* Find the words
* Flashcards
* Flashcards
** Hier können Lernkarten erstellt werden
** Hier können Lernkarten erstellt werden
Zeile 37: Zeile 69:
** Die Breite, Mindestbreite sowie Höhe des iFrames können eingestellt werden
** Die Breite, Mindestbreite sowie Höhe des iFrames können eingestellt werden
** Der iFrame-Inhalt kann für den Vollbildmodus des Browsers "freigegeben" 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
* Image Hotspots
**Die Autorin/ der Autor kann ein Bild hochladen und beliebig viele interaktive Hotspots definieren.
**Die Autorin/ der Autor kann ein Bild hochladen und beliebig viele interaktive Hotspots definieren.
Zeile 46: Zeile 81:
***Die Startposition (in %) sowie die Richtung (horizontal vs. vertikal) des Schiebereglers können voreingestellt 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
**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
* Image Sequencing
**Lernaufgabe, bei der die Lernenden mehrere Abbildungen angezeigt bekommen.
**Lernaufgabe, bei der die Lernenden mehrere Abbildungen angezeigt bekommen.
Zeile 52: Zeile 90:
* Image Slider
* Image Slider
**Hier bekommen die Lernenden mehrere Bilder in einem Slider (horizontal-navigierbare Folge von Abbildungen) angezeigt.
**Hier bekommen die Lernenden mehrere Bilder in einem Slider (horizontal-navigierbare Folge von Abbildungen) angezeigt.
* Interactive Video (''für Videos bis 50MB'')
* Information Wall
** Die Autorin/ der Autor kann ein Video hochladen.
**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.
** 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).
*** 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.
*** 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.
** 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
* Mark the Word
** In einem vorgegebenen Text müssen die Lernenden eine bestimmte Anzahl zuvor definierter Wörter (richtig) markieren
** In einem vorgegebenen Text müssen die Lernenden eine bestimmte Anzahl zuvor definierter Wörter (richtig) markieren.
* Personality Quiz
* Personality Quiz
** Dient der Erstellung einer Fragenfolge, mit alternativen Antwortmöglichkeiten.
** Dient der Erstellung einer Fragenfolge, mit alternativen Antwortmöglichkeiten.
** Fragen beziehen sich hierbei auf persönliche Präferenzen.
** Fragen beziehen sich hierbei auf persönliche Präferenzen.
* Quiz (Question Set)
* Quiz (Question Set)
** Die Autorin/ der Autor erstellt eine Folge verschiedener Fragentypen.
** Die Autor*innen erstellen eine Folge verschiedener Fragentypen.
** Mehrere H5P Inhaltstypen können integriert bzw. verwendet werden.
** Mehrere H5P Inhaltstypen können integriert bzw. verwendet werden.
** Das Aussehen der Fragen kann mit Bildern etc. erweitert 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
* Summary
** Lernende müssen Schlüsselinformationen, die in einem Text, Video oder einer Präsentation gegeben werden, in eine (korrekte) Reihenfolge bringen.
** Lernende müssen Schlüsselinformationen, die in einem Text, Video oder einer Präsentation gegeben werden, in eine (korrekte) Reihenfolge bringen.
* Timeline
* Timeline
** Hier können auf einer Zeitachse verschiedene (sequentielle) Zeitpunkte und/oder -räume definiert werden
** Hier können auf einer Zeitachse verschiedene (sequentielle) Zeitpunkte und/oder -räume definiert werden.
** Diese Zeitangaben können sich überschneiden
** 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
** 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=
Zeile 78: Zeile 132:
...zur Erstellung von Content Types: https://h5p.org/documentation/for-authors/tutorials<br>
...zur Erstellung von Content Types: https://h5p.org/documentation/for-authors/tutorials<br>
...vollwertige Beispiele zu den Content Types: https://h5p.org/content-types-and-applications<br>
...vollwertige Beispiele zu den Content Types: https://h5p.org/content-types-and-applications<br>
...Kurzübersicht zu allen H5P-Inhaltstypen (losgelöst vom Moodle der UDE): [[Datei:Kurzübersicht - H5P Inhaltstypen 2022.03.pdf]]<br>
<br>
<br>
'''Offener Moodle-Kurs zu H5P:'''<br>
'''Offener Moodle-Kurs zu H5P:'''<br>
Einfach mit der Unikennung oder als "Gast" anmelden.<br>
Einfach mit der Unikennung oder als "Gast" anmelden.<br>
...Erste Schritte in Moodle: https://moodle.uni-due.de/course/view.php?id=11029
...Erste Schritte in Moodle: https://moodle.uni-due.de/course/view.php?id=11029
<br><br>
'''Video-Tutorial'''<br>
Explizit sei hier auf das Video-Tutorial ''[https://moodle.uni-due.de/course/view.php?id=11029#section-4 Interaktive Lernmodule in Moodle erstellen mit H5P]'' hingewiesen.<br>
Produziert von Laura-Marie Schmidt, für den [https://moodle.uni-due.de/course/view.php?id=19647 Showroom Lehre digital (Germanistik, 2020)].


==H5P Vorlagen==
==H5P Vorlagen==
Zeile 88: Zeile 147:
* Schlichte H5P Course Presentation [[Datei:H5p-ude-design-schlicht-683.zip]]
* Schlichte H5P Course Presentation [[Datei:H5p-ude-design-schlicht-683.zip]]


==Formeln darstellen mit TeX in H5P [''Testphase'']==
==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.<br>
Innerhalb von H5P können mathematische Ausdrücke und weitere Formeln mithilfe von TeX beschrieben und dargestellt werden.<br>
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.<br><br>
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.<br><br>
Eine generelle Anleitung zur Nutzung von Tex in Moodle, deren Notation auf H5P übertragbar ist, ist hier zu finden: [https://wiki.uni-due.de/moodle/images/6/61/TeX-moodle.pdf Formeln darstellen mit TeX in moodle]
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: [https://wiki.uni-due.de/moodle/images/6/61/TeX-moodle.pdf 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)=
=Changelog (Änderungsprotokoll)=
Zeile 123: Zeile 193:
'''Dezember 2018'''
'''Dezember 2018'''
* Der Inhaltstyp "Dialog Cards" steht nun zur Verfügung.
* 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 '[https://wiki.uni-due.de/moodle/index.php/H5P#Bewertungs.C3.BCbersicht_in_Moodle 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..

Aktuelle Version vom 12. April 2024, 13:16 Uhr

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:

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


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..
Abgerufen von „https://wiki.uni-due.de/moodle/index.php?title=H5P&oldid=2450“