Skip to Main Content

H5P Help Guide

This LibGuide contains step-by-step directions to complete several H5P Resources and Activities. Additionally, each h5p activity or resource contains specific suggestions on how to use it in a course.

Drag and Drop Activity

A drag-and-drop activity includes a background image, drop zones, and text or images. Students work to move either specific images or text onto the drop zones that are placed on the background image. Drag and drop activities can be used to assess if a student can identify a specific part of a thing or to put steps in a specific order. Feedback is essential in this activity, as it will help the student identify and evaluate their performance.

How can drag-and-drop activities help my students?

  • Use a drag-and-drop activity to identify the specific parts of equipment of food items by using an image of that item.
  • Create an activity where students have to put items in a specific order.
  • Use images of kitchen stations and have students drag and drop specific components or ingredients to the station.

Drag and Drop Activity

Step 1

You must upload background image for the drag and drop activity. Specify the size of the area of the drag and drop activity. Experiment with different task sizes until you are satisfied with the drag and drop action and the aspect ratio of the image.

Step 2

After adjusting the initial settings, you will click on Step 2 Task.

Step 3

You first need to create and place each drop zone. Start by clicking on the drop zone icon.

Step 4

Name the drop zone and you can either show or hide the label names. Auto-align will help the students identify the drop zone by aligning all draggable elements. Click Done.

Step 5

Here is the drop zone you created. You can click and drag to move it, you can resize it, and you can duplicate it. To edit the drop zone double click on it.

Step 6

Once you have all of the drop zones in place, you can now create the draggable objects. Click on either the Text or Image button.

Step 7

Using Text as a Draggable object

Add text to the draggable object. Select the corresponding drop zone. This will be the label of the drop zone. Control the background opacity (only want to view the text and not the white background - change opacity to 0.) Lastly, click Done to complete editing this draggable object.

Using an image as a Draggable Object

Click +Add to locate the background image on your computer and to upload it. You must add alternative text and it is recommended that you text for Hover. Select the corresponding drop zone for the object. Lastly, click Done.

Step 8

To record students grades you need to set the answers to the drop zones. Double click or hover and click the pencil icon on a drop zone. Once you have created all of your draggable objects you can arrange them anyway on the play area.

Step 9

Once you have linked a draggable object with a drop zone you will need to open up that particular drop zone and select it from the Select Correct Elements list. Lastly, Click Done.


The Culinary Institute of America | Conrad N. Hilton Library | 1946 Campus Drive | Hyde Park, NY 12538-1430
Telephone: 845-451-1747 | Email: library@culinary.edu