Moderne Lehrbücher sind vielfältig strukturiert. Nicht nur, weil es irgendwie cool aussieht, sondern weil ein derartiges Design die Lernerin / den Lerner leitet und im besten Fall auch Hinweise für das Verständnis gibt.
Ebenso wie in modernen Lehrbüchern kann man auch in Moodle visuelle Leitplanken einziehen, die die Teilnehmerinnen/Teilnehmer leiten und helfen, die Übersicht zu bewahren. Der Schlüssel dafür sind die Elemente von Bootstrap, die es ermöglichen, Moodle-Kurse konsistent zu strukturieren.

Bootstrap!? Viele von euch haben vielleicht das Wort schon in Zusammenhang mit Moodle gehört, aber wissen noch nicht, was man damit machen kann. Genau das zeige ich euch in einer Serie von Videos.

Im diesem ersten Teil mache ich euch mit einem Element vertraut, das ihr leicht per Copy-Paste einbauen könnt, um Textteile hervorzuheben.

Mach mehr mit Moodle: Kurse strukturieren mit Bootstrap-Elementen

Der Code, den ich in dem Video verwendet habe, kommt von der Bootstrap-Seite. Ihr könnt ihn von dort kopieren oder ihn auch von hier übernehmen:

<span class="badge badge-primary">Euer Text hier.</span>

Das Wort primary könnt ihr durch eines der folgenden Wörtern ersetzen:

secondary
success
danger
warning
info
light
dark

Die Ersetzung hat Auswirkung auf die Farbe des Elements:

Typen von Bootstrap-Badges
Quelle: Bootstrap

Welche Funktion diese verschiedenen Farben haben sollen, ist selbsterklärend. So ist es möglich, Moodle-Kurse mit Bootstrap-Elementen (hier: Badges) ansprechend zu strukturieren. Man braucht sich natürlich nicht an die Vorgaben zu halten. Dennoch sollten im ganzen Moodle-Kurs diese Farben in ihrer Funktion konsistent verwendet werden.

Bootstrap-Code im HTML-Modus einfügen

Wie im Video erklärt, ist es ganz wichtig, im Texteditor von Moodle den HTML-Modus zu öffnen. Das ist sehr einfach. Hier das Beispiel für den ATTO-Editor. TinyMCE funktioniert ganz ähnlich:

1. Die Menüleiste umschalten

Moodle-Menüleiste erweitern
Zum Erweitern des Menüs auf das Icon ganz links klicken

2. Den HTML-Editor öffnen

In den HTML-Modus der Moodle-Textseite umschalten
Das Code-Icon befindet sich ganz rechts

Danach seht ihr die HTML-Ansicht eures Textes. Setzt den vorher kopierten Code an der Stelle ein, wo das Element erscheinen soll. Mit einem Klick auf das Code-Icon schaltet ihr wieder zurück in den Layout-Modus. Ihr könnt die Änderungen dort sofort sehen.

In der nächsten Folge zeige ich euch, wie ihr mit einem anderen Element von Bootstrap große Mengen an Information bzw. Text benutzerfreundlich organisieren könnt.

Weitersagen …