LTI - H5P - Drag and Drop

Owned by Jesslyn Whittell (Deactivated)
Last updated: Sept 07, 2022 by Tom Garbelotti
3 min read

Create drag and drop tasks with images

Description

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.

This functions as an assessment and includes questions.

Use

This is a multipurpose content type that can be integrated into an aggregator content type, or used on its own. For more information on how H5P types work and how they interact, see http://humtech.ucla.edu/instructional-support/ccle-activities-resources/h5p/ .

Drag and Drop enables the learner to associate two or more elements and to make logical connections in a visual way. Here are some examples:

  • Group elements that belong together or have 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 Multi-choice 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.

Adding Drag and Drop on Bruin Learn

  1. Navigate to your page or resource and click “Edit”

  2. In the menu bar of the editor, you should see the “Tools” option

  3. In the Tools dropdown, go to “Apps” then select “Interactive Content

4. The H5P menu will open, and you can either select a previous H5P collage you have made or create a new one by clicking “Add Content”

5. Choose “Drag and Drop” from the kinds of content.

6. The plugin is divided into two parts: background image and Task. In this example, I label the parts of a bee, so I set the background image to a bee.

7. Under “Task,” users need to create both drop zones and text to drag. Start by defining drop zones. You will notice that they are visible and labelled. We don’t want this to be the case, so we’ll edit that out in a moment.

8. Create “droppable elements” and select which zones they can go in. Below, I create a label “Thorax” that can go in the thorax drop zone.

9. Return to the Drop Zones and select the correct labels. Here, I check “Text: Thorax” to indicate that Thorax is a correct answer from the label.

Also, set the “Background Opacity” to 0 and desselect “Show Label” to hide the drop zone.

10. Final result: