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
Example
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:
Image: | ![]() https://www.pexels.com/photo/raspberry-fruit-62668/ | |
Alternative Text: | Raspberries | |
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:
2nd card:
Image: | ![]() Original image | |
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. |
3rd card:
Image: | ![]() Original image | |
Alternative Text: | A blackberry | |
Description: | The blackberry is an edible fruit produced by many species in the genus Rubus in the family Rosaceae. |
4th card:
Image: | ![]() Original image | |
Alternative Text: | A cloudberry | |
Description: | A cloudberry, or Rubus chamaemorus is a rhizomatous herb native to cool temperate regions, alpine and arctic tundra. |
5th card:
Image: | ![]() Original image | |
Alternative Text: | Raspberries | |
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.
Comments
haymajd
Tue, 01/17/2017 - 23:22
Permalink
Help
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?
tomaj
Wed, 01/18/2017 - 07:17
Permalink
Unfortunately no
Hi,
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.
- Tom
haymajd
Wed, 01/18/2017 - 14:02
Permalink
Thank you :)
Thank you :)
tomaj
Thu, 01/19/2017 - 08:46
Permalink
:)
Happy to help!
KristiHugs
Wed, 05/17/2017 - 03:17
Permalink
image size
Is there a suggested optimal image size to upload for each image?
tim
Thu, 05/18/2017 - 09:47
Permalink
There isn't an optimal size.
There isn't an optimal size. I assume square images would be best.
Nmodel
Tue, 08/01/2017 - 09:38
Permalink
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
BV52
Tue, 08/01/2017 - 15:19
Permalink
Memory Game
Hi Nmodel,
A very useful addition I would think. Please head over to the feature request forum and post your suggestion there.
-BV52
justin.lane
Fri, 08/18/2017 - 04:35
Permalink
Resizing for screen sizes smaller than 420px
Hi,
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.
tim
Mon, 08/21/2017 - 09:34
Permalink
Hi, If you have a developer
Hi,
Thanks for reporting this bug. I've made an issue for it to be reviewed in the next release:
https://h5ptechnology.atlassian.net/browse/HFP-1384
f you have a developer handy, I recommend asking her to change the css:
https://github.com/h5p/h5p-memory-game/blob/master/memory-game.css
Karthick
Fri, 09/08/2017 - 16:20
Permalink
having Next Button
Hi,
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.
Thanks
Kaarthick
BV52
Mon, 09/11/2017 - 07:01
Permalink
Hi Karthick, Thank you for
Hi Karthick
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.
-BV52
icc
Mon, 09/11/2017 - 10:39
Permalink
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.
j
Wed, 10/04/2017 - 14:55
Permalink
Image issues
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?
BV52
Thu, 10/05/2017 - 06:28
Permalink
Hi j,Welcome to H5P!In order
Hi j,
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!
-BV52
j
Thu, 10/05/2017 - 18:23
Permalink
Re: bug
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.
BV52
Mon, 10/09/2017 - 05:18
Permalink
Hi j,Thank you for the
Hi j,
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).
-BV52
8Anne8
Fri, 03/01/2019 - 11:37
Permalink
Fill In
Hi,
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.
Thanks!
BV52
Mon, 03/04/2019 - 05:26
Permalink
Hi Anne,There are several
Hi Anne,
There are several content types that you can use. You can use Essay, Questionnaire or Documentation Tool for this purpose.
-BV52
8Anne8
Mon, 03/04/2019 - 11:00
Permalink
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.
BV52
Tue, 03/05/2019 - 03:24
Permalink
Hi Anne,I'm sorry I'm a bit
Hi Anne,
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.
-BV52
8Anne8
Tue, 03/05/2019 - 13:40
Permalink
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?
BV52
Wed, 03/06/2019 - 04:29
Permalink
Hi Anne,If you are creating
Hi Anne,
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:
https://h5p.org/documentation/x-api
https://h5p.org/documentation/for-authors/analyzing-results-and-answers
-BV52
8Anne8
Wed, 03/06/2019 - 09:13
Permalink
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.
2play
Mon, 08/19/2019 - 23:03
Permalink
Memory game, change the background color
Hi there,
How I can change the white background color ?
Regards,
BV52
Tue, 08/20/2019 - 18:59
Permalink
Hi 2play,The easiest way is
Hi 2play,
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.
-BV52
ccandg
Tue, 09/10/2019 - 21:04
Permalink
Memory Responsiveness
Hello...
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?
BV52
Wed, 09/11/2019 - 19:23
Permalink
Hi ccandg,All H5P content
Hi ccandg,
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.
-BV52
ccandg
Wed, 09/11/2019 - 19:42
Permalink
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?