Vor einiger Zeit erreichte mich eine Anfrage, wie man KI-generierte Inhalte am einfachsten in eine H5P-Zeitleiste bringen könne. Einige H5P-Inhaltstypen haben ja Importschnittstellen, die auch offiziell als Schnittstelle zu einer KI beworben werden. Leider ist das aber bei den wenigsten Inhaltstypen möglich und so auch nicht bei der Zeitleiste. Mit etwas Mut geht es aber trotzdem relativ einfach. In diesem Beitrag erkläre ich, wie man mit Hilfe von KI automatisch Ereignisse in eine H5P-Zeitleiste einfügen kann.

Ausgangspunkt: eine H5P-Zeitleiste erstellen

Zu Beginn benötigt man ein Werkzeug, um die H5P-Dateien zu erstellen. Ein besonders benutzerfreundliches Tool dafür ist Lumi, mit dem man H5P-Inhalte lokal auf einem Computer erstellen und bearbeiten kann.

  1. Erstellung einer Zeitleiste in Lumi
    In Lumi erstellt man eine neue H5P-Zeitleiste und fügt ein paar Dummy-Daten ein – sie dienen lediglich als Platzhalter und erleichtern später die Bearbeitung.

  2. Speichern der Zeitleiste
    Dann speichert man die Zeitleiste unter einem geeigneten Namen, z. B. zeitleiste.h5p.

Schritt 1: H5P-Datei umbenennen und entpacken

Eine H5P-Datei ist im Grunde genommen nichts anderes als eine ZIP-Datei, die verschiedene Dateien und Ordner enthält, darunter auch die Inhalte und Konfigurationen. Um an die JSON-Datei zu gelangen, die die Daten der Zeitleiste enthält, geht man wie folgt vor:

  1. Datei umbenennen
    Man ändert die Dateiendung der zeitleiste.h5p zu zeitleiste.zip. Windows- oder macOS-Nutzer müssen möglicherweise die Funktion zur Anzeige von Dateiendungen aktivieren.

  2. ZIP-Datei entpacken
    Die Datei entpackt man dann in einen neuen Ordner.

  3. JSON-Datei finden
    Im entpackten Ordner findet man den Unterordner content. Darin befindet sich die Datei content.json. Diese Datei enthält den Code, der die Daten der Zeitleiste beschreibt.

Schritt 2: JSON-Daten bearbeiten

Die Datei content.json kann man mit einem Texteditor (z. B. Notepad++ oder VS Code) öffnen und bearbeiten. Hier beginnt der spannende Teil: Man kann den Inhalt der Zeitleiste nun präzise anpassen bzw. dies einer KI überlassen. Ein Beispiel für die Struktur der Datei ist:

{
  "timeline": {
    "defaultZoomLevel": "0",
    "height": 600,
    "asset": {},
    "date": [
      {
        "asset": {},
        "text": "",
        "startDate": "2024,12,01",
        "headline": "Ein Test"
      },
      {
        "asset": {},
        "startDate": "2024,12,19",
        "headline": "Noch ein Datum",
        "text": ""
      }
    ],
    "language": "de",
    "text": "",
    "headline": "Zeitleiste"
  }
}

Zum Beispiel könnte man von einer KI eine Zeitleiste zur deutschen Einheit erstellen, in welcher die markanten Ereignisse von 1989 bis 1990 eingefügt sind. Um Vorschläge für passende Inhalte zu erhalten, gibt man dazu den Code der JSON-Datei ein und formuliert eine konkrete Anfrage wie:

Setze markante Daten der deutschen Einheit von 1989 bis 1990 in diese Vorlage ein.

Das Ergebnis muss selbstverständlich noch auf Korrektheit überprüft werden. Hier das unbearbeitete Ergebnis der KI:

{
  "timeline": {
    "defaultZoomLevel": "0",
    "height": 600,
    "asset": {},
    "date": [
      {
        "asset": {},
        "startDate": "1989,11,09",
        "headline": "Fall der Berliner Mauer",
        "text": "Die Berliner Mauer fällt, ein Symbol für das Ende der Teilung Deutschlands."
      },
      {
        "asset": {},
        "startDate": "1989,11,10",
        "headline": "Öffnung der Berliner Mauer",
        "text": "Die DDR-Regierung erklärt, dass Bürger nun legal in den Westen reisen können."
      },
      {
        "asset": {},
        "startDate": "1989,11,18",
        "headline": "Erstes Treffen der 2+4-Gespräche",
        "text": "Die Gespräche zwischen den beiden deutschen Staaten und den vier Alliierten beginnen, um die Voraussetzungen für die Wiedervereinigung zu schaffen."
      },
      {
        "asset": {},
        "startDate": "1990,03,18",
        "headline": "Erste freie Volkskammerwahl",
        "text": "Die erste freie Wahl zur Volkskammer der DDR findet statt, ein wichtiger Schritt zur Wiedervereinigung."
      },
      {
        "asset": {},
        "startDate": "1990,05,18",
        "headline": "Vertrag über die endgültige Regelung in Bezug auf Berlin und Deutschland",
        "text": "Der Zwei-plus-Vier-Vertrag wird unterzeichnet, der die rechtlichen Grundlagen für die Wiedervereinigung schafft."
      },
      {
        "asset": {},
        "startDate": "1990,07,01",
        "headline": "Währungs-, Wirtschafts- und Sozialunion",
        "text": "Die Einführung der D-Mark in der DDR markiert einen bedeutenden Fortschritt in der Wiedervereinigung."
      },
      {
        "asset": {},
        "startDate": "1990,08,31",
        "headline": "Vertrag zur Vereinigung von DDR und BRD",
        "text": "Der Einigungsvertrag wird unterzeichnet, der den rechtlichen Rahmen für die Wiedervereinigung festlegt."
      },
      {
        "asset": {},
        "startDate": "1990,09,12",
        "headline": "Beitritt der DDR zur Bundesrepublik Deutschland",
        "text": "Die DDR tritt der Bundesrepublik Deutschland bei, und die Wiedervereinigung ist formal vollzogen."
      },
      {
        "asset": {},
        "startDate": "1990,10,03",
        "headline": "Tag der Deutschen Einheit",
        "text": "Deutschland wird offiziell wiedervereinigt und der 3. Oktober wird zum Nationalfeiertag erklärt."
      }
    ],
    "language": "de",
    "text": "",
    "headline": "Zeitleiste der Deutschen Einheit (1989-1990)"
  }
}

Bei JSON-Dateien muss man darauf achten, dass diese sehr empfindlich hinsichtlich ihrer Struktur und Einrückung sind.

Schritt 3: Datei zurück in das H5P-Format umwandeln

  1. JSON-Datei ersetzen
    Man überschreibt die ursprüngliche content.json im content-Ordner mit der bearbeiteten Version.

  2. Ordner wieder packen
    Anschließend werden alle entpackten Dateien und Ordner (einschließlich der JSON-Datei) wieder in einer ZIP-Datei gespeichert. Hier muss man darauf achten den Inhalt des Ordners “Zeitleiste” zu zippen. Man wird leicht verleitet den Ordner selbst zu zippen, aber dann ist man eine Ebene zu hoch. Man muss in den Odner klicken, alle Ordner und Dateien markieren und diese in ein ZIP-Archiv komprimieren.

  3. ZIP-Datei umbenennen
    Die Dateiendung wird wieder zu .h5p geändert.

  4. In Lumi testen
    Die neue H5P-Datei öffnet man in Lumi, um sicherzustellen, dass die Änderungen korrekt übernommen wurden.

Screenshot in Lumi Eine Zeitleiste in wenigen Minuten mit einer KI erstellt