Merge branch 'release'

card.js

@@ -4,11 +4,13 @@
    * Controls all the operations for each card.
    *
    * @class H5P.MemoryGame.Card
+   * @extends H5P.EventDispatcher
    * @param {Object} image
    * @param {number} id
    * @param {string} [description]
    */
   MemoryGame.Card = function (image, id, description) {
+    /** @alias H5P.MemoryGame.Card# */
     var self = this;
 
     // Initialize event inheritance
@@ -53,6 +55,13 @@
       $card.addClass('h5p-matched');
     };
 
+    /**
+     * Reset card to natural state
+     */
+    self.reset = function () {
+      $card[0].classList.remove('h5p-flipped', 'h5p-matched');
+    };
+
     /**
      * Get card description.
      *
@@ -91,7 +100,15 @@
               self.flip();
             })
             .end();
-      };
+    };
+
+    /**
+     * Re-append to parent container
+     */
+    self.reAppend = function () {
+      var parent = $card[0].parentElement.parentElement;
+      parent.appendChild($card[0].parentElement);
+    };
   };
 
   // Extends the event dispatcher

counter.js

@@ -7,16 +7,32 @@
    * @param {H5P.jQuery} $container
    */
   MemoryGame.Counter = function ($container) {
+    /** @alias H5P.MemoryGame.Counter# */
     var self = this;
 
     var current = 0;
 
+    /**
+     * @private
+     */
+    var update = function () {
+      $container[0].innerText = current;
+    };
+
     /**
      * Increment the counter.
      */
     self.increment = function () {
       current++;
-      $container.text(current);
+      update();
+    };
+
+    /**
+     * Revert counter back to its natural state
+     */
+    self.reset = function () {
+      current = 0;
+      update();
     };
   };
 

language/ar.json

@@ -29,8 +29,10 @@
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Put the cards in a grid layout",
+          "englishLabel": "Position the cards in a square",
-          "label": "Put the cards in a grid layout"
+          "label": "Position the cards in a square",
+          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
+          "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
           "englishLabel": "Number of cards to use",
@@ -55,6 +57,12 @@
         },
         {
           "label": "نص الملاحظات"
+        },
+        {
+          "englishLabel": "Try again button text",
+          "label": "Try again button text",
+          "englishDefault": "Try again?",
+          "default": "Try again?"
         }
       ]
     }

language/de.json

@@ -29,8 +29,10 @@
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Put the cards in a grid layout",
+          "englishLabel": "Position the cards in a square",
-          "label": "Put the cards in a grid layout"
+          "label": "Position the cards in a square",
+          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
+          "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
           "englishLabel": "Number of cards to use",
@@ -58,6 +60,12 @@
         {
           "label": "Text als Rückmeldung",
           "default": "Gute Arbeit!"
+        },
+        {
+          "englishLabel": "Try again button text",
+          "label": "Try again button text",
+          "englishDefault": "Try again?",
+          "default": "Try again?"
         }
       ]
     }

language/fr.json

@@ -29,8 +29,10 @@
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Put the cards in a grid layout",
+          "englishLabel": "Position the cards in a square",
-          "label": "Put the cards in a grid layout"
+          "label": "Position the cards in a square",
+          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
+          "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
           "englishLabel": "Number of cards to use",
@@ -58,6 +60,12 @@
         {
           "label": "Texte de l'appréciation finale",
           "default": "Bien joué !"
+        },
+        {
+          "englishLabel": "Try again button text",
+          "label": "Try again button text",
+          "englishDefault": "Try again?",
+          "default": "Try again?"
         }
       ]
     }

language/it.json

@@ -29,8 +29,10 @@
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Put the cards in a grid layout",
+          "englishLabel": "Position the cards in a square",
-          "label": "Put the cards in a grid layout"
+          "label": "Position the cards in a square",
+          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
+          "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
           "englishLabel": "Number of cards to use",
@@ -55,6 +57,12 @@
         },
         {
           "label": "Testo Feedback"
+        },
+        {
+          "englishLabel": "Try again button text",
+          "label": "Try again button text",
+          "englishDefault": "Try again?",
+          "default": "Try again?"
         }
       ]
     }

