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.
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.
Finally, I added a box with the instruction text…et voila… the Drag & Drop Interaction is finished.
Julia Reischert is an e-Learning designer based in Germany. She is the founder of simple-course.com and helps companies and learning organizations create engaging and visual appealing online courses.