Benutzeroberfläche und Kurserstellung

Zunächst schauen wir uns die Benutzeroberfläche an.

Klicke auf die Symbole um mehr über die einzelnen Bereiche zu erfahren!

1

2

3

4

Titelleiste im Detail ▾

Die Titelleiste bietet Zugriff auf alle übergeordneten Funktionen: Über ⚙️ öffnest du globale Einstellungen (API Key, S3 Bucket, Wissensdatenbank). 💾 speichert den Kurs als JSON unter ~/LearnDEV/courses/. ⬆ öffnet den Export-Dialog. Die drei Tabs Editor, Einstellungen und Vorschau steuern den Arbeitsmodus.

Linke Sidebar – Kursstruktur verwalten ▾

In der Sidebar baust du die hierarchische Struktur deines Kurses auf: Module enthalten Lektionen. Mit '+ Lektion hinzufügen' legst du eine neue leere Lektion an, mit '+ Modul hinzufügen' ein neues Modul. Das ✕-Symbol entfernt Elemente. Per Klick auf den Titel kannst du in-place umbenennen.

Editor-Canvas – Arbeitsbereich ▾

Im Canvas gestaltest du die Lektion: Lade ein Banner-Bild (16:4-Verhältnis, 35% Opazität über dem Titel), bearbeite den Lektionstitel direkt im Banner und füge Blöcke über das ＋-Symbol zwischen bestehenden Blöcken ein. Mit ↑↓ änderst du die Reihenfolge, mit ✕ löschst du Blöcke.

Rechtes Properties-Panel ▾

Sobald du einen Block per Klick auswählst, öffnet sich rechts das Properties-Panel mit allen Einstellungen, die für diesen Block-Typ relevant sind – z. B. Bildbreite, Quiz-Antworten, Accordion-Items oder Gate-Bedingungen.

Kurs-Einstellungen-Tab ▾

Unter dem Tab Einstellungen konfigurierst du Lektions-Theme (Dark/Light), Kursname, Autor, Beschreibung, S3 Bucket sowie S3 Pfad. Diese Werte fließen in die course.json und damit in den späteren LearnOS-Import ein.

Schritt für Schritt: Einen Kurs erstellen

Nach dem Start von LearnDEV bietet das Startfenster zwei Optionen: + Neuen Kurs erstellen oder 📂 Kurs öffnen. Beim Anlegen gibst du Name, Beschreibung, Autor und Sprache an. Der Kurs wird automatisch unter ~/LearnDEV/courses/ mit einem lesbaren Dateinamen gespeichert (z. B. waffensachkunde_ca6e1a63.json).

Anschließend strukturierst du den Kurs in der Sidebar mit Modulen und Lektionen. Jede Lektion füllst du im Canvas mit Blöcken – das sind die inhaltlichen Bausteine deiner Lerninhalte.

Text-Block

Rich-Text-Editor mit Bold, Italic, Überschriften (H1–H3), Listen, Links, Textausrichtung und Farb-Picker.

Bild-Block

Lokaler Upload oder URL. Bildbreite in %, Ausrichtung (Links/Mitte/Rechts), Alternativtext und Beschriftung einstellbar.

Video-Block

Unterstützt YouTube, Vimeo, MP4 und S3-URLs. Mit Autoplay-Option und Gate-Funktion bei 80% Wiedergabe.

PDF-Block

S3-URL oder lokale PDF einbetten. Höhe in Pixeln und Beschriftung einstellbar, inkl. Fallback-Link.

HTML / Design-Block

Fertiges HTML direkt einfügen. Vorschau im sandboxed iframe, Export als nativ eingebettetes HTML.

Hotspot-Block

Basisbild mit klickbaren Pins. Jeder Pin hat Label und Tooltip-Text; smarte Positionierung im Bild.

Interaktive Blöcke im Fokus

