Drag and Drop

Diese Dokumentation bezieht sich auf die neue Drag-and-Drop-Interaktion mit WYSIWYG-Bearbeitung, die im März 2026 veröffentlicht wurde.

Was ist eine Drag-and-Drop-Slide?

Mit der Drag-and-Drop-Slide erstellst du interaktive Aufgaben, bei denen Lernende Antworten in Ablageflächen ziehen. Du platzierst Elemente frei auf einer visuellen Bühne, legst fest, welche Antworten wohin gehören, und konfigurierst, wie die Aufgabe ausgewertet wird. So lassen sich flexibel Zuordnungs-, Sortier- und Kategorisierungsaufgaben umsetzen.

Der Editor im Überblick

Der Editor besteht aus drei Bereichen:

Toolbar (oben) — Buttons zum Erstellen neuer Elemente und ein Schalter zum Wechseln zwischen Quer- und Hochformat.
Bühne (Mitte) — Die visuelle Arbeitsfläche, auf der du deine Elemente anordnest. So sehen es die Lernenden später auch.
Seitenleiste (rechts) — Zeigt die Einstellungen für das aktuell ausgewählte Element. Die Seitenleiste hat zwei Tabs:
- Darstellung — Visuelles Styling: Position, Größe, Layout-Modus und Hintergrundbild, wenn ein Element ausgewählt ist. Hintergrundbilder auf Slide-Ebene und Container-Ausrichtung, wenn nichts ausgewählt ist.
- Einstellungen — Inhalt und Verhalten: Bezeichnung, akzeptierte Antworten, Feedback und weitere Optionen, je nachdem was ausgewählt ist.

Klicke auf ein Element auf der Bühne, um es in der Seitenleiste zu bearbeiten. Klicke auf den Bühnenhintergrund, um zu den allgemeinen Slide-Einstellungen zurückzukehren.

Bausteine

Jede Drag-and-Drop-Slide besteht aus drei Elementtypen:

Antworten — Die Elemente, die Lernende herumziehen. Jede Antwort kann formatierten Text und optionale Hintergrundbilder enthalten. Das sind die Teile, die Lernende aufnehmen und an die richtige Stelle ablegen.

Ablageflächen — Die Zielbereiche, in die Antworten gezogen werden können. Du legst fest, welche Antworten jede Ablagefläche akzeptiert und ob sie erforderlich oder optional sind. Ablageflächen können eine sichtbare Bezeichnung und ein Hintergrundbild anzeigen.

Textbereiche — Nicht-interaktive Elemente für Anleitungen, Hinweise, Beschriftungen oder andere Informationen, die du auf der Bühne anzeigen möchtest. Lernende können nicht mit ihnen interagieren — sie dienen rein der Information. Du kannst wählen, zu welchem Container ein Textbereich gehört: zum Ablageflächen-Container, zum Antworten-Container oder zu einem separaten Textbereich-Container.

Elemente erstellen und verwalten

Elemente hinzufügen: Nutze die Toolbar-Buttons oben — „Antwort erstellen", „Ablagefläche erstellen" oder „Textbereich erstellen". Jedes neue Element erscheint an einer Standardposition auf der Bühne und wird automatisch ausgewählt, damit du sofort mit der Bearbeitung beginnen kannst.

Elemente auswählen: Klicke auf ein Element auf der Bühne, um es auszuwählen. Die Seitenleiste wechselt dann zu den Einstellungen dieses Elements. Klicke auf den Bühnenhintergrund, um die Auswahl aufzuheben und zu den allgemeinen Einstellungen zurückzukehren. Du kannst auch die Tastatur (Enter oder Leertaste) verwenden, um ein fokussiertes Element auszuwählen. Alternativ kannst du ein Element über das Dropdown in der Toolbar auswählen.

Elemente duplizieren: Wenn ein Element ausgewählt ist, klicke auf das Kopier-Symbol in der Kopfzeile der Seitenleiste (sichtbar auf beiden Tabs). Das Duplikat bekommt den Zusatz „(Kopie)" im Namen und übernimmt alle Einstellungen des Originals — einschließlich der akzeptierten Antworten bei Ablageflächen.

Elemente löschen: Wähle das Element aus und klicke auf „Löschen" am unteren Rand des Einstellungen-Tabs.

Positionierung und Größe

Jedes Element kann einen von zwei Layout-Modi verwenden (auf dem Darstellung-Tab):

Automatisches Layout — Elemente werden automatisch in einer Reihe oder Spalte angeordnet. Du steuerst die Reihenfolge über das Feld „Reihenfolge" (kleinere Zahlen kommen zuerst). Das ist die einfachste Option und funktioniert für die meisten Aufgaben gut.

Manuelles Layout — Du positionierst Elemente frei, indem du sie direkt auf der Bühne ziehst oder genaue Koordinaten in die Felder „Oben" und „Links" auf dem Darstellung-Tab eingibst. Breite und Höhe legst du ebenfalls manuell fest. Standardmäßig sind die Werte in Prozent (%), was die Darstellung responsiv hält. Es gibt auch eine Option für benutzerdefinierte Einheiten.

