Merge branch 'release' into stable

card.js

@@ -4,33 +4,31 @@
    * Controls all the operations for each card.
    *
    * @class H5P.MemoryGame.Card
-   * @param {Object} parameters
+   * @param {Object} image
-   * @param {Number} id
+   * @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 (image.width !== undefined && image.height !== undefined) {
-    if (parameters.image.width !== undefined && parameters.image.height !== undefined) {
+      if (image.width > image.height) {
-      if (parameters.image.width > parameters.image.height) {
+        width = '100%';
-        width = a;
+        height = 'auto';
-        height = parameters.image.height * (width / parameters.image.width);
-        margin = '' + ((a - height) / 2) + 'px 0 0 0';
       }
       else {
-        height = a;
+        height = '100%';
-        width = parameters.image.width * (height / parameters.image.height);
+        width = 'auto';
-        margin = '0 0 0 ' + ((a - width) / 2) + 'px';
       }
     }
     else {
-      width = height = a;
+      width = height = '100%';
     }
 
     /**
@@ -61,7 +59,7 @@
      * @returns {string}
      */
     self.getDescription = function () {
-      return parameters.description;
+      return description;
     };
 
     /**
@@ -80,18 +78,19 @@
      */
     self.appendTo = function ($container) {
       // TODO: Translate alt attr
-      $card = $('<li class="h5p-memory-card" role="button" tabindex="1">' +
+      $card = $('<li class="h5p-memory-wrap"><div class="h5p-memory-card" role="button" tabindex="1">' +
                   '<div class="h5p-front"></div>' +
                   '<div class="h5p-back">' +
-                    '<img src="' + path + '" alt="Memory Card" width="' + width + '" height="' + height + '"' + (margin === undefined ? '' : ' style="margin:' + margin + '"') + '/>' +
+                    '<img src="' + path + '" alt="Memory Card" style="width:' + width + ';height:' + height + '"/>' +
                   '</div>' +
-                  '</li>')
+                '</div></li>')
         .appendTo($container)
-        .children('.h5p-front')
+        .children('.h5p-memory-card')
-          .click(function () {
+          .children('.h5p-front')
-            self.flip();
+            .click(function () {
-          })
+              self.flip();
-          .end();
+            })
+            .end();
       };
   };
 
@@ -112,4 +111,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/ar.json

@@ -9,6 +9,12 @@
           {
             "label": "الصورة"
           },
+          {
+            "englishLabel": "Matching Image",
+            "label": "Matching Image",
+            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
+            "description": "An optional image to match against instead of using two cards with the same image."
+          },
           {
             "label": "الوصف",
             "description": "نص قصير يتم عرضه مرة واحدة علي اثنين من البطاقات متساوية"
@@ -16,6 +22,28 @@
         ]
       }
     },
+    {
+      "englishLabel": "Behavioural settings",
+      "label": "Behavioural settings",
+      "englishDescription": "These options will let you control how the game behaves.",
+      "description": "These options will let you control how the game behaves.",
+      "fields": [
+        {
+          "englishLabel": "Put the cards in a grid layout",
+          "label": "Put the cards in a grid layout"
+        },
+        {
+          "englishLabel": "Number of cards to use",
+          "label": "Number of cards to use",
+          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+          "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
+        },
+        {
+          "englishLabel": "Add button for retrying when the game is over",
+          "label": "Add button for retrying when the game is over"
+        }
+      ]
+    },
     {
       "label": "الأقلمة",
       "fields": [

language/de.json

@@ -9,6 +9,12 @@
           {
             "label": "Bild"
           },
+          {
+            "englishLabel": "Matching Image",
+            "label": "Matching Image",
+            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
+            "description": "An optional image to match against instead of using two cards with the same image."
+          },
           {
             "label": "Beschreibung",
             "description": "Ein kurzer Text, der angezeigt wird, sobald zwei identische Karten gefunden werden."
@@ -16,6 +22,28 @@
         ]
       }
     },
