---
title: "Drag and Drop"
url: "https://help.cbook.de/en/article/drag-and-drop"
language: "en"
last_updated: "2026-03-11T12:50:47.004Z"
---

# Drag and Drop

This documentation is for the new Drag and Drop slide with WYSIWYG editing, released in March 2026.

## What is a Drag and Drop slide?

The Drag and Drop slide lets you create interactive exercises where learners drag answers into drop areas. You place elements freely on a visual stage, set up which answers belong where, and configure how the exercise is evaluated. It's a flexible way to build matching, sorting, and categorization tasks.

## The Editor at a Glance

The editor has three main areas:

-   **Toolbar** (top) — Buttons to create new elements and a toggle to switch between landscape and portrait mode.
-   **Stage** (center) — The visual canvas where you arrange your elements. This is what learners will see.
-   **Sidebar** (right) — Shows settings for whatever you've selected on the stage. The sidebar has two tabs:
-   -   **Appearance** — Visual styling: position, size, layout mode, and background image when an element is selected. Slide-level backgrounds and container alignment when nothing is selected.
    -   **Settings** — Content and behavior: label, accepted answers, feedback, and other options depending on what's selected.

Click any element on the stage to edit it in the sidebar. Click the stage background to go back to the general slide settings.

## Building Blocks

Every Drag and Drop slide is made up of three types of elements:

**Answers** — The items that learners drag around. Each answer can contain formatted text and optional background images. These are what learners pick up and drop into the right place.

**Drop areas** — The target zones where answers can be dropped. You define which answers each drop area accepts and whether they're required or optional. Drop areas can show a visible label and a background image.

**Text areas** — Non-interactive elements for instructions, hints, labels, or any additional information you want to display on the stage. Learners can't interact with them — they're purely informational. You can choose which container a text area belongs to: the drop areas container, the answers container, or a separate text areas container.

## Creating and Managing Elements

**Adding elements**: Use the toolbar buttons at the top — "Create answer", "Create drop area", or "Create text area". Each new element appears on the stage at a default position and is automatically selected so you can start editing right away.

**Selecting elements**: Click any element on the stage to select it. The sidebar will switch to show that element's settings. Click the stage background to deselect and return to general settings. You can also use the keyboard (Enter or Space) to select a focused element. Alternatively, you can select an element via the dropdown select in the toolbar.

**Duplicating elements**: When an element is selected, click the copy icon in the sidebar header (visible on both tabs). The duplicate gets a new name with "(copy)" appended and keeps all settings from the original — including accepted answers for drop areas.

**Deleting elements**: Select the element and click "Delete" at the bottom of the sidebar's Settings tab.

## Positioning and Sizing

Each element can use one of two layout modes (found on the Appearance tab):

**Automatic layout** — Elements are arranged automatically in a row or column. You control the order using the "Order" field (lower numbers come first). This is the simplest option and works well for most setups.

**Manual layout** — You position elements freely by either dragging them directly on the stage or entering exact coordinates in the "Top" and "Left" fields on the Appearance tab. You also set the width and height manually. By default, values are in percent (%), which keeps things responsive. There's also a custom unit option if you need it.

For size, you can:

-   Set width and height independently
-   Set either to "auto" to let it adjust to the content
-   Lock the aspect ratio (e.g., 1:1, 16:9, 4:3) to keep proportions consistent

## Styling and Appearance

### Background Images

In the general appearance settings (click the stage background, then the "Appearance" tab), you can set two separate images:

-   **Background image** — Fills the entire slide. It will be scaled and cropped to fit.
-   **Interaction image** — Sits on top of the background. This one is never cropped, so it's great for diagrams, maps, or illustrations that your drop areas and answers overlay.

Both support separate images for landscape and portrait mode.

### Image Filters

Every image — whether on the slide background, the interaction area, or individual elements — supports these filters:

-   **Blur** — Softens the image (0–20 pixels)
-   **Grayscale** — Removes color (0–100%)
-   **Sepia** — Adds a warm brownish tone (0–100%)
-   **Brightness** — Makes the image lighter or darker (50–150%)
-   **Contrast** — Increases or decreases contrast (50–150%)

You can also apply filters without an image. In that case, the filter affects whatever is visible behind the element — useful for creating frosted glass effects or dimming the background behind a drop area.

### Element Backgrounds

Each individual answer, drop area, and text area can have its own background image with filters, independent of the slide background. You'll find this on the Appearance tab when the element is selected.

### CSS Class

Every element has a "CSS Class" field on the Settings tab. This lets you apply theme-specific styles provided by your organization's design system. Ask your design team which class names are available. If you are familiar with writing CSS code, you can use your own CSS classes and write the corresponding code in your theme's overrides.

### Container Alignment