language/nb.json

@@ -35,8 +35,10 @@
       "description": "Disse instillingene lar deg bestemme hvordan spillet skal oppføre seg.",
       "fields": [
         {
-          "englishLabel": "Put the cards in a grid layout",
+          "englishLabel": "Position the cards in a square",
-          "label": "Putt kortene i et rutenett"
+          "label": "Plasser kortene i en firkant",
+          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
+          "description": "Vil forsøk å samsvare antall kolonner og rader når kortene legges ut. Etterpå vil kortene bli skalert til å passe beholderen."
         },
         {
           "englishLabel": "Number of cards to use",
@@ -71,6 +73,12 @@
           "label": "Tilbakemeldingstekst",
           "englishDefault": "Good work!",
           "default": "Godt jobbet!"
+        },
+        {
+          "englishLabel": "Try again button text",
+          "label": "Prøv på nytt-tekst",
+          "englishDefault": "Try again?",
+          "default": "Prøv på nytt?"
         }
       ]
     }

library.json

@@ -3,9 +3,9 @@
   "description": "See how many cards you can remember!",
   "majorVersion": 1,
   "minorVersion": 2,
-  "patchVersion": 1,
+  "patchVersion": 2,
   "runnable": 1,
-  "author": "Amendor AS",
+  "author": "Joubel AS",
   "license": "MIT",
   "machineName": "H5P.MemoryGame",
   "preloadedCss": [
@@ -25,6 +25,9 @@
     },
     {
       "path": "popup.js"
+    },
+    {
+      "path": "timer.js"
     }
   ],
   "preloadedDependencies": [
@@ -34,4 +37,4 @@
       "minorVersion": 4
     }
   ]
-}
+}

memory-game.css

@@ -172,6 +172,7 @@
   background: #fff;
   padding: 1em;
   width: 20em;
+  max-width: 90%;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -182,7 +183,6 @@
 }
 .h5p-memory-game .h5p-memory-image {
   float: left;
-  margin: 0 1em 1em 0;
   border: 2px solid #d0d0d0;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -190,7 +190,25 @@
   background: #f0f0f0;
   width: 6.25em;
   height: 6.25em;
+  text-align: center;
 }
 .h5p-memory-game .h5p-row-break {
   clear: left;
 }
+.h5p-memory-game .h5p-memory-desc {
+  margin-left: 7em;
+}
+.h5p-memory-reset {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  cursor: pointer;
+  font-style: italic;
+  text-shadow: 0 0 0.5em white;
+  padding: 0.125em 0.25em;
+  line-height: 1;
+}
+.h5p-memory-reset:focus {
+  outline: dashed pink;
+}

memory-game.js

