WEB-basierte Interaktive Notebooks und Tutorials für das maschinell geführte Selbststudium

Digitale Lehre

• Allumfassende Lehrmethodik oder nur Ergänzung?

• Digital == Multimedial und Multimodal??

• Digital == Interaktiv??

• Digital == Automatisiert??

• Digital == Präsenzlehre Hausarbeit??

• Digital == Maschineller Lerner??

• Digital == Tafelersatz??

Gelungener Mix aus Online- und Präsenzphasen

Blended Learning

“Bring your own device (BYOD)”-Anwendung

Hilfsmittel im technischen Unterricht

Programmieren Lernen

• Programmieren wird häufig entweder im Selbststudium oder in einer Gruppe erlernt

  • Verwendung von klassischen Integrated Devlopment Environments (IDE)
  • Teils hoher Installationsaufwand (Zeit und Speicher)
  • Meist komplexe Werkzeuge mit nicht angepassten Funktionsumfang

• Selbstbelohnung und Rückkopplung ist möglich - aber bei Fehlern kann es zu langwierigen Iterationen kommen

  • Hilfe eines Tutors hilfreich! Digitaler Avatar als Ersatz??

• Problem: Programme und Datenverarbeitung können schnell komplex werden und es fehlt an Strukturierung

  • Zerlegung eines komplexen Programms in aufeinander folgende Teile sinnvoll!

Hilfsmittel im technischen Unterricht

• Der Lernende steht häufig im Fokus bei der Auswahl geeigneter Methoden

• Aber wie sieht es bei dem Lehrenden aus?

  • Aufwand (Zeit)
  • Komplexität der Erstellung digitaler Inhalte
  • Nutzen
  • Übertragbarkeit und Wiederverwendbarkeit!

Ziele

• Eigenständige Bearbeitung von Tutorials und Übungen durch Studenten

• Nur ein WEB Browser wird benötigt, offline und online nutzbar

• Virtuelle Interaktion der Teilnehmer untereinander

• Schnell und einfach zu erstellen (Mittagspause)!

• Also KISS Prinzip!

Methodiken

Bearbeitungsfluss

WEB-basierte Lösungen

WEB IDE

Der erste Schritt

• Programmieren lernen mit rein WEB-basierten Technologien und WEB Applikationen

• Reine Browser Implementierungen mit vollständigem IDE, i.A. keine Serverdienste erforderlich

• Online und Offline nutzbar ⇒ Fully Self-contained!

• Mit integrierter

  • Online Hilfe
  • WEB Clipboard (Gruppeninteraktion)
  • Chat
  • Compiler
  • REPL Konsolen
  • Editoren mit Syntaxhervorhebung
  • Virtuelle Maschinen zur direkten Ausführung des Codes

Beispiel 1: WEB Haskell Laboratory

• Integrierter Haskell Compiler (unterstützt Haskell Subset)

• Wurde für erste kleine Übungen und Live Programming im Kurs Grundlagen der funktionalen Programmierung eingesetzt

  • Universität Koblenz, 2. Semester, heterogene Studiengangszusammensetzung

• WEB Clipboard erlaubte das teilen von Beispielcode während der Vorlesung zwischen Dozenten und Studenten (> 100 Teilnehmer, großer Hörsaal)

Beispiel 2: WEB Embbeded LuaOS Laboratory

Beispiel 3: WEB JAM Laboratory

• Integrierte Agentenplattform (JAM)

• WEB App kann mit anderen Plattformen verbunden werden → Verteilte Programmierung mit mobilen Agenten

• Agenten werden in JavaScript programmiert

• Einsatz in den Kursen Multiagentensysteme und Crowdsensing

• Heterogene Zielgruppen: Informatiker, Ingenieure, Soziologen

Notebook: WEB Formulare

Der zweite Schritt

• WEB basierte interaktive und multimediale Formulare bieten den Vorteil eines nachvollziehbaren Bearbeitungsstranges
  • Konzeptioneller Ausgangspunkt was das Jupyter Notebook für Python
  • Benötigt aber externe Software und wesentlich nur für Pythonprogrammierung geeignet

Notebook: WEB Formulare

Konzept

Schrittweises Bearbeiten und Lernen von insgesamt komplexen Aufgaben durch Teilschritte (Snippets)

• Alle Abschnitte sind durch einen globalen Kontext verbunden und benötigen teilweise sequenzielle Bearbeitung

Das interaktive und multimediale Notebook wird als ebener Text mit MarkDown Syntax formatiert und zusammengesetzt!

• Das Notebook besteht dabei aus:
  • Überschriften (Sektionen), Text, Listen, einfachen Tabellen, Bildern, Links
  • Mathematische Formelen können direkt in LaTex Notation eingegeben werden (Block und eingebettet)
  • Notebook Blöcken
  • Funktionaler Code (JavaScript Funktionen) → (Inter)aktion von Elementen

Notebook: WEB Formulare

Notebook Blöcke (Environments)

MarkDown Erweiterung: [TAG] text { options }

• Codeeditor + Konsolenfenster (und Interpreter Steuerung)
• Codeeditor + Grafikfenster (z.B., Turtle Graphik)
• Codeeditor + Tabellenfenster (Dynamische Tabellen)
• Interaktive Tabellen
• Graphenplotter (DAG)
• Kurvenplotter
• Fragen
• Antworten
• Lösungen
• Eingabefelder
• Spoiler
• Interne Funktionen (für Formular)

usw.

Notebook: WEB Formulare

Weitere Highlights

• Teilnehmer können Code über eine WEB Clipboard austauschen

• Alle editierbaren Inhalte (inkl. Tabellen) können im JSON Format gespeichert und wieder in das Notebook geladen werden

• Einzelne Notebook Blöcke (wie z.B. Tabellen und Codeblöcke) können gekoppelt werden (über JavaScript Funktionen)

• Externe Inhalte (WEB Seiten, Vorlesungsmodule) können in eigenen überlagerten Fenstern parallel benutzt werden → multimodal!

• Schnell vom Dozenten erstellbar und wartbar

• Einbettbare Virtuelle Maschinen derzeit für:

  • Lua
  • JavaScript (trivial)
  • Haskell, OCaML
  • Python
  • Java (??)

Beispiel 1: Einführung in die Programmiersprache Lua

• Zielgruppe: Ingenieure ohne Programmierkenntnisse

Beispiel 2: Boolesche Algebra und Entscheidungsbäume

• Vorlesungsbegleitende Übung und Vertiefung

Ausblick

• Weitere Module und Notebook Blöcke:

  • Multiple Choice mit Gruppenfeedback (Quiz)

• Weitere maschinelle Begleitung des Selbststudiums

  • Automatische Textanalyse und Rückmeldung (von Referenzlösungen)
  • Einsatz von Maschinelle Lernen für die Analyse und Rückkopplung?

• Möglichkeit Notizen an beliebiger Stelle hinzuzufügen und zu teilen

Weitere Informationen

• Beispiele

• Software (notebook Compiler)

• Dokumentation

• Dieser Vortrag!

http://edu-9.de