H5P Guides

Drag the Words Tutorial

Drag the Words question type allowing creatives to create text-based challenges where users are to drag words into blanks in sentences. Excellent for language training among other things.

In this tutorial you will learn:

  • When to use Drag the Words
  • How to create a Drag the Words
Not using H5P yet?


Here's the Drag the Words we'll create in this tutorial:

When to use Drag the Words

Drag the Words allows content designers to create textual expressions with missing pieces of text. The end-user drags a missing piece of text to its correct place, to form a complete expression.


Step 1: Topic

Let's say you want to ask a question:

What are the colors of these berries when they are ripe?

Blueberries are _______________
Strawberries are _______________
Cloudberries are _______________

And suggest colors: blue, red and orange.

Step 2: Create Drag the Words

Select the New content option and choose Drag the Words from the list of Content types:

Step 3: Drag the Words editor

The Drag the words editor should now appear. The top part of the editor looks like this:

Step 4: Title and Task description

The Task description should give the learner a short introduction or some instructions. A default Introduction text, which works fine in most cases, is suggested: "Drag the words into the correct boxes". However, you may modify it. In this example, we will type in the text: "What are the colors of these berries when they are ripe?"

Step 5: Add an exercise

The Text field is where you will type your exercise. Type in the following text:

Blueberries are *blue*.
Strawberries are *red*.
Cloudberries are *orange*.

Add (*) character in front and behind all the words/phrases that you want to display as droppables. For the learner, the word/phrase between (*) characters will appear as a blank inside the text and as a droppable item next to the text. Like shown here:

Step 6: Adding tips

Optionally, you can provide a tip for each word/phrase to help the learner find the correct answer or to provide some additional information about the word/phrase. Let's add some tip for the word "blue". A tip is defined by adding :tip_text next to the word.

So type in :Check the name of the berry! next to the word blue, as shown here:

For the learner, the tip will appear like shown here:

Step 7: Adding feedback 

Optionally, you can add correct feedback and incorrect feedback for each word/phrase. This feedback will show below the exercise once the student click "Check".
Feedback is defined by typing \+correct_feedback and \-incorrect_feedback next to the word. 

Step 8: Instructions

If you need a reminder of how tips and feedback are defined you can click on "Show information" button, which is placed next to the Text label:

The box with instructions will appear:

Step 9: Finishing up

Press Save when you are done!
You should now have the same result as this example