Neben statischen Inhalten bietet LearnDEV zahlreiche interaktive Block-Typen, die das Lernen aktivierend gestalten. Sie können zudem als Gate-Bedingung dienen: Sie sperren nachfolgende Inhalte, bis der Lernende eine Aktion ausführt.

Quiz-Block

Der Quiz-Block unterstützt Single-Choice (genau eine richtige Antwort) und Multiple-Choice (mehrere korrekte Antworten). Jede Antwort kann mit individuellem Feedback versehen werden.

Flip Cards

Lernkarten mit Vorder- und Rückseite, in 2 bis 4 Spalten angeordnet. Klick dreht die Karte per CSS-3D-Animation.

Accordion-Block

Aufklappbare Abschnitte mit Titel und HTML-Inhalt – ideal für FAQ, Detailinformationen oder gestaffelte Inhalte.

Trenner & Weiter-Button

Der Trenner-Block sorgt mit Linie oder Abstand für visuelle Gliederung. Der Weiter-Button (Gate) sperrt Inhalte, bis Bedingungen wie korrekte Quiz-Antwort, 80% Videowiedergabe oder alle umgedrehten Flip Cards erfüllt sind.

Gate-Bedingung: Quiz korrekt ▾

Der referenzierte Quiz-Block muss korrekt beantwortet sein, damit der Weiter-Button entsperrt wird. Ideal für Wissensüberprüfungen vor weiterführenden Inhalten.

Gate-Bedingung: Video 80% ▾

Das referenzierte Video muss zu mindestens 80% angesehen werden. So stellst du sicher, dass Lernende den Inhalt tatsächlich rezipieren.

Gate-Bedingung: Flip Cards ▾

Alle Karten des referenzierten Flip-Card-Blocks müssen umgedreht worden sein. Fördert aktive Auseinandersetzung mit Lerninhalten.

Gate-Bedingung: Accordion ▾

Alle Accordion-Abschnitte müssen mindestens einmal geöffnet worden sein – sinnvoll, wenn Lernende alle Detailbereiche durchgehen sollen.

Gate-Bedingung: Immer offen ▾

Der Button ist immer zugänglich, ohne Bedingung. Nützlich für rein navigatorische Weiter-Buttons.

Wo werden Kurse gespeichert?

Lokal unter ~/LearnDEV/courses/ als JSON-Datei mit lesbarem Namen (Kursname + 8 Zeichen der ID).

Wie fügt man einen Block ein?

Mauszeiger unter einen bestehenden Block bewegen – das ＋-Symbol erscheint und öffnet den Block-Picker.

Was bewirkt der Gate-Block?

Er sperrt alle nachfolgenden Inhalte, bis eine definierte Bedingung (Quiz, Video, Flip Cards, Accordion) erfüllt ist.

Wie ändere ich die Block-Reihenfolge?

Mit den ↑↓-Pfeil-Buttons am Block. Löschen erfolgt über das ✕-Symbol.

Zusammenfassung

Du kennst jetzt die vier Bereiche der Oberfläche – Titelleiste, linke Sidebar, Editor-Canvas und rechtes Properties-Panel – und weißt, wie du Kurse anlegst und strukturierst.

Mit den zwölf Block-Typen von Text, Bild, Video, PDF, HTML, Flip Cards, Hotspot, Quiz, Accordion, Trenner bis zum Weiter-Button stehen dir alle Werkzeuge für ansprechende, interaktive Lerninhalte zur Verfügung. Mit Gate-Bedingungen steuerst du den Lernfortschritt gezielt.

Nächster Schritt: Lege deinen ersten Kurs an, experimentiere mit den verschiedenen Block-Typen und teste die Vorschau, um zu sehen, wie deine Lektion später im LMS erscheint.

Klicken Sie auf "Lektion abschließen"!

Zunächst schauen wir uns die Benutzeroberfläche an.

Titelleiste

Linke Sidebar

Editor-Canvas