Working with Custom Drag and Drop Question Pages

Create engaging Test or Practice questions for rich learning experiences

For the Drag and Drop questions available under the Custom questions menu, you add elements to the page then set them up as draggable elements or as drop target elements.

Elements that can be set as draggable include:

Text elements
Images
Buttons
Icons
Speech Bubbles
SVGs
Shapes

Elements that can be set as drop targets include:

Images
Videos
SVGs
Shapes
Hotspots
Drop Targets

Since so many different element types can be used as draggable and/or drop target elements, you can get very creative with drag and drop question pages.

When working with custom drag and drop question pages you can set up three different statuses:

Match – For a Match you pick a draggable item then pick the target element it should be correctly dropped on to be marked correct. If a Match draggable element is not dropped on its matching target or not dropped on any target at all, it will be marked as incorrect.
Drag Distractor – This setting creates an element that can be dragged and dropped on any target but is always marked incorrect if dropped on a target. It is marked correct if left not dropped on any target.
Drop Distractor – This setting creates a drop target that draggable items can be dropped on but any items dropped will always be marked incorrect.

You can use all three of these in one question, but for we'll focus on three simple examples so you can understand the behaviour differences between these three.

Example 1 - Matches

Most of the question page options available under the Custom (1) Drag and Drop category (2) are pre-built with elements already set up as draggable and elements already set up as drop targets.

For this example we’re going to work in a Claro project and use the 12_Drag and Drop template question page (3).

This question page is essentially a blank drag and drop question page, which allows you to create a drag and drop question from scratch.

Here’s the question page added to our Project, and the instruction and question text elements edited to reflect what we want the learner to do.

We’ve added two Draw shapes to use as our drop targets. To help us keep track of things for this lesson, one shape has a dark blue fill and the other has a dark orange fill.

We’ve also added four text elements to the page, one with an orange fill and three with a blue fill. These will match to their respective-colored shapes.

TIP: Be sure to give all these elements unique names in the breadcrumb above the stage so you can identify them easily when setting up the question.

Now that the page is set up, here are the steps to set up the four Matches.

View Full Lesson >>

Example 2 – Matches and Drag Distractor

For this example we’re going to once again work in a Claro project and use the 12_Drag and Drop template question page.

Here’s the question page added to our Project, and the instruction and question text elements edited to reflect that we want the learner to drop ONLY the text elements that are examples of Malware onto the drop target.

We’ve added four text elements to the page. To help us keep track of things for this lesson, three of the text elements have green backgrounds because they are going to be correct responses, and one text element has a red background because it is going to be a drag distractor and incorrect if dropped on the target element.

We’ve also added a Draw shape to use as our drop target.

Now that the page is set up, here are the steps to set up the three Matches and the one Drag Distractor.

View Full Lesson >>

Example 3 – Matches and Drop Distractor

For this example we’ll once again work in a Claro project and use the 12_Drag and Drop template question page.

Here’s the question page added to our Project, and the instruction and question text elements edited.

We’ve added three text elements to the page. All three are Malware, so these will be set up as Matches.

We’ve also added a Draw shape which we’ll set up as a Drop Distractor. Any drag elements added to the drop distractor will be marked as incorrect.

Now that the page is set up, here are the steps to set up the three Matches and the one Drag Distractor.

View Full Lesson >>

Modifying the Other Custom Drag and Drop Question Template Pages

The same basic steps outlined above can help you modify any of the other custom drag and drop question pages.

Removing Unneeded Options

Elements that have been assigned match, drag distractor or drop distractor statuses cannot be deleted without removing the associated status.

So if the template has more options than you need, you need to edit the question and use the Remove option to remove the selected statuses and use the Update button to save your changes.

Then you can select the unneeded elements on the Stage and delete them.

Adding More Options

Elements that have been assigned match, drag distractor or drop distractor statuses cannot be duplicated without removing the associated status.

So if you need to add more options than the template has, you have to edit the question and use the Remove option to remove the selected statuses and use the Update button to save your changes.

Then you can select the elements on the Stage and duplicate them, then edit the question again to set up your match, drag distractor and drop distractor statuses for the new elements plus any elements that you removed statuses from in order to duplicate them.

Snap To Center For Draggable Items

On the Properties panel's Details tab is an option, Snap to Center.

Set this option if you want your Drag Items to position in the center of the Drop Target upon release.

Snap to Center is usually preferred when the Drop Target has a single Drag Item as it provides a cleaner presentation.

However, if your Drop Target has multiple Drag Items and Snap to Center is enabled, remember that all the Drag Items will be stacked on top of each other in the center of the target.

This may be frustrating for the learner when attempting to review their selections prior to submitting their response, as some of the items may be hidden beneath others.