Merge branch 'release' into stable

2017-02-10 08:59:15 +01:00 · 2017-02-10 08:59:15 +01:00 · 39323b6710
parent 4e70a0b4fc 1e645d6b7b
commit 39323b6710
12 changed files with 449 additions and 182 deletions
--- a/card.js
+++ b/card.js
@ -4,33 +4,31 @@
   * 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) {
-        width = a;
-        height = parameters.image.height * (width / parameters.image.width);
-        margin = '' + ((a - height) / 2) + 'px 0 0 0';
+    if (image.width !== undefined && image.height !== undefined) {
+      if (image.width > image.height) {
+        width = '100%';
+        height = 'auto';
      }
      else {
-        height = a;
-        width = parameters.image.width * (height / parameters.image.height);
-        margin = '0 0 0 ' + ((a - width) / 2) + 'px';
+        height = '100%';
+        width = 'auto';
      }
    }
    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')
-          .click(function () {
-            self.flip();
-          })
-          .end();
+        .children('.h5p-memory-card')
+          .children('.h5p-front')
+            .click(function () {
+              self.flip();
+            })
+            .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);
--- a/language/ar.json
+++ b/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": [
--- a/language/de.json
+++ b/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": [
@ -34,4 +62,4 @@
      ]
    }
  ]
-}
+}
--- a/language/fr.json
+++ b/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": [
--- a/language/it.json
+++ b/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": [
@ -31,4 +59,4 @@
      ]
    }
  ]
-}
+}
--- a/language/nb.json
+++ b/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.",
-            "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."
          }
        ]
      }
    },
+    {
+      "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",
--- a/library.json
+++ b/library.json
@ -2,8 +2,8 @@
  "title": "Memory Game",
  "description": "See how many cards you can remember!",
  "majorVersion": 1,
-  "minorVersion": 1,
-  "patchVersion": 11,
+  "minorVersion": 2,
+  "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
+    }
  ]
 }
--- a/memory-game.css
+++ b/memory-game.css
@ -1,17 +1,20 @@
 .h5p-memory-game {
  overflow: hidden;
 }
-html .h5p-memory-game > ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
+.h5p-memory-game > ul {
+  list-style: none !important;
+  padding: 0.25em 0.5em !important;
+  margin: 0 !important;
+  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;
-  height: 100px;
+  width: 6.25em;
+  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;
-  -moz-perspective: 400px;
-  perspective: 400px;
-  -webkit-transform-style: preserve-3d;
-  -moz-transform-style: preserve-3d;
-  transform-style: preserve-3d;
-  -webkit-transition: opacity 0.4s;
-  -moz-transition: opacity 0.4s;
-  transition: opacity 0.4s;
+  -webkit-perspective: 25em;
+  -moz-perspective: 25em;
+  perspective: 25em;
+  -webkit-transition: opacity 0.4s, filter 0.4s;
+  -moz-transition: opacity 0.4s, filter 0.4s;
+  transition: opacity 0.4s, filter 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;
-  left: 35px;
+  line-height: 1.67em;
 }
 .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);
-  -moz-transform: translateZ(24px);
-  transform: translateZ(24px);
+  -webkit-transform: translate(-50%,-50%);
+  -moz-transform: translate(-50%,-50%);
+  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;
-  height: 100px;
+  width: 6.25em;
+  height: 6.25em;
+}
+.h5p-memory-game .h5p-row-break {
+  clear: left;
 }
--- a/memory-game.js
+++ b/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++) {
-      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 cardsToUse = getCardsToUse();
+    for (var i = 0; i < cardsToUse.length; i++) {
+      var cardParams = cardsToUse[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,8 +169,8 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
     */
    self.attach = function ($container) {
      this.triggerXAPI('attempted');
-      // TODO: Only create on first!
-      $container.addClass('h5p-memory-game').html('');
+      // TODO: Only create on first attach!
+      $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
--- a/semantics.json
+++ b/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",
--- a/timer.js
+++ b/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);
--- a/upgrades.js
+++ b/upgrades.js
@ -3,18 +3,43 @@ var H5PUpgrades = H5PUpgrades || {};
 H5PUpgrades['H5P.MemoryGame'] = (function ($) {
  return {
    1: {
-      1: {
-        contentUpgrade: function (parameters, finished) {
-          // Move card images into card objects, allows for additonal properties.
-          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.1.
+       *
+       * Move card images into card object as this allows for additonal
+       * properties for each card.
+       *
+       * @params {object} parameters
+       * @params {function} finished
+       */
+      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);
      }
    }
  };
-})(H5P.jQuery);
+})(H5P.jQuery);