H5P-Elemente offline erstellen und in HTML exportieren mit Lumi

In diesem Beitrag werfen wir einen Einblick auf die Open-Source-Software Lumi. Lumi ist als Desktopanwendung verfügbar für Windows, macOS und Linux und ermöglicht die Erstellung von H5P-Elementen. H5P ist eine freie, quelloffene Software und steht für HTML5 Package. Mit ihr lassen sich interaktive Inhalte wie Videos (Element „Interactive Video“), Grafiken (Element „Image Hotspots“), Quizze (Element „Personality Quiz“) und verschiedene Formen von Lückentexten (z. B. Element „Fill in the Blanks“) ohne Programmierkenntnisse erstellen und in Blogbeiträge, Hackpads, Padlets oder Learning Management Systems (LMS) einbinden.

Mit Lumi lassen sich auch ohne Programmierkenntnisse leicht kreative und interaktive (Lern-)Inhalte erstellen (Abbildung von Florian HagenCC0/Public Domain)

Ein Vorteil von Lumi gegenüber anderen H5P-Editoren: Lumi lässt sich offline nutzen. Eine Webseite (u. a. www.h5p.org), ein LMS (bspw. Stud.IP) oder ein Content-Management-System (z. B. WordPress) wird somit nicht benötigt, um eigene interaktive Lernelemente zu kreieren. Ein weiterer Vorteil: die mit Lumi erstellten Elemente lassen sich per Mausklick als HTML-Datei exportieren. Diese können auf fast allen Geräten ohne großen Aufwand genutzt werden. Aktuell (Stand: 28.02.2022) stehen 48 Inhaltstypen zur Verfügung.

Die Eindrücke zu Lumi in diesem Beitrag basieren auf der Version 0.8.3 für macOS. Der Beitrag ist in folgende Abschnitte eingeteilt:

  • 1.) Download und erste Schritte,
  • 2.) Editier- und Vorschaumodus,
  • 3.) Speichern und Export von H5P-Elementen,
  • 4.) Sonstiges.

Die Software wird ausschnitthaft am Beispiel des Elements „Image Hotspots“ vorgestellt.

1. Download und erste Schritte

Lumi lässt sich über https://lumi.education/#download herunterladen. Hier muss lediglich das passende Betriebssystem ausgewählt werden.

Lumi-Download-Optionen (Screenshot „Downloadseite“, nicht unter freier Lizenz)

Nach einer kurzen Installation können wir Lumi starten und haben zunächst die Wahl zwischen „H5P-Editor“ und „Lumi Analytics“. Da wir ein H5P-Element erstellen bzw. bearbeiten möchten, wählen wir den Editor aus (1.) und landen in einem weiteren Optionsfenster. Hier (2.) können wir wählen, ob wir bereits existierende Dateien bearbeiten wollen („EIN VORHANDENES H5P ÖFFNEN“) oder ein neues H5P-Element erstellen wollen („EIN NEUES H5P ERSTELLEN“).

Wählen wir die zweite Option „EIN NEUES H5P ERSTELLEN“, so haben wir nun die Wahl zwischen verschiedenen Inhaltstypen. Die Auswahlmaske ist im Grunde komplett identisch mit den gängigen H5P-Online-Editoren, die über ein WordPress-Plugin oder www.h5p.org genutzt werden können.

Auswahl eines H5P-Inhaltstyps (Screenshot „H5P-Elementauswahl“, nicht unter freier Lizenz)

Beim ersten Start der Software sind zunächst nicht alle Inhaltstypen installiert. Dies lässt sich aber schnell mit wenigen Mausklicks nachholen. Erkennbar sind die nicht installierten H5P-Elemente am Hinweis „Übernehmen“. Auf neuere Versionen der Elemente wird durch den Hinweis „Aktualisierung verfügbar“ aufmerksam gemacht. Wählt man das erste Mal ein H5P-Element aus, so wird von Lumi auf die Möglichkeit eines Kurztutorials hingewiesen.

Hinweis auf vorhandene Tutorials (Screenshot „Tutorialhinweis“, nicht unter freier Lizenz)

Später können diese Tutorials nach Auswahl eines Elements und Klick auf „Tutorial“ am oberen Bildschirmrand eingesehen werden.

Zugriff auf Tutorials (Screenshot „Tutorialbutton“, nicht unter freier Lizenz)

Apropos Tutorials. Die über Lumi einzeln abrufbaren Einführungen zu H5P-Elementen lassen sich auch direkt über die Rubrik „Examples & downloads“ auf www.h5p.org abrufen. Eine richtig tolle Beispielsammlung bietet auch „H5P im Überblick“. Hier werden zu den meisten Elementen neben Beispielen ganz offen Ideen für den Einsatz und Schritt-für-Schritt-Anleitungen zur Erstellung geteilt.

