Creating Drag-the-Word Activities with H5P

This is my second post for a series in which I develop and appraise English language learning activities using the web-based program H5P. For other posts in the series, please click on the tag H5P.

Today I had some time during my office hour — a couple of students were completing make-up writing assessments — so I thought I would use the lull to experiment with a second H5P content type: Drag the Word.

H5P’s Drag the Word is basically the electronic cousin of the paper-based chestnuts Fill in the Blank and Multiple Choice. For the H5P’s version of this activity, students need to drag a set number of keywords into a set number of empty spaces in order to complete a sentence or a paragraph — pretty simple, but a very versatile activity for the English language classroom.

For my activity experiment, I decided to convert a worksheet passage from my ENGL 252: English for Communication II Business. In the passage, students have to select the correct adverb to complete the sentences in an apology letter. They have two adverbs to choose from.

Adverb practice for an apology email

In order to create the activity, I logged into H5P and selected the Drag the Word content type. Then I had to decipher the interface for creating this activity. Basically, text is entered into the text box, and any words or phrases that will be used as answers should be encapsulated in *asterisks*. This is a straightforward way of generating the activity; however, large amounts of text cannot be viewed easily without scrolling in the finite text box. Also, in order to provide learners with better feedback, the response needs to be coded in a specific manner *answer\+Correct! \-Incorrect, try again!*. The interface at this point made me feel like a computer programmer.

To get around the problems with the interface for the Drag-the-Word generator, I opened a Word document to assemble my text. I was thankfully able to copy and paste the passage from a PDF of the worksheet into my Word document. Then I added *asterisks* to the correct answers. Finally, in order to provide students with clues if they answered, incorrectly, I copied and pasted the code and customized the message for incorrect answers. Once the text was written, I then copied and pasted it into the H5P interface. Voila! (Here is the LINK to the activity)

From the text that I entered, H5P created a very clean looking Drag-the-Word activity. I tested it out on my laptop and was happy with the ease of dragging words to the various blanks. Next, I wanted to see what the feedback looked like when I inputted incorrect answers, so I mixed in a number of answers that I knew to be wrong.

Screenshot of the Feedback

I was pleased with how the activity operated on my computer, but I wanted to see how it worked on my phone because this is likely how I would share it with my students, so I copied the URL and sent it to myself. The activity opened fine, but the entire passage did not display on my screen. I had to scroll down to access the text and eventually the answer words necessary for completing the blanks. This is where I ran into a major problem: I was only able to drag answers into blanks that were on-screen but was unable to drag answers into any blanks that were off-screen! This was a major blow to the viability of the H5P Drag the Word because unless I was able to ensure that students were working from a laptop or in a computer lab, the activity wouldn’t perform in an expected way.

Screenshot from my phone


First, many instructors nowadays have ample electronic text that they can easily adapt into a Drag the Word activity. Once a user becomes comfortable with the creation code, it would be easy to adapt the text from an existing Word file before copying and pasting it into H5P. An instructor could easily and quickly generate a bank of Drag-the-Word activities after becoming familiar with the creation process.

Second, while it is quicker to just put *asterisks* around the answers, the added benefit of this activity is to provide students with feedback regarding their wrong answers. The feedback would be useful for students completing the activity as pre-work, homework, or assessment review.

Finally, on a computer, Drag the Word has a simple layout and is easy to complete using a mouse or touch pad.


However, on a phone, Drag the Word has an awkward layout making it unmanageable to complete because answers are at the bottom of the activity and blanks might be off-screen and impossible to access. (I tried minimizing the passage size to make it all viewable on-screen, but this was not possible. Also, I tried dragging words up to the top margin of the screen to see if the text scrolled upwards, it did not.)


While I am very happy with the activity on a computer, unless I am able to manipulate it easily on a phone, I don’t think it is viable for use in the classroom on a day-to-day basis since 99% of my students use their phones to complete in-class electronic activities. However, if my students were in the habit of bringing their laptops or tablets with them, or if I were teaching in a computer lab, then H5P Drag-the-Word activities would be more viable. Additionally, if these activities were created for students to complete outside of the classroom as pre-work, homework, or review material, then the activities could work much better — as long as students were clear that the activities needed to be completed on a computer or tablet.

Note: there is a Fill in the Blanks H5P content type where students are able to type in an answer. This type of activity might skirt the problem with answers being off-screen when they use their phone. However, there does not seem to be a word bank option for this activity, and students might struggle with guessing the correct word to fill in the blank, depending on the variety of possible answers. If instructors wanted to employ the Fill in the Blanks content type, they could project the keywords on an LCD screen, write them on the board, or provide students with papers with the keywords listed.

1 thought on “Creating Drag-the-Word Activities with H5P”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s