Drag and Drop

The Drag and drop content type allows learners to drag a piece of text or an image and drop it on one or more corresponding drop zones. 

When to use Drag and drop

Drag and drop enables the learner to associate two or more elements and to make logical connections in a visual way. Some examples include

  • Group elements that belong together or having something in common
  • Match an object with another object 
  • Put elements in the correct order 
  • Place elements at a correct position.  

Drag and drop can be used to test the learner's knowledge on a given topic as a variation to Multichoice questions. Drag and drop can be used stand-alone or they can be included in Question sets, Interactive Videos or Presentations. Either way, they are created in the same way. 

How to Create Drag and Drop Questions

You can access H5P in Canvas through the Rich Content Editor (RCE), which is accessible via the edit view of Page, Assignment, Discussion Board, Announcement and Quiz questions. 

For this example, we will be adding H5P onto a Canvas page. The first thing you will need to do is either open the page you want to embed the H5P content into or create a new page. Then click the ‘Edit’ button which will open the RCE. (You will automatically go into edit mode if you create a new page.) 

Next, you will need to locate H5P in the RCE toolbar by clicking on H5P icon in the toolbar. 
Image Placeholder

This will open a pop-up showing your H5P library.

From here, you will have the option to either insert previously created content or create something new. 


Select the Add content option.

Type Drag and Drop into the search bar 

Select the Drag and Drop option from list provided 
Image Placeholder


Drag and drop question editor

The drag and drop question editor should now appear.

The top part of the editor looks like this:


Add a Title. This will not be visible to your learners but can be used for searching, reports and copyright information.  

There are two steps in creating a drag and drop question: 

1. Settings 
2. Task.

Choose the Settings or Task tabs at the top of the editor at any time to navigate between the views.

1. Settings

Settings deals with general settings such as background image and size. 

Press the  button to add a background image

Image Placeholder

You can add license information for the background image by pressing the Edit copyright button:  


The Year(s) field is not relevant in this context so we'll leave this blank.

Now that we've added a background image, define the size of the Drag and drop question.

The Drag and drop question will be scaled to the maximum width of the page where it is placed, after saving. The Size defines the width and height of the editor as well as the aspect ratio of the Drag and drop question, rather than the actual size in pixels when it is viewed. 



Behaviourial Settings 

Since we want learners to be able to try to solve the Drag and drop question multiple times, as opposed to only have one go, we'll check the Enable "Retry" option. 

Image Placeholder


The Give one point for the whole task option is more relevant when we add Drag and drop question to Question sets, Interactive Videos or Presentations.

This option controls the score the learner gets for solving the Drag and Drop question when it is placed in a sequence of multiple tasks. 


2. Task

Press the Task tab in the top right half of the editor to start creating the task itself. 

Add a Title. This will not be visible to your learners but can be used for searching, reports and copyright information.  

The background image is displayed with the size defined in the Settings tab. 


The toolbar allows you to insert:


Dropzones

Text

Images

Dropzones are areas on which Text and Image draggable elements can be dropped.

Dropzone

To add a Dropzone to the background image, press the Dropzone button in the toolbar, drag it and drop it somewhere above the image.

Dropzone options appear when you drop it.

- Label 
- Background opacity 

Add a Label
Set the opacity to 50 to make it semi-transparent.


You will have something like this:


Press Done.  

A white drop zone is placed over the background image.

Move and resize the drop zone so that it is placed roughly over your desired area in the background image.

Move the drop zone by pressing and dragging it to where you want it placed.

Resize the drop zone by pressing the lower right corner of the drop zone and dragging up/down or left/right to scale the drop zone to the right proportions. 

Double-press the drop zone to edit it at any time.

You should now have something like this:


Add text 

Images can be used as draggable elements in the same way as Text. 

Press the Text button in the toolbar and drag it onto the background image.

Place it to the right of the strawberry. Text options appear when you drop it.

You should see something like this 

Image Placeholder

In the Label field, type your label. In this example, we type in Vaccinium. 

Under Select drop zones, we check the Fragaria checkbox.

This is an incorrect match but we want the learner to be able to drop the Vaccinium text object on the Fragaria drop zone.

If this option was unchecked, the learner would not have been allowed to drop the object on the drop zone at all. This is more relevant in cases where you have more than one drop zone. 

Leave the opacity to 100 and press Done.

You will now see the labeled draggable object where you placed it.

Move and resize the draggable object as you please. Move it around by pressing on it and then drag it to where you want it. Resize by pressing in the lower right corner of the object and then pull in any direction to scale. 

Add two more Text draggable elements by following the exact same procedure as above.

Double-press the draggable object to edit it at any time.

Hopefully, you will now have something like this:



Define the correct match


In order to define which match between drop zone and draggable elements is correct, double-press on the drop zone.

This will bring up the same drop zone editor 

Since we associated all three draggable elements with the dropzone initially, we will now see a Select correct elements option.

Check the Text: (correct answer) checkbox to define this draggable object as the correct match. 
In this example it is Fragaria 


Background Opacity

Now, set the opacity to 0 (zero) and press Done.

Multiple correct elements can be placed on a drop zone. 

Adding instructions for the task 


To add an instructions for the learner, add a Text element and type in your instructions in the Label field.

As instructional text should not be a draggable element, we do not select a corresponding drop zone.

Place the instructional text in the top left corner and resize it as you please. 

You should now have something like this:


Save and Insert to view your finished Drag and drop question.