„H5P im Überblick“ bietet eine umfangreiche Anleitung mit Ideen und Anleitungen (Abbildung von Nele HirscheBildungslaborCC0/Public Domain)

2. Editier- und Vorschaumodus

Hat man sich für ein Element entschieden (hier ausgewählt: „Image Hotspots“), so öffnet sich der leere Editierbildschirm.

Leere Editiermaske eines H5P-Elements (Screenshot „Editiermaske“, nicht unter freier Lizenz)

Über die unterschiedlichen Eingabe- und Optionsfelder lässt sich das eigene Lernelement nun gestalten. Für „Image Hotspots“ (und andere Elemente) sollte zunächst ein Titel vergeben werden, bevor ein Hintergrundbild hinzugefügt, Alternativtexte festgelegt und Hotspot-Symbole positioniert und angepasst werden. Diese Hotspot-Symbole sorgen dafür, dass später auf Grafiken klickbare Symbole vorhanden sind, die beispielsweise weitere Informationen zur angeklickten Bildposition beinhalten.

Zur Veranschaulichung eines befüllten Editierbildschirmes habe ich nachfolgend über „H5P-Datei öffnen“ am linken Bildschirmrand das H5P-Element „Workflow Finanzierung Zeitschriftenartikel“ geöffnet, welches auch im Rahmen der Open Access Week 2021 im Blogbeitrag Wie finanziere ich meinen Zeitschriftenartikel? eingebunden wurde.

In einer bestehenden Editiermaske kann mit Klick auf „H5P-Datei öffnen“ auf bereits erstellte Materialien zurückgegriffen werden (Screenshot „Element öffnen“, nicht unter freier Lizenz)

Dieses Element kann im verlinkten Beitrag über einen Klick auf „Reuse“ einfach runtergeladen werden, um selbst ein wenig mit Lumi zu experimentieren. Ein weiteres „Image Hotspots“-Element zum Ausprobieren steht auch über den tub.torials-Beitrag Was bedeutet eigentlich Open Science? zur Verfügung.

Mit Klick auf „Reuse“ lassen sich H5P-Elemente runterladen und mit H5P-Editoren wie Lumi editieren (Screenshot „Zeitschriftenartikel“ von Isabo Schick und Florian Hagen)

Um zu sehen, wie unser Lernelement in der praktischen Nutzung aussieht, kann nun in Lumi die Vorschau-Option über Klick auf die Registerkarte „Vorschau“ genutzt werden.

Auswahl der Vorschau-Option (GIF „Zeitschriftenartikel“ von Isabo Schick und Florian Hagen)

Diese Option von Lumi ist in meinen Augen ein großer Vorteil gegenüber vielen H5P-Online-Editoren, da in Lumi ohne große Wartezeiten auf Mausklick angezeigt wird, wie das Lernelement in der Praxis aussieht. Bei Online-Lösungen muss vor der Wahl der Vorschau-Option immer gespeichert werden. Andernfalls werden die Änderungen nicht in der Vorschau abgebildet. Werden nun im eigenen Workflow wieder und wieder Kleinigkeiten geändert und häufig über die Vorschau überprüft, war dies zumindest für mich in der praktischen Nutzung von Online-Editoren häufiger störend, da der Speichervorgang selbst sowie das hin- und herschalten zwischen Editier- und Vorschaumodus des Öfteren einige Augenblicke dauerte. Der Wechsel zwischen Editier- und Vorschauperspektive bei H5P-Online-Editoren sorgt auch dafür, dass nicht gespeicherte Änderungen verloren gehen. Dies ist bei Lumi nicht der Fall. Dennoch sollte natürlich auch hier das regelmäßige Speichern nicht vergessen werden. Wird die Anwendung geschlossen, ohne zu speichern, so gibt es leider keine Option wie „Auto-Wiederherstellung“.

3. Speichern und Export von H5P-Elementen

Erfreulicherweise funktioniert der Speichervorgang in Lumi schnell und unkompliziert. Dieser kann sowohl per Shortcut („Cmd“-Taste + „S“) als auch Auswahl von „Datei“ am oberen linken Bildschirmrand und Klick auf „Speichern“ ausgelöst werden.

Gespeichert werden kann mit Lumi durch Shortcuts oder Klick auf „Datei“ und Auswahl von „Speichern“ (Screenshot „Speichern“, nicht unter freier Lizenz)

