Wer schonmal einen Moodle-Kurs erstellt oder als Teilnehmer besucht hat wird festgestellt haben, dass es mit zunehmender Fülle an Inhalten recht unübersichtlich werden kann.
In diesem Artikel möchte ich kurz erklären, wie Buttons zur Navigation bei Moodle hergestellt werden können. Keine Angst, auch wenn du beim scrollen Code siehst, den du nur von Filmen über Hackerangriffen kennst, lass dich nicht abschrecken!
Kurz vorweg: Das, was in den schwarzen Kästchen auftaucht, nennt sich Code und ist in der Programmiersprache HTML geschrieben. HTML ist eine Computersprache, mit deren Hilfe sich Inhalte formatieren lassen. Das Schöne ist: du musst diese Sprache nicht fließend Sprechen, um sie verwenden zu können!
Neben dem Code brauchst du ein paar Voreinstellungen bei Moodle. Für die folgende Anleitung wird
das Kursformat „Themenformat“ verwendet, außerdem solltest du bereits ein paar Themenabschnitte
erstellt haben.
Als Beispiel soll der folgende Screenshot dienen.
Das Ziel: Im Feld „Übersicht“ sollen Buttons erstellt werden, die zu den einzelnen Themen
(Einleitung, Thema 1, etc.) führen sollen.
Zunächst öffnest du das Bearbeitungsfeld zum Thema
„Übersicht“ .
Dann aktivierst du im Textfeld das Kästchen <>. Damit
sagst du Moodle, dass jetzt ein Code kommt, der ausgelesen werden muss. Dann kopierst du den
folgenden Code dort rein.
<a href="#" class="btn btn-primary">Text im
Button</a>Mit diesem Code sagst du dem Computer folgedes:
Das Zeichen „<“ öffnet einen sogenannten HTML Tag, „>“
schließt ihn wieder.
„a“ teilt dem Computer mit, dass nun ein Link folgt.
Dabei handelt es sich um einen vordefinierten HTML Tag. Für eine Übersicht, welche tags es gibt,
bietet sich die Dokumentation der W3-Schools an : https://www.w3schools.com/tags/default.asp
href=“# „ = die Verlinkung, auf die man durch Klicken des Buttons geleitet
wird. Der „a“ Tag braucht diese Information, hier kann beispielsweise auch der Link einer Website
stehen!
class=“btn btn-primary“ = Hier wird mit Hilfe vorgefertigter Klassen
definiert, dass ein Button kommt und welche Form und Farbe dieser hat. Ohne diese Zeile bekämen wir
keinen Button angezeigt.
Text im Button = Hier trägst du ein, was später in
deinem Button stehen soll.
</a> schließt den HTML Tag, den wir am
anfang geöffnet haben. Somit weiß der Computer, wo der Code beginnt, welcher Art er ist und wo er
aufhört.
Dieser einzelne Button sieht zunächst so aus:
Besonders wichtig für die Funktion deines Buttons sind die Verlinkung der einzelnen Themen und der Titel.
Der Titel wird an der Stelle „Text im Button“ eingefügt. Auch die Verlinkung musst du für jeden neuen Button ändern. Praktischerweise musst du nur die Themen von oben nach unten Abzählen. Für das Beispiel ergibt sich:
-
Einleitung = section-2
-
Thema 1 = section-3
-
Thema 2 = section-4
-
Abschluss = section-5
Nun hast du alle Informationen um die benötigte Anzahl an Buttons zu erstellen. Für jeden neuen Button wird die erste Codezeile dieses Artikels kopiert und entsprechend verändert.
<a href="#section-2" class="btn
btn-primary">Einleitung</a>
<a href="#section-3" class="btn btn-primary">Thema 1</a>
<a href="#section-4" class="btn btn-primary">Thema 2</a>
<a href="#section-5" class="btn
btn-primary">Abschluss</a>Nun fehlen noch Buttons um an den Anfang der Seite zurück zu kommen. Dafür bietet es sich an, am Ende eines Themas ein Textfeld einzufügen, in der Bearbeitungsansicht die <> Taste zu aktivieren und den folgenden Code einzufügen:
<a class="btn btn-outline-primary" href="#"
role="button">nach oben</a>Dieser Butten sieht so aus:
Die Verlinkung href=“#“ befördert ganz nach oben. Soll direkt auf das Erste Thema verlinkt werden, kann anstatt „#“ auch „section-1″ verwendet werden. Beides hat bei meinen Kursen funktioniert. Die genaue Verlinkung deines ersten Themas ist aus auslesbar, wie genau das geht wäre aber wahrscheinlich noch einen anderen Artikel wert. Möchtest du sicher gehen, dass man durch drücken dieses Buttons ganz oben landet, sollte einfach nur href=“#“ verwendet werden.
Wurden alle Schritte in diesem Artikel befolgt, erhälst du eine Seite, auf der nun mit Hilfe von Buttons navigiert werden kann.
Ein kleiner Exkurs zum Design und Farbe der Buttons
Das generelle Design der Buttons wird bei class= definiert. Das erste btn sagt aus,
dass ein Button erstellt wird. Das zweite btn bzw. btn-outline definiert die Form,
das anschließende -primary die Farbe.
Es wurden zwei Verschiedene Buttondesigns
verwendet. Welche Variante und Farbe dir besser gefällt ist natürlich Geschmacksache. Das Design
kann verändert werden, indem das was hinter class= in den Gänsefüßchen steht verändert wird. Hier
kannst du deiner Kreativität freien lauf lassen.
Abschließend findest du hier eine Übersicht
der möglichen Farben.
Sollte eine Farbe bei dir nicht funktionieren, kann das auch an den
Moodleeinstellung selbst liegen.
<button class="btn
btn-outline-primary">Primary</button><button class="btn
btn-outline-danger">Danger</button><button type="button" class="btn
btn-outline-secondary">Secondary</button><button type="button" class="btn
btn-outline-success">Success</button><button type="button" class="btn
btn-outline-warning">Warning</button>