Merge Vue.js Lernmodule into master branch

[annyanich]

Hi @Krassmus. Nach langer Arbeit haben wir an der UOL wir zum Releasewechsel auf 5.4 unsere Version vom LernmodulePlugin produktiv gemacht. Ich würde unser Branch gern in dein "master" mergen. Wäre das für dich in Ordnung?

Ich habe ein Build-Script hinzugefügt, build.sh. Dafür ist node v14 / npm v6 notwendig. Er lädt alle Dependencies herunter (npm install) und führt die notwendigen Build-Schritte für unser Vue-Code aus. Er kompiliert auch die Übersetzungen und erstellt anschließend unter dist/ eine Zip-Datei, die alle für den Betrieb des Plugins notwendigen Dateien enthält und im Plugin-Marktplatz hochgeladen werden könnte.

Die Version des Plugins wird auf 3.0.0 erhöht und die studipMinVersion wird auf 5.4 gesetzt.

[Krassmus]

Hi Ann! Sehr cool. Mich würde aber interessieren, was sich noch so geändert hat. Ihr habt ja sicherlich nicht nur das Packen des Plugins verändert, oder?

[annyanich]

Jup!

Es gibt zwei neue Funktionalitäten, die wir eingeführt haben. Hier ein erster Entwurf von einer kurzen Dokumentation, die vielleicht in das README passen würde...

Stud.IP H5P Editor

In dem "Lernmodule"-Tab von Veranstaltungen gibt es eine neue Art von Lernmodulen, die wir auf Vue.js umgesetzt haben, um ein besseres UX für Dozierenden und eine bessere Integration in Stud.IP zu gewährleisten. Sie sind alle bereits in das Plugin integriert und befinden sich hinter der Taste "Stud.IP H5P Editor", die beim Hinzufügen eines neuen Lernblocks angezeigt wird:

Nach dem Klicken auf dieser Taste wird der neue Editor geöffnet. Es kann eine von vier Aufgabentypen ausgewählt werden: Question, Fill In The Blanks, Drag the Words und Mark the Words. Unter dem Editor für die bearbeitete Aufgabe befindet sich eine Live-Vorschau. Diese wird immer in Echtzeit aktualisiert, ohne dass die Seite neu geladen werden muss:

Es kann auch die Aufgabe an sich auf einer eigenen Seite als Vorschau angeschaut werden:

LMB-Blöcke für die Courseware

Die zweite neue Funktionalität, die wir umgesetzt haben, ist das Hinzufügen von fünf neuen Blöcken zum Courseware. Sie entsprechen den vier oben genannten Aufgabentypen sowie einer fünften, "Interactive Video", was die Funktionalität von dem bereits bekannten Interactive Video Block für die Courseware von Ron Lucke erweitert und ersetzt.

Die Blöcke sind nebeneinander in der alphabetischen Liste von Courseware-Blöcken zu finden:

Es können so auf einer Seite nebeneinander mehrere Aufgaben dargestellt werden:

Auch hier wird beim Bearbeiten eines Blocks neben dem Editor eine Live-Vorchau von der bearbeiteten Aufgabe angezeigt.

Interactive Video mit Stud.IP-H5P-Aufgaben

Im neuen Interactive Video Block können sowohl hochgeladene als auch von Youtube eingebettete Videos verwendet werden. Es können zu beliebigen Zeitpunkten im Video Text-Overlays und Stud.IP-H5P-Aufgaben eingeblendet werden. Das Video-Editor bietet eine grafische Oberfläche an zum Gestalten von dem interaktiven Video.

[annyanich]

Die Courseware-Blöcke werden in einer eigenen Plugin-Klasse, LernmoduleCoursewareBlocksPlugin, in plugin.manifest eingebunden und können getrennt vom ursprünglichen "LernmodulePlugin" aktiviert und deaktiviert werden.

[Krassmus]

Wow, ich hatte ja keine Ahnung. Ich schaue mir das gleich mal an. Danke Dir!

[Krassmus]

Hi Ann!

Also ich habe das jetzt mal getestet. Zuerst einmal hatte mein node die falsche Version. Das build.sh Skript hat gesagt, dass ich node 14 und npm 6 nutzen soll. Ich habe aber node 21 und npm 10. Ist das nicht aufwärtskompatibel?

