H5P-Elemente

Das Modul einbinden

Um das Modul nutzen zu können, muss die Einbindung des Moduls über den Meta-Tag features erfolgen (siehe auch Abschnitt "Javascript"):

Das Modul verwenden

Achtung, seit 13. Januar 2026 ist kein Entpacken mehr nötig. Die h5p-Datei kann einfach im Verzeichnis abgelegt werden.

Für die Verwendung sind folgende Schritte zu erledigen:

1. Eine .h5p Datei im Verzeichnis ablegen (Dateinamen ohne Leerzeichen und besser Bindestriche als Unterstriche). Zum Beispiel: testdatei.h5p
2. In der Inhaltsdatei, an der gewünschten Stelle, den folgenden Tag setzen. Der Eintrag in url muss dem Dateinamen entsprechen:

   <div class="content-h5p" data-config='{"url": "testdatei", "width": "400"}'></div>

Konfiguration vornehmen

data-config - Übergabe der Konfiguration im JSON Format, Reihenfolge beliebig

• url Hier wird der Dateiname der h5p-Datei übergeben.
• width Damit wird die Breite des Elementes festgelegt (Standardwert: 400px).
• download kann auf true gesetzt werden, dann wird ein Download-Button zur Datei eingeblendet (Standardwert: false).

Beispiel 1

<div class="content-h5p" data-config='{"url": "find-words"}'></div>

Beispiel 1 mit Downloadmöglichkeit

<div class="content-h5p" data-config='{"url": "find-words", "download": true}'></div>

Beispiel 2

<div class="content-h5p" data-config='{"url": "crossword", "width": "500"}'></div>