Go to the More dropdown menu on your course page

Select Content bank

Click the Add button

Scroll down to the Drag and Drop option and click it

Name your activity

Move to Task

You will see three icons. The circle is for setting drop zones, the T is for adding text labels, and the photo icon is for uploading images. Below, we start by adding images

Add an image by clicking the Add button

Make sure you add alt text for accessibility

Click Done

Drag your image to the proper location and resize if necessary

​

Repeat as needed. Below, there are four images arranged along the top of the Task box

Click the T in the icon bar at the top of the Task box to add text. Click Done after you type in the label

​

​

Drag your text to your preferred spot in the Task box and then click the T to add more labels

Repeat as necessary

Now move to the circular icon to add drop zones. Label your drop zones by number

Check the boxes as shown below

Click Done and repeat adding drop zones as necessary. You can use the copy icon and the clipboard button if you like, but remember to rename your copied content

Below, three drop zones have been added. After adding a final drop zone, all drop zones need be arranged properly and stretched to match the image size

You can make sure the boxes are the same size by matching the size numbers that display when you start pulling the edges. The size below is 130 x 80

Now it’s time to make the images draggable. Click on each of your images one at a time and then click on the editing pen. On the page that appears, select all drop zones for each image. Click Done after each one

You can see below that three out of four of the images are draggable because they have a border outline

The last step is to add the correct answer for each of the drop zones. Click on the first drop zone box and then click on the editing pen

Select the correct answer

Save all your changes

View of completed content bank Drag and Drop activity

Test the activity. Drag each image to the drop zone nearest to the correct label

If the “play” area seems too crowded, go back to your content’s settings and change the task size

Now it’s time to add the content to your course. Click the Course tab

Make sure Edit mode is on

Click Add an activity or resource

Add an H5P activity

Type in the activity name, a description (optional) and check the Display description on course page (optional)

Click the file icon

Choose Content back from the File picker menu and select your content

Verify and click Select this file

Set activity criteria as you normally would

Save your changes

​

Your H5P activity will display on your course page

​

H5P Drag and Drop can be used for all sorts of subjects where matching photos to terms might be helpful, e.g., human anatomy, geographical features, sign language, and more!