Ein erfolgreicher Speichervorgang wird durch einen grün hinterlegten Hinweis „H5P gespeichert!“ bestätigt. Das Element liegt nun als H5P-Datei vor und kann in Lernplattformen wie Stud.IP oder Content-Management-Systeme wie WordPress eingebunden werden, wenn ein H5P-Plugin aktiviert ist. Wird eine dieser Möglichkeiten für die Abbildung von H5P genutzt, so lassen sich die Elemente auch in Open-Source-Anwendungen wie HedgeDoc (Weiteres zu HedgeDoc und Markdown haben wir in den Beiträgen Online-Fortbildungen mit HedgeDoc und Greenshot dokumentieren und Schreiben mit Markdown festgehalten) einbetten, um zum Beispiel für Seminare, Workshops und andere Veranstaltungen Arbeitsumgebungen für Aufgaben zur Verfügung zu stellen, die gemeinsam bearbeitet werden können. Wer dies einmal schnell ausprobieren möchte:

  • Über diesen Link lässt sich die TU-Installation von HedgeDoc aufrufen,
  • Auswahl von „Neue Gastnotiz“ (oberer Bildschirmrand, rechts) erzeugt ein leeres Dokument,
  • Aufruf eines H5P-Elements (zum Beispiel dieses interaktive Video),
  • Klick auf die Schaltfläche „Embed“ am unteren Rand des H5P-Elements,
  • Einfügen des Links in das Hackpad.

Das H5P-Element sollte nun im Hackpad zu sehen und verwendbar sein.

Lumi bietet für H5P-Elemente mit der Export-Option zudem eine weitere Möglichkeit des Teilens. Wenn wir am oberen Bildschirmrand auf „Datei“ klicken, können wir „Exportieren…“ auswählen und einen HTML-Export erstellen. Mit Auswahl von „All-in-One-HTML-Datei“ entsteht so zum Beispiel ein H5P-Element, das auf Computern mit Internetbrowser durch einen einfachen Doppelklick auf die generierte HTML-Datei geöffnet und genutzt werden kann. Erfolgreich ausprobiert habe ich dies bisher mit den Browsern Safari, Firefox und Chrome. Lernende können so also interaktive H5P-Elemente nutzen, ohne dass weitere Anwendungen installiert werden müssen oder eine Internetverbindung benötigt wird (außer für den Download der HTML-Datei).

Die Option des HTML-Exports ist auch im Hinblick auf Repositorien wie TUHH Open Research (TORE) interessant, da HTML zu den unterstützten Formaten von TORE gehört. Somit ist es möglich auch für interaktive Open Educational Resources (OER) einen Digital Object Identifier (DOI) zu erzeugen. Diese Form des Identifikators ist – ähnlich der ISBN in Büchern – eindeutig und dauerhaft. Quellenbelege in der Wissenschaft setzen daher immer bevorzugt auf DOIs statt klassische URLs, um nicht mehr funktionierenden Links vorzubeugen. Wie dies in der Praxis aussehen kann, zeigt das Lernelement „4 Step Creation Method“ von Jan Küchenhof und Hanna Marie Bickmeier. In diesem H5P-Element, das im Rahmen der Hamburg Open Online University (HOOU) an der TUHH entstanden ist, kann mehr über eine Methode zur systematischen Neugewinnung von Innovationen erfahren werden.

TORE-Eintrag „4 Step Creation Method“ (Screenshot „TORE-Eintrag“, nicht unter freier Lizenz)

4. Sonstiges

Lumi ist zum Erstellen und teilen von H5P-Elementen eine tolle Sache. Einige Schritte der H5P-Erstellung lassen sich so angenehmer und effizienter für mich umsetzen und Lerninhalte können zusätzlich über andere Wege zugänglich gemacht werden. Was ich mir neben einer automatischen Zwischenspeicheroption für den Fall der Fälle (man kennt es ja, auch heute vergisst man ab und an in Eile durchaus mal das Speichern 😉 ) noch wünschen würde, wäre eine Option wie „Zuletzt verwendete H5P-Elemente öffnen“. Für aktive Sitzungen mit Lumi werden alle zuletzt geöffneten H5P-Elemente am linken Rand eingeblendet, sobald das Programm aber geschlossen bzw. neu gestartet wird, werden zuletzt geöffneten Dateien nicht mehr angezeigt. Abstürze oder andere Probleme habe ich mit Lumi bislang ansonsten nach vielen Monaten der Nutzung noch keine gehabt.

