Lern-Interaktion

Jede Aufgabe auf dieser Seite verlangt ein id. Es ist der Schlüssel, unter dem der Stand gespeichert wird — die Bibliothek kennt dabei kein Backend, sondern ruft einen Adapter auf, den das Zielprojekt einmal hinterlegt (siehe useLmsProgress im README). Ohne Adapter bleibt der Stand flüchtig, wie in den Quellprojekten.

id ist zugleich die Anmeldung im Aufgabenregister der Seite: jede Aufgabe meldet dort, ob sie bearbeitet ist. LmsProgressCheck liest das Register und gibt den Haken mit gated erst frei, wenn nichts mehr offen ist. Ein LmsExam klammert die Aufgaben in seinem Inneren und zählt gegenüber der Seite als eine.

Ein Hinweis zur Reihenfolge: die Aufgabe steht vor der Bestätigung. Umgekehrt wüsste LmsProgressCheck beim ersten Rendern noch nichts von den Aufgaben.

LmsQuiz

Die Quellkomponenten trennten Optionen und Lösung (options: string[] plus correct: [1, 2]). Hier steht die Lösung an der Option selbst: ein Indexverweis auf eine Liste ist in Markdown nicht nachvollziehbar.

LmsReflection

LmsSelfAssessment

LmsPoll

LmsProgressCheck

LmsCaseStudy

FxConfetti

Ab hier Bausteine aus Inspira UI (MIT), dekorativ.

FxCircularProgress

FxNumberTicker

FxMultiStepLoader

⚠️ Nicht direkt aus Markdown steuerbar. FxMultiStepLoader legt sich bei loading: true als Vollbild über die Seite und wird nur über ein Ereignis geschlossen — und MDC kann keine Ereignisse abfangen. Aus einer .md-Datei heraus ließe er sich öffnen, aber nie wieder schließen.

Die Vorschau unten läuft deshalb über eine Demo-Hülle des Playgrounds, die den Zustand hält. In deinem Projekt schreibst du das in einer .vue-Datei — siehe das zweite Beispiel.

<script setup lang="ts">
const open = ref(false)

const steps = [
  { text: 'Vorfall erkannt' },
  { text: 'Erheblichkeit bewertet' },
  { text: 'Frühwarnung abgesetzt' },
  { text: 'Meldung nachgereicht' },
]
</script>

<template>
  <UButton label="Meldekette durchspielen" @click="open = true" />

  <FxMultiStepLoader
    :steps="steps"
    :loading="open"
    :default-duration="1400"
    @close="open = false"
    @complete="open = false"
  />
</template>

LmsReveal

LmsGapText

Die Lücken stehen im Text selbst zwischen Sternchen — Ein *starkes* Passwort — statt in einer zweiten Liste mit Indexverweisen. Wer den Satz umstellt, muss nichts nachziehen.

Einsetzen geht auf zwei Wegen: ziehen, oder erst das Wort antippen und dann die Lücke. Der zweite Weg ist nicht bloß Bequemlichkeit — auf einem Tastfeld und mit der Tastatur ist Ziehen keine Option.

Der Wortvorrat mischt deterministisch: derselbe Text ergibt dieselbe Reihenfolge. Mit Math.random() hätte der Server anders gewürfelt als der Browser, und die Hydration risse.

LmsHotspotImage

Die passende Aufgabenform für alles, was man sehen muss: die falsche Absenderadresse, der Anhang mit doppelter Endung, das fehlende Schloss in der Adresszeile. Eine Aufzählung derselben Punkte wäre die Antwort schon.

Lage und Größe stehen in Prozent des Bildes, damit die Flächen beim Skalieren sitzen bleiben. Die Quelle trug beides in zwei verschachtelten Objekten je Fläche (computedSettings, userSettings) — dem Datenmodell des Autorenwerkzeugs, aus dem sie stammte.

Vier Merkmale, ein Ablenker

Die Uhrzeit rechts oben ist harmlos — wer sie anklickt, sieht das nach dem Prüfen.

MDC API

Woran erkennen Sie, dass diese Mail nicht echt ist?

Klicken Sie alle verdächtigen Stellen an.

Antwort prüfen

LmsExam

Der Unterschied zu einzelnen Fragen ist nicht die Zahl, sondern der Zeitpunkt: hier gibt es kein Prüfen nach jeder Antwort. Wer alles beantwortet hat, gibt ab und sieht dann die Auflösung — wie in einer Klausur. Deshalb blenden die enthaltenen Bausteine ihre eigenen Knöpfe aus.

Gegenüber der Seite zählt eine Prüfung als eine Aufgabe. Sonst bliebe der Lernfortschritt gesperrt, obwohl die Prüfung als Ganzes noch offen ist.

LmsExamStep

