Drag and Drop Question

VernieuwdApril 16, 2026

With the Drag and Drop question, you can let users drag elements such as text or images to the correct position on the canvas (answer area).

To use this question type, go to the left navigation panel, select “Question Module”, and choose “Drag and Drop.”

Question Settings

The question will now appear on your canvas, along with several configuration options:

Name: Give your question a custom name
Action: Define what happens after the user completes the question (e.g., go to a page, open a URL, play audio or video)
Score: Define how much this question contributes to the total score
Style: Adjust transparency and padding
Background Style: Set background color, border color, border width, and transparency
Shape Style: Choose between rounded or sharp corners
Background Image: Add an image if you want users to drag elements onto an image
Background Image Style: Define the alignment of the background image
Workspace: Set the size of the answer area in the drag-and-drop module. When resizing, the scale may change, but the aspect ratio remains fixed
Hint: Add a hint with a title and text, and style it as needed
Position and Size: Define the exact position and size of the question container
Initial Animation: Choose whether the question appears with an animation
Visible on Start: Decide whether the question is visible immediately or only after a specific action (using “change property”)
Transform: Scale or rotate the question container
Transform Origin: Define the starting point for transformations or animations

Once all settings are configured, double-click the question title to adjust its layout.

To configure Drop Targets (the destination areas) and answer options (the draggable text or images), follow these steps:

Click the blue “Add Element” button at the bottom of the question. You will see three options:

A Drop Target is the area where items (text or images) can be dropped. You can create as many Drop Targets as needed.

Name: Give the Drop Target a clear name
Behavior: Define whether multiple answers can be correct
Enable Auto-Alignment:
- Enabled: dragged items are centered within the Drop Target
- Disabled: items stay where the user drops them
Correct Answers: Define which text or images belong to this Drop Target (after adding them)
Visibility: Choose whether the Drop Target is always visible, always hidden, or only visible during dragging
Position and Size: Set the exact position and size
Transform: Scale or rotate the Drop Target
Transform Origin: Define the starting point for transformations

You can add as many Drop Targets as needed.

When you select Image, a container appears where you can place an image.

Position and Size: Set the exact position and size
Image: Upload or select an image from the library
Change all answer option styles: Apply the same styling to all answer options
Button Style: Adjust transparency and corner shape

You can add as many image elements as needed.

When you select Text, a container appears where you can add text.

Position and Size: Set the exact position and size of the text box
Answer: Enter the answer text
Change all answer option styles: Apply consistent styling across all answer options
Button Style: Configure font, size, color, alignment, and layout

You can add as many text elements as needed.

Double-click a Drop Target to open the settings panel on the left.

Under “Correct Answers”, select which answer options are correct for that Drop Target.

Repeat this for each Drop Target you have created.