H5P Drag & Drop Example: Language Learning

Today I want to show you a H5P Drag & Drop interaction I made to practice Spanish vocabulary. The learner`s task is to drag and drop the vocabulary to the corresponding object on the desk. To make it a little bit easier and to practice listening and pronunciation skills as well, I also added audio files. Before I am going to explain how I created it, have a look at it:




How it`s made


The basis: H5P Course Presentation

For this project I used the H5P content type Course Presentation because I wanted to add some audio files which cannot be done with the simple Drag & Drop interaction type. Furthermore, I wanted to create a series of vocabulary practice activities within one content type.


Background image

As a background image I created an image with a desk on which I put several objects (objects related to vocabulary). I made sure to leave some space at the bottom of the image for the Drag & Drop interaction and instructions.


Drag & Drop Interaction

Next, I added the Drag & Drop Interaction. I added 5 semi-transparent dropzones and 5 draggable text elements with the vocabulary. Adding the dropzones was a little bit tricky because I had to place them near the objects on the desk without seeing the background image.


Adding Audio Elements

Vocabulary is learnt best when visual as well as auditory senses are addressed. This way, the learner can associate the written word and the image with the spoken word. That is why I also added audio files which I created with the help of Amazon Polly.

When you add an audio file to the H5P Course Presentation, a speaker symbol is created automatically. By clicking the symbol, you can listen to the audio. Thus, I placed the different speaker icons next to the corresponding dropzones.


Instruction Text

Finally, I added a box with the instruction text…et voila… the Drag & Drop Interaction is finished.