Es sollte nicht von technischen Vorgaben bestimmt sein, wo eine Lehrkraft optionale Hilfe anbietet oder nicht. Das ist eine didaktische Entscheidung. Die Technik sollte sich dieser Entscheidung unterordnen.
In dem Video zeige ich, wie man mit dem Bootstrap Element modal in Moodle überall optionale Hilfestellungen einbauen kann. Die Kursersteller behalten so die didaktische Entscheidungsfreiheit und lassen sich nicht am technischen Nasenring herumführen.

Hilfestellung ist ein Qualitätsmerkmal von Online-Kursen

Ein Qualitätsmerkmal von Online-Kursen ist das Vorhandensein von Hilfestellungen an den problematischen Stellen im Online-Kurs. Eine Hilfe, die die Teilnehmer/innen bei Verständnisschwierigkeiten unterstützen. So, wie sie auch im Kursraum von Lehrkräften unterstützt werden würden.

In dem Video wird eine elegante Möglichkeit vorgestellt, wie mit einem Element von Bootstrap in Moodle-Kursen an jeder Position derartige optionale Hilfen angeboten werden können.

Optionale Hilfe in Moodle mit dem Bootstrap modal element

Mach mehr mit Moodle: Optionale Hilfen mit dem Bootstrap-Element Modal

Achtung: Bootstrap hat ein Upgrade nach dem Erstellen dieses Videos durchgeführt. Das Video bezieht sich auf die Version 4.5. Um zu dieser Version zu gelangen, müssen folgende Schritte durchgeführt werden, die nicht im Video erklärt wurden.

Auf "Docs" klicken
  • Anschließend muss die Version 4.5 ausgewählt werden. Dazu rechts oben auf das Dropdown-Menü und dann auf v4.5x klicken.
Bootstrap 4.5 wählen

Danach geht es weiter wie im Video beschrieben.

Auch als Feedback geeignet

Man kann diesen Hilfe-Button mit dem Fenster nahezu an jeder Stelle in Moodle einbauen. Daher eignet sich diese Art der bedarfsweisen Information auch als differenziertes Feedback für solche Lerner/innen, die zu ihren Fehlern weitere Informationen wünschen.

Leser/innen, die sich mit dem Feedback in digitalen Lernprogrammen weiter befassen möchten, können hier etwas von mir zum Thema im Magazin Sprache des Goethe-Institus lesen.

Der Code zum Kopieren

Der Code im Original gibt es auf der Bootstrap-Seite. Ihr könnt ihn von dort kopieren. Der Code für den Hilfe-Button unten, ist mit meinen Kommentaren versehen und, wie im Video beschrieben, bearbeitet.

Die Textteile in Orange sind Kommentare, die in Blau sind Texte, die auf dem Button oder im Fenster genau so erscheinen. Sie können daher nach Bedarf geändert werden.

<!-- Hier beginnt der Code für den Button, der das Hilfe-Fenster öffnet -->
<!-- In der nächsten Zeile kann die Farbe geändert werden. Dazu "danger" durch einen anderen Button-Namen ersetzen -->
<button
type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal"> Das ist die Beschriftung des Hilfe-Buttons. Nach Geschmack ändern. </button> <!-- Hier beginnt der Code für das Hilfe-Fenster --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Titel des Fensters</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> Text für die Hilfe </div> <div class="modal-footer">
<!-- Der Text, der auf dem Button zum Schließen des Fensters steht. Auch hier kann "secondary" nach Geschmack geändert werden, so dass sich auch die Farbe ändert -->
<button type="button" class="btn btn-secondary" data-dismiss="modal">Verstanden!</button> </div> </div> </div> </div>

Das modale Fenster zentriert zeigen

Mit dem Code von oben wird das Fenster in der oberen Hälfte der Bildschirmseite eingeblendet. Wenn man das Fenster jedoch zentriert zeigen möchte, muss man die folgende Modifikation im zweiten Teile des Codes vornehmen (rot gekennzeichnet):

<!-- Hier beginnt der Code für das Hilfe-Fenster -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Titel des Fensters</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Text für die Hilfe
      </div>
      <div class="modal-footer">
<!-- Der Text, der auf dem Button zum Schließen des Fensters steht. Auch hier kann "secondary" nach Geschmack geändert werden, so dass sich auch die Farbe ändert -->
<button type="button" class="btn btn-secondary" data-dismiss="modal">Verstanden!</button> </div> </div> </div> </div>

In den Hilfetext selbst kann man, wie in jedem anderen Text, per HTML-Code Links, Formatierungen oder andere Bootstrap-Elemente einbauen. Auch die Länge des Textes ist nicht begrenzt. Das Fenster selbst kann ebenfalls in der Größe verändert werden.

Auf der Bootstrap-Seite gibt es viele Beispiele für Veränderungen. Man muss sich allerdings etwas in den Code einarbeiten.

Wenn ihr Fragen habt, schreibt die in die Kommentare. Mich würde auch interessieren, ob und für was ihr die Elemente in eurem Moodle benutzt.

Weitersagen …