Für die Größe kannst du:

Breite und Höhe unabhängig voneinander festlegen
Eines davon auf „auto" setzen, damit es sich an den Inhalt anpasst
Das Seitenverhältnis sperren (z. B. 1:1, 16:9, 4:3), um Proportionen beizubehalten

Styling und Darstellung

Hintergrundbilder

In den allgemeinen Darstellungseinstellungen (klicke auf den Bühnenhintergrund, dann auf den Tab „Darstellung") kannst du zwei separate Bilder festlegen:

Hintergrundbild — Füllt die gesamte Slide. Es wird skaliert und zugeschnitten, wenn nötig.
Interaktionsbild — Liegt über dem Hintergrundbild. Es wird nie zugeschnitten und eignet sich daher ideal für Diagramme, Karten oder Illustrationen, über denen du Ablageflächen und Antworten platzierst.

Beide unterstützen separate Bilder für Quer- und Hochformat.

Bildfilter

Jedes Bild — ob auf dem Slide-Hintergrund, im Interaktionsbereich oder auf einzelnen Elementen — unterstützt diese Filter:

Unschärfe — Weichzeichnung (0–20 Pixel)
Graustufen — Entfernt Farbe (0–100 %)
Sepia — Fügt einen warmen Braunton hinzu (0–100 %)
Helligkeit — Macht das Bild heller oder dunkler (50–150 %)
Kontrast — Erhöht oder verringert den Kontrast (50–150 %)

Du kannst Filter auch ohne Bild anwenden. In diesem Fall wirkt der Filter auf das, was hinter dem Element sichtbar ist — nützlich für Milchglas-Effekte oder zum Abdunkeln des Hintergrunds hinter einer Ablagefläche.

Element-Hintergrundbilder

Jede einzelne Antwort, Ablagefläche und jeder Textbereich kann ein eigenes Hintergrundbild mit Filtern haben, unabhängig vom Slide-Hintergrund. Du findest das auf dem Darstellung-Tab, wenn das Element ausgewählt ist.

CSS-Klasse

Jedes Element hat ein Feld „CSS-Klasse" auf dem Einstellungen-Tab. Damit kannst du theme-spezifische Styles anwenden, die vom Designsystem deiner Organisation bereitgestellt werden. Frag dein Designteam, welche Klassennamen verfügbar sind. Wenn du dich mit CSS auskennst, kannst du auch eigene CSS-Klassen verwenden und den entsprechenden Code in den Overrides deines Themes hinterlegen.

Container-Ausrichtung

Bei automatischem Layout kannst du steuern, wie jede Elementgruppe innerhalb ihres Containers ausgerichtet wird (auf dem Darstellung-Tab, wenn nichts ausgewählt ist):

Ablageflächen-Container — Horizontale und vertikale Ausrichtung aller automatisch angeordneten Ablageflächen
Antworten-Container — Ausrichtung aller automatisch angeordneten Antworten
Textbereich-Container — Ausrichtung der Textbereiche, die dem Container „Textbereiche" zugewiesen sind

Textbereich-Container

Wenn ein Textbereich automatisches Layout verwendet, kannst du über das Dropdown „Container" auf dem Darstellung-Tab wählen, zu welchem Container er gehört:

Ablageflächen — Platziert den Textbereich neben den Ablageflächen
Antworten — Platziert ihn neben den Antworten (deaktiviert, wenn „Antworten stapeln" aktiv ist)
Textbereiche — Platziert ihn in einem separaten Container für Textbereiche

Das ist nützlich, wenn eine Beschriftung oder Anweisung direkt neben einer bestimmten Elementgruppe erscheinen soll.

Quer- und Hochformat

Du kannst deine Slide für beide Ausrichtungen gestalten. Nutze den Schalter in der Toolbar, um zwischen Quer- und Hochformat zu wechseln. Jedes Element hat separate Einstellungen für Position, Größe und Hintergrundbild pro Ausrichtung, sodass du das Layout für beide Formate optimieren kannst.

Querformat: Die Bühne verwendet ein 16:9-Seitenverhältnis
Hochformat: Die Bühne verwendet ein 3:4-Seitenverhältnis

Wenn du keine hochformatspezifischen Styles festlegst, werden die Querformat-Einstellungen als Fallback verwendet.

Korrekte Antworten einrichten

Das ist das Herzstück jeder Drag-and-Drop-Aufgabe — festzulegen, welche Antworten wohin gehören.

Antworten zu Ablageflächen zuordnen

Wähle eine Ablagefläche aus und gehe zum Einstellungen-Tab, um den Abschnitt „Akzeptierte Antworten" zu sehen. Jede Antwort erscheint als Chip, auf den du klicken kannst, um einen von drei Zuständen auszuwählen:

Nicht akzeptiert (grau, mit einem +-Symbol) — Diese Antwort kann hier nicht abgelegt werden.
Optional (umrandet) — Diese Antwort wird hier akzeptiert, muss aber nicht hier platziert werden, damit die Aufgabe als korrekt gilt.
Erforderlich (ausgefüllt, mit einem Häkchen) — Diese Antwort muss hier platziert werden (oder in einer anderen Ablagefläche, die sie ebenfalls als erforderlich markiert hat).

Du kannst auch die umgekehrte Ansicht sehen: Wähle eine Antwort aus, um unter „Zugeordnete Ablageflächen" zu sehen, welchen Ablageflächen sie zugewiesen ist.

Abschlussmodus

Jede Ablagefläche hat ein Dropdown „Abschlussmodus" auf dem Einstellungen-Tab mit zwei Optionen:

Nur speziell markierte Elemente erfordern — Nur die Antworten, die du als „Erforderlich" markiert hast, müssen hier platziert werden. Optionale Antworten werden akzeptiert, sind aber nicht notwendig. Die Ablagefläche hat kein Kapazitätslimit.
Eine beliebige akzeptierte Antwort zum Abschluss erfordern — Mindestens eine akzeptierte Antwort muss hier platziert werden. Die Ablagefläche nimmt nur ein Element auf.

Distraktoren

Eine Antwort, die keiner Ablagefläche zugeordnet ist, wirkt als Distraktor. Distraktoren sind nur dann korrekt, wenn Lernende sie in Ruhe lassen — werden sie in eine Ablagefläche gezogen, gilt das als falsch. Das ist nützlich, um plausible, aber falsche Optionen hinzuzufügen und die Aufgabe anspruchsvoller zu machen.

Wie die Auswertung funktioniert

Nachdem Lernende ihre Antworten abgegeben haben, bekommt jedes Element einen dieser Status:

Richtig — In einer Fläche abgelegt, die es akzeptiert
Falsch — In einer Fläche abgelegt, die es nicht akzeptiert
Vergessen — Nicht abgelegt, aber noch irgendwo benötigt

Die Aufgabe gilt nur dann als vollständig korrekt, wenn alle erforderlichen Antworten an der richtigen Stelle sind und alle Bedingungen der Ablageflächen erfüllt sind. Nach der Auswertung erscheint eine Legende, die die Symbole erklärt.

Gemeinsame Anforderungen

Eine Antwort kann in mehreren Ablageflächen als „Erforderlich" markiert werden. Das bedeutet: „Diese Antwort muss in eine dieser Flächen — egal welche." Sobald sie in einer davon platziert wird, ist die Anforderung für alle erfüllt.

Interaktionseinstellungen

Diese Optionen findest du auf dem Einstellungen-Tab, wenn nichts auf der Bühne ausgewählt ist:

„Auswerten"-Button anzeigen — Wenn aktiviert, platzieren Lernende erst alle Antworten und klicken dann auf „Auswerten", um alles auf einmal zu prüfen. Wenn deaktiviert, wird jedes Ablegen sofort ausgewertet — falsche Antworten werden direkt abgelehnt, und die Aufgabe wird automatisch abgeschlossen, wenn alles richtig ist.

Antworten mischen — Wenn aktiviert, werden Antworten mit automatischem Layout bei jedem Versuch in zufälliger Reihenfolge angezeigt. Antworten mit manuellem Layout sind davon nicht betroffen.

Antworten stapeln — Wenn aktiviert, werden Antworten mit automatischem Layout übereinander gestapelt wie ein Kartenstapel, statt nebeneinander angeordnet. Lernende nehmen nacheinander vom Stapel.

Feedback und Wiederholen

Diese Optionen befinden sich ebenfalls auf dem Einstellungen-Tab (allgemeine Einstellungen):

Feedback bei richtiger Antwort — Aktiviere dies und schreibe eine Nachricht, die Lernende sehen, wenn alles richtig ist.

Feedback bei falscher Antwort — Aktiviere dies und schreibe eine Nachricht für den Fall, dass etwas falsch ist.

Feedback automatisch anzeigen — Wenn aktiviert, erscheint die Feedback-Nachricht automatisch nach der Auswertung. Wenn deaktiviert, können Lernende selbst entscheiden, ob sie es ansehen.

„Nochmal versuchen"-Button anzeigen — Ermöglicht Lernenden einen neuen Versuch nach einer falschen Antwort. Du kannst wählen, wo der Button erscheint:

Auf dieser Slide — Der Button erscheint direkt auf der Slide
Im Feedback-Dialog — Der Button erscheint innerhalb der Feedback-Nachricht

Header

Jede Drag-and-Drop-Slide kann einen Header mit vier Feldern haben:

Overline — Ein kleiner Text über dem Titel (z. B. „Übung 3")
Titel — Die Hauptüberschrift
Caption — Ein Untertitel oder eine kurze Beschreibung
Beschreibung — Zusätzlicher Kontext oder Anweisungen

Alle Felder unterstützen formatierten Text. Klicke auf den Header-Bereich auf der Bühne, um diese zu bearbeiten.

Barrierefreiheit

Lernende können Drag-and-Drop-Slides mit Maus, Touch oder Tastatur bedienen. Tastaturnutzer können Elemente mit der Leertaste oder Enter ziehen. Screenreader geben Drag-Aktionen bekannt (z. B. „Du ziehst [Antwortname]", „[Antwortname] in [Flächenname] abgelegt").