+    {
+      "englishLabel": "Behavioural settings",
+      "label": "Behavioural settings",
+      "englishDescription": "These options will let you control how the game behaves.",
+      "description": "These options will let you control how the game behaves.",
+      "fields": [
+        {
+          "englishLabel": "Put the cards in a grid layout",
+          "label": "Put the cards in a grid layout"
+        },
+        {
+          "englishLabel": "Number of cards to use",
+          "label": "Number of cards to use",
+          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+          "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
+        },
+        {
+          "englishLabel": "Add button for retrying when the game is over",
+          "label": "Add button for retrying when the game is over"
+        }
+      ]
+    },
     {
       "label": "Übersetzung",
       "fields": [

language/fr.json

@@ -9,6 +9,12 @@
           {
             "label": "Image"
           },
+          {
+            "englishLabel": "Matching Image",
+            "label": "Matching Image",
+            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
+            "description": "An optional image to match against instead of using two cards with the same image."
+          },
           {
             "label": "Description",
             "description": "Petit texte affiché quand deux cartes identiques sont trouvées."
@@ -16,6 +22,28 @@
         ]
       }
     },
+    {
+      "englishLabel": "Behavioural settings",
+      "label": "Behavioural settings",
+      "englishDescription": "These options will let you control how the game behaves.",
+      "description": "These options will let you control how the game behaves.",
+      "fields": [
+        {
+          "englishLabel": "Put the cards in a grid layout",
+          "label": "Put the cards in a grid layout"
+        },
+        {
+          "englishLabel": "Number of cards to use",
+          "label": "Number of cards to use",
+          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+          "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
+        },
+        {
+          "englishLabel": "Add button for retrying when the game is over",
+          "label": "Add button for retrying when the game is over"
+        }
+      ]
+    },
     {
       "label": "Interface",
       "fields": [

language/it.json

@@ -9,6 +9,12 @@
           {
             "label": "Immagine"
           },
+          {
+            "englishLabel": "Matching Image",
+            "label": "Matching Image",
+            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
+            "description": "An optional image to match against instead of using two cards with the same image."
+          },
           {
             "label": "Descrizione",
             "description": "Breve testo visualizzato quando due carte uguali vengono trovate."
@@ -16,6 +22,28 @@
         ]
       }
     },
+    {
+      "englishLabel": "Behavioural settings",
+      "label": "Behavioural settings",
+      "englishDescription": "These options will let you control how the game behaves.",
+      "description": "These options will let you control how the game behaves.",
+      "fields": [
+        {
+          "englishLabel": "Put the cards in a grid layout",
+          "label": "Put the cards in a grid layout"
+        },
+        {
+          "englishLabel": "Number of cards to use",
+          "label": "Number of cards to use",
+          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+          "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
+        },
+        {
+          "englishLabel": "Add button for retrying when the game is over",
+          "label": "Add button for retrying when the game is over"
+        }
+      ]
+    },
     {
       "label": "Localizzazione",
       "fields": [

language/nb.json

@@ -13,15 +13,43 @@
             "englishLabel": "Image",
             "label": "Bilde"
           },
+          {
+            "englishLabel": "Matching Image",
+            "label": "Tilhørende bilde",
+            "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.",
+            "englishDescription": "An optional short text that will pop up once the two matching cards are found.",
-            "description": "En kort tekst som vises hver gang et kort-par er funnet."
+            "description": "En valgfri kort tekst som spretter opp når kort-paret er funnet."
           }
         ]
       }
     },
+    {
+      "englishLabel": "Behavioural settings",
+      "label": "Innstillinger for oppførsel",
+      "englishDescription": "These options will let you control how the game behaves.",
+      "description": "Disse instillingene lar deg bestemme hvordan spillet skal oppføre seg.",
+      "fields": [
+        {
+          "englishLabel": "Put the cards in a grid layout",
+          "label": "Putt kortene i et rutenett"
+        },
+        {
+          "englishLabel": "Number of cards to use",
+          "label": "Antall kort som skal brukes",
+          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+          "description": "Ved å sette antallet høyere enn 2 vil spillet plukke tilfeldige kort fra listen over kort."
+        },
+        {
+          "englishLabel": "Add button for retrying when the game is over",
+          "label": "Legg til knapp for å prøve på nytt når spillet er over"
+        }
+      ]
+    },
     {
       "englishLabel": "Localization",
       "label": "Oversettelser",

library.json

@@ -2,8 +2,8 @@
   "title": "Memory Game",
   "description": "See how many cards you can remember!",
   "majorVersion": 1,
-  "minorVersion": 1,
+  "minorVersion": 2,
-  "patchVersion": 11,
+  "patchVersion": 1,
   "runnable": 1,
   "author": "Amendor AS",
   "license": "MIT",
@@ -20,14 +20,18 @@
     {
       "path": "card.js"
     },
-    {
-      "path": "timer.js"
-    },
     {
       "path": "counter.js"
     },
     {
       "path": "popup.js"
     }
+  ],
+  "preloadedDependencies": [
+    {
+      "machineName": "H5P.Timer",
+      "majorVersion": 0,
+      "minorVersion": 4
+    }
   ]
 }

