Das Scrollen durch Informationen in langen Texten kann sehr lästig sein. Insbesondere, wenn man mit den kleinen Bildschirmen der Smartphones arbeitet. In dem Video zeige ich euch, wie ihr auf jeder beliebigen Moodle-Seite durch ein Bootstrap-Element auch sehr umfangreiche Infos bzw. Texte benutzerfreundlich gliedern könnt.

Moodle bietet in seinen Texteditoren ATTO oder TinyMCE eine Reihe von Formatierungsmöglichkeiten, die helfen, lange Texte zu strukturieren. Aber wie auch immer: Der Text bleibt lang und auf kleinen Bildschirmen unübersichtlich.

Es gibt aber die Möglichkeit, mit Hilfe eines Bootstrap-Elements auch lange Texte auf Moodle-Seiten sehr benutzerfreundlich zu strukturieren: Das ist das Akkordeon-Element. Selbst wenn ihr noch nie etwas von Bootstrap gehört habt– in dem YouTube-Video zeige ich euch, wie ihr das Element in eurem Moodle-Kurs sehr einfach einbauen könnt. Programmierkenntnisse sind nicht notwendig. Die Fähigkeit, zu kopieren und einzufügen reicht völlig.

Mach mehr mit Moodle: Moodle und Bootstrap 02: Das Akkordeon-Element

Der Bootstrap-Code für eure Moodle-Seite

In dem Video habe ich diesen Bootstrap-Code vorgestellt. Man muss den Code nicht verstehen. Nur die hervorgehoben Teile sind für eure Inhalte wichtig. Zur einfachen Bearbeitung füge ich hier den Code ein. Kopiert ihn und modifiziert dann die markierten Textteile, um ihn individuell anzupassen.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Erster Titel
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Hier kommt euer Text, der durch einen Klick auf den "Ersten Titel" gezeigt oder versteckt wird.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Zweiter Titel
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Hier kommt euer Text, der durch einen Klick auf den "Zweiten Titel" gezeigt oder versteckt wird.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Dritter Titel
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Hier kommt euer Text, der durch einen Klick auf den "Dritten Titel" gezeigt oder versteckt wird.
      </div>
    </div>
  </div>
</div>

Quelle: getbootstrap.com/docs/4.5/components/collapse/

Weitere Sektionen zufügen

Wenn ihr eine weitere Überschrift mit Text hinzufügen wollt, dann kopiert den folgenden Code und fügt ihn vor das letzte </div> des obigen Codes ein. Die markierten Teile könnt ihr für jeden weitere Überschrift anpassen:

 <div class="card">
    <div class="card-header" id="headingFour">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
          Vierter Titel
        </button>
      </h2>
    </div>
    <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
      <div class="card-body">
        Hier kommt euer Text, der durch einen Klick auf den "Dritten Titel" gezeigt oder versteckt wird.
      </div>
    </div>
  </div>

Auf diese Weise könnt ihr dieses ”Akkordeon” beliebig erweitern.

Bonus: Aktuelle Infos automatisch darstellen

Und hier noch ein kleiner Bonus. Wenn ihr euren Lernern noch einen besonderen Service bieten möchtet, könnt ihr bestimmen, welcher Text automatisch sichtbar ist, wenn man die Seite aufruft. Dazu sucht im HTML-Modus und diefolgende Code-Zeile:

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample" style="">

Hinter dem Wort collapse seht ihr den Eintrag show. Das bedeutet, dass dieser Textteil sichtbar ist. Wenn ihr einen anderen Teil anzeigen möchtet, löscht das Wort show und setzt es an der betreffenden Stelle zum Beispiel bei id=collapseTwo ein. Danach speichern und fertig. Jetzt wird der Text nach der zweiten Überschrift automatisch beim Öffnen der Seite angezeigt.

Weitersagen …