When using automatic layout, you can control how each group of elements is aligned within its container (found on the Appearance tab when nothing is selected):

-   **Drop area container** — Horizontal and vertical alignment of all automatically laid out drop areas
-   **Answers container** — Alignment of all automatically laid out answers
-   **Text areas container** — Alignment of text areas assigned to the "Info areas" container

#### Text Area Container

When a text area uses automatic layout, you can choose which container it belongs to via the "Container" dropdown on the Appearance tab:

-   **Drop areas** — Places the text area alongside the drop areas
-   **Answers** — Places it alongside the answers (disabled when "Stack answers" is on)
-   **Info areas** — Places it in a separate container for text areas

This is useful when you want a label or instruction to appear right next to a specific group of elements.

## Landscape and Portrait Mode

You can design your slide for both orientations. Use the toggle in the toolbar to switch between landscape and portrait view. Each element has separate position, size, and background settings per orientation, so you can fine-tune the layout for both.

-   **Landscape**: The stage uses a 16:9 aspect ratio
-   **Portrait**: The stage uses a 3:4 aspect ratio

If you don't set portrait-specific styles, the landscape settings are used as a fallback.

## Setting Up Correct Answers

This is the heart of any Drag and Drop exercise — defining which answers go where.

### Assigning Answers to Drop Areas

Select a drop area and go to the Settings tab to see the "Accepted answers" section. Each answer appears as a chip that you can click to select one of three states:

1.  **Not accepted** (gray, with a + icon) — This answer can't be dropped here.
2.  **Optional** (outlined) — This answer is accepted here, but it doesn't have to be placed here for the exercise to be correct.
3.  **Required** (filled, with a checkmark) — This answer must be placed here (or in another drop area that also requires it).

You can also see the reverse view: select an answer to see which drop areas it's assigned to under "Assigned drop areas".

### Completion Mode

Each drop area has a "Completion mode" dropdown on the Settings tab with two options:

-   **Only require specifically marked items** — Only the answers you've marked as "required" need to be placed here. Optional answers are accepted but not necessary. The drop area has no capacity limit.
-   **Require any one accepted answer for completion** — At least one accepted answer must be placed here. The drop area accepts only one item.

### Distractor Answers

An answer that isn't assigned to any drop area acts as a distractor. Distractors are only correct if the learner leaves them alone — placing them in any drop area counts as wrong. This is useful for adding plausible but incorrect options to make the exercise more challenging.

### How Evaluation Works

After a learner submits their answers, each item gets one of these statuses:

-   **Correct** — Placed in an area that accepts it
-   **Wrong** — Placed in an area that doesn't accept it
-   **Missed** — Not placed, but still needed somewhere

The exercise is only marked as fully correct when all required answers are in the right places and all drop area conditions are met. A legend explaining the icons appears after evaluation.

### Shared Requirements

An answer can be marked as "required" in multiple drop areas. This means: "This answer must go into one of these areas — I don't care which one." As soon as the learner places it in any one of those areas, the requirement is satisfied for all of them.

## Interaction Settings

These options are on the Settings tab when nothing is selected on the stage:

**Show "Evaluate" button** — When enabled, learners place all their answers first and then click "Evaluate" to check them all at once. When disabled, each drop is evaluated instantly — wrong drops are rejected right away, and the exercise auto-completes when everything is correct.

**Shuffle answers** — When enabled, answers with automatic layout are shown in a random order each time the learner attempts the exercise. Answers with manual layout are not affected.

**Stack answers** — When enabled, answers with automatic layout are stacked on top of each other like a deck of cards, rather than arranged side by side. Learners pick from the stack one at a time.

### Feedback and Retry

These options are also on the Settings tab (general settings):

**Correct feedback** — Toggle this on and write a message that learners see when they get everything right.

**Incorrect feedback** — Toggle this on and write a message for when something is wrong.

**Show feedback automatically** — When enabled, the feedback message pops up automatically after evaluation. When disabled, learners can choose to view it.

**Show "Retry" button** — Lets learners try again after a wrong answer. You can choose where the button appears:

-   **On this slide** — The retry button shows directly on the slide
-   **In feedback dialog** — The retry button appears inside the feedback message

## Header

Every Drag and Drop slide can have a header with four fields:

-   **Overline** — A small text above the title (e.g., "Exercise 3")
-   **Title** — The main heading
-   **Caption** — A subtitle or short description
-   **Description** — Additional context or instructions

All fields support formatted text. Click the header area on the stage to edit these.

## Accessibility

Learners can interact with Drag and Drop slides using mouse, touch, or keyboard. Keyboard users can drag items with Space or Enter. Screen readers announce drag actions (e.g., "You are dragging \[answer name\]", "Dropped \[answer name\] to \[area name\]").