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?
Click the "Get started" button to explore all of the possible ways to use H5P!
Get started with H5P

Example

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.

May be used to check if the user remembers a text she has read, or if she understands something. Helps the user think through a text.

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. 
Feel free to leave any comments or suggestions on how to improve this tutorial.