Workflow

Workflow zum Erstellen von Moodle-Büchern

Habt Ihr schon einmal den HTML-Code einer Seite im Moodle-Editor bearbeiten müssen und seid dabei fast verzweifelt? Ich schon… bis jetzt. In diesem Beitrag beschreibe ich, wie man komplexe Inhalte mit einem Editor der eigenen Wahl erstellen und in Moodle integrieren kann.

Interaktive Inhalte, strukturiert in Moodle

Die Aktivität „Buch“ in Moodle ist hervorragend geeignet, Inhalte in HTML strukturiert bereitzustellen. Das Buch selbst erlaubt es, die Inhalte in Kapiteln und Unterkapiteln zu Ordnen. Im Inhaltsverzeichnis in der Seitenleiste kann man zwischen den einzelnen Kapiteln leicht navigieren. Durch die Möglichkeit, HTML-Seiten zu verwenden, kann man Texte ansprechend gestalten, Bilder, Videos und andere Inhalte mit einbinden und sogar mit Hilfe von JavaScript spezielle Funktionen programmieren.

Beipsiel für ein Moodle-Buch Inhalt
Beipsiel für ein Moodle-Buch Inhalt

Die Standard-Methode, die Inhalte zu gestalten ist mit Hilfe des Moodle eigenen Editors. Dieser nimmt einem die eigentliche Erstellung des HTML-Codes ab und sorgt auch dafür, dass z.B. Bilder richtig im Moodle-System abgelegt werden. Gerade bei komplexeren Inhalten kann es allerdings passieren, dass ungewollt viele Absätze entstehen, Aufzählungen durcheinanderkommen oder Schriftarten unterschiedlich werden. In solchen Fällen kann man den HTML-Code direkt im Editor bearbeiten und besondere Anpassungen vornehmen.

HTML-Code im Atto Editor
HTML-Code im Atto Editor

Leider ist der Editor an dieser Stelle nicht sehr komfortabel und der Code ist relativ unübersichtlich. Hier können sich leicht Fehler einschleichen, die mich schon zu manch langer Fehlersuche genötigt haben.
Da ich im Zuge der Vorbereitungen für das kommende Semester meine bisher erstellte Skripte in ein Moodle-Buch umwandeln werde und ich dabei auch noch einige Sachen direkt im HTML-Code ändern muss, habe ich nach einer besseren Lösung gesucht…. und gefunden!

Moodle-Büchern aus HTML-Seiten erstellen

Es ist möglich, HTML-Seiten als Kapitel in Moodle-Bücher zu importieren. Dabei werden auch sämtliche, in der HTML-Seite eingebundenen Dateien in das Moodle System übernommen und die Links automatisch angepasst. Das bedeutet, man kann die Inhalte mit einem beliebigen Editor passgenau erstellen und anschließend inklusive der notwendigen Dateien in die Moodle-Umgebung importieren.
Als Editor verwende ich „Microsoft Visual Studio Code„, eine kostenlose Programmierumgebung in der ich direkt HTML-Seiten erstelle. Dazu habe ich noch die Erweiterungen für HTML installiert. Jetzt wird nicht nur der Code gut dargestellt, sondern auch auf Fehler hin überprüft. Außerdem nimmt der Editor viel Arbeit bei der Eingabe von HTML-Tags ab. Darüber hinaus ist „Emmet“ im Editor integriert, welches die Erstellung von komplexeren HTML-Konstruktionen, wie Tabellen, Aufzählungen usw., deutlich erleichtert.

HTML-Code wird in MS Visual Studio Code bearbeitet.

Bilder und andere Inhalte können ganz normal relativ verlinkt werden, d.h. man legt z.B. ein Bild mit Namen „abbildung_1.png“ im gleichen Verzeichnis ab, wie die HTML-Seite liegt. Im HTML-Code wird das Bild über

<img src="abbildung_1.png" alt="Tolle Abbildung">

eingebunden. So verfährt man mit allen Inhalten. Um zu überprüfen, ob das Ergebnis den Erwartungen entspricht, öffnet man die Datei in einem Browser.

Man kann auch mehrere Kapitel auf einmal erstellen, indem man für jedes Kapitel eine eigene HTML-Seite erzeugt. Die Titel für die einzelnen Kapitel werden aus dem HTML-Tag „title“ übernommen. Um diese Inhalte in Moodle zu importieren, packt man alle Dateien zusammen in eine ZIP-Datei. Achtung: nicht das Verzeichnis mit den Dateien zippen, sondern die Dateien selbst. In Moodle kann man anschließend über das Zahnradsymbol „Kapitel importieren“ wählen.

Im anschließenden Dialog lädt man seine ZIP-Datei hoch und importiert den Inhalt mit „Import“. Fertig. Ich bin noch nicht dahintergekommen, in welcher Reihenfolge die einzelnen Kapitel angelegt werden, aber man kann sie im Anschluss auch leicht umsortieren.

Fazit

Mit der oben beschriebenen Methode war es mir möglich, meine Inhalte relativ schnell und unkompliziert zu erstellen. Vor allem mit den im Editor eingebauten Hilfen kann man mit etwas Gewöhnung sehr einfach und schnell arbeiten. Da ich häufig noch ein paar spezielle Änderungen im HTML-Code machen muss, ist der Weg über einen speziell dafür ausgelegten Editor ohnehin die bessere Wahl.
Ich bin schon gespannt auf Eure Erfahrungen!

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.