Title: h5p-cli-creator

Unbenannt: Text

Erstellung von H5P flash- und dialog-cards mittels scripting auf der Kommandozeile.h5p

Unbenannt: Text

Um viele Begriffe lernen zu können, eignen sich die Inhaltstypen von H5P, dialog-cards und flash-cards.

Mit etwas Vorarbeit lässt sich die Erstellung der beiden Inhaltstypen, zum Beispiel zum Vokabellernen, vereinfachen.

Sebastian Rettig, das ist der Mensch, der maßgeblich an dem Desktop-Editor für H5P Lumi, beteiligt ist, hatte sich die Mühe gemacht und ein Script gebaut mit dem ihr massenweise Excel- oder Calc dazu nutzen könnt, um dialog- und flashcards zu erstellen.

Unbenannt: Text

Schritt 1: Herunterladen des Scriptes

Du gehst auf die Seite: https://github.com/sr258/h5p-cli-creator

Credits: by Josef Schippers (Author); 2024; source http://lingopedia.de; licence CC BY-SA 4.0

[Image: Screenshot im Browser der Adresse https://github.com/sr258/h5p-cli-creator]

Unbenannt: Text

Dort klickst du auf auf den grünen Button mit der Beschriftung <> Code. Daraufhin öffnet sich ein Menü, unter dem du die Zip-Datei mit dem Script herunter laden kannst. Das sieht dann so aus.

[Image: Screenshot im Browser der Adresse https://github.com/sr258/h5p-cli-creator]

Unbenannt: Text

Nachdem diese Datei auf deinen Rechner runter geladen wurde, entpackst du diese und findest dann je nach Ort in dem sie entpackt wurde so etwas wie dieses vor: /home/****/Schreibtisch/h5p-cli-creator-master Bei Windows sieht das wohl etwas anders aus, aber daran erinnere ich mich nicht mehr ;-). In diesem Verzeichnis sieht es so aus:

[Image: Screenshot im Browser der Adresse https://github.com/sr258/h5p-cli-creator]

Unbenannt: Text

Schritt 2: Installation von npm Damit das Script läuft, muss npm installiert werden. npm ist eine Laufzeitumgebung für node.js.

Das muss auf der Kommandozeile geschehen.

Unbenannt: Text

2.1. Vorgehensweise unter Linux

- Kommandozeile öffnen.

- npm install eingeben

- npm run build

- node ./dist/index.js --help kann dir Hilfe zum Script geben

- node ./dist/index.js flashcards --help kann dir Hilfe zur Erstellung von flash-cards geben

- node ./dist/index.js dialogcards --help kann dir Hilfe zur Erstellung von dialog-cards geben

Unbenannt: Text

2.2. Vorgehensweise unter Windows

Unter Windows ist die Vorgehensweise eigentlich gleich, nur die Begrifflichkeiten sind andere.

- Um an die Kommandozeile, die hier Eingabeaufforderung heißt, zu kommen, klickst du auf die Lupe in der Taskleiste. Dort gibst du "cmd" ein. Dann gehst du vor wie oben unter 2.1. beschrieben.

Unbenannt: Text

3. Erstellen von Inhalten

Ebenfalls aus der Kommandozeile lassen sich die Inhalte erstellen.

3.1.flash-cards lassen sich mittels folgendem Befehl erstellen:

node ./dist/index.js flashcards ./tests/flash1.csv ./outputfile.h5p -l=de -t="Meine Karteikarten" -

description="\"Schreibe die Übersetzungen in das Eingabefeld.\""

Hierbei wird die Datei flash1.csv im Unterverzeichnis /tests genutzt. Du kannst diese einfach erst mal ausprobieren um zu sehen, ob das ganze funktioniert.

Dabei wird in dem Verzeichnis, in dem du dich gerade befindest, die Datei outputfile.h5p erzeugt. Die Option -l=de legt die Sprache der Bedienoberfläche fest.

Diese Datei kannst du dann lokal mit lumi anschauen oder auf einen Webspace hochladen, der H5P verarbeiten kann und ausprobieren.

Unbenannt: Text

3.2. dialog-cards

Fast deckungsgleich ist das Vorgehen bei dialog-cards. Hier unterscheidet sich nur der Befehl, die Datenquelle und eben die Ausgabedatei.

node ./dist/index.js dialogcards ./tests/dialog1.csv ./outputfile.h5p -l=de -n="Meine Karteikarten"

m="repetition"

Die Quelle für das Script ist in diesem Fall ./test/dialog1.csv und der Name der Ausgabedatei, die du logischerweise ändern kannst ist in dem Beispiel ebenfalls outputfile.h5p.

Unbenannt: Text

4. Vorbereiten der Quelldateien mit dem das Script gefüttert werden kann.

Die beiden Inhaltstypen dialog-cards und flash-cards unterscheiden sich. Deswegen bedarf es unterschiedlicher Vorbereitung der entsprechenden csv-Dateien.

4.1. Dialog-cards sind ein Inhaltstyp der vornehmlich der Präsentation und der selbstgesteuerten Kontrolle dient.

[Image: Screenshot im Browser der Dialogkartenübung]

Unbenannt: Text

Beim Start wird auf der Vorderseite eine Frage oder Aufgabe gestellt, die mit einem Bild und Audio ausgestattet werden kann. Durch turn oder umdrehen kann der/die Lernende dann überprüfen, ob die Lösung richtig war. Die unterschiedlichen Inhalte lassen sich in der csv-Datei vorgeben, die wie folgt aussähe:

[Image: Screenshot im Browser der Adresse https://github.com/sr258/h5p-cli-creator]

Unbenannt: Text

Beim Start wird auf der Vorderseite eine Frage oder Aufgabe gestellt, die mit einem Bild und Audio ausgestattet werden kann. Durch turn oder umdrehen kann der/die Lernende dann überprüfen, ob die Lösung richtig war. Die unterschiedlichen Inhalte lassen sich in der csv-Datei vorgeben, die wie folgt aussähe:

[Image: Screenshot im Browser der Adresse https://github.com/sr258/h5p-cli-creator]

Unbenannt: Text

Diese csv-Datei(dialog1.csv) muss zwingend im Unterverzeichnis /tests vorhanden sein. Falls sie anders benannt wird, muss das beim Starten des Scripts angeglichen werden.

Unbenannt: Text

4.2. Flash-Cards

Flash-cards präsentieren zwar auch, erfordern aber eine Eingabe durch den/die Lernende/n. Hier wird nicht gewendet, sondern auf einer Seite abgefragt. Eine Illustration der Frage/ Aufgabenstellung ist möglich. Die Beispieldatei, die das Script mitbringt, heißt hier flash1.csv. Das lässt sich, genauso wie bei den dialog-cards anpassen. Eine mögliche csv-Datei sähe etwa so aus:

[Image: Screenshot im Browser der Adresse https://github.com/sr258/h5p-cli-creator]

Unbenannt: Text

Unter Englisch findet sich die Aufgabenstellung, unter Deutsch die geforderte Übersetzung, unter tip eine mögliche Lösungshilfe und unter image der Pfad zu einem Bild.

So genug für heute. Es ist 7:30 Uhr morgens und ich bin müde.