Eine Idee, mehrere Zugänge
Vertonte Videos, Card Stories und Bildposts greifen eine Lesson in anderen Formaten wieder auf. In interaktiven Explorables kannst du einen Mechanismus selbst verändern.
Lernen · Progressive Web App
distill.
Damit sich der nächste Scroll lohnt.
Distill ist eine Lern-PWA, die vom Smartphone her gedacht ist. Eine Lesson kann ein vertontes Video im Hochformat sein, eine Card Story zum Durchtippen oder ein illustrierter Post. Explore ordnet das Material nach Fachgebieten, und eine Sternenkarte verbindet Ideen, die zusammenhängen. Quellen und Check-Ergebnisse bleiben dabei sichtbar.
01 / DER ANLASS
Ein Feed kann eine Idee erklären und sie trotzdem prüfen.
Ein kurzes Format hilft, wenn wenig Zeit da ist, aber Zuschauen oder Wischen beweist noch kein Verständnis. Distill gibt deshalb jeder Idee eine knappe Erklärung, nennt die Quelle und hängt einen kleinen Check an. Der Lernpfad kann dabei auf Schwierigkeit reagieren, ohne jede Interaktion gleich als richtige Antwort zu zählen.
Der Feed kommt aus einem endlichen, redaktionell erstellten Katalog. Swipes ändern, welche Ebene für ein Thema angefragt wird. Die Checks mit drei Fragen werden dagegen auf dem Server bewertet, liefern einen getrennten Nachweis und planen die Wiederholungen. Node.js stellt die App bereit und SQLite speichert den Fortschritt. Python und ffmpeg erzeugen passende Hell- und Dunkel-Varianten der Lesson-Medien, dazu Vertonung und Untertitel.
02 / IM EINSATZ
Was es kann.
Präferenz ist noch kein Können
„Too hard“ und „Already known“ passen den Lernpfad an. Als Check-Nachweis zählen nur die Antworten im Quick Check, und auch die setzt die App nicht mit umfassender Beherrschung eines Themas gleich.
Den Verbindungen folgen
Explore zeigt Themenpfade, und die three.js-Sternenkarte, die erst bei Bedarf geladen wird, zeichnet Lessons und Verbindungen zwischen Fachgebieten. Ist WebGL nicht verfügbar, springt eine barrierefreie Liste ein.
03 / UNTER DER OBERFLÄCHE
Wie die Teile zusammenspielen.
- Anwendung
- Vanilla JavaScript / PWA
- Server
- Node.js
- Fortschritt
- SQLite
- Medien-Pipeline
- Python / Pillow / ffmpeg
- Sternenkarte
- three.js / Lazy Loading
- Zugang
- Live-App / kein öffentliches Repository
04 / GENAUER HINGESCHAUT
BILD ANKLICKEN ZUM VERGRÖSSERN ↗Auf dem Bildschirm. Auf dem Tisch.
Eine Lesson, pausiert
Mobiler Screenshot aus der Live-App: ein Diagramm zu boolescher Logik, dauerhaft eingeblendete Untertitel und eine Wiedergabe-Steuerung auf Abruf.
Die nächste Idee wählen
Explore auf dem Smartphone: Fachgebiete, Themenpfade und eine klare Trennung zwischen Stöbern als Gast und gespeichertem Fortschritt.
Verbundene Ideen
Die Sternenkarte der Live-App. Sterne stehen für Lessons, und Bögen verbinden Ideen, die zusammengehören. Die Karte zeigt das Curriculum, keine gemessene Lernleistung.
05 / ANSEHEN
Die Website.
Screenshot der Explore-Ansicht in der Live-App. Das abgebildete Release hat neun Fachgebiete und 53 Bereiche, im lokalen Katalog steckt schon eine neuere Erweiterung. Das sind zwei unterschiedliche Release-Stände.
Distill öffnen learning.gammalabs.cc/