Creating a map-based drag and drop activity (regions puzzle)

Submitted by SEDAT SOZEN on Mon, 05/04/2026 - 18:00
Forums: 
Content creation

Hi everyone,

I’m trying to create an interactive geography activity in H5P and I’m looking for the best approach.

My idea is to use a map (for example, a simplified map of Turkey divided into 7 regions) as a background image, and then have separate region pieces that users can drag and drop into the correct positions on the map.

So essentially:

  • A base map with visible region boundaries

  • 7 draggable region pieces (images)

  • Users match each region to the correct area via drag and drop

I believe "Drag and Drop" content type might be suitable, but I’m not sure if this is the best or most efficient way to achieve it.

My questions:

  1. Is Drag and Drop the right content type for this use case?

  2. Are there any limitations when working with custom-shaped map regions?

  3. Is there a recommended workflow for preparing the images (e.g., slicing the map into pieces)?

  4. Are there alternative H5P content types or libraries better suited for map-based interactions?

If anyone has done something similar or has examples, I’d really appreciate your guidance.

Thanks in advance!

Ralf_B

Fri, 05/22/2026 - 10:01

Hi Sedat,

Im a beginner in h5p, but here's my thought:
1 yes D&D is the best way to go
 2 If you work with png-format with alpha-channel you avoid some of the limitations... but close-fitting borders without overlapping hotspots wil be a challenge  (maybe if the png is bigger then the finely-placed hotspot, you could do it)
3 they have to fit.. prepare them in layers and then export the layers as separat files

papi Jo's picture

papi Jo

Fri, 05/29/2026 - 12:35

What you want to do is quite feasible with the H5P Drag & Drop library... but it will take you quite some time to achieve. You need to:

  • find a (free to download) map of your country in a vector/svg editable format. Not easy to get, most are not free.
  • edit that map in a (free) open source svg editor, I use Inkscape
  • in Inkscape, extract all the regions from the map and IN PNG FORMAT save them on your computer
  • export the empty map of your country, with only the contours visible
  • use H5P Drag & Drop library
  • upload the empty map as 'background' map
  • upload all the previously exported regions PNG files
  • create as many Dop Zones as regions
  • link each PNG image region to a Drop Zone: the hardest part is to get the correct coordinates of your regions so that the Drop Zones and the images are correctly placed on your map
  • I have created a working example on my H5P Demo site, using the regions of France which you can play with. DD PJ France regions
  • That content is using my own hacked H5P D &  D library for which you will find all details on my demo site.

This has taken me about one whole day!
Looking forward to your reaction, questions, etc.

 

BV52's picture

BV52

Mon, 06/08/2026 - 17:21

Hi Papi Jo,

I apoligize it took a week to approve your comment. I accidentally deleted the email notification.

-BV

papi Jo's picture

papi Jo

Mon, 06/08/2026 - 19:34

That's OK. Let's hope that the OP (SEDAT SOZEN ) will see my reply and react ! Too often people come to this H5P forum with a question/request then forget about it and go fishing, leaving the reply to their post un-viewed... Labour in vain.

papi Jo's picture

papi Jo

Sat, 06/06/2026 - 23:49

What you want is quite possible to achieve with the H5P Drag & Drop activity. I have actually created one example, with the French administrative regions, using my hacked H5P Drag & Drop 'papi Jo'. You can find it here :
https://www.rezeau.org/wp-h5p/dd_en-page-11/