@@ -9,11 +9,13 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
   /**
    * Memory Game Constructor
    *
-   * @class
+   * @class H5P.MemoryGame
+   * @extends H5P.EventDispatcher
    * @param {Object} parameters
    * @param {Number} id
    */
   function MemoryGame(parameters, id) {
+    /** @alias H5P.MemoryGame# */
     var self = this;
 
     // Initialize event inheritance
@@ -21,6 +23,8 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
     var flipped, timer, counter, popup, $feedback, $wrapper, maxWidth, numCols;
     var cards = [];
+    var flipBacks = []; // Que of cards to be flipped back
+    var numFlipped = 0;
     var removed = 0;
 
     /**
@@ -32,47 +36,134 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
      * @param {H5P.MemoryGame.Card} correct
      */
     var check = function (card, mate, correct) {
-      if (mate === correct) {
+      if (mate !== correct) {
-        // Remove them from the game.
+        // Incorrect, must be scheduled for flipping back
-        card.remove();
+        flipBacks.push(card);
-        mate.remove();
+        flipBacks.push(mate);
 
-        removed += 2;
+        // Wait for next click to flip them back…
-
+        if (numFlipped > 2) {
-        var finished = (removed === cards.length);
+          // or do it straight away
-        var desc = card.getDescription();
+          processFlipBacks();
-
-        if (finished) {
-           self.triggerXAPIScored(1, 1, 'completed');
-        }
-
-        if (desc !== undefined) {
-          // Pause timer and show desciption.
-          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.play();
-            }
-          });
-        }
-        else if (finished) {
-          // Game has finished
-          timer.stop();
-          $feedback.addClass('h5p-show');
-          if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
         }
+        return;
       }
-      else {
+
-        // Flip them back
+      // Remove them from the game.
-        card.flipBack();
+      card.remove();
-        mate.flipBack();
+      mate.remove();
+
+      // Update counters
+      numFlipped -= 2;
+      removed += 2;
+
+      var isFinished = (removed === cards.length);
+      var desc = card.getDescription();
+
+      if (isFinished) {
+         self.triggerXAPIScored(1, 1, 'completed');
       }
+
+      if (desc !== undefined) {
+        // Pause timer and show desciption.
+        timer.pause();
+        popup.show(desc, card.getImage(), function () {
+          if (isFinished) {
+            // Game done
+            finished();
+          }
+          else {
+            // Popup is closed, continue.
+            timer.play();
+          }
+        });
+      }
+      else if (isFinished) {
+        // Game done
+        finished();
+      }
+    };
+
+    /**
+     * Game has finished!
+     * @private
+     */
+    var finished = function () {
+      timer.stop();
+      $feedback.addClass('h5p-show');
+      if (parameters.behaviour && parameters.behaviour.allowRetry) {
+        // Create retry button
+        var retryButton = createButton('reset', parameters.l10n.tryAgain || 'Try again?', function () {
+          // Trigger handler (action)
+
+          resetGame();
+
+          // Remove button from DOM
+          $wrapper[0].removeChild(this);
+        });
+
+        // Same size as cards
+        retryButton.style.fontSize = $wrapper.children('ul')[0].style.fontSize;
+
+        $wrapper[0].appendChild(retryButton); // Add to DOM
+      }
+    };
+
+    /**
+     * Shuffle the cards and restart the game!
+     * @private
+     */
+    var resetGame = function () {
+
+      // Reset cards
+      removed = 0;
+      for (var i = 0; i < cards.length; i++) {
+        cards[i].reset();
+      }
+
+      // Remove feedback
+      $feedback[0].classList.remove('h5p-show');
+
+      // Reset timer and counter
+      timer.reset();
+      counter.reset();
+
+      // Randomize cards
+      H5P.shuffleArray(cards);
+
+      setTimeout(function () {
+        // Re-append to DOM after flipping back
+        for (var i = 0; i < cards.length; i++) {
+          cards[i].reAppend();
+        }
+
+        // Scale new layout
+        $wrapper.children('ul').children('.h5p-row-break').removeClass('h5p-row-break');
+        maxWidth = -1;
+        self.trigger('resize');
+      }, 600);
+    };
+
+    /**
+     * Game has finished!
+     * @private
+     */
+    var createButton = function (name, label, action) {
+      var buttonElement = document.createElement('div');
+      buttonElement.classList.add('h5p-memory-' + name);
+      buttonElement.innerHTML = label;
+      buttonElement.setAttribute('role', 'button');
+      buttonElement.tabIndex = 0;
+      buttonElement.addEventListener('click', function (event) {
+        action.apply(buttonElement);
+      }, false);
+      buttonElement.addEventListener('keypress', function (event) {
+        if (event.which === 13 || event.which === 32) { // Enter or Space key
+          event.preventDefault();
+          action.apply(buttonElement);
+        }
+      }, false);
+      return buttonElement;
     };
 
     /**
@@ -88,6 +179,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         // Keep track of time spent
         timer.play();
 
+        // Keep track of the number of flipped cards
+        numFlipped++;
+
         if (flipped !== undefined) {
           var matie = flipped;
           // Reset the flipped card.
@@ -98,6 +192,11 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
           }, 800);
         }
         else {
+          if (flipBacks.length > 1) {
+            // Turn back any flipped cards
+            processFlipBacks();
+          }
+
           // Keep track of the flipped card.
           flipped = card;
         }
@@ -109,6 +208,16 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       cards.push(card);
     };
 
+    /**
+     * Will flip back two and two cards
+     */
+    var processFlipBacks = function () {
+      flipBacks[0].flipBack();
+      flipBacks[1].flipBack();
+      flipBacks.splice(0, 2);
+      numFlipped -= 2;
+    };
+
     /**
      * @private
      */
@@ -191,17 +300,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
                         '<dd class="h5p-card-turns">0</dd>' +
                         '</dl>').appendTo($container);
 
