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!