Ich habe jetzt den Test auf die Versionen aus build.sh raus genommen, und dann ging der Build-Prozess so einigermaßen. Erst spät hat er einen Fehler geworfen: "Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:80:19)"

(Was auch immer das heißen mag.)

Aber bis dahin wurden offenbar die Assets schon erzeugt, sodass ich den Editor schon verwenden kann.

Ich persönlich würde den Begriff H5P weg lassen, weil die meisten Leute ja gar nicht wissen, was H5P ist. Und wer es weiß, weiß vielleicht auch, dass der andere Editor auch ein H5P Editor ist. Was meinst Du?

Und dann habe ich so Kleinigkeiten gefunden:

Das kann vermutlich weg, oder?

Hier würde ich das vermischen von Deutsch und Englisch vermeiden - oder liegt das vielleicht an dem abgebrochenem Build-Skript?

Und ich habe mich gerade gefragt, wie ich dem neuen H5P-Lernmodul ein Bild zuweise? Geht das nicht, oder übersehe ich da was?

[annyanich]

Hey, danke fürs rüberschauen!

Also ich habe das jetzt mal getestet. Zuerst einmal hatte mein node die falsche Version. Das build.sh Skript hat gesagt, dass ich node 14 und npm 6 nutzen soll. Ich habe aber node 21 und npm 10. Ist das nicht aufwärtskompatibel?

Die Build-Scripts von der Version vom Vue-CLI, die wir verwendet haben, sind leider nicht aufwärtskompatibel. Wir verwenden nvm, um zwischen unterschiedlichen Versionen von node/npm in unserer Entwicklungsumgebung zu wechseln. Das funktioniert bis jetzt ganz gut auf unseren Linux-PCs mit PhpStorm, sodass wir keine Notwendigkeit gesehen haben, das Build-System zu upgraden.

Ich habe jetzt den Test auf die Versionen aus build.sh raus genommen, und dann ging der Build-Prozess so einigermaßen. Erst spät hat er einen Fehler geworfen: "Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:80:19)"

(Was auch immer das heißen mag.)

Ich kann es leider auch nicht einschätzen, ohne die komplette Ausgabe von build.sh zu lesen. Aber ich würde auf eine Inkompatibilität zwischen den Node-Versionen tippen.

Ich persönlich würde den Begriff H5P weg lassen, weil die meisten Leute ja gar nicht wissen, was H5P ist. Und wer es weiß, weiß vielleicht auch, dass der andere Editor auch ein H5P Editor ist. Was meinst Du?

Na ja, der Begriff "H5P" wird im Plugin schon verwendet, zum Beispiel auf der Seite zum Hochladen eines Moduls: "Lernmodul auswählen (Gezipptes HTML, H5P oder [...]". Siehe diesen Screenshot:

Man muss auf jeden Fall irgendwie zwischen den beiden Editoren differenzieren, wie zum Beispiel auf diesem Screen:

Vielleicht wäre es sinnvoll, den neuen Vue.js-basierten Editor als "Stud.IP-Editor" zu bezeichnen und den alten H5P-basierten Editor auf "H5P-Editor" umzubenennen?

Und dann habe ich so Kleinigkeiten gefunden:

Danke für die Hinweise. Ich habe jetzt "Anns Javascript Test" gelöscht und die Save/Undo/Redo-Tasten mit $gettext übersetzen lassen.

Und ich habe mich gerade gefragt, wie ich dem neuen H5P-Lernmodul ein Bild zuweise? Geht das nicht, oder übersehe ich da was?

Da hast du was übersehen, glaube ich. Auf der Seite "Abspieloptionen bearbeiten" eines Moduls kann man für ein Vue.js-basiertes Lernmodul ebenso wie für die alten H5P-basierten Lernmodule ein Bild setzen.

[Krassmus]

Hi Ann! Vielen Dank noch mal für die Mühe! Ich habe noch zwei kleine Bugfixes gefunden und behoben. Und jetzt funktioniert es für mich. Das ist echt cool.

[annyanich]

Hey, kein Ding! Danke fürs drüberschauen :)