h5p / h5p-memory-game

H5P Memory Game

Create your own memory games and test the memory of your site users with this simple yet beautiful HTML5 game.

See it in action on H5P.org

License

(The MIT License)

Copyright (c) 2014 Joubel AS

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

h5p-memory-game's Issues

IE11 & memory game doesn't work right

Hello,

in Moodle 3.3 and mod_hvp 1.3 2017052400 with Internet Explorer 11 you can turn all the pages in memory game at once. With chrome it works fine.

Add hardcore mode

If hardcore mode is enabled the users will have to find 3 similar cards.

Add logging of results/score

Cards no longer have color when matched

Hello,

I noticed that matched cards are now greyed out instead of keeping the color when they are matched. I would like to see that the color stays since it's helpfull for education purposes, can you give us this option? This option was in Memory Game (1.1.9) but no longer in Memory Game (1.2.1).

Add support for background images

Should cover the entire background without changing the aspect ratio.
We must ensure there's enough contrast.

Suggested by Finn here: https://h5p.org/comment/4426#comment-4426

Side note: Could choosing a "theme color" for cards be a nice addition to this?

Allow matching different images

Say you want to connect years with images of persons.

This should perhaps be a new match making / pair off game.

Add restart button once the game i complete

Levels

Hi I would like to implement basic level functionality. I have noticed someone else asking for this, but could not find any further discussion on it. Please let me know if anyone are working on this or if there are any comments on the approach. Could this be a feature that would be included if implemented in the correct way?

I envisage functionality along the following lines

Editor
Add group > Multilevel
Add options:
Enable (default off)
Intitial number of card pairs (2)
Max number of card pairs (10)
Added pair per level (1)

Game
Add next button

Functionality
The multilevel option would use the regular cards added. By setting initial card pairs one would have to add enough cards for max card pairs. The feedback would be pushed until the last level/ max number of card pairs was completed.

Functionality questions
Should the timer and counter be for the complete game or per level?

Potential issues
Resizing of card canvas between levels.
Alerting the user if there are not enough cards added for max pairs/ alternatively could it be possible to use duplicate card pairs that cross match.

Add a Button with a link

Hi!

It would be awesome if you guys could insert a button that shows once you complete the game, redirects to some URL when you click it...

By the way, no "Try again" button shows once you finish a game, and I've got that checked in the config.

Thanks!!

Can you support for external links ?

We have some images in our website, so we don't want re-upload in Memory Game. Can you support for external links ?

Using "Look and feel > Theme color" triggers .h5p-invert-shades class, obscuring card content.

Hi, I tried to change the "Theme color" in "Look and feel". This resulted in “.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-back:before” being added to the before pseudo element of the .h5p-back div. This covers the card content img with a #000 opacity 0.5 overlay which makes it hard to read the img. I also noticed that the selected theme color is added inline to the .h5p-back div but only on the "color" property. This won't therefore affect the cards (maybe it is for the description, I don't know). There is no way I can see of resetting the theme selection to prevent .h5p-invert-shades being added. So, if I want to fix the issue, I'd have to recreate the game again. Hope that helps. Cheers.

Memory game doesn't work at all with Internet Explorer 11

Hello,

Memory game doesn't work at all with Internet Explorer 11, this have been broken at least since 1.0-rc8 and it's still in version 1.0. You can just open all the cards at once so the two card flipping functionaly doesn't work.

Tested with Moodle 3.1.3 and mod_hvp versions 1.0-rc.8 2017021500 and 1.0
2017031300, memory game module Memory Game (1.2.1)

Need to use the H5P image library

The Memory Game does not use the H5P image library and are missing features such as ALT tags which are needed for accessibility.

As an author, I want to use text in memory game cards

User story:

As an author, I want to use text in memory game cards. Right now, the game works with images, as an author I would want to include short text instead of images or combined with all current support.

Accessibility:
Not relevant.

Technical solution

We plan to add new text based content to cards. This text will have a title since it maybe overflow card width and/or height. This text would be sanitize in content creation to avoid problems such XSS or, if community prefers, only plain text would be added to this feature.

Clicking three cards

I have noticed that, if you do fast enough, click not two but three cards so, when game checks result, if you fail, if just flips back two of the three cards.

Easy solution could be disable click event on every card when two cards are clicked.

Background Image change

Hello, good day

Can you please give me an example on how the image url should be written on this part of the code in order to change the Background image of the game? , i tried to putting my image url in there, but i can´t change it. Thanks!
file: card.js (line 172)
// Add back image for card
if (backImage) {
var backgroundImage = 'background-image:url(' + backImage + ')';

Responsiveness in Column - Have the pop-up fixed to center of screen?

When used in a Column|iFrame, it seems that the pop-up goes to the top automatically and is not visible to users.

I wonder if the pop-up could be instead change to a fixed css position and also moved outside Column iFrame.

I can alter it myself but I'd have to change it on every update and think it would be a good feature for everyone.

Option to select number of cards to display

For example 50 images can be added and then the number of cards to be shown is set to 9. The game will then select 9 random cards from the 50 cards each time the game starts.

Documentation

Hello, awesome game!

I am just missing how to set it up. Where can i add the images i want to use?, is possible to use it outside of a Drupal, Wordpress environment? If i want just to use the second memory game only "Match places with Flags¨ , is possible to remove the first one?

Thanks

Jay