Mit Schritten blättert die Prüfung: eine Aufgabe je Seite, Punkte darunter, und der Abgabeknopf bleibt sichtbar. Ohne Schritte stehen die Aufgaben einfach untereinander — ein Aufruf ohne ::lms-exam-step bleibt also brauchbar.

LmsHabit

Der Baustein, der eine Schulung von einer Lektüre unterscheidet: nicht „das sollte man tun", sondern ein Vorsatz, den der Lernende mitnimmt.

Der Knopf schreibt die ganze Gewohnheit unter ihren Schlüssel — Titel, Rhythmus, Ziel. Das Zielprojekt sieht im Adapter sonst nur ein true und müsste den Rest aus dem Markdown nachschlagen. Was daraus wird, entscheidet es selbst.

cadence ist bewusst freier Text und keine Auswahl aus daily | weekly: die Bibliothek müsste sonst Rhythmen benennen, und jedes Zielprojekt hat davon seine eigene Vorstellung.

LmsRating

Eine Rückmeldung am Modulende. Bewusst nicht im Aufgabenregister angemeldet: sie ist freiwillig, und sie zur Bedingung für den Lernfortschritt zu machen hieße, sie zu erzwingen — dann sagt sie nichts mehr aus.

Neu gebaut, nicht übernommen. Rating in coactum-nuggets ist eine zur Hälfte ausgeweidete Kopie von PrimeVues Rating: Basisklasse, Stilsystem und cn sind auskommentiert, cx, ptm, writeValue und $primevue.config.locale gibt es dort nicht mehr. Der Baustein kann so nicht laufen — und StarFillIcon zeigte einen erhobenen Daumen statt eines Sterns.

LmsSorting

Die Aufgabenform für Einteilungen: welcher Sektor fällt unter welchen Anhang, welche Maßnahme ist Pflicht und welche Kür. Eine Tabelle mit denselben Zeilen gäbe die Antwort schon; hier muss man sich entscheiden.

Übernommen aus einem H5P-Paket (H5P.DragQuestion). Die Quelle setzte die Kärtchen auf eine Fläche von 1024×768 und merkte sich für jedes eine Position — die aber keine Aussage trug: kein Sektor stand dort, wo er inhaltlich hingehört. Eine Fläche mit festem Seitenverhältnis bricht zudem auf dem Telefon. Hier liegt der Vorrat oben, die Ablagen darunter, und eingesetzt wird per Ziehen oder Antippen.

Ohne correct an irgendeinem Eintrag entfällt die Auswertung — dann ist es ein freies Sortieren, etwa als Einstieg in eine Diskussion.

LmsOrdering

Die Aufgabenform für alles, wo die Abfolge die Aussage ist. Eine Liste in der richtigen Reihenfolge vorzulegen und danach zu fragen, wäre etwas anderes — hier muss man die Ordnung selbst herstellen.

Zusammengezogen aus zwei H5P-Inhaltstypen: Image Sequencing und Sort the Paragraphs. Bei H5P sind es zwei Pakete, weil es dort keine Varianten gibt; hier ist es dieselbe Mechanik, und ob im Kärtchen ein Bild, ein Text oder beides steht, entscheidet der Inhalt.

Umgeordnet wird durch Ziehen oder mit den Pfeilen. Ziehen allein — wie bei H5P — schließt Tastatur und Tastfeld aus.

scoring kennt zwei Arten: positions zählt, was an der richtigen Stelle steht, transitions, was dem richtigen Vorgänger folgt. Die Vorgabe ist positions, und zwar wegen der Rückmeldung, nicht wegen des Punktestands: „das steht falsch" ist unmittelbar umsetzbar. transitions bewertet milder — ein Fehler am Anfang kostet dort nicht alles.

LmsPairing

Die Aufgabenform für Zuordnungen zwischen zwei Seiten. Anders als beim Quiz gibt es keine Ablenker, die man ausschließen könnte — jede Karte gehört irgendwohin, und wer eine falsch legt, legt zwangsläufig eine zweite falsch.

Übernommen aus H5P Image Pairing. Die feste Seite bleibt stehen, die gesuchte landet gemischt im Vorrat — so ist die Aufgabe ausgesprochen: „was gehört hierzu?". Ein gemischtes Raster, in dem man zwei Karten verbindet, wäre etwas anderes: dort merkt man sich, wo etwas lag, statt zu erkennen, was zusammengehört.

Bedrohung und Gegenmaßnahme

Vier Paare. Ziehen oder erst die Karte, dann das Feld antippen.

MDC API

Welche Maßnahme hilft gegen welche Bedrohung?

Platte verschlüsseltRegelmäßige UpdatesPasswortmanagerAbsender prüfen

Ziehen Sie die passende Karte daneben — oder tippen Sie erst die Karte an, dann das Feld.

Phishing-MailPassendes hierher

Schwaches PasswortPassendes hierher

Verlorenes GerätPassendes hierher

Veraltete SoftwarePassendes hierher

Antwort prüfen