#09 – Tipps & Tricks zur Gestaltung und Strukturierung Ihres TeachCenter-Kurses (Teil 3)

mehr Übersicht mit Textfeldern & Bootstrap

Kurzsteckbrief des Lern-Settings

Institute of Interactive Systems and Data Science
Zeitraum: SS22 und WS22
LVen: „Objektorientierte Programmierung 1“ (OOP1) sowie „Einführung in
die strukturierte Programmierung“ (ESP)
Gruppengröße: über 500 Studierende in jeder LV
Durchführungsart: Flipped Classroom in ESP bzw. online in OOP1

Kontakt bei Rückfragen: tc@tugraz.at

TeachCenter-Kurse mit vielen Materialien und Aktivitäten neigen dazu, sowohl für Studierende als auch für Lehrende unübersichtlich zu werden. Bereits in Teil 2 (Beitrag #08 in der Kategorie TeachCenter) durften wir eine einfache Methode vorstellen, um für mehr Struktur in einem TeachCenter-Kurs zu sorgen. In diesem Artikel erweitern wir diese Methode um sogenannte Bootstrap-Komponenten. Damit werten wir unsere TeachCenter-Kurse nicht nur optisch auf, sondern erreichen auch noch mehr Übersicht.

Weitere Informationen über Methoden,um mehr Struktur in einem TeachCenter-Kurs zu schaffen, finden Sie auch in der Rubrik TeachCenter im Beitrag: #08 Tipps & Tricks zur Gestaltung und Strukturierung Ihres TeachCenter-Kurses (Teil 2)

Was ist Bootstrap?

Bootstrap ist ein sogenanntes Frontend-Framework, das mit wenigen Zeilen HTML vielseitige grafische Elemente auf einer Webseite erstellen kann. Solche Elemente können beispielsweise Button-Gruppen/Buttons, Karten und Unterabschnitte sein. Die einzige Voraussetzung für die Verwendung von Bootstrap-Elementen sind grundlegende HTML-Kenntnisse. Außerdem verwenden wir gerne Alerts, um wichtige Informationen hervorzuheben.

Warum Bootstrap-Komponenten im TeachCenter?

Abbildung 1 zeigt einen mit vielen Materialien gefüllten Abschnitt im TeachCenter. Die Links in diesem Beispiel führen zu Vorbereitungsvideos (in einem Flipped-Classroom-Setting) und Vorlesungsaufzeichnungen. Zu allen Videos werden Zusatzmaterialien angeboten. So entsteht schnell eine schwer zu überblickende Liste.

Mit Bootstrap kann eine derartige Liste mit einem sogenannten „Accordion“ in aufklappbare Teile unterteilt werden, wobei jeder Teil auch auf- und zuklappbar ist. Auf diese Weise lassen sich z. B. die Inhalte länger zurückliegender Vorlesungseinheiten ausblenden, indem die entsprechenden Teile zugeklappt werden. Dadurch erhöht sich die Übersicht, ohne die Verfügbarkeit von Inhalten einzuschränken. Studierende, die an Inhalte in einem zugeklappten Teil gelangen möchten, können den Teil mit einem Klick aufklappen.

Abbildung 2 zeigt eine überarbeitete Version des Abschnitts aus Abbildung 1. Hier sind die Materialien einer VO-Einheit jeweils in einem eigenen, aufklappbaren Teil zusammengefasst. Einzelne Teile können nach Belieben auf- und zugeklappt werden. In jedem aufklappbaren Teil wurden Videos eingebettet, sodass sie direkt im TeachCenter betrachtet werden können.

Auch für die Darstellung der einzelnen Elemente innerhalb eines aufklappbaren Teils haben wir auf Bootstrap zurückgegriffen. Die Studierenden können sämtliche Zusatzmaterialien durch Buttons erreichen.

Moodle-Abschnitt, lange unübersichtliche Liste

Abb 1: Beispiel eines unübersichtlichen TeachCenter-Abschnitts. Hinweis: Das TeachCenter-Design sieht mittlerweile anders aus, aber zur Illustration ist dieses Beispiel weiterhin relevant.

Moodle-Abschnitt mit eingebetteten Videos in unterabschnitten

Abb. 2: Die überarbeitete Version des TeachCenter-Abschnitts. Hinweis: Das TeachCenter-Design sieht mittlerweile anders aus, aber zur Illustration ist das Beipsiel weiterhin relevant.

Der Ausgangspunkt all unserer Umstrukturierungsarbeiten ist – wie bereits in Teil 2– das Text- und Medienfeld. Es ist die einzige Komponente, die verwendet wurde, um durch Bootstrap das gewünschte Ergebnis zu erhalten. Bootstrap-Elemente können an allen Stellen verwendet werden, an denen der Text-Editor zur Verfügung steht (z. B. beim Erstellen von Textfeldern, in Foren oder bei Textseiten). Um Bootstrap-Elemente hinzuzufügen, muss in die Quellcode-Ansicht gewechselt werden.

Tipps für die Umsetzung im eigenen TeachCenter-Kurs

Abschließend möchten wir Ihnen noch einige Tipps für die Verwendung von Bootstrap geben:

Eine Übersicht aller Bootstrap-Komponenten ist im Internet verfügbar.
Die Bootstrap-Dokumentation bietet auch viele Beispiele zur Orientierung. Der HTML- Code dieser Beispiele kann in den eigenen TeachCenter-Kurs übernommen und nach Belieben angepasst werden.

Ein Grundgerüst für einen auf- und zuklappbaren Unterausschnitt erhalten wir folgendermaßen:

<div id="accordionExample" class="accordion">
<div class="card">
<div id="headingOne" class="card-header">
<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"> Collapsible Group
Item #1 </button></h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="card-body">Some placeholder content for the first accordion
panel. This panel is shown by default, thanks to the <code>.show</code>
class.</div>
</div>
</div>
</div>

Eine weitere simplere Möglichkeit, aufklappbare Abschnitte als HTML hinzuzufügen:

<p id="example-simple-details">Details/Summary</p>
<details class="mb-4">
<summary class="h2">
<h2 class="d-inline">Abschnitt 1</h2>
</summary>
<p>In pinyin, each Chinese syllable is spelled in terms of an optional initial
and a final, each of which is represented by one or more letters.</p>
<p>Hanyu Pinyin was developed in the 1950s by a group of Chinese linguists
including Wang Li, Lu Zhiwei, Li Jinxi, Luo Changpei and, particularly, Zhou
Youguang, who has been called the "father of pinyin".</p>
</details>

Eine Möglichkeit, aufklappbare Bereiche im TeachCenter ohne HTML-Kenntnisse zu erstellen, sind Unterabschnitte, die wie Abschnitte hinzugefügt werden können.

Die im Code verwendeten IDs sollen eindeutig sein. Das heißt, es soll keine anderen Unterabschnitte mit den gleichen IDs geben. Es kann ansonsten vorkommen, dass ein Klick auf einen spezifischen Unterabschnitt einen anderen Unterabschnitt unbeabsichtigt öffnet oder schließt.
Für komplexe Anwendungsfälle kann es einfacher sein, den HTML-Code zuerst in einem Editor wie z. B. VS Code oder Notepad++ zu editieren und erst dann in das Textfeld einzufügen.

Nicht vergessen: Alle über Buttons verlinkten Materialien sollten für Studierende in der ursprünglichen Liste ausgeblendet werden. Wie das funktioniert, wurde bereits in Teil 2 (TC #08) beschrieben.