Was haltet ihr von Lumi und H5P-Elementen? Nutzt ihr Letztere zum Lehren, Lernen und andere Zwecke oder greift ihr auf Alternativen zurück? Teilt eure Erfahrungen gerne offen über die Kommentarfunktion oder andere Kanäle 🙂


CC BY 4.0
Weiternutzung als OER ausdrücklich erlaubt: Dieses Werk und dessen Inhalte sind – sofern nicht anders angegeben – lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: H5P-Elemente offline erstellen und in HTML exportieren mit Lumi von Florian Hagen, Lizenz: CC BY 4.0. Der Beitrag und dazugehörige Materialien stehen auch im Markdownformat und als PDF zum Download zur Verfügung.
Emotionen Prüfungen

Von Buchschnitt bis Wissenschaft – Quizze rund um Bibliothek, Archiv & Co.

Für viele Fachangestellte für Medien- und Informationsdienste (FaMI) steht nach etwa eineinhalb Jahren Ausbildung die Zwischenprüfung an. In dieser Prüfung werden Kenntnisse aus verschiedenen Lernfeldern wie Wissenschaftskunde, Medienkompetenz und der Beschaffung von Medien und Informationen geprüft.

Zur Vorbereitung auf die Prüfung gibt es, auch abhängig von den individuellen Lernvorlieben, zahlreiche Methoden – von Mitschriften und Lernkarten über gemeinsame Abfragen bis hin zu interaktiven Quizzen, die den Lernstoff spielerisch und abwechslungsreich aufbereiten.

Die hier vorgestellten Übungen richten sich vor allem an FaMIs. Sie eignen sich aber natürlich auch für Bibliotheksmitarbeitende, Studierende und Schüler*innen, die ihr Wissen überprüfen, vertiefen oder einfach einen ersten Einblick in die jeweiligen Themen gewinnen möchten.

Mit diesem Beitrag möchten wir einige Quizze teilen. Interessierte können damit ihr Wissen testen, auffrischen oder eigene Quizze zur Prüfungsvorbereitung remixen. Dieser Beitrag und die eingebetteten H5P-Elemente sind das Ergebnis gemeinsamer Teamarbeit.

Wissenschaftskunde

Wie funktioniert Wissenschaft? Welche Prinzipien und Methoden sind essentiell? In diesem Quiz kannst du dein Wissen zur Wissenschaftskunde überprüfen und vertiefen. Das Quiz umfasst sechs Fragen unterschiedlicher Länge. Diese befassen sich mit einigen Grundlagen des wissenschaftlichen Arbeitens.

Das Quiz umfasst u.a. folgende H5P-Fragetypen:

  • Multiple Choice,
  • Lückentext (Fill in the Blanks),
  • Wortzuordnung per Drag & Drop,
  • Ziehe die Wörter an die richtige Stelle (Drag the Words).

Medienkompetenz

Nach den Grundlagen der Wissenschaftskunde geht es um Medienkompetenz – ein ebenfalls wichtiger Bestandteil der Ausbildung. Von Buchschnitt bis Archivierung – wie gut kennst du dich mit Medienformaten und Methoden der Informationsaufbereitung aus? In diesem Quiz kannst du dein Wissen dazu überprüfen und vertiefen. In insgesamt 25 Fragen werden verschiedene Aspekte der Medienkompetenz thematisiert.

Das Quiz umfasst u.a. folgende H5P-Fragetypen:

  • Multiple Choice,
  • Wahr/Falsch (True or False),
  • Lückentext (Fill in the Blanks),
  • Wortzuordnung per Drag & Drop.

Wir wünschen viel Erfolg!

Viel Spaß beim Testen und viel Erfolg bei eventuell anstehenden Prüfungen zu diesen Themen! Bei Rückfragen zur FaMI-Ausbildung oder zu den geteilten Quizzes kannst du uns gerne kontaktieren. Wenn du dich für weitere Themen interessierst, die für die FaMI-Ausbildung hilfreich sein könnten, schau doch auch mal in unsere Blogbeiträge zu Creative-Commons-Lizenzen, den Vorteilen von Open Access oder dem Aufbau eines Buches rein.


CC BY 4.0
Weiternutzung als OER ausdrücklich erlaubt: Dieses Werk und dessen Inhalte sind – sofern nicht anders angegeben – lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: Von Buchschnitt bis Wissenschaft – Quizze rund um Bibliothek, Archiv & Co. von Ronja Schwardt & Florian Hagen, Lizenz: CC BY 4.0. Der Beitrag und dazugehörige Materialien stehen auch im Markdownformat und als PDF zum Download zur Verfügung.


1 2 3 4 9