What is a Game Map?
A game map consists of stages that you can arrange on top of a background image.
Stages can be stand alone or they can be connected to other stages. Each stage will have a H5P content type for the user to view or complete. This can be in the form of knowledge check or presentation of learning material.
You can define the rules to decide the stage the user is allowed to move to, so a game-like experience is created.
You can upload any background image and arrange stages on it, so it can be used for activities that are not limited to 'maps' - even though it is probably the most obvious one.
Accessing H5P in Canvas
You can access H5P in Canvas through the Rich Content Editor (RCE), which is accessible via the edit view of Page, Assignment, Discussion Board, Announcement and Quiz questions.
For this example, we will be adding H5P onto a Canvas page. The first thing you will need to do is either open the page you want to embed the H5P content into or create a new page. Then click the ‘Edit’ button which will open the RCE. (You will automatically go into edit mode if you create a new page.)
Next, you will need to locate H5P in the RCE toolbar
When you click on the H5P menu item a pop-up will show your H5P library.
Select Add Content option
A search bar will pop up.
Search for Game Map in the search bar and then choose Game Map from the list of Content types available.

The Game Map editor should now appear.
We will now look at each section of the editor
Title
Add a title to your Game Map.
This will not be visible to your learners but can be used for searching, reports and copyright information.
Show title screen
Check this if you would like a title screen to show up when starting.
You will then be able to add an introduction title for your game map and also upload media, either a video or an image.
If you add an image that is is decorative only, please select this option.
If the image is not decorative, please add alternative text which can be used by screen readers.
Headline
You can add an optional headline for the titlebar.
Background Image
Click on +Add to upload your main image for your map.
For this example we will upload a map of Europe
Add in the copyright information using Edit Copyright
Setting up your game map
Now you have uploaded your background map, you want to set up different stages on it for your learner to interact with.
There are two places where you can access the game map set up section, both highlighted here in red.
Once you are in the game map set up you will see a screen similar to this:
There are 2 icons outlined in red which are your tools to add stages to your game map.
The star icon is selected to add an exercise stage, while the heart icon is selected to add a special stage.
In this example we will add an exercise stage so we select the star icon to do this.
Once you select the star icon the section to set up the stage pops up
Stage Label
The first thing you need to do is label the stage on your game map.
In this example we will set up a stage on the Ireland map.
So we can title the stage Ireland
User can start here
If you select this option it means the user will start the game map here.
If no stage is selected or if more than one stage is selected to be the start stage, the starting stage will be chosen randomly.
Time Limit
You can set an optional time limit in seconds. If the user goes beyond this time, the exercise closes, is reset and the user will lose a life if lives are limited.
Timeout Warning Time
You can also use this option of setting up a warning when a certain amount of seconds are left. An audio will then start to play when this amount of seconds is left.
Access Restrictions
Minimum score to unlock
You will need to input the minimum score a user has to have score on the other stages before they can unlock the stage.
Open once score sufficient
If the user has attempted to unlock the stage with an insufficient score, select this option if you want the stage to open automatically once the score becomes sufficient.
Stage Content
This is where you select what type of H5P content or learning activity you want the learner to complete in the stage. There are many options to choose from including different types of questions such as true or false, multiple choice, or layout content types such as accordion, course presentation or interactive video. In this example we have chosen a True of False question
Once you have completed your True/ False question set up, and added your behavioural settings, select Done.
Your stage will now appear on your map. Click on the circle on the map to move it to the correct location. See example
Once you have completed this stage, you can go through the same process to add further stages.
Connected Stages
When you have created more than one stage, you can select the stage you want this stage to connect to.
In the following example the Irish stage has been connected to the United Kingdom and Portugal stage and below you will see how the stages are connected by green dots.
Once you have created your game map stages, there are some other options you can use to customise your game map.
End Screen
The End Screen choices include options for messages
- if the user is successful
- if the user is unsuccessful
For both options an image or video can be added.
Visual Settings
There are three options in Visual Settings
- Stages
- Paths
- Miscellaneous
In Stages you can select colours for each of the following
- Not visited Stage
- Locked Stage
- Cleared stage
In Paths, you decide if paths will be displayed on the map. The path visually shows how the stages are connected. If you want to display paths, you can select
- the colour of the path
- the path width - Thin, Medium or Thick
- the path style - Solid, Dotted, Dashed, Double.
In the Miscellaneous section, you can select if you want the map animated. Even if this option is set, the content type will honour the user's browser setting if they have chosen reduced motion.
Audio Settings
The Audio settings includes two options
- Background Music
- Events
In the Background Music section, you can upload your audio file. You can select for it to mute when the learner is completing an exercise.
In the Events option, there are options to add music for different parts of the game map including:
- clicking on a locked stage.
- when an answer is checked and the user did not get the full score.
- when an answer is checked and the user did get the full score.
- when a stage gets unlocked
- when an exercise is opened
- when an exercise is closed
- when a confirmation dialog is shown
- when the user reaches the full score for the map.
- when a player loses a life
- when a user gains a life
- when the user's game is over.
- when the user gets extra time.
- when the user is running out of time for an exercise or the global time runs out.
- will be played on the end screen if the user did not get the full score
- will be played when the user got the full score.
Behavioural Settings
Behaviourial Settings include the following options
- Lives - set the number of lives the user has or leave empty for unlimited lives.
- Global Time Limit - Optional time limit in seconds for the whole game.
- Timeout warning time - Set a timeout warning audio when a number of seconds remain.
- Finish Score - Optional score that can be lower than the summed maximum score of all exercise, so users can receive full score without completing all exercises.
- Enable 'Retry' button so users can retry the stage.
- Enable 'Show Solutions' button so solutions for the stage can be seen by the user.
- Map - Choose to show stage labels when the user hovers over a stage with the mouse. The Roaming option allows you to choose whether users can roam all stages freely, finish stage to move to the next stage, or need to pass a stage.
When you have completed the different sections of the game map, select Save