Memory Card Game

The QuizY Memory Card Game plugin is a jQuery plugin, which allows the creation of memory games (a.k.a. Pelmanism, Shinkei-suijaku, Pexeso, Concentration, Pairs) in the browser. It is very simple to use and provides various of settings in order to enhance its usability. The biggest advantage of the plugin is that it allows you to add any type of content on the back side of the card, not only images. In the demo below you can see how it is used for a country flags game, where users have to match flags with names.

 

Flag icons for this tutorial - by James Gill

Features

How to use it

As with all standard JQuery plugins you will need to include the jQuery library along with the jQuery UI (for the animation effects), as well as the flip! if you want to use the flip animation.
  1. Get the latest quizy memory game plugin from github and put the javascript and the css files into the appropriate directories of your project
  2. Add the CSS to the head
    3. <head>
  ...
  <link rel="stylesheet" type="text/css" href="css/quizymemorygame.css" />
  ...
</head>
  3. Add all the necessary javascript files before the closing body tag, in the following order:
    4. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" /></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" /></script>
<script src="js/jquery.flip.min.js" /></script>
<script src="js/jquery.quizymemorygame.js" /></script>
...
</body>
  4. Add the memory game activation script between the script files and the closing body tag:
    5. <script>
$('#my-memorygame').quizyMemoryGame({itemWidth: 156, itemHeight: 156, itemsMargin:40, colCount:5, animType:'flip' , flipAnim:'tb', animSpeed:250, resultIcons:true});
</script>

</body>
    Later on I will explain what are the different properties used for.

  5. Now you will need to create a <div> element with the same id ('my-memorygame') as we used in the activation code. Then you can create the different card items using <li> tags. Every <li> element you create will represent a different card. The content of each <li> element is what you see when the card is being showed. The order of the items doesn't really matter (they are being randomised later anyways ), what matters is the class name. If you want the item with the 'Uruguay' text to match the one with the same text, then you put class="match1". For the next pairs you put class="match2" and so on... As said, you can put whatever you want within the <li> tag - texts, images, etc. If you want to have a center-aligned image, I suggest that you create a transparent png with the same size as the card (which by default is 156px x 156px).
    6. <div id="my-memorygame" class="quizy-memorygame">
<ul>
  <li class="match1">
    Uruguay
  </li>
  <li class="match2">
    Cuba
  </li>
  <li class="match1">
    Uruguay
  </li>
  <li class="match2">
    Cuba
  </li>
</ul>
</div>
  6. That's it for a start! Check out the different properties below.

Properties