Title

Probieren hilft beim Studieren
Interaktive Vorlesungsfolien im Webbrowser
Prof. Dr. Mario Botsch
Lehrstuhl für Computergraphik, TU Dortmund

Anleitung für die HTML-Folien

  • Am besten Google Chrome oder Firefox verwenden. Apple Safari implementiert nicht alle benötigen Web-Standards, so dass manche interaktiven Demos nicht funktionieren.
  • Cursor-links/Cursor-rechts blättern durch Folien.
  • f/ESC schalten Fullscreen-Modus an/aus.
  • Ctrl/Cmd-f öffnet Such-Dialog, ESC schließt ihn wieder.
  • (links oben) öffnet das Navigationsmenü.
  • (links unten) schaltet das virtuelle Whiteboard an/aus.
  • (rechts oben) spielt aufgezeichnetes Erklärvideo (wenn vorhanden) ab.
  • (rechts oben) öffnet das Frage-Panel, wo Fragen pro Folie submitted werden können.
  • (recht oben im Demo-Fenster) bringt Demo-Apps in den Fullscreen-Modus.
  • Doppelklick auf ein Element (z.B. ein Bild) für Rein-/Raus-Zoomen.
  • Wenn der untere Rand blinkt: Zum virtuellen Whiteboard runter-scrollen.

Ausgangssituation 2016

Powerpoint LaTeX HTML/decker
plattformunabhängig 😢 😊
Mathe-Formelsatz 😢 😊
Multimedia-Inhalte 😊 😢
interaktive Inhalte 😢 😢
Folien-Export 😢 😢
erweiterbar 😢 😢
Erstellungsaufwand 😊 😢

“Normale” Features der HTML-Folien

Aufzählungen

  • Mario
    • ist etwas schräg
  • Prinzessin Peach
    • ist hochgestellt
  • Donkey Kong
    • ist fett (gedruckt)

Mario
Peach
Donkey Kong

Numerierungen

  1. Donkey Kong
    • entführt Peach
  2. Mario
    • rettet Peach
  3. Peach
    • findet Mario toll
Donkey Kong, 1981

Webseiten einbinden

PDF-Unterstützung

  • Folien lassen sich auf Knopfdruck als PDF-Dokument exportieren.
  • PDF-Dokumente lassen sich in Präsentationen einbinden.

Beyond Powerpoint

Bibliographie

  • Bibliographie kann mit BibTeX verwaltet werden.
  • Die Referenzliste wird dann automatisch erstellt (siehe nächste Folie).
  • Zitationsstil über CSL (Citation Style Language) einstellbar.
  • Hier ein Beispiel:

Referenzen

Achenbach, J., T. Waltemate, M. Latoschik, und M. Botsch. 2017. Fast Generation of Realistic Virtual Humans. In Proceedings of ACM Symposium on Virtual Reality Software and Technology.
Waltemate, T., D. Gall, D. Roth, M. Botsch, und M. Latoschik. 2018. The Impact of Avatar Personalization and Immersion on Virtual Body Ownership, Presence, and Emotional Response. IEEE Transactions on Visualization and Computer Graphics 24 (4): 1643–52.
Wenninger, S., J. Achenbach, A. Bartl, M. Latoschik, und M. Botsch. 2020. Realistic Virtual Humans from Smartphone Videos. In Proceedings of ACM Symposium on Virtual Reality Software and Technology.

Mathematische Formeln

  • Formeln werden mit LaTeX gesetzt
  • Formeln können schrittweise eingeblendet werden \[ \begin{eqnarray*} \dot{\vec{u}} &=& \fragment{-\vec{u}\cdot\grad\vec{u}} \fragment{\;-\; \frac{1}{\rho}\grad p} \fragment{\;+\; \nu \laplace \vec{u}} \fragment{\;+\; \vec{f}} \label{eq:momentum} \\[2mm] \grad \cdot \vec{u} &=& 0 \label{eq:incompressibility} \end{eqnarray*} \]
  • Formeln können referenziert und verlinkt werden

Virtuelles Whiteboard

  • “Echte” Tafelanschriften sind nicht in Videoaufzeichnungen
  • Herleitungen auf den Folien sind zu schnell \[ \begin{eqnarray*} a &=& b \\ a^2 &=& ab \\ 2a^2 &=& a^2 + ab \\ 2a^2-2ab &=& a^2 - ab \\ 2a(a-b) &=& a (a-b) \\ 2a &=& a \\ 2 &=& 1 \end{eqnarray*} \]
  • Das virtuelle Whiteboard ist ein guter Kompromiss

Daten-Visualisierung

Interaktive Charts

1.0, 1.3, 1.7, 2.0, 2.3, 2.7, 3.0, 3.3, 3.7, 4.0, 5.0
Irgendwelche Zahlen, 5, 6, 5, 2, 3, 3, 4, 3, 3, 5, 11
Andere Zahlen, 11, 8, 5, 5, 2, 7, 4, 1, 5, 0, 15

Interaktive Charts

1.0, 1.3, 1.7, 2.0, 2.3, 2.7, 3.0, 3.3, 3.7, 4.0, 5.0
Irgendwelche Zahlen, 5, 6, 5, 2, 3, 3, 4, 3, 3, 5, 11

Interaktive Charts

100k, 200k, 300k, 400k, 500k
Sparse Cholesky, 0.21, 0.52, 0.83, 1.21, 1.54
Conjugate Gradients, 3.19, 11.6, 23.6, 37.3, 47.4

3D-Modelle

Space-Taste: Zeichenmodus ändern. Linke Maus: Rotieren

Interaktive Demos

Interaktive Demos in Javascript

