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

mehr Übersicht, mehr Sprachen

Kurzsteckbrief des Lern-Settings

Institute of Interactive Systems and Data Science
Zeitraum: WS20/21 bis SS22
LVen: VO und KU „Objektorientierte Programmierung 1“ (OOP1) sowie „Einführung in das Strukturierte Programmieren“ (ESP)
Gruppengröße: über 700 Studierende in ESP und über 500 Studierende in OOP1
Durchführungsart: Flipped Classroom in ESP bzw. online in OOP1

In der Lehrveranstaltung „Einführung in die strukturierte Programmierung“ gibt es viele unterschiedliche Inhalte, was dazu geführt hat, dass sowohl die Studierenden als auch das Lehrveranstaltungsteam schnell den Überblick verloren haben. Um dieses Problem zu lösen, wurde eine Restrukturierung des TeachCenter-Kurses mithilfe einer sehr leistungsstarken Aktivität gelöst – dem Text- und Medienfeld.

Neben der Strukturierung der Kursseite bietet das Text- und Medienfeld zwei weitere nützliche Features, welche ebenfalls in diesem Beitrag vorgestellt werden, nämlich die Möglichkeit,

Inhalte ganz einfach auf Deutsch und auf Englisch anzubieten
externe Inhalte (wie z. B. einen Cloud-Kalender oder Videos) auf der Kursseite einzubetten

Grundlegende Techniken finden Sie auch in der Rubrik TeachCenter im Beitrag: #06 Tipps & Tricks zur Gestaltung und Strukturierung Ihres TeachCenter-Kurses

Mehr Struktur mit dem Text- und Medienfeld

Die Abbildungen zeigen, wie eine Kursseite von einer Umgestaltung profitieren kann.
Die linke Abbildung zeigt einen TeachCenter-Abschnitt, in dem alle Unterlagen in einer langen Liste angeordnet wurden. Die Liste im Beispiel zeigt etwa nur die Unterlagen zu den ersten beiden Vorlesungseinheiten. Man kann sich vorstellen, wie der TeachCenter-Kurs am Semesterende aussehen würde…

Auf der rechten Seite zeigt sich eine wesentlich übersichtlichere Darstellung derselben Inhalte. Hier sind die Inhalte durch Überschriften getrennt und zusammengehörige Inhalte, wie z. B. ein Video mit dazugehörigen Folien und etwaigen Zusatzmaterialien, befinden sich in derselben Zeile.

ein nicht aufgeräumter TeachCenter-Abschnitt

Abb.1: TeachCenter-Abschnitt vor der Umgestaltung. Hinweis: das TeachCenter hat mittlerweile ein anderes Design, allerdings gilt die Darstellung trotzdem sinngemäß.

ein aufgeräumter TeachCenter-Abschnitt mit verlinkten Aktivitäten

Abb.1.2: TeachCenter-Abschnitt nach der Umgestaltung. Hinweis: Das TeachCenter hat mittlerweile ein anderes Design, aber die Umgestaltung ist trotzdem auf diese Art möglich.

Die Elemente der ursprünglichen Liste wurden ausgeblendet und stattdessen in einer anderen Struktur angeordnet. Das Ausblenden kann erreicht werden, indem bei der jeweiligen Aktivität im Bearbeitungsmodus die Einstellung „verfügbar, aber auf Kursseite verborgen“ gewählt wird. Die gesamte Liste kann dadurch einfach durch ein einziges neues Material ersetzt werden – und zwar durch das Text- und Medienfeld.

Ich bin ein Sticker. In den FAQ erfahren Sie mehr über mich.

Einrückungen innerhalb eines Textfelds können in der Quellcode-Ansicht eingefügt werden.
Beispiel: <p style="margin-left:2em;">Dieser Absatz erscheint eingerückt.</p>

Die verwendeten Icons in der überarbeiteten Version (wie z. B. das Play-Symbol vor allen Videolinks) wurden von Bootstrap übernommen. Unter Bootstrap oder Google Icons finden Sie eine Vielzahl von Icons, deren SVG-Code Sie in den HTML-Editor des Textfelds kopieren können.

Beim Text- und Medienfeld haben Lehrende die Freiheit, alle Inhalte in der gewünschten Form einzufügen. Dafür steht ein Texteditor zur Verfügung. In diesem können z. B. alle Inhalte der ursprünglichen Liste verlinkt werden und auch Überschriften können verwendet werden, um Struktur zu schaffen.

Sofern die verlinkten Inhalte barrierefrei sind, ist auch die Verlinkung im Textfeld eine barrierearme Lösung, da sie übersichtlicher ist und von einem Screenreader gelesen werden kann.

Sollten Sie über HTML-Kenntnisse verfügen, so sind der Kreativität keine Grenzen gesetzt. Damit können auch weitere Ideen umgesetzt werden, wie Einrückungen oder Icons, welche ebenfalls im Screenshot zu sehen sind.

Bonustipp 1: Inhalte auf Deutsch und Englisch anbieten

Mit dem Text- und Medienfeld lassen sich Inhalte auch ganz einfach auf Deutsch und Englisch anbieten.

Wenn beispielsweise der Text „Aufzeichnung der Vorlesung“ auch auf Englisch angezeigt werden soll, kann direkt im Textfeld (nicht notwendigerweise im HTML Modus) geschrieben werden:
{mlang de}
Aufzeichnung der Vorlesung
{mlang}
{mlang en}
Lecture recording
{mlang}

Das TeachCenter weiß damit, dass der Text zwischen {mlang de} und dem ersten {mlang} in deutscher Sprache verfasst ist, während {mlang en} und das zweite {mlang} englischen Text umschließen. Studierenden wird nur die Version angezeigt, die ihren Spracheinstellungen im TeachCenter entspricht.

Bonustipp 2: Externe Inhalte einbetten

Als eingebetteter Kalender auf der Kursseite.

Abb.2: Als ifram eingebetteter Kalender auf der Kursseite. Hinweis: Das TeachCenter hat mittlerweile ein anderes Design, aber die Funktion ist weiterhin gegeben.

Über die Quellcode-Ansicht lassen sich externe Inhalte als <iframe> einbetten. Damit kann z. B. ein Cloud-Kalender (aus der TU Graz Cloud) direkt auf der Kursseite platziert werden, wie in Abbildung 2 ersichtlich.

Der HTML-Code dafür lautet:
<iframe src="https://cloud.tugraz.at/index.php/apps/calendar/embed/XYZ" width="800" height="600"></iframe>

Der letzte Teil der URL (in diesem Beispiel der Platzhalter XYZ) legt den anzuzeigenden Kalender fest. Videos (z. B. von TUbe oder YouTube) lassen sich analog einbetten.

Achtung: Es werden aus Datenschutz- und Sicherheitsgründen seitens des TeachCenter-Supports nur bestimmte Seiten als Quellen für eingebettete Inhalte zugelassen. Sollte der von Ihnen gewünschte Inhalt nicht durch das TeachCenter dargestellt werden, so können Sie beim TeachCenter-Support nach einer Freischaltung der entsprechenden Quelle fragen.