Drag and Drop Component
The Drag and Drop component lets you create draggable items and corresponding drop zone areas to receive them. The Drag and Drop component is suitable for building more complex test interactions.
This article provides an overview of the Drag and Drop component, component setup and behavior, and examples of Drag and Drop component configurations.
The Drag and Drop component is an interactive question component that lets you create draggable items that the learner drops into specific drop zones. Learners can test their knowledge and receive immediate feedback. The Drag and Drop component can be part of an assessment or used as a separate component in your course.
The Drag and Drop component is fully responsive.
Component set up
Follow these steps to add the Drag and Drop component to a Block:
- Click Add Component.
- Use the component search or scroll to find the Drag and Drop component.
- Click the Drag and Drop component and select Add Full.
Click the Edit Component icon on the newly added Drag and Drop component to begin set up.
Add Drag and Drop Title, or a Drag and Drop Display Title, as needed. The Drag and Drop Display Title is seen by learners.
Add your Drag and Drop Question. Use the text editor to style and format your text, as needed.
- Add Drag and Drop Instruction Text that tells users how to use the component.
- Include an Aria Label for screen readers, as needed.
- Add Aria Role Description for screen readers, as needed.
Interaction Label section
In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Drag and Drop component that can display an icon and label prior to the Drag and Drop component completion, which changes to a different icon and label once the Drag and Drop component is completed.
In the Behaviour section, update the number of Attempts the learner is allowed, as needed. The default setting is 1 attempt.
By default, Display Attempts Counter is enabled. Toggle to disable Display Attempts Counter.
Toggle to enable Auto Submit the Question.
Toggle Submit at any time to allow the learner to submit the question at any time.
Scroll down in the Behaviour section and toggle to enable Should drop zones reject incorrect items and to Randomize Items, as needed.
The final toggle in the Behaviour section is to enable Randomize Drop Zones.
Add Answers & Drop Zones
Drop Zone section
In the Drop Zones section, you Add Drop Zone Items.
Add Drop Zone Text that is the text that should appear on the drop zone. Use the text editor to style and format your text, as needed.
- Select a Drop Zone Background Image. The image will display inside the Drop Zone. Add Drop Zone Background Aria Label, as needed.
- Toggle to enable Should Background Image Cover Drop Zone. Allowing this will set the Drop Zone Background Image to cover the entire Drop Zone area.
- Set a Drop Zone Aria Label for screen readers, as needed.
Add, duplicate, or delete Drop Zone Items as needed.
In the Answers section, you add Answer Items to your Drag and Drop component and choose the correct drop zone for each Answer Item.
Add a new Answer Item.
Add Item Text that is the text that will display as the draggable item text.
- Select Correct drop zones that the Answer item belongs to.
- Select an Item Image, as needed. The Item Image will display inside the draggable item.
- Enter Item Image Alt Text, as needed.
Add, duplicate, or delete Answers Items as needed.
The Drag and Drop component gives you a lot of flexibility. Below are examples that illustrate different Drag and Drop component setups:
Example 1 – displays a Drag and Drop component set up with two Drop Zones and two Answer Items. The Drop Zones display Background Images and the setting to cover the entire drop zone.
Example 2 – displays a Drag and Drop component configured to display Compact Drop Zones with horizontal layout, with Background Images.
In the Appearance section, you select the Drop Zone Layout. By default, this is set to Drop zones bottom. Layout options are: Drop zones bottom, Drop zones right, Drop zones left, Two columns, and Two columns reverse .
- In the Appearance section, you toggle to Show Answers as Grid.
- Enable Display Drop Zone Pointer to display a pointer icon inside each drop zone that indicates to the learner that the item should be dropped there.
- Toggle to enable Compact Drop Zones. Enabling this removes the default drop zone height.
- Finally, in the Appearance section, toggle to enable Drop Zone Horizontal Layout.
The Feedback section lets you tailor feedback for correct, partly correct, or incorrect Drag and drops. Feedback can be displayed on the page, beneath the component or in a notification pop-up.
For each type of feedback, you can choose to include:
- global feedback set up.
- custom text as feedback. You can use the text editor to style and format your text as needed.
- custom imagery as feedback.
- a link to a specific part of your course; if, for example, learners should revisit a particular section.
- a feedback style that overrides the theme styles settings.
Did this article help?
Let us know by leaving a star rating or review at the top of this article.