de Casteljau Algorithmus: Kontrollpunkte verschieben, Parameter t verändern

Interaktive Fluid-Simulation

Rechte Maustaste: Flüssigkeit injizieren. Linke Maustaste: Verwirbeln

Live-Coding mit Python, R, SAGE, Octave

from math import exp,pi,cos,sin
import matplotlib.pyplot as plt
import numpy as np

# Definiere Funktion und erste Ableitung
def f(x):
    return exp(-sin(x))
def df(x):
    return exp(-sin(x)) * (-cos(x))

# Taste Funktion ab
X1 = np.linspace(0, 25, 200)
Y1 = [f(x) for x in X1]

# Approximation durch explizite Euler-Integration
x=0; y=1; h=0.5
X2=[]
Y2=[]
while x < 25:
    X2.append(x)
    Y2.append(y)
    y = y + h*df(x)
    x = x+h

# Funktion und Approximation plotten
plt.clf()
plt.plot(X1, Y1, 'r-')
plt.plot(X2, Y2, 'b*--')
plt.legend(('Exact solution', 'Numerical solution'), loc='upper left')
plt.show()

Inverted Classroom

Fragen zur Vorlesung

  • Mit dem Icon (oben rechts) können Studierende pro Folie anonym Fragen posten.
  • Die Fragen sind für alle sichtbar und können in Online-Fragestunde besprochen werden.
  • Fragen können von Lehrenden beantwortet, als erledigt markiert oder gelöscht werden.
  • Im Menu (Icon oben links) werden die Fragen in der Folienübersicht auch angezeigt.

Videoaufzeichnungen

  • Erklärvideos sind nahtlos in die Folien integriert
    • Video springt automatisch an die Stelle, wo die aktuelle Folie erklärt wird.
    • Cursor links/rechts springt im Video folienweise vor/zurück.
    • Typische Youtube-Features vorhanden (10s-Sprünge, Abspielgeschwindigkeit, …)
    • Beenden des Videos springt automatisch auf die zuletzt erklärte Folie.
  • Erklärvideos können einfach aufgenommen werden
    • Videos können direkt in den HTML-Folien aufgenommen werden.
    • Bildschirm, Mikrophon und Kamera werden aufgezeichnet.
    • Videos werden automatisch mit Folien synchronisiert.

Quizzes und Selbstlernphase

Audience Response System

peach.png Wer bekommt am Ende die Prinzessin?

  • Donkey Kong donkeykong.png
    • Nein, der ist böse!
  • Sponge Bob spongebob.png
    • Nein, der lebt unter Wasser!
  • Kleine A-Loch arschloch.png
    • Nein, den mag keiner!
  • Supermario supermario.png
    • Klar!

Hier können Teilnehmer*innen per Zoom oder eigenem Quiz-Server abstimmen

Zuordnungsaufgaben

“Who is who” per Drag&Drop zuordnen

peach.png
donkeykong.png
supermario.png
Prinzessin
Donkey Kong
Supermario

Freitextaufgaben

peach.png

Wie heißt die Prinzessin?

  • Peach
  • Lilifee
    donkeykong.png supermario.png spongebob.png
    Die Prinzessin ist verliebt in
    • Donkey Kong
    • Supermario
    • Sponge Bob

    Aktuelle Situation

    Powerpoint LaTeX HTML/decker
    plattformunabhängig 😢 😊 😊
    Mathe-Formelsatz 😢 😊 😊
    Multimedia-Inhalte 😊 😢 😊
    interaktive Inhalte 😢 😢 😍
    Folien-Export 😢 😢 😍
    erweiterbar 😢 😢 😍
    Erstellungsaufwand 😊 😢 😢

    Folienerstellung

    Von Markdown zu HTML

    image/svg+xml Markdown pandoc reveal.js HTML Filter Plugins decker

    Open-Source “Zutatenliste”

    • Reveal.js
      • Javascript-Framework zur Darstellung von Folien im Webbrowser
    • Pandoc
      • Tool/Bibliothek zur Konvertierung von Markdown in Reveal.js-Folien.
    • decker
      • Kominiert Pandoc und Reveal.js und erweitert sie um virtuelles Whiteboard, Live-Coding, Quizzes, Frage-Panel, Erklärvideos, …
      • Wird entwickelt von Prof. Henrik Tramberend (Berliner Hochschule für Technik), Prof. Mario Botsch (TU Dortmund) und Prof. Marc Latoschik (Uni Würzburg).
      • Wird verwendet an Uni Würzburg, Berliner Hochschule für Technik, TU Dortmund, Uni Bielefeld, Uni Osnabrück, Uni Magdeburg, Uni Bern und EPF Lausanne.

    Zusammenfassung

    • Was bringt decker für Lehrende?
      • Alles in einem Tool (decker), alles aus einem Guss
      • Text-basierter Workflow gewöhnungsbedürftig, dann aber effizient: GUI ist in Arbeit
        decker html; decker pdf; decker publish
    • Was bringt decker für Studierende?
      • Alles in einem Tool (Webbrowser), alles aus einem Guss
      • “Die Kombination aus Beispielen, Videos, Fragen und Text in den HTML-Folien ist genial.”
      • “Ich habe noch in keiner anderen Vorlesung Folien gesehen, die so viele Möglichkeiten bieten den Stoff zu verstehen. Top.”
      • “Sehr gutes Format, vor allem die HTML-Folien. Würde ich mir in ähnlicher Form bei allen Vorlesungen wünschen.”
      • “Die Vorlesung setzt Standards der Online-Lehre. An dieser Form der Wissensvermittlung können sich viele ein Beispiel nehmen. Die vielen interaktiven Beispiele machen es zu Lehre zum anfassen.”