memory-game.css

@@ -1,17 +1,20 @@
 .h5p-memory-game {
   overflow: hidden;
 }
-html .h5p-memory-game > ul {
+.h5p-memory-game > ul {
-  list-style: none;
+  list-style: none !important;
-  padding: 0;
+  padding: 0.25em 0.5em !important;
-  margin: 0;
+  margin: 0 !important;
-  overflow: hidden;
+  overflow: hidden !important;
+  font-size: 16px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
 }
 .h5p-memory-game .h5p-memory-card,
 .h5p-memory-game .h5p-memory-card .h5p-back,
 .h5p-memory-game .h5p-memory-card .h5p-front {
-  width: 100px;
+  width: 6.25em;
-  height: 100px;
+  height: 6.25em;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -19,23 +22,30 @@ html .h5p-memory-game > ul {
 }
 .h5p-memory-game img {
   -webkit-user-drag: none;
+  display: inline-block !important;
+  margin: auto !important;
+  vertical-align: middle;
+}
+.h5p-memory-game .h5p-memory-wrap {
+  float: left;
+  text-align: center;
+  background-image: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
 }
 .h5p-memory-game .h5p-memory-card {
-  float: left;
+  display: inline-block;
   outline: none;
   position: relative;
-  margin: 1em;
+  margin: 0.75em 0.5em;
   padding: 0;
   background: transparent;
-  -webkit-perspective: 400px;
+  -webkit-perspective: 25em;
-  -moz-perspective: 400px;
+  -moz-perspective: 25em;
-  perspective: 400px;
+  perspective: 25em;
-  -webkit-transform-style: preserve-3d;
+  -webkit-transition: opacity 0.4s, filter 0.4s;
-  -moz-transform-style: preserve-3d;
+  -moz-transition: opacity 0.4s, filter 0.4s;
-  transform-style: preserve-3d;
+  transition: opacity 0.4s, filter 0.4s;
-  -webkit-transition: opacity 0.4s;
-  -moz-transition: opacity 0.4s;
-  transition: opacity 0.4s;
 }
 .h5p-memory-game .h5p-memory-card .h5p-back,
 .h5p-memory-game .h5p-memory-card .h5p-front {
@@ -64,17 +74,16 @@ html .h5p-memory-game > ul {
 }
 .h5p-memory-game .h5p-memory-card .h5p-front {
   cursor: pointer;
+  text-align: center;
 }
 .h5p-memory-game .h5p-memory-card .h5p-front:hover {
   background: #dfdfdf;
 }
 .h5p-memory-game .h5p-memory-card .h5p-front:before {
-  position: absolute;
   content: "?";
-  font-size: 60px;
+  font-size: 3.75em;
   color: #909090;
-  line-height: 100px;
+  line-height: 1.67em;
-  left: 35px;
 }
 .h5p-memory-game .h5p-memory-card .h5p-front:after {
   content: "";
@@ -91,6 +100,8 @@ html .h5p-memory-game > ul {
   background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
 }
 .h5p-memory-game .h5p-memory-card .h5p-back {
+  line-height: 5.9em;
+  text-align: center;
   background: #f0f0f0;
   -webkit-transform: rotateY(-180deg);
   -moz-transform: rotateY(-180deg);
@@ -112,7 +123,8 @@ html .h5p-memory-game > ul {
   -ms-transform: scale(0,1.1);
 }
 .h5p-memory-game .h5p-memory-card.h5p-matched {
-  opacity: 0.25;
+  opacity: 0.3;
+  filter: grayscale(100%);
 }
 
 .h5p-memory-game .h5p-feedback {
@@ -161,13 +173,12 @@ html .h5p-memory-game > ul {
   padding: 1em;
   width: 20em;
   position: absolute;
-  top: 2em;
+  top: 50%;
   left: 50%;
-  margin-left: -10em;
   box-shadow: 0 0 1em #666;
-  -webkit-transform: translateZ(24px);
+  -webkit-transform: translate(-50%,-50%);
-  -moz-transform: translateZ(24px);
+  -moz-transform: translate(-50%,-50%);
-  transform: translateZ(24px);
+  transform: translate(-50%,-50%);
 }
 .h5p-memory-game .h5p-memory-image {
   float: left;
@@ -177,6 +188,9 @@ html .h5p-memory-game > ul {
   -moz-box-sizing: border-box;
   border-radius: 4px;
   background: #f0f0f0;
-  width: 100px;
+  width: 6.25em;
-  height: 100px;
+  height: 6.25em;
+}
+.h5p-memory-game .h5p-row-break {
+  clear: left;
 }

memory-game.js

@@ -1,5 +1,11 @@
 H5P.MemoryGame = (function (EventDispatcher, $) {
 
+  // We don't want to go smaller than 100px per card(including the required margin)
+  var CARD_MIN_SIZE = 100; // PX
+  var CARD_STD_SIZE = 116; // PX
+  var STD_FONT_SIZE = 16; // PX
+  var LIST_PADDING = 1; // EMs
+
   /**
    * Memory Game Constructor
    *
@@ -13,7 +19,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
     // Initialize event inheritance
     EventDispatcher.call(self);
 
-    var flipped, timer, counter, popup, $feedback;
+    var flipped, timer, counter, popup, $feedback, $wrapper, maxWidth, numCols;
     var cards = [];
     var removed = 0;
 
@@ -42,15 +48,16 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         if (desc !== undefined) {
           // Pause timer and show desciption.
-          timer.stop();
+          timer.pause();
           popup.show(desc, card.getImage(), function () {
             if (finished) {
               // Game has finished
               $feedback.addClass('h5p-show');
+              if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
             }
             else {
               // Popup is closed, continue.
-              timer.start();
+              timer.play();
             }
           });
         }
@@ -58,6 +65,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
           // Game has finished
           timer.stop();
           $feedback.addClass('h5p-show');
+          if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
         }
       }
       else {
@@ -78,7 +86,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       card.on('flip', function () {
         self.triggerXAPI('interacted');
         // Keep track of time spent
-        timer.start();
+        timer.play();
 
         if (flipped !== undefined) {
           var matie = flipped;
@@ -101,12 +109,53 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       cards.push(card);
     };
 
+    /**
+     * @private
+     */
+    var getCardsToUse = function () {
+      var numCardsToUse = (parameters.behaviour && parameters.behaviour.numCardsToUse ? parseInt(parameters.behaviour.numCardsToUse) : 0);
+      if (numCardsToUse <= 2 || numCardsToUse >= parameters.cards.length) {
+        // Use all cards
+        return parameters.cards;
+      }
+
+      // Pick random cards from pool
+      var cardsToUse = [];
+      var pickedCardsMap = {};
+
+      var numPicket = 0;
+      while (numPicket < numCardsToUse) {
+        var pickIndex = Math.floor(Math.random() * parameters.cards.length);
+        if (pickedCardsMap[pickIndex]) {
+          continue; // Already picked, try again!
+        }
+
+        cardsToUse.push(parameters.cards[pickIndex]);
+        pickedCardsMap[pickIndex] = true;
+        numPicket++;
+      }
+
+      return cardsToUse;
+    };
+
     // Initialize cards.
-    for (var i = 0; i < parameters.cards.length; i++) {
+    var cardsToUse = getCardsToUse();
-      if (MemoryGame.Card.isValid(parameters.cards[i])) {
+    for (var i = 0; i < cardsToUse.length; i++) {
-        // Add two of each card
+      var cardParams = cardsToUse[i];
-        var cardOne = new MemoryGame.Card(parameters.cards[i], id);
+      if (MemoryGame.Card.isValid(cardParams)) {
-        var cardTwo = new MemoryGame.Card(parameters.cards[i], id);
+        // 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,8 +169,8 @@ 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('');
+      $wrapper = $container.addClass('h5p-memory-game').html('');
 
       // Add cards to list
       var $list = $('<ul/>');
@@ -142,7 +191,17 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
                         '<dd class="h5p-card-turns">0</dd>' +
                         '</dl>').appendTo($container);
 
-        timer = new MemoryGame.Timer($status.find('.h5p-time-spent'));
+        timer = new H5P.Timer(100);
+        timer.notify('every_tenth_second', function () {
+          var time = timer.getTime();
+          var minutes = H5P.Timer.extractTimeElement(time, 'minutes');
+          var seconds = H5P.Timer.extractTimeElement(time, 'seconds') % 60;
+          if (seconds < 10) {
+            seconds = '0' + seconds;
+          }
+          $status.find('.h5p-time-spent').text(minutes + ':' + seconds);
+        });
+
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
         popup = new MemoryGame.Popup($container);
 
@@ -151,6 +210,70 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         });
       }
     };
+
+    /**
+     * Will try to scale the game so that it fits within its container.
+     * Puts the cards into a grid layout to make it as square as possible – 
+     * which improves the playability on multiple devices.
+     *
+     * @private
+     */
+    var scaleGameSize = function () {
+
+      // Check how much space we have available
+      var $list = $wrapper.children('ul');
+
+      var newMaxWidth = parseFloat(window.getComputedStyle($list[0]).width);
+      if (maxWidth === newMaxWidth) {
+        return; // Same size, no need to recalculate
+      }
+      else {
+        maxWidth = newMaxWidth;
+      }
+
+      // Get the card holders
+      var $elements = $list.children();
+      if ($elements.length < 4) {
+        return; // No need to proceed
+      }
+
+      // Determine the optimal number of columns
+      var newNumCols = Math.ceil(Math.sqrt($elements.length));
+
+      // Do not exceed the max number of columns
+      var maxCols = Math.floor(maxWidth / CARD_MIN_SIZE);
+      if (newNumCols > maxCols) {
+        newNumCols = maxCols;
+      }
+
+      if (numCols !== newNumCols) {
+        // We need to change layout
+        numCols = newNumCols;
+
+        // Calculate new column size in percentage and round it down (we don't
+        // want things sticking out…)
+        var colSize = Math.floor((100 / numCols) * 10000) / 10000;
+        $elements.css('width', colSize + '%').each(function (i, e) {
+          if (i === numCols) {
+            $(e).addClass('h5p-row-break');
+          }
+        });
+      }
+
+      // Calculate how much one percentage of the standard/default size is
+      var onePercentage = ((CARD_STD_SIZE * numCols) + STD_FONT_SIZE) / 100;
+      var paddingSize = (STD_FONT_SIZE * LIST_PADDING) / onePercentage;
+      var cardSize = (100 - paddingSize) / numCols;
+      var fontSize = (((maxWidth * (cardSize / 100)) * STD_FONT_SIZE) / CARD_STD_SIZE);
+
+      // We use font size to evenly scale all parts of the cards.
+      $list.css('font-size', fontSize + 'px');
+      // due to rounding errors in browsers the margins may vary a bit…
+    };
+
+    if (parameters.behaviour && parameters.behaviour.useGrid && cardsToUse.length) {
+      self.on('resize', scaleGameSize);
+    }
   }
 
   // Extends the event dispatcher

semantics.json

@@ -5,7 +5,7 @@
     "label": "Cards",
     "importance": "high",
     "entity": "card",
-    "min": 1,
+    "min": 2,
     "max": 100,
     "field": {
       "type": "group",
@@ -17,7 +17,17 @@
           "name": "image",
           "type": "image",
           "label": "Image",
-          "importance": "high"
+          "importance": "high",
+          "ratio": 1
+        },
+        {
+          "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.",
+          "ratio": 1
         },
         {
           "name": "description",
@@ -26,11 +36,44 @@
           "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."
         }
       ]
     }
   },
+  {
+    "name": "behaviour",
+    "type": "group",
+    "label": "Behavioural settings",
+    "importance": "low",
+    "description": "These options will let you control how the game behaves.",
+    "optional": true,
+    "fields": [
+      {
+        "name": "useGrid",
+        "type": "boolean",
+        "label": "Put the cards in a grid layout",
+        "importance": "low",
+        "default": true
+      },
+      {
+        "name": "numCardsToUse",
+        "type": "number",
+        "label": "Number of cards to use",
+        "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+        "importance": "low",
+        "optional": true,
+        "min": 2
+      },
+      {
+        "name": "allowRetry",
+        "type": "boolean",
+        "label": "Add button for retrying when the game is over",
+        "importance": "low",
+        "default": true
+      }
+    ]
+  },
   {
     "label": "Localization",
     "importance": "low",

timer.js

@@ -1,94 +0,0 @@
-(function (MemoryGame) {
-
-  /**
-   * Keeps track of the time spent.
-   *
-   * @class H5P.MemoryGame.Timer
-   * @param {H5P.jQuery} $container
-   */
-  MemoryGame.Timer = function ($container) {
-    var self = this;
-    var interval, started, totalTime = 0;
-
-    /**
-     * Make timer more readable for humans.
-     * @private
-     * @param {Number} seconds
-     * @returns {String}
-     */
-    var humanizeTime = function (seconds) {
-      var minutes = Math.floor(seconds / 60);
-      var hours = Math.floor(minutes / 60);
-
-      minutes = minutes % 60;
-      seconds = Math.floor(seconds % 60);
-
-      var time = '';
-
-      if (hours !== 0) {
-        time += hours + ':';
-
-        if (minutes < 10) {
-          time += '0';
-        }
-      }
-
-      time += minutes + ':';
-
-      if (seconds < 10) {
-        time += '0';
-      }
-
-      time += seconds;
-
-      return time;
-    };
-
-    /**
-     * Update the timer element.
-     *
-     * @private
-     * @param {boolean} last
-     * @returns {number}
-     */
-    var update = function (last) {
-      var currentTime = (new Date().getTime() - started);
-      $container.text(humanizeTime(Math.floor((totalTime + currentTime) / 1000)));
-
-      if (last === true) {
-        // This is the last update, stop timing interval.
-        clearTimeout(interval);
-      }
-      else {
-        // Use setTimeout since setInterval isn't safe.
-        interval = setTimeout(function () {
-          update();
-        }, 1000);
-      }
-
-      return currentTime;
-    };
-
-    /**
-     * Starts the counter.
-     */
-    self.start = function () {
-      if (started === undefined) {
-        started = new Date();
-        update();
-      }
-    };
-
-    /**
-     * Stops the counter.
-     */
-    self.stop = function () {
-      if (started !== undefined) {
-        totalTime += update(true);
-        started = undefined;
-      }
-    };
-
-  };
-  
-})(H5P.MemoryGame);

upgrades.js

@@ -3,17 +3,42 @@ var H5PUpgrades = H5PUpgrades || {};
 H5PUpgrades['H5P.MemoryGame'] = (function ($) {
   return {
     1: {
-      1: {
+      /**
-        contentUpgrade: function (parameters, finished) {
+       * Asynchronous content upgrade hook.
-          // Move card images into card objects, allows for additonal properties.
+       * Upgrades content parameters to support Memory Game 1.1.
-          for (var i = 0; i < parameters.cards.length; i++) {
+       *
-            parameters.cards[i] = {
+       * Move card images into card object as this allows for additonal
-              image: parameters.cards[i]
+       * properties for each card.
-            };
+       *
-          }
+       * @params {object} parameters
-
+       * @params {function} finished
-          finished(null, parameters);
+       */
+      1: function (parameters, finished) {
+        for (var i = 0; i < parameters.cards.length; i++) {
+          parameters.cards[i] = {
+            image: parameters.cards[i]
+          };
         }
+
+        finished(null, parameters);
+      },
+
+      /**
+       * Asynchronous content upgrade hook.
+       * Upgrades content parameters to support Memory Game 1.2.
+       *
+       * Add default behavioural settings for the new options.
+       *
+       * @params {object} parameters
+       * @params {function} finished
+       */
+      2: function (parameters, finished) {
+
+        parameters.behaviour = {};
+        parameters.behaviour.useGrid = false;
+        parameters.behaviour.allowRetry = false;
+
+        finished(null, parameters);
       }
     }
   };