Match two different images instead of clones

This will resolve #5

card.js

@@ -4,28 +4,29 @@
    * Controls all the operations for each card.
    *
    * @class H5P.MemoryGame.Card
-   * @param {Object} parameters
-   * @param {Number} id
+   * @param {Object} image
+   * @param {number} id
+   * @param {string} [description]
    */
-  MemoryGame.Card = function (parameters, id) {
+  MemoryGame.Card = function (image, id, description) {
     var self = this;
 
     // Initialize event inheritance
     EventDispatcher.call(self);
 
-    var path = H5P.getPath(parameters.image.path, id);
+    var path = H5P.getPath(image.path, id);
     var width, height, margin, $card;
 
     var a = 96;
-    if (parameters.image.width !== undefined && parameters.image.height !== undefined) {
-      if (parameters.image.width > parameters.image.height) {
+    if (image.width !== undefined && image.height !== undefined) {
+      if (image.width > image.height) {
         width = a;
-        height = parameters.image.height * (width / parameters.image.width);
+        height = image.height * (width / image.width);
         margin = '' + ((a - height) / 2) + 'px 0 0 0';
       }
       else {
         height = a;
-        width = parameters.image.width * (height / parameters.image.height);
+        width = image.width * (height / image.height);
         margin = '0 0 0 ' + ((a - width) / 2) + 'px';
       }
     }
@@ -61,7 +62,7 @@
      * @returns {string}
      */
     self.getDescription = function () {
-      return parameters.description;
+      return description;
     };
 
     /**
@@ -112,4 +113,17 @@
             params.image.path !== undefined);
   };
 
+  /**
+   * Checks to see if the card parameters should create cards with different
+   * images.
+   *
+   * @param {object} params
+   * @returns {boolean}
+   */
+  MemoryGame.Card.hasTwoImages = function (params) {
+    return (params !== undefined &&
+            params.match !== undefined &&
+            params.match.path !== undefined);
+  };
+
 })(H5P.MemoryGame, H5P.EventDispatcher, H5P.jQuery);

language/nb.json

@@ -13,11 +13,17 @@
             "englishLabel": "Image",
             "label": "Bilde"
           },
+          {
+            "englishLabel": "Matching Image",
+            "label": "",
+            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
+            "description": "Et valgfritt bilde som brukes av kort nummer to istedenfor å bruke to kort med samme bilde."
+          },
           {
             "englishLabel": "Description",
             "label": "Beskrivelse",
-            "englishDescription": "A short text that is displayed once the two equal cards are found.",
-            "description": "En kort tekst som vises hver gang et kort-par er funnet."
+            "englishDescription": "An optional short text that will pop up once the two matching cards are found.",
+            "description": "En valgfri kort tekst som spretter opp når kort-paret er funnet."
           }
         ]
       }

memory-game.js

@@ -103,10 +103,21 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
     // Initialize cards.
     for (var i = 0; i < parameters.cards.length; i++) {
-      if (MemoryGame.Card.isValid(parameters.cards[i])) {
-        // Add two of each card
-        var cardOne = new MemoryGame.Card(parameters.cards[i], id);
-        var cardTwo = new MemoryGame.Card(parameters.cards[i], id);
+      var cardParams = parameters.cards[i];
+      if (MemoryGame.Card.isValid(cardParams)) {
+        // Create first card
+        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.description);
+
+        if (MemoryGame.Card.hasTwoImages(cardParams)) {
+          // Use matching image for card two
+          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.description);
+        }
+        else {
+          // Add two cards with the same image
+          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.description);
+        }
+
+        // Add cards to card list for shuffeling
         addCard(cardOne, cardTwo);
         addCard(cardTwo, cardOne);
       }
@@ -120,7 +131,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
      */
     self.attach = function ($container) {
       this.triggerXAPI('attempted');
-      // TODO: Only create on first!
+      // TODO: Only create on first attach!
       $container.addClass('h5p-memory-game').html('');
 
       // Add cards to list

semantics.json

@@ -19,6 +19,14 @@
           "label": "Image",
           "importance": "high"
         },
+        {
+          "name": "match",
+          "type": "image",
+          "label": "Matching Image",
+          "importance": "low",
+          "optional": true,
+          "description": "An optional image to match against instead of using two cards with the same image."
+        },
         {
           "name": "description",
           "type": "text",
@@ -26,7 +34,7 @@
           "importance": "low",
           "maxLength": 150,
           "optional": true,
-          "description": "A short text that is displayed once the two equal cards are found."
+          "description": "An optional short text that will pop up once the two matching cards are found."
         }
       ]
     }