Memory Game Tutorial
Memory game content type allows authors to add their own images (and optional text) to a memory game. To play the game, users search for image pairs, which will display a specified text message once a matching pair has been found.
Click "Get started" button to explore all possible ways for using H5P
Here's the Memory game example we'll create in this tutorial:
When to use Memory games
You can use memory games in any type of exercise that requires the learner to match two images.
There are several memory game options available:
- Matching two same images,
- Matching two related images (For example, country flag with a city, an animal with its habitat etc.),
- Adding sound to represent each image,
- Displaying feedback per pair when a match has been made and
- Customizing a look and feel of the game by changing colors or adding a background image.
|Same images matching example:||Related images matching example:|
Step 1: Topic
In this example, we will create a memory game with 5 types of berries that learner has to match. After the match has been made, we will provide some textual feedback for each berry type.
Step 2: Creating a Memory game
Select the New content option and choose Memory game from the list of Content types:
Step 3: Memory game editor
The Memory game editor should now appear. Type in a Title: Berries memory game. The editor should look something like this:
Step 4: Cards
We will start by filling in the Raspberries card.
By default, two cards already exist in the set:
We will fill in the 1 st card with the following content:
|Description:||The raspberry is the edible fruit of a multitude of plant species in the genus Rubus of the rose family, most of which are in the subgenus Idaeobatus.|
You should get something like this:
You will notice that we left Matching image field empty. This is because we want the learner to match two same images.
If you would like to match Raspberry image with its leaves, for example, you would add an image of Raspberry leaves as Matching image.
Step 5: Adding more cards
In the same way, we will add the next four cards:
|Alternative Text:||A strawberry|
|Description:||The strawberry is a widely grown hybrid species of the genus Fragaria, collectively known as the strawberries, which are cultivated worldwide for their fruit.|
|Alternative Text:||A blackberry|
|Description:||The blackberry is an edible fruit produced by many species in the genus Rubus in the family Rosaceae.|
|Alternative Text:||A cloudberry|
|Description:||A cloudberry, or Rubus chamaemorus is a rhizomatous herb native to cool temperate regions, alpine and arctic tundra.|
|Description:||Blueberries are perennial flowering plants with blue or purple colored berries. They are classified in the section Cyanococcus|
In the end, we should get five cards like shown here:
Step 6: Finishing up
Save the node/article when you're satisfied to view your Memory game.
You should now have the same result as the example on top of this page.
Feel free to leave any comments or suggestions on how to improve this tutorial.
Tue, 01/17/2017 - 23:22
I'd like to know if there is a posibility that the matching cards would be different, for example a picture and it's label. Is that possible?
Wed, 01/18/2017 - 07:17
Unfortinatly it's not possible at the moment. But I suggest heading over to the feature request part of the forum, and post a proposal there.
Then someone in the community, or the core team might pick it up, and create it.
Wed, 01/18/2017 - 14:02
Thank you :)
Thank you :)
Thu, 01/19/2017 - 08:46
Happy to help!
Wed, 05/17/2017 - 03:17
Is there a suggested optimal image size to upload for each image?
Thu, 05/18/2017 - 09:47
There isn't an optimal size.
There isn't an optimal size. I assume square images would be best.
Tue, 08/01/2017 - 09:38
Why only images? What about words&
Hi, it is a great game, but it would be even better if there was a possibility to use not only images on the cards, but also words, for language learners
Tue, 08/01/2017 - 15:19
A very useful addition I would think. Please head over to the feature request forum and post your suggestion there.
Fri, 08/18/2017 - 04:35
Resizing for screen sizes smaller than 420px
This game works great and is easy to bring into our Dupal site,
However, whe resizing for screen sizes smaller than 420px (width) the grid breaks and does not hold the 4 x 3 pattern.
The top row breaks, and when I make the screen size bigger it does not readjust back to the intended size.
Is there a simple way to add another breakpoint/media query to adapt for scrren smaller than 420px? We don't want to make this game live it it won't work propely on mobile phones.
Thanks in advance.
Mon, 08/21/2017 - 09:34
Hi, If you have a developer
Thanks for reporting this bug. I've made an issue for it to be reviewed in the next release:
f you have a developer handy, I recommend asking her to change the css:
Fri, 09/08/2017 - 16:20
having Next Button
I have got Memory card uploaded in my Moodle. But post completion of the exercise, I am unable to see NEXT button. Can anyone guide me on this on how to enable NEXT button.
Mon, 09/11/2017 - 07:01
Hi Karthick, Thank you for
Thank you for the information. The first H5P conference is happening this week. The H5P core team will be busy facilitating the activities. They will try to answer your question asap or if someone in the community have some inputs feel free to post it here.
Mon, 09/11/2017 - 10:39
The next button isn't really
The next button isn't really a part of H5P but more of feature to show off different content here on h5p.org. That said, you should be able to set up similar behavior on Moodle. I believe there are some plugins that allow you to chain content, e.g. go to the 'next activity' kind of, but I haven't tested any of those my self. I also know some people like chaining their content manually, but obviously, this isn't possible with Memory Game yet due to the lack of a more flexible 'finished' message.
Wed, 10/04/2017 - 14:55
When using the Memory Card builder, uploaded images (of all tried sizes, shapes etc.) refuse to work (i.e. they all end up as a blue box with a question mark). Furthermore, the edit function doesn't load, it merely says "loading" forever. Any ideas?
Thu, 10/05/2017 - 06:28
Hi j,Welcome to H5P!In order
Welcome to H5P!
In order to give your report the best chance of getting answered, please include the following information:
The more information you provide, the quicker the community will be able to fix it and the quicker you'll have a working solution!
Thu, 10/05/2017 - 18:23
1. Just the usual setup as per normal.
2. WordPress 4.8.2.
3. I'm building the site on desktop.
4. Have tried Safari, Chrome, Firefox and Opera. All same error.
5. H5P 1.9.4.
6. Memory game.
7. It's not a visual problem. The images won't load and cannot be edited.
Mon, 10/09/2017 - 05:18
Hi j,Thank you for the
Thank you for the additional information. Have you tried creating the same content in H5P.org? Can you also check if you have errors in the console (ctrl+shift+j).
Fri, 03/01/2019 - 11:37
I just want to ask a question with an open answer. Viewers shpuld just write whatever they want. How do I do it?
I looked though Fill In The Blanks etc but I just can't find this option.
Mon, 03/04/2019 - 05:26
Hi Anne,There are several
There are several content types that you can use. You can use Essay, Questionnaire or Documentation Tool for this purpose.
Mon, 03/04/2019 - 11:00
Still not working
Thank you so much! I made an essay but how do I add it to my video? I just want a simple open ended question... Am I missing something? I am using word press if it makes any diffrence.
Tue, 03/05/2019 - 03:24
Hi Anne,I'm sorry I'm a bit
I'm sorry I'm a bit confused are you trying to use Interactive Video? If so there is Free Text that you can use for open-ended questions.
Tue, 03/05/2019 - 13:40
Open Ended Question in Video
Yes. Sorry, I didn't give you all the info. I am trying to ask the viewers a question and they have to answer.
At first the text option didn't work on my original video. I have uploaded a smaller one and it finally worked on that one but it dosen't let me leave the question answered... Or I can't seem to find it.. could you please help me?
Wed, 03/06/2019 - 04:29
Hi Anne,If you are creating
If you are creating the contents here in H5P.org, you cannot save the answers that were placed as well as retrieve them as reports. You need to install one of the 3 supported frameworks. In terms of scoring/retrieving data H5P emits data in the form of xAPI statements and you will need a plugin or custom code to listen to these statements and a data store such as a learning record store to save them in.
I highly recommend looking through these documentation:
Wed, 03/06/2019 - 09:13
I had already installed H5Api
I had already installed H5Api. That wasn't the issue. I didn't have the free question option. I had to go to settings and check Enable LRS dependent content types. I had looked through the questions and found somebody else asking the same question I did and got this answer. Now it works. Maybe I missed it when I was looking through the instructions but you should really make it more clear. I wasted a lot of time for nothing. Anyway thanks for all the help.
Mon, 08/19/2019 - 23:03
Memory game, change the background color
How I can change the white background color ?
Tue, 08/20/2019 - 18:59
Hi 2play,The easiest way is
The easiest way is to use a PHP hook, to add your own CSS-file to the content type. Please visit the Visual Changes page for more details.
Tue, 09/10/2019 - 21:04
I am new to H5P and I'm unsure as to how to make your Memory Game responsive for Mobile devices? I don't see that option in the game settings when setting up in WordPress?
Wed, 09/11/2019 - 19:23
Hi ccandg,All H5P content
All H5P content types were developed to be responsive to most if not all screensizes. Would you mind elaborating on the issue so that we can check. I would suggest that you post a separate thread in the bug reports forum and follow the suggested template.
Wed, 09/11/2019 - 19:42
If you look at https:/
If you look at https://eqforchildren.com/activities/ages-3-5/bows-knows-memory-madness-ages-3-5/ on your mobile device, the game doesn't scale down to match the screen with? Is there a setting that I'm missing?