Making That Fancy Drag & Drop Image Quiz in H5P (Yeah, the One With Pictures)
Alright, welcome in.
Today we’re talking about something that looks super polished but is actually pretty easy to make once you know how: a drag and drop image activity using H5P on WordPress.
You’ve probably seen these before. You’ve got some pictures—famous landmarks, animals, whatever—and students drag words onto them. Maybe they drop “France” onto the Eiffel Tower, “Egypt” on the Pyramids, and so on. It’s fun. It’s interactive. And it’s way more engaging than a basic multiple-choice question.
Here’s what it looks like when it’s done:
A few pictures lined up Some draggable words You drag the word onto the right picture Check your answers Feel great (or fail gently)
I set mine up with three images: the Pyramids, the Eiffel Tower, and the Leaning Tower of Pisa. Underneath? “Egypt,” “France,” and “Italy.” Drag, drop, check. Easy.
Except—not that easy the first time you build it. The setup is a bit different from the regular drag-the-words stuff. So if you’ve done that and expected this to work the same, surprise! It doesn’t.
The Trick Is: Drop Zones
Unlike the word-based ones, where you just put asterisks around stuff, this one is all about building the structure. You upload images, add invisible boxes over them (called drop zones), and tell H5P, “Hey, this text label belongs on that picture.”
Sounds clunky, but once you do it once, it clicks.
- You add your images (nice and square, please).
- You drag out invisible boxes over them (these are where your answers go).
- You add text labels like “Italy” or “France.”
- And then you do the secret sauce: tell H5P which label goes where.
It’s like setting up a party and assigning name tags.
Oh, and one more thing—make the drop zones transparent, or they’ll awkwardly cover your pretty images with gray rectangles. (Been there.)
A Quick Rant About Scoring
The default scoring is wild. If you get one right and two wrong, it gives you zero—or even negative points. Come on. We’re not monsters.
So, go into the settings and turn off penalties. You miss one? Fine. Just don’t take points away.
Also, uncheck the “one point for the whole task” box. Your students deserve credit for what they got right, not all-or-nothing grading.
Wrapping It All Up
Once it’s all set up, you preview the activity, grab the shortcode, and paste it into a blog post. Done. Now it’s live on your site, and your students (or visitors, or whoever) can play with it.
The best part? You can get really creative with this. Landmarks are cool, but you could do:
- Animals and their habitats
- Foods and countries
- Tools and their uses
- Literally anything visual
And if you’re feeling fancy, you can even throw in a background image to tie it all together. Just don’t let it steal the show.
That’s it.
Not bad for a five-minute build once you know the steps.
More H5P stuff coming soon—text, images, quizzes, weird hacks.
See you next post.
👉 Subscribe to my YouTube channel for detailed H5P tutorials and WordPress tips: @edu-hermit
Leave a Reply