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

mehr Übersicht, mehr Sprachen

Kurzsteckbrief des Lern-Settings

Notiz

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

Kontakt

Kontakt bei Rückfragen: Aleksandar Karakas

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 Textfeld. 

Neben der Strukturierung der Kursseite bietet das Textfeld 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 und
  • externe Inhalte (wie z. B. einen Cloud-Kalender oder Videos) auf der
    Kursseite einzubetten.
TC_Logo

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 Textfeld

Die Abbildung 1 zeigt, wie eine Kursseite von einer Umgestaltung profitieren kann.
Die linke Seite der 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 von Abbildung 1 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 und nach der Umgestaltung.
TC_Pfeil
ein aufgeräumter TeachCenter-Abschnitt mit verlinkten Aktivitäten
Abb.1.2: TeachCenter-Abschnitt vor und nach der Umgestaltung.

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 Textfeld.

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

Einrückungen innerhalb eines Textfelds können dank HTML-Editor mit CSS eingefügt werden. Beispiel: <p style="margin-left:2em;">Dieser Absatz erscheint eingerückt.</p>

TC_Info2
Tipp

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 Textfeld haben Lehrende die Freiheit, alle Inhalte in der gewünschten Form einzufügen. Dafür steht ein WYSIWYG- Editor 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 WYSIWYG-Editor 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}

TC_Info2

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 eingebetteter Kalender auf der Kursseite.

Über den HTML-Editor lassen sich externe Inhalte als <iframe> einbetten. Damit kann z. B. ein Cloud-Kalender (aus der TU 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>

TC_Info2

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.

Wichtig

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.

Scrabble-Board mit dem Wort "Education"
CC0 Words as Pictures via negative space

Autoren:

Aleksandar Karakaš & Alexander Steinmaurer (Institute of Interactive Systems and Data Science)

Downloads

Neueste Beiträge

Lizenziert unter der Creative-Commons-Lizenz CC BY 4.0 International

Aleksandar Karakas und Alexander Steinmaurer (Institute for Interactive Systems and Data Science)