-        timer = new H5P.Timer(100);
+        timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
-        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);
 
@@ -268,6 +367,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
       // We use font size to evenly scale all parts of the cards.
       $list.css('font-size', fontSize + 'px');
+      popup.setSize(fontSize);
       // due to rounding errors in browsers the margins may vary a bit…
     };
 

popup.js

@@ -7,6 +7,7 @@
    * @param {H5P.jQuery} $container
    */
   MemoryGame.Popup = function ($container) {
+    /** @alias H5P.MemoryGame.Popup# */
     var self = this;
 
     var closed;
@@ -39,6 +40,23 @@
         closed = undefined;
       }
     };
+
+    /**
+     * Sets popup size relative to the card size
+     * @param {number} fontSize
+     */
+    self.setSize = function (fontSize) {
+      // Set image size
+      $image[0].style.fontSize = fontSize + 'px';
+
+      // Determine card size
+      var cardSize = fontSize * 6.25; // From CSS
+
+      // Set popup size
+      $popup[0].style.minWidth = (cardSize * 2) + 'px';
+      $popup[0].style.minHeight = cardSize + 'px';
+      $desc[0].style.marginLeft = (cardSize + 20) + 'px';
+    };
   };
 
 })(H5P.MemoryGame, H5P.jQuery);

semantics.json

@@ -52,7 +52,8 @@
       {
         "name": "useGrid",
         "type": "boolean",
-        "label": "Put the cards in a grid layout",
+        "label": "Position the cards in a square",
+        "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
         "importance": "low",
         "default": true
       },
@@ -101,6 +102,13 @@
         "name": "feedback",
         "type": "text",
         "default": "Good work!"
+      },
+      {
+        "label": "Try again button text",
+        "importance": "low",
+        "name": "tryAgain",
+        "type": "text",
+        "default": "Try again?"
       }
     ]
   }

timer.js

@@ -0,0 +1,50 @@
+(function (MemoryGame, Timer) {
+
+  /**
+   * Adapter between memory game and H5P.Timer
+   *
+   * @class H5P.MemoryGame.Timer
+   * @extends H5P.Timer
+   * @param {Element} element
+   */
+  MemoryGame.Timer = function (element) {
+    /** @alias H5P.MemoryGame.Timer# */
+    var self = this;
+
+    // Initialize event inheritance
+    Timer.call(self, 100);
+
+    /** @private {string} */
+    var naturalState = element.innerText;
+
+    /**
+     * Set up callback for time updates.
+     * Formats time stamp for humans.
+     *
+     * @private
+     */
+    var update = function () {
+      var time = self.getTime();
+
+      var minutes = Timer.extractTimeElement(time, 'minutes');
+      var seconds = Timer.extractTimeElement(time, 'seconds') % 60;
+      if (seconds < 10) {
+        seconds = '0' + seconds;
+      }
+
+      element.innerText = minutes + ':' + seconds;
+    };
+
+    // Setup default behavior
+    self.notify('every_tenth_second', update);
+    self.on('reset', function () {
+      element.innerText = naturalState;
+      self.notify('every_tenth_second', update);
+    });
+  };
+
+  // Inheritance
+  MemoryGame.Timer.prototype = Object.create(Timer.prototype);
+  MemoryGame.Timer.prototype.constructor = MemoryGame.Timer;
+
+})(H5P.MemoryGame, H5P.Timer);