From 196c112243c81ead6a7c7c7013424d8c774cc8e1 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 16:47:07 +0200
Subject: [PATCH 1/5] Start improving accessibility

---
 card.js        | 86 +++++++++++++++++++++++++++++++++++++++++++-------
 memory-game.js | 39 +++++++++++++++++++++--
 semantics.json | 17 +++++++++-
 3 files changed, 126 insertions(+), 16 deletions(-)

diff --git a/card.js b/card.js
index 660a9bf..76a1c73 100644
--- a/card.js
+++ b/card.js
@@ -7,10 +7,11 @@
    * @extends H5P.EventDispatcher
    * @param {Object} image
    * @param {number} id
+   * @param {string} alt
    * @param {string} [description]
    * @param {Object} [styles]
    */
-  MemoryGame.Card = function (image, id, description, styles) {
+  MemoryGame.Card = function (image, id, alt, description, styles) {
     /** @alias H5P.MemoryGame.Card# */
     var self = this;
 
@@ -18,7 +19,7 @@
     EventDispatcher.call(self);
 
     var path = H5P.getPath(image.path, id);
-    var width, height, margin, $card;
+    var width, height, margin, $card, $wrapper, removedState, flippedState;
 
     if (image.width !== undefined && image.height !== undefined) {
       if (image.width > image.height) {
@@ -40,6 +41,7 @@
     self.flip = function () {
       $card.addClass('h5p-flipped');
       self.trigger('flip');
+      flippedState = true;
     };
 
     /**
@@ -47,6 +49,7 @@
      */
     self.flipBack = function () {
       $card.removeClass('h5p-flipped');
+      flippedState = false;
     };
 
     /**
@@ -54,6 +57,7 @@
      */
     self.remove = function () {
       $card.addClass('h5p-matched');
+      removedState = true;
     };
 
     /**
@@ -88,27 +92,85 @@
      */
     self.appendTo = function ($container) {
       // TODO: Translate alt attr
-      $card = $('<li class="h5p-memory-wrap"><div class="h5p-memory-card" role="button" tabindex="1">' +
+      $wrapper = $('<li class="h5p-memory-wrap" tabindex="-1" role="button"><div class="h5p-memory-card">' +
                   '<div class="h5p-front"' + (styles && styles.front ? styles.front : '') + '>' + (styles && styles.backImage ? '' : '<span></span>') + '</div>' +
                   '<div class="h5p-back"' + (styles && styles.back ? styles.back : '') + '>' +
-                    '<img src="' + path + '" alt="Memory Card" style="width:' + width + ';height:' + height + '"/>' +
+                    '<img src="' + path + '" alt="' + (alt || 'Memory Image') + '" style="width:' + width + ';height:' + height + '"/>' +
                   '</div>' +
                 '</div></li>')
         .appendTo($container)
-        .children('.h5p-memory-card')
-          .children('.h5p-front')
-            .click(function () {
-              self.flip();
-            })
-            .end();
+        .on('keydown', function (event) {
+          switch (event.which) {
+            case 13: // Enter
+            case 32: // Space
+              if (!flippedState) {
+                self.flip();
+                event.preventDefault();
+              }
+              return;
+            case 39: // Right
+            case 40: // Down
+              // Move focus forward
+              self.trigger('next');
+              event.preventDefault();
+              return;
+            case 37: // Left
+            case 38: // Up
+              // Move focus back
+              self.trigger('prev');
+              event.preventDefault();
+              return;
+          }
+        });
+      $card = $wrapper.children('.h5p-memory-card')
+        .children('.h5p-front')
+          .click(function () {
+            self.flip();
+          })
+          .end();
     };
 
     /**
      * Re-append to parent container
      */
     self.reAppend = function () {
-      var parent = $card[0].parentElement.parentElement;
-      parent.appendChild($card[0].parentElement);
+      var parent = $wrapper[0].parentElement;
+      parent.appendChild($wrapper[0]);
+    };
+
+    /**
+     *
+     */
+    self.makeTabbable = function () {
+      if ($wrapper) {
+        $wrapper.attr('tabindex', '0');
+      }
+    };
+
+    /**
+     *
+     */
+    self.makeUntabbable = function () {
+      if ($wrapper) {
+        $wrapper.attr('tabindex', '-1');
+      }
+    };
+
+    /**
+     *
+     */
+    self.setFocus = function () {
+      self.makeTabbable();
+      if ($wrapper) {
+        $wrapper.focus();
+      }
+    };
+
+    /**
+     *
+     */
+    self.isFlipped = function () {
+      return flippedState;
     };
   };
 
diff --git a/memory-game.js b/memory-game.js
index a0029f6..894f512 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -220,6 +220,38 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         counter.increment();
       });
 
+      /**
+       * @private
+       * @param {number} direction
+       */
+      var createCardChangeFocusHandler = function (direction) {
+        return function () {
+          // Locate next card
+          for (var i = 0; i < cards.length; i++) {
+            if (cards[i] === card) {
+              // Found current card
+
+              var nextCard, fails = 0;
+              do {
+                fails++;
+                nextCard = cards[i + (direction * fails)];
+                if (!nextCard) {
+                  return; // No more cards
+                }
+              }
+              while (nextCard.isFlipped());
+
+              card.makeUntabbable();
+              nextCard.setFocus();
+
+              return;
+            }
+          }
+        };
+      };
+
+      card.on('next', createCardChangeFocusHandler(1));
+      card.on('prev', createCardChangeFocusHandler(-1));
       cards.push(card);
     };
 
@@ -277,16 +309,16 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       var cardParams = cardsToUse[i];
       if (MemoryGame.Card.isValid(cardParams)) {
         // Create first card
-        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.description, cardStyles);
+        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, cardParams.description, cardStyles);
 
         if (MemoryGame.Card.hasTwoImages(cardParams)) {
           // Use matching image for card two
-          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.description, cardStyles);
+          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.matchAlt, cardParams.description, cardStyles);
           cardOne.hasTwoImages = cardTwo.hasTwoImages = true;
         }
         else {
           // Add two cards with the same image
-          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.description, cardStyles);
+          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, cardParams.description, cardStyles);
         }
 
         // Add cards to card list for shuffeling
@@ -314,6 +346,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       for (var i = 0; i < cards.length; i++) {
         cards[i].appendTo($list);
       }
+      cards[0].makeTabbable();
 
       if ($list.children().length) {
         $list.appendTo($container);
diff --git a/semantics.json b/semantics.json
index fd274e2..52a1f10 100644
--- a/semantics.json
+++ b/semantics.json
@@ -26,6 +26,13 @@
           "importance": "high",
           "ratio": 1
         },
+        {
+          "name": "imageAlt",
+          "type": "text",
+          "label": "Alternative text for Image",
+          "importance": "high",
+          "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+        },
         {
           "name": "match",
           "type": "image",
@@ -35,6 +42,14 @@
           "description": "An optional image to match against instead of using two cards with the same image.",
           "ratio": 1
         },
+        {
+          "name": "matchAlt",
+          "type": "text",
+          "label": "Alternative text for Matching Image",
+          "importance": "low",
+          "optional": true,
+          "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+        },
         {
           "name": "description",
           "type": "text",
@@ -146,7 +161,7 @@
         "importance": "low",
         "name": "tryAgain",
         "type": "text",
-        "default": "Try again?"
+        "default": "Reset"
       },
       {
         "label": "Close button label",

From f17d7cb4b2887edfde590644988ceb733e9231ab Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Fri, 22 Sep 2017 16:54:08 +0200
Subject: [PATCH 2/5] HFP-1266 Add accessibility labels to controls

Improve the overall behavior when using a readspeaker.
Still missing localization, dialog support and a proper timer.
---
 card.js         | 65 ++++++++++++++++++++++++++++++++++++++-----------
 memory-game.css |  8 ++++++
 memory-game.js  | 62 ++++++++++++++++++++++++++++++++++------------
 3 files changed, 105 insertions(+), 30 deletions(-)

diff --git a/card.js b/card.js
index 76a1c73..38d1ffe 100644
--- a/card.js
+++ b/card.js
@@ -21,6 +21,8 @@
     var path = H5P.getPath(image.path, id);
     var width, height, margin, $card, $wrapper, removedState, flippedState;
 
+    alt = alt || 'Missing description'; // Default for old games
+
     if (image.width !== undefined && image.height !== undefined) {
       if (image.width > image.height) {
         width = '100%';
@@ -35,10 +37,42 @@
       width = height = '100%';
     }
 
+    /**
+     * Update the cards label to make it accessible to users with a readspeaker
+     *
+     * @param {boolean} isMatched The card has been matched
+     * @param {boolean} announce Announce the current state of the card
+     * @param {boolean} reset Go back to the default label
+     */
+    self.updateLabel = function (isMatched, announce, reset) {
+
+      // Determine new label from input params
+      var label = (reset ? 'Unturned' : alt);
+      if (isMatched) {
+        label = 'Match found. ' + label; // TODO l10n
+      }
+
+      // Update the card's label
+      $wrapper.attr('aria-label', 'Card ' + ($wrapper.index() + 1) + ': ' + label); // TODO l10n
+
+      // Update disabled property
+      $wrapper.attr('aria-disabled', reset ? null : 'true');
+
+      // Announce the label change
+      if (announce) {
+        $wrapper.blur().focus(); // Announce card label
+      }
+    };
+
     /**
      * Flip card.
      */
     self.flip = function () {
+      if (flippedState) {
+        $wrapper.blur().focus(); // Announce card label again
+        return;
+      }
+
       $card.addClass('h5p-flipped');
       self.trigger('flip');
       flippedState = true;
@@ -48,6 +82,7 @@
      * Flip card back.
      */
     self.flipBack = function () {
+      self.updateLabel(null, null, true); // Reset card label
       $card.removeClass('h5p-flipped');
       flippedState = false;
     };
@@ -55,7 +90,7 @@
     /**
      * Remove.
      */
-    self.remove = function () {
+    self.remove = function (announce) {
       $card.addClass('h5p-matched');
       removedState = true;
     };
@@ -64,6 +99,9 @@
      * Reset card to natural state
      */
     self.reset = function () {
+      self.updateLabel(null, null, true); // Reset card label
+      flippedState = false;
+      removedState = false;
       $card[0].classList.remove('h5p-flipped', 'h5p-matched');
     };
 
@@ -91,11 +129,10 @@
      * @param {H5P.jQuery} $container
      */
     self.appendTo = function ($container) {
-      // TODO: Translate alt attr
       $wrapper = $('<li class="h5p-memory-wrap" tabindex="-1" role="button"><div class="h5p-memory-card">' +
                   '<div class="h5p-front"' + (styles && styles.front ? styles.front : '') + '>' + (styles && styles.backImage ? '' : '<span></span>') + '</div>' +
                   '<div class="h5p-back"' + (styles && styles.back ? styles.back : '') + '>' +
-                    '<img src="' + path + '" alt="' + (alt || 'Memory Image') + '" style="width:' + width + ';height:' + height + '"/>' +
+                    '<img src="' + path + '" alt="' + alt + '" style="width:' + width + ';height:' + height + '"/>' +
                   '</div>' +
                 '</div></li>')
         .appendTo($container)
@@ -103,10 +140,8 @@
           switch (event.which) {
             case 13: // Enter
             case 32: // Space
-              if (!flippedState) {
-                self.flip();
-                event.preventDefault();
-              }
+              self.flip();
+              event.preventDefault();
               return;
             case 39: // Right
             case 40: // Down
@@ -122,6 +157,7 @@
               return;
           }
         });
+      $wrapper.attr('aria-label', 'Card ' + ($wrapper.index() + 1) + ': Unturned.'); // TODO l10n
       $card = $wrapper.children('.h5p-memory-card')
         .children('.h5p-front')
           .click(function () {
@@ -131,7 +167,7 @@
     };
 
     /**
-     * Re-append to parent container
+     * Re-append to parent container.
      */
     self.reAppend = function () {
       var parent = $wrapper[0].parentElement;
@@ -139,7 +175,7 @@
     };
 
     /**
-     *
+     * Make the card accessible when tabbing
      */
     self.makeTabbable = function () {
       if ($wrapper) {
@@ -148,7 +184,7 @@
     };
 
     /**
-     *
+     * Prevent tabbing to the card
      */
     self.makeUntabbable = function () {
       if ($wrapper) {
@@ -157,7 +193,7 @@
     };
 
     /**
-     *
+     * Make card tabbable and move focus to it
      */
     self.setFocus = function () {
       self.makeTabbable();
@@ -167,10 +203,11 @@
     };
 
     /**
-     *
+     * Check if the card has been removed from the game, i.e. if has
+     * been matched.
      */
-    self.isFlipped = function () {
-      return flippedState;
+    self.isRemoved = function () {
+      return removedState;
     };
   };
 
diff --git a/memory-game.css b/memory-game.css
index 199a07b..4d61392 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -1,6 +1,14 @@
 .h5p-memory-game {
   overflow: hidden;
 }
+.h5p-memory-game .h5p-memory-hidden-read {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: 1px;
+  height: 1px;
+  color: transparent;
+}
 .h5p-memory-game > ul {
   list-style: none !important;
   padding: 0.25em 0.5em !important;
diff --git a/memory-game.js b/memory-game.js
index 894f512..a0cb033 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -5,6 +5,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
   var CARD_STD_SIZE = 116; // PX
   var STD_FONT_SIZE = 16; // PX
   var LIST_PADDING = 1; // EMs
+  var numInstances = 0;
 
   /**
    * Memory Game Constructor
@@ -21,11 +22,12 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
     // Initialize event inheritance
     EventDispatcher.call(self);
 
-    var flipped, timer, counter, popup, $feedback, $wrapper, maxWidth, numCols;
+    var flipped, timer, counter, popup, $bottom, $feedback, $wrapper, maxWidth, numCols;
     var cards = [];
     var flipBacks = []; // Que of cards to be flipped back
     var numFlipped = 0;
     var removed = 0;
+    numInstances++;
 
     /**
      * Check if these two cards belongs together.
@@ -49,17 +51,17 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         return;
       }
 
-      // Remove them from the game.
-      card.remove();
-      mate.remove();
-
       // Update counters
       numFlipped -= 2;
       removed += 2;
 
       var isFinished = (removed === cards.length);
-      var desc = card.getDescription();
 
+      // Remove them from the game.
+      card.remove(!isFinished);
+      mate.remove();
+
+      var desc = card.getDescription();
       if (desc !== undefined) {
         // Pause timer and show desciption.
         timer.pause();
@@ -70,6 +72,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         popup.show(desc, imgs, cardStyles ? cardStyles.back : undefined, function () {
           if (isFinished) {
             // Game done
+            card.makeUntabbable();
             finished();
           }
           else {
@@ -80,6 +83,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       }
       else if (isFinished) {
         // Game done
+        card.makeUntabbable();
         finished();
       }
     };
@@ -90,7 +94,8 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
      */
     var finished = function () {
       timer.stop();
-      $feedback.addClass('h5p-show');
+      $feedback.addClass('h5p-show'); // Announce
+      $bottom.focus();
 
       // Create and trigger xAPI event 'completed'
       var completedEvent = self.createXAPIEventTemplate('completed');
@@ -113,7 +118,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         });
         retryButton.classList.add('h5p-memory-transin');
         setTimeout(function () {
-          // Remove class on nextTick to get transition effect
+          // Remove class on nextTick to get transition effectupd
           retryButton.classList.remove('h5p-memory-transin');
         }, 0);
 
@@ -132,9 +137,6 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
       // Reset cards
       removed = 0;
-      for (var i = 0; i < cards.length; i++) {
-        cards[i].reset();
-      }
 
       // Remove feedback
       $feedback[0].classList.remove('h5p-show');
@@ -151,11 +153,15 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         for (var i = 0; i < cards.length; i++) {
           cards[i].reAppend();
         }
+        for (var j = 0; j < cards.length; j++) {
+          cards[j].reset();
+        }
 
         // Scale new layout
         $wrapper.children('ul').children('.h5p-row-break').removeClass('h5p-row-break');
         maxWidth = -1;
         self.trigger('resize');
+        cards[0].setFocus();
       }, 600);
     };
 
@@ -197,6 +203,11 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         // Keep track of the number of flipped cards
         numFlipped++;
 
+        // Announce the card unless it's the last one and it's correct
+        var isMatched = (flipped === mate);
+        var isLast = ((removed + 2) === cards.length);
+        card.updateLabel(isMatched, !(isMatched && isLast));
+
         if (flipped !== undefined) {
           var matie = flipped;
           // Reset the flipped card.
@@ -239,7 +250,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
                   return; // No more cards
                 }
               }
-              while (nextCard.isFlipped());
+              while (nextCard.isRemoved());
 
               card.makeUntabbable();
               nextCard.setFocus();
@@ -342,24 +353,43 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       }
 
       // Add cards to list
-      var $list = $('<ul/>');
+      var $list = $('<ul/>', {
+        role: 'application',
+        'aria-labelledby': 'h5p-intro-' + numInstances
+      });
       for (var i = 0; i < cards.length; i++) {
         cards[i].appendTo($list);
       }
       cards[0].makeTabbable();
 
       if ($list.children().length) {
+        $('<div/>', {
+          id: 'h5p-intro-' + numInstances,
+          'class': 'h5p-memory-hidden-read',
+          html: 'Memory Game. Find the matching cards.', // TODO: l10n
+          appendTo: $container
+        });
         $list.appendTo($container);
 
-        $feedback = $('<div class="h5p-feedback">' + parameters.l10n.feedback + '</div>').appendTo($container);
+        $bottom = $('<div/>', {
+          tabindex: '-1',
+          appendTo: $container
+        });
+        $('<div/>', {
+          'class': 'h5p-memory-hidden-read',
+          html: 'All of the cards have been found.', // TODO: l10n
+          appendTo: $bottom
+        });
+
+        $feedback = $('<div class="h5p-feedback">' + parameters.l10n.feedback + '</div>').appendTo($bottom);
 
         // Add status bar
         var $status = $('<dl class="h5p-status">' +
                         '<dt>' + parameters.l10n.timeSpent + '</dt>' +
-                        '<dd class="h5p-time-spent">0:00</dd>' +
+                        '<dd class="h5p-time-spent">0:00</dd>' + // TODO: Add hidden dot ?
                         '<dt>' + parameters.l10n.cardTurns + '</dt>' +
                         '<dd class="h5p-card-turns">0</dd>' +
-                        '</dl>').appendTo($container);
+                        '</dl>').appendTo($bottom);
 
         timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));

From 4ecc636ab0803de42772a81d079bd9c63c0ad58b Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Mon, 25 Sep 2017 14:38:14 +0200
Subject: [PATCH 3/5] HFP-1266 Add accessibility support to dialog and timer

Improved keyboard support.
Made labels translatable.
---
 card.js          | 22 +++++++++---
 language/ar.json | 74 ++++++++++++++++++++++++++------------
 language/bs.json | 63 +++++++++++++++++++++-----------
 language/de.json | 65 ++++++++++++++++++++++-----------
 language/fr.json | 65 ++++++++++++++++++++++-----------
 language/it.json | 74 ++++++++++++++++++++++++++------------
 language/nb.json | 70 ++++++++++++++++++------------------
 memory-game.css  |  6 ++--
 memory-game.js   | 94 ++++++++++++++++++++++++++++++++++++++++--------
 popup.js         | 14 +++++---
 semantics.json   | 37 ++++++++++++++++++-
 timer.js         |  5 +++
 12 files changed, 420 insertions(+), 169 deletions(-)

diff --git a/card.js b/card.js
index 38d1ffe..28718f7 100644
--- a/card.js
+++ b/card.js
@@ -8,10 +8,11 @@
    * @param {Object} image
    * @param {number} id
    * @param {string} alt
+   * @param {Object} l10n Localization
    * @param {string} [description]
    * @param {Object} [styles]
    */
-  MemoryGame.Card = function (image, id, alt, description, styles) {
+  MemoryGame.Card = function (image, id, alt, l10n, description, styles) {
     /** @alias H5P.MemoryGame.Card# */
     var self = this;
 
@@ -47,13 +48,13 @@
     self.updateLabel = function (isMatched, announce, reset) {
 
       // Determine new label from input params
-      var label = (reset ? 'Unturned' : alt);
+      var label = (reset ? l10n.cardUnturned : alt);
       if (isMatched) {
-        label = 'Match found. ' + label; // TODO l10n
+        label = l10n.cardMatched + ' ' + label;
       }
 
       // Update the card's label
-      $wrapper.attr('aria-label', 'Card ' + ($wrapper.index() + 1) + ': ' + label); // TODO l10n
+      $wrapper.attr('aria-label', l10n.cardPrefix.replace('%num', $wrapper.index() + 1) + ' ' + label);
 
       // Update disabled property
       $wrapper.attr('aria-disabled', reset ? null : 'true');
@@ -155,9 +156,20 @@
               self.trigger('prev');
               event.preventDefault();
               return;
+            case 35:
+              // Move to last card
+              self.trigger('last');
+              event.preventDefault();
+              return;
+            case 36:
+              // Move to first card
+              self.trigger('first');
+              event.preventDefault();
+              return;
           }
         });
-      $wrapper.attr('aria-label', 'Card ' + ($wrapper.index() + 1) + ': Unturned.'); // TODO l10n
+
+      $wrapper.attr('aria-label', l10n.cardPrefix.replace('%num', $wrapper.index() + 1) + ' ' + l10n.cardUnturned);
       $card = $wrapper.children('.h5p-memory-card')
         .children('.h5p-front')
           .click(function () {
diff --git a/language/ar.json b/language/ar.json
index 0f2a1fa..b1c7fd2 100644
--- a/language/ar.json
+++ b/language/ar.json
@@ -1,6 +1,11 @@
 {
   "semantics": [
     {
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
       "label": "البطاقات",
       "entity": "بطاقة",
       "field": {
@@ -10,53 +15,53 @@
             "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": "نص قصير يتم عرضه مرة واحدة علي اثنين من البطاقات متساوية"
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
     },
     {
-      "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": "Position the cards in a square",
           "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",
           "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"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
+      "label": "Look and feel",
+      "description": "Control the visuals of the game.",
       "fields": [
         {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
+          "label": "Theme Color",
+          "description": "Choose a color to create a theme for your card game.",
+          "default": "#909090"
         },
         {
-          "englishLabel": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
+          "label": "Card Back",
+          "description": "Use a custom back for your cards."
         }
       ]
     },
@@ -64,23 +69,46 @@
       "label": "الأقلمة",
       "fields": [
         {
-          "label": "نص تدوير البطاقة"
+          "label": "نص تدوير البطاقة",
+          "default": "Card turns"
         },
         {
-          "label": "نص التوقيت الزمني"
+          "label": "نص التوقيت الزمني",
+          "default": "Time spent"
         },
         {
-          "label": "نص الملاحظات"
+          "label": "نص الملاحظات",
+          "default": "Good work!"
         },
         {
-          "englishLabel": "Try again button text",
-          "englishDefault": "Try again?"
+          "label": "Try again button text",
+          "default": "Reset"
         },
         {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
+          "label": "Close button label",
+          "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/bs.json b/language/bs.json
index c97e6ca..780bbed 100644
--- a/language/bs.json
+++ b/language/bs.json
@@ -1,6 +1,11 @@
 {
   "semantics": [
     {
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
       "label": "Karte",
       "entity": "karte",
       "field": {
@@ -10,53 +15,53 @@
             "label": "Slika"
           },
           {
-            "englishLabel": "Matching Image",
             "label": "Ista slika",
-            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
             "description": "Opcionalna slika koja se koristi umjestodvije iste slike."
           },
           {
             "label": "Opis",
             "description": "Kratak tekst koji će biti prikazan čim se pronađu dvije iste karte."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
     },
     {
-      "englishLabel": "Behavioural settings",
       "label": "Podešavanje ponašanja",
-      "englishDescription": "These options will let you control how the game behaves.",
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Position the cards in a square",
           "label": "Poredaj karte u redove ",
-          "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",
           "label": "Broj karata za upotrebu",
-          "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"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
+      "label": "Look and feel",
+      "description": "Control the visuals of the game.",
       "fields": [
         {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
+          "label": "Theme Color",
+          "description": "Choose a color to create a theme for your card game.",
+          "default": "#909090"
         },
         {
-          "englishLabel": "Poleđina karata",
-          "englishDescription": "Koristi standardnu pozadinu za karte."
+          "label": "Card Back",
+          "description": "Use a custom back for your cards."
         }
       ]
     },
@@ -76,16 +81,34 @@
           "default": "BRAVO!"
         },
         {
-          "englishLabel": "Try again button text",
           "label": "Tekst na dugmetu pokušaj ponovo",
-          "englishDefault": "Try again?",
           "default": "Pokušaj ponovo?"
         },
         {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
+          "label": "Close button label",
+          "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/de.json b/language/de.json
index 9abf453..68deed0 100644
--- a/language/de.json
+++ b/language/de.json
@@ -1,6 +1,11 @@
 {
   "semantics": [
     {
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
       "label": "Karten",
       "entity": "karte",
       "field": {
@@ -10,53 +15,53 @@
             "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."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
     },
     {
-      "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": "Position the cards in a square",
           "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",
           "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"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
+      "label": "Look and feel",
+      "description": "Control the visuals of the game.",
       "fields": [
         {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
+          "label": "Theme Color",
+          "description": "Choose a color to create a theme for your card game.",
+          "default": "#909090"
         },
         {
-          "englishLabel": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
+          "label": "Card Back",
+          "description": "Use a custom back for your cards."
         }
       ]
     },
@@ -76,14 +81,34 @@
           "default": "Gute Arbeit!"
         },
         {
-          "englishLabel": "Try again button text",
-          "englishDefault": "Try again?"
+          "label": "Try again button text",
+          "default": "Reset"
         },
         {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
+          "label": "Close button label",
+          "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/fr.json b/language/fr.json
index 204a6d9..05771c5 100644
--- a/language/fr.json
+++ b/language/fr.json
@@ -1,6 +1,11 @@
 {
   "semantics": [
     {
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
       "label": "Cartes",
       "entity": "carte",
       "field": {
@@ -10,53 +15,53 @@
             "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."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
     },
     {
-      "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": "Position the cards in a square",
           "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",
           "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"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
+      "label": "Look and feel",
+      "description": "Control the visuals of the game.",
       "fields": [
         {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
+          "label": "Theme Color",
+          "description": "Choose a color to create a theme for your card game.",
+          "default": "#909090"
         },
         {
-          "englishLabel": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
+          "label": "Card Back",
+          "description": "Use a custom back for your cards."
         }
       ]
     },
@@ -76,14 +81,34 @@
           "default": "Bien joué !"
         },
         {
-          "englishLabel": "Try again button text",
-          "englishDefault": "Try again?"
+          "label": "Try again button text",
+          "default": "Reset"
         },
         {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
+          "label": "Close button label",
+          "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/it.json b/language/it.json
index 1137a03..ccdb254 100644
--- a/language/it.json
+++ b/language/it.json
@@ -1,6 +1,11 @@
 {
   "semantics": [
     {
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
       "label": "Carte",
       "entity": "carta",
       "field": {
@@ -10,53 +15,53 @@
             "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."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
     },
     {
-      "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": "Position the cards in a square",
           "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",
           "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"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
+      "label": "Look and feel",
+      "description": "Control the visuals of the game.",
       "fields": [
         {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
+          "label": "Theme Color",
+          "description": "Choose a color to create a theme for your card game.",
+          "default": "#909090"
         },
         {
-          "englishLabel": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
+          "label": "Card Back",
+          "description": "Use a custom back for your cards."
         }
       ]
     },
@@ -64,23 +69,46 @@
       "label": "Localizzazione",
       "fields": [
         {
-          "label": "Testo Gira carta"
+          "label": "Testo Gira carta",
+          "default": "Card turns"
         },
         {
-          "label": "Testo Tempo trascorso"
+          "label": "Testo Tempo trascorso",
+          "default": "Time spent"
         },
         {
-          "label": "Testo Feedback"
+          "label": "Testo Feedback",
+          "default": "Good work!"
         },
         {
-          "englishLabel": "Try again button text",
-          "englishDefault": "Try again?"
+          "label": "Try again button text",
+          "default": "Reset"
         },
         {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
+          "label": "Close button label",
+          "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/nb.json b/language/nb.json
index 53e6ccc..29e2a49 100644
--- a/language/nb.json
+++ b/language/nb.json
@@ -1,112 +1,114 @@
 {
   "semantics": [
     {
-      "englishLabel": "Cards",
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
       "label": "Kort",
-      "englishEntity": "card",
       "entity": "kort",
       "field": {
-        "englishLabel": "Card",
         "label": "Kort",
         "fields": [
           {
-            "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": "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."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
     },
     {
-      "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": "Position the cards in a square",
           "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",
           "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": "Look and feel",
       "label": "Tilpass utseende",
-      "englishDescription": "Control the visuals of the game.",
       "description": "Kontroller de visuelle aspektene ved spillet.",
       "fields": [
         {
-          "englishLabel": "Theme Color",
           "label": "Temafarge",
-          "englishDescription": "Choose a color to create a theme for your card game.",
-          "description": "Velg en farge for å skape et tema over kortspillet ditt."
+          "description": "Velg en farge for å skape et tema over kortspillet ditt.",
+          "default": "#909090"
         },
         {
-          "englishLabel": "Card Back",
           "label": "Kortbaksiden",
-          "englishDescription": "Use a custom back for your cards.",
           "description": "Bruk en tilpasset kortbakside for kortene dine."
         }
       ]
     },
     {
-      "englishLabel": "Localization",
       "label": "Oversettelser",
       "fields": [
         {
-          "englishLabel": "Card turns text",
           "label": "Etikett for antall vendte kort",
-          "englishDefault": "Card turns",
           "default": "Kort vendt"
         },
         {
-          "englishLabel": "Time spent text",
           "label": "Etikett for tid brukt",
-          "englishDefault": "Time spent",
           "default": "Tid brukt"
         },
         {
-          "englishLabel": "Feedback text",
           "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?"
         },
         {
-          "englishLabel": "Close button label",
           "label": "Lukk knapp-merkelapp",
-          "englishDefault": "Close",
           "default": "Lukk"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/memory-game.css b/memory-game.css
index 4d61392..67e4b9a 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -194,9 +194,6 @@
   margin: 0 1em 0 0;
   font-weight: bold;
 }
-.h5p-memory-game .h5p-status > dt:after {
-  content: ":";
-}
 .h5p-memory-game .h5p-status > dd {
   margin: 0;
 }
@@ -314,3 +311,6 @@
   transform: translate(-50%,-450%) scale(0) rotate(360deg);
   opacity: 0;
 }
+.h5p-memory-complete {
+  display: none;
+}
diff --git a/memory-game.js b/memory-game.js
index a0cb033..7c61076 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -22,13 +22,29 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
     // Initialize event inheritance
     EventDispatcher.call(self);
 
-    var flipped, timer, counter, popup, $bottom, $feedback, $wrapper, maxWidth, numCols;
+    var flipped, timer, counter, popup, $bottom, $taskComplete, $feedback, $wrapper, maxWidth, numCols;
     var cards = [];
     var flipBacks = []; // Que of cards to be flipped back
     var numFlipped = 0;
     var removed = 0;
     numInstances++;
 
+    // Add defaults
+    parameters = $.extend(true, {
+      l10n: {
+        cardTurns: 'Card turns',
+        timeSpent: 'Time spent',
+        feedback: 'Good work!',
+        tryAgain: 'Reset',
+        closeLabel: 'Close',
+        label: 'Memory Game. Find the matching cards.',
+        done: 'All of the cards have been found.',
+        cardPrefix: 'Card %num: ',
+        cardUnturned: 'Unturned.',
+        cardMatched: 'Match found.'
+      }
+    }, parameters);
+
     /**
      * Check if these two cards belongs together.
      *
@@ -69,7 +85,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         if (card.hasTwoImages) {
           imgs.push(mate.getImage());
         }
-        popup.show(desc, imgs, cardStyles ? cardStyles.back : undefined, function () {
+        popup.show(desc, imgs, cardStyles ? cardStyles.back : undefined, function (refocus) {
           if (isFinished) {
             // Game done
             card.makeUntabbable();
@@ -78,6 +94,10 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
           else {
             // Popup is closed, continue.
             timer.play();
+
+            if (refocus) {
+              card.setFocus();
+            }
           }
         });
       }
@@ -94,6 +114,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
      */
     var finished = function () {
       timer.stop();
+      $taskComplete.show();
       $feedback.addClass('h5p-show'); // Announce
       $bottom.focus();
 
@@ -140,6 +161,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
       // Remove feedback
       $feedback[0].classList.remove('h5p-show');
+      $taskComplete.hide();
 
       // Reset timer and counter
       timer.reset();
@@ -196,6 +218,14 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
      */
     var addCard = function (card, mate) {
       card.on('flip', function () {
+
+        // Always return focus to the card last flipped
+        for (var i = 0; i < cards.length; i++) {
+          cards[i].makeUntabbable();
+        }
+        card.makeTabbable();
+
+        popup.close();
         self.triggerXAPI('interacted');
         // Keep track of time spent
         timer.play();
@@ -232,8 +262,12 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       });
 
       /**
+       * Create event handler for moving focus to the next or the previous
+       * card on the table.
+       *
        * @private
-       * @param {number} direction
+       * @param {number} direction +1/-1
+       * @return {function}
        */
       var createCardChangeFocusHandler = function (direction) {
         return function () {
@@ -261,8 +295,38 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         };
       };
 
+      // Register handlers for moving focus to next and previous card
       card.on('next', createCardChangeFocusHandler(1));
       card.on('prev', createCardChangeFocusHandler(-1));
+
+      /**
+       * Create event handler for moving focus to the first or the last card
+       * on the table.
+       *
+       * @private
+       * @param {number} direction +1/-1
+       * @return {function}
+       */
+      var createEndCardFocusHandler = function (direction) {
+        return function () {
+          var focusSet = false;
+          for (var i = 0; i < cards.length; i++) {
+            var j = (direction === -1 ? cards.length - (i + 1) : i);
+            if (!focusSet && !cards[j].isRemoved()) {
+              cards[j].setFocus();
+              focusSet = true;
+            }
+            else if (cards[j] === card) {
+              card.makeUntabbable();
+            }
+          }
+        };
+      };
+
+      // Register handlers for moving focus to first and last card
+      card.on('first', createEndCardFocusHandler(1));
+      card.on('last', createEndCardFocusHandler(-1));
+
       cards.push(card);
     };
 
@@ -320,16 +384,16 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       var cardParams = cardsToUse[i];
       if (MemoryGame.Card.isValid(cardParams)) {
         // Create first card
-        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, cardParams.description, cardStyles);
+        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles);
 
         if (MemoryGame.Card.hasTwoImages(cardParams)) {
           // Use matching image for card two
-          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.matchAlt, cardParams.description, cardStyles);
+          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.matchAlt, parameters.l10n, cardParams.description, cardStyles);
           cardOne.hasTwoImages = cardTwo.hasTwoImages = true;
         }
         else {
           // Add two cards with the same image
-          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, cardParams.description, cardStyles);
+          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles);
         }
 
         // Add cards to card list for shuffeling
@@ -366,7 +430,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         $('<div/>', {
           id: 'h5p-intro-' + numInstances,
           'class': 'h5p-memory-hidden-read',
-          html: 'Memory Game. Find the matching cards.', // TODO: l10n
+          html: parameters.l10n.label,
           appendTo: $container
         });
         $list.appendTo($container);
@@ -375,9 +439,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
           tabindex: '-1',
           appendTo: $container
         });
-        $('<div/>', {
-          'class': 'h5p-memory-hidden-read',
-          html: 'All of the cards have been found.', // TODO: l10n
+        $taskComplete = $('<div/>', {
+          'class': 'h5p-memory-complete h5p-memory-hidden-read',
+          html: parameters.l10n.done,
           appendTo: $bottom
         });
 
@@ -385,13 +449,13 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         // Add status bar
         var $status = $('<dl class="h5p-status">' +
-                        '<dt>' + parameters.l10n.timeSpent + '</dt>' +
-                        '<dd class="h5p-time-spent">0:00</dd>' + // TODO: Add hidden dot ?
-                        '<dt>' + parameters.l10n.cardTurns + '</dt>' +
-                        '<dd class="h5p-card-turns">0</dd>' +
+                        '<dt>' + parameters.l10n.timeSpent + ':</dt>' +
+                        '<dd class="h5p-time-spent"><time role="timer" datetime="PT0M0S">0:00</time><span class="h5p-memory-hidden-read">.</span></dd>' +
+                        '<dt>' + parameters.l10n.cardTurns + ':</dt>' +
+                        '<dd class="h5p-card-turns">0<span class="h5p-memory-hidden-read">.</span></dd>' +
                         '</dl>').appendTo($bottom);
 
-        timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
+        timer = new MemoryGame.Timer($status.find('time')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
         popup = new MemoryGame.Popup($container, parameters.l10n);
 
diff --git a/popup.js b/popup.js
index 24b2b46..3f07631 100644
--- a/popup.js
+++ b/popup.js
@@ -13,16 +13,16 @@
 
     var closed;
 
-    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"></div><div class="h5p-memory-desc"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
+    var $popup = $('<div class="h5p-memory-pop" role="dialog"><div class="h5p-memory-top"></div><div class="h5p-memory-desc" tabindex="-1"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
     var $desc = $popup.find('.h5p-memory-desc');
     var $top = $popup.find('.h5p-memory-top');
 
     // Hook up the close button
     $popup.find('.h5p-memory-close').on('click', function () {
-      self.close();
+      self.close(true);
     }).on('keypress', function (event) {
       if (event.which === 13 || event.which === 32) {
-        self.close();
+        self.close(true);
         event.preventDefault();
       }
     });
@@ -41,22 +41,26 @@
         $('<div class="h5p-memory-image"' + (styles ? styles : '') + '></div>').append(imgs[i]).appendTo($top);
       }
       $popup.show();
+      $desc.focus();
       closed = done;
     };
 
     /**
      * Close the popup.
+     *
+     * @param {boolean} refocus Sets focus after closing the dialog
      */
-    self.close = function () {
+    self.close = function (refocus) {
       if (closed !== undefined) {
         $popup.hide();
-        closed();
+        closed(refocus);
         closed = undefined;
       }
     };
 
     /**
      * Sets popup size relative to the card size
+     *
      * @param {number} fontSize
      */
     self.setSize = function (fontSize) {
diff --git a/semantics.json b/semantics.json
index 52a1f10..0333ce0 100644
--- a/semantics.json
+++ b/semantics.json
@@ -169,7 +169,42 @@
         "name": "closeLabel",
         "type": "text",
         "default": "Close"
+      },
+      {
+        "label": "Game label",
+        "importance": "low",
+        "name": "label",
+        "type": "text",
+        "default": "Memory Game. Find the matching cards."
+      },
+      {
+        "label": "Game finished label",
+        "importance": "low",
+        "name": "done",
+        "type": "text",
+        "default": "All of the cards have been found."
+      },
+      {
+        "label": "Card indexing label",
+        "importance": "low",
+        "name": "cardPrefix",
+        "type": "text",
+        "default": "Card %num:"
+      },
+      {
+        "label": "Card unturned label",
+        "importance": "low",
+        "name": "cardUnturned",
+        "type": "text",
+        "default": "Unturned."
+      },
+      {
+        "label": "Card matched label",
+        "importance": "low",
+        "name": "cardMatched",
+        "type": "text",
+        "default": "Match found."
       }
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/timer.js b/timer.js
index 339392e..4af4caf 100644
--- a/timer.js
+++ b/timer.js
@@ -28,6 +28,11 @@
 
       var minutes = Timer.extractTimeElement(time, 'minutes');
       var seconds = Timer.extractTimeElement(time, 'seconds') % 60;
+
+      // Update duration attribute
+      element.setAttribute('datetime', 'PT' + minutes + 'M' + seconds + 'S');
+
+      // Add leading zero
       if (seconds < 10) {
         seconds = '0' + seconds;
       }

From 6f62cf9da0c73e64dd0e8767c79e7d0a49e7067a Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 26 Sep 2017 11:48:45 +0200
Subject: [PATCH 4/5] Fix broken ar.json language file

---
 language/ar.json | 86 +++---------------------------------------------
 1 file changed, 5 insertions(+), 81 deletions(-)

diff --git a/language/ar.json b/language/ar.json
index 6399171..78a9852 100644
--- a/language/ar.json
+++ b/language/ar.json
@@ -1,7 +1,6 @@
 {
-  "semantics":[
+  "semantics": [
     {
-<<<<<<< HEAD
       "widgets": [
         {
           "label": "Default"
@@ -12,23 +11,10 @@
       "field": {
         "label": "البطاقة",
         "fields": [
-=======
-      "widgets":[
-        {
-          "label":"Default"
-        }
-      ],
-      "label":"البطاقات",
-      "entity":"بطاقة",
-      "field":{
-        "label":"البطاقة",
-        "fields":[
->>>>>>> master
           {
-            "label":"الصورة"
+            "label": "الصورة"
           },
           {
-<<<<<<< HEAD
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
@@ -43,20 +29,11 @@
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
-=======
-            "label":"Matching Image",
-            "description":"An optional image to match against instead of using two cards with the same image."
-          },
-          {
-            "label":"الوصف",
-            "description":"نص قصير يتم عرضه مرة واحدة علي اثنين من البطاقات متساوية"
->>>>>>> master
           }
         ]
       }
     },
     {
-<<<<<<< HEAD
       "label": "Behavioural settings",
       "description": "These options will let you control how the game behaves.",
       "fields": [
@@ -70,26 +47,10 @@
         },
         {
           "label": "Add button for retrying when the game is over"
-=======
-      "label":"Behavioural settings",
-      "description":"These options will let you control how the game behaves.",
-      "fields":[
-        {
-          "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."
-        },
-        {
-          "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."
-        },
-        {
-          "label":"Add button for retrying when the game is over"
->>>>>>> master
         }
       ]
     },
     {
-<<<<<<< HEAD
       "label": "Look and feel",
       "description": "Control the visuals of the game.",
       "fields": [
@@ -101,30 +62,13 @@
         {
           "label": "Card Back",
           "description": "Use a custom back for your cards."
-=======
-      "label":"Look and feel",
-      "description":"Control the visuals of the game.",
-      "fields":[
-        {
-          "label":"Theme Color",
-          "description":"Choose a color to create a theme for your card game.",
-          "default":"#909090",
-          "spectrum":{
-            
-          }
-        },
-        {
-          "label":"Card Back",
-          "description":"Use a custom back for your cards."
->>>>>>> master
         }
       ]
     },
     {
-      "label":"الأقلمة",
-      "fields":[
+      "label": "الأقلمة",
+      "fields": [
         {
-<<<<<<< HEAD
           "label": "نص تدوير البطاقة",
           "default": "Card turns"
         },
@@ -163,28 +107,8 @@
         {
           "label": "Card matched label",
           "default": "Match found."
-=======
-          "label":"نص تدوير البطاقة",
-          "default":"Card turns"
-        },
-        {
-          "label":"نص التوقيت الزمني",
-          "default":"Time spent"
-        },
-        {
-          "label":"نص الملاحظات",
-          "default":"Good work!"
-        },
-        {
-          "label":"Try again button text",
-          "default":"Try again?"
-        },
-        {
-          "label":"Close button label",
-          "default":"Close"
->>>>>>> master
         }
       ]
     }
   ]
-}
\ No newline at end of file
+}

From 46d769ef0ba21caf0f6aaf318ed8e6d2e9d0148c Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 26 Sep 2017 11:54:34 +0200
Subject: [PATCH 5/5] Fix broken translations

---
 language/bs.json | 86 +++++++-----------------------------------------
 language/de.json | 86 +++++++-----------------------------------------
 language/fr.json | 86 +++++++-----------------------------------------
 language/it.json | 86 +++---------------------------------------------
 language/nb.json | 84 ++--------------------------------------------
 5 files changed, 40 insertions(+), 388 deletions(-)

diff --git a/language/bs.json b/language/bs.json
index 047f2cd..125eae6 100644
--- a/language/bs.json
+++ b/language/bs.json
@@ -1,7 +1,6 @@
 {
-  "semantics":[
+  "semantics": [
     {
-<<<<<<< HEAD
       "widgets": [
         {
           "label": "Default"
@@ -12,23 +11,10 @@
       "field": {
         "label": "Karte",
         "fields": [
-=======
-      "widgets":[
-        {
-          "label":"Default"
-        }
-      ],
-      "label":"Karte",
-      "entity":"karte",
-      "field":{
-        "label":"Karte",
-        "fields":[
->>>>>>> master
           {
-            "label":"Slika"
+            "label": "Slika"
           },
           {
-<<<<<<< HEAD
             "label": "Ista slika",
             "description": "Opcionalna slika koja se koristi umjestodvije iste slike."
           },
@@ -43,20 +29,11 @@
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
-=======
-            "label":"Ista slika",
-            "description":"Opcionalna slika koja se koristi umjestodvije iste slike."
-          },
-          {
-            "label":"Opis",
-            "description":"Kratak tekst koji će biti prikazan čim se pronađu dvije iste karte."
->>>>>>> master
           }
         ]
       }
     },
     {
-<<<<<<< HEAD
       "label": "Podešavanje ponašanja",
       "description": "These options will let you control how the game behaves.",
       "fields": [
@@ -70,26 +47,10 @@
         },
         {
           "label": "Add button for retrying when the game is over"
-=======
-      "label":"Podešavanje ponašanja",
-      "description":"These options will let you control how the game behaves.",
-      "fields":[
-        {
-          "label":"Poredaj karte u redove ",
-          "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."
-        },
-        {
-          "label":"Broj karata za upotrebu",
-          "description":"Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
-        },
-        {
-          "label":"Add button for retrying when the game is over"
->>>>>>> master
         }
       ]
     },
     {
-<<<<<<< HEAD
       "label": "Look and feel",
       "description": "Control the visuals of the game.",
       "fields": [
@@ -101,42 +62,25 @@
         {
           "label": "Card Back",
           "description": "Use a custom back for your cards."
-=======
-      "label":"Look and feel",
-      "description":"Control the visuals of the game.",
-      "fields":[
-        {
-          "label":"Theme Color",
-          "description":"Choose a color to create a theme for your card game.",
-          "default":"#909090",
-          "spectrum":{
-            
-          }
-        },
-        {
-          "label":"Card Back",
-          "description":"Use a custom back for your cards."
->>>>>>> master
         }
       ]
     },
     {
-      "label":"Prijevod",
-      "fields":[
+      "label": "Prijevod",
+      "fields": [
         {
-          "label":"Tekst kad se okrene karta ",
-          "default":"Okrenuta karta"
+          "label": "Tekst kad se okrene karta ",
+          "default": "Okrenuta karta"
         },
         {
-          "label":"Tekst za provedeno vrijeme",
-          "default":"Provedeno vrijeme"
+          "label": "Tekst za provedeno vrijeme",
+          "default": "Provedeno vrijeme"
         },
         {
-          "label":"Feedback tekst",
-          "default":"BRAVO!"
+          "label": "Feedback tekst",
+          "default": "BRAVO!"
         },
         {
-<<<<<<< HEAD
           "label": "Tekst na dugmetu pokušaj ponovo",
           "default": "Pokušaj ponovo?"
         },
@@ -163,16 +107,8 @@
         {
           "label": "Card matched label",
           "default": "Match found."
-=======
-          "label":"Tekst na dugmetu pokušaj ponovo",
-          "default":"Pokušaj ponovo?"
-        },
-        {
-          "label":"Close button label",
-          "default":"Close"
->>>>>>> master
         }
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/language/de.json b/language/de.json
index 3c3d210..550d6b0 100644
--- a/language/de.json
+++ b/language/de.json
@@ -1,7 +1,6 @@
 {
-  "semantics":[
+  "semantics": [
     {
-<<<<<<< HEAD
       "widgets": [
         {
           "label": "Default"
@@ -12,23 +11,10 @@
       "field": {
         "label": "Karte",
         "fields": [
-=======
-      "widgets":[
-        {
-          "label":"Vorgaben"
-        }
-      ],
-      "label":"Karten",
-      "entity":"karte",
-      "field":{
-        "label":"Karte",
-        "fields":[
->>>>>>> master
           {
-            "label":"Bild"
+            "label": "Bild"
           },
           {
-<<<<<<< HEAD
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
@@ -43,20 +29,11 @@
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
-=======
-            "label":"Passendes Bild",
-            "description":"Ein optionales anderes Bild als Gegenstück statt zwei Karten mit dem selben Bild zu nutzen"
-          },
-          {
-            "label":"Beschreibung",
-            "description":"Ein kurzer Text, der angezeigt wird, sobald zwei identische Karten gefunden werden."
->>>>>>> master
           }
         ]
       }
     },
     {
-<<<<<<< HEAD
       "label": "Behavioural settings",
       "description": "These options will let you control how the game behaves.",
       "fields": [
@@ -70,26 +47,10 @@
         },
         {
           "label": "Add button for retrying when the game is over"
-=======
-      "label":"Interaktionseinstellungen",
-      "description":"Mit diesen Einstellungen kannst du das Verhalten des Spiels anpassen.",
-      "fields":[
-        {
-          "label":"Positioniere die Karten in einem Quadrat.",
-          "description":"Es wird versucht, die Anzahl der Zeilen und Spalten passend zu den Karten einzustellen. Danach werden die Karten passend skaliert."
-        },
-        {
-          "label":"Anzahl der zu nutzenden Karten",
-          "description":"Wird hier eine Zahl größer als 2 eingestellt, werden zufällig Karten aus der Kartenliste gezogen."
-        },
-        {
-          "label":"Füge einen Button hinzu, um das Spiel noch einmal neu zu starten zu können, wenn es vorbei ist."
->>>>>>> master
         }
       ]
     },
     {
-<<<<<<< HEAD
       "label": "Look and feel",
       "description": "Control the visuals of the game.",
       "fields": [
@@ -101,42 +62,25 @@
         {
           "label": "Card Back",
           "description": "Use a custom back for your cards."
-=======
-      "label":"Design-Aspekte",
-      "description":"Beeinflusse die Optik des Spiels",
-      "fields":[
-        {
-          "label":"Themenfarbe",
-          "description":"Wähle eine Farbe, um ein Theme für deine Karten zu erstellen.",
-          "default":"#909090",
-          "spectrum":{
-            
-          }
-        },
-        {
-          "label":"Kartenrückseite",
-          "description":"Nutze eine individuelle Rückseite für deine Karten."
->>>>>>> master
         }
       ]
     },
     {
-      "label":"Übersetzung",
-      "fields":[
+      "label": "Übersetzung",
+      "fields": [
         {
-          "label":"Text für die Anzahl der Züge",
-          "default":"Züge"
+          "label": "Text für die Anzahl der Züge",
+          "default": "Züge"
         },
         {
-          "label":"Text für die benötigte Zeit",
-          "default":"Benötigte Zeit"
+          "label": "Text für die benötigte Zeit",
+          "default": "Benötigte Zeit"
         },
         {
-          "label":"Text als Rückmeldung",
-          "default":"Gute Arbeit!"
+          "label": "Text als Rückmeldung",
+          "default": "Gute Arbeit!"
         },
         {
-<<<<<<< HEAD
           "label": "Try again button text",
           "default": "Reset"
         },
@@ -163,16 +107,8 @@
         {
           "label": "Card matched label",
           "default": "Match found."
-=======
-          "label":"Text des Wiederholen-Buttons",
-          "default":"Erneut versuchen?"
-        },
-        {
-          "label":"Beschriftung des \"Abbrechen\"-Buttons",
-          "default":"Schließen"
->>>>>>> master
         }
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/language/fr.json b/language/fr.json
index 9b93588..32ca798 100644
--- a/language/fr.json
+++ b/language/fr.json
@@ -1,7 +1,6 @@
 {
-  "semantics":[
+  "semantics": [
     {
-<<<<<<< HEAD
       "widgets": [
         {
           "label": "Default"
@@ -12,23 +11,10 @@
       "field": {
         "label": "Carte",
         "fields": [
-=======
-      "widgets":[
-        {
-          "label":"Default"
-        }
-      ],
-      "label":"Cartes",
-      "entity":"carte",
-      "field":{
-        "label":"Carte",
-        "fields":[
->>>>>>> master
           {
-            "label":"Image"
+            "label": "Image"
           },
           {
-<<<<<<< HEAD
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
@@ -43,20 +29,11 @@
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
-=======
-            "label":"Matching 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."
->>>>>>> master
           }
         ]
       }
     },
     {
-<<<<<<< HEAD
       "label": "Behavioural settings",
       "description": "These options will let you control how the game behaves.",
       "fields": [
@@ -70,26 +47,10 @@
         },
         {
           "label": "Add button for retrying when the game is over"
-=======
-      "label":"Behavioural settings",
-      "description":"These options will let you control how the game behaves.",
-      "fields":[
-        {
-          "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."
-        },
-        {
-          "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."
-        },
-        {
-          "label":"Add button for retrying when the game is over"
->>>>>>> master
         }
       ]
     },
     {
-<<<<<<< HEAD
       "label": "Look and feel",
       "description": "Control the visuals of the game.",
       "fields": [
@@ -101,42 +62,25 @@
         {
           "label": "Card Back",
           "description": "Use a custom back for your cards."
-=======
-      "label":"Look and feel",
-      "description":"Control the visuals of the game.",
-      "fields":[
-        {
-          "label":"Theme Color",
-          "description":"Choose a color to create a theme for your card game.",
-          "default":"#909090",
-          "spectrum":{
-            
-          }
-        },
-        {
-          "label":"Card Back",
-          "description":"Use a custom back for your cards."
->>>>>>> master
         }
       ]
     },
     {
-      "label":"Interface",
-      "fields":[
+      "label": "Interface",
+      "fields": [
         {
-          "label":"Texte pour le nombre de cartes retournées",
-          "default":"Cartes retournées :"
+          "label": "Texte pour le nombre de cartes retournées",
+          "default": "Cartes retournées :"
         },
         {
-          "label":"Texte pour le temps passé",
-          "default":"Temps écoulé :"
+          "label": "Texte pour le temps passé",
+          "default": "Temps écoulé :"
         },
         {
-          "label":"Texte de l'appréciation finale",
-          "default":"Bien joué !"
+          "label": "Texte de l'appréciation finale",
+          "default": "Bien joué !"
         },
         {
-<<<<<<< HEAD
           "label": "Try again button text",
           "default": "Reset"
         },
@@ -163,16 +107,8 @@
         {
           "label": "Card matched label",
           "default": "Match found."
-=======
-          "label":"Try again button text",
-          "default":"Try again?"
-        },
-        {
-          "label":"Close button label",
-          "default":"Close"
->>>>>>> master
         }
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/language/it.json b/language/it.json
index b8b9fec..6a2e4c3 100644
--- a/language/it.json
+++ b/language/it.json
@@ -1,7 +1,6 @@
 {
-  "semantics":[
+  "semantics": [
     {
-<<<<<<< HEAD
       "widgets": [
         {
           "label": "Default"
@@ -12,23 +11,10 @@
       "field": {
         "label": "Carta",
         "fields": [
-=======
-      "widgets":[
-        {
-          "label":"Default"
-        }
-      ],
-      "label":"Carte",
-      "entity":"carta",
-      "field":{
-        "label":"Carta",
-        "fields":[
->>>>>>> master
           {
-            "label":"Immagine"
+            "label": "Immagine"
           },
           {
-<<<<<<< HEAD
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
@@ -43,20 +29,11 @@
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
-=======
-            "label":"Matching 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."
->>>>>>> master
           }
         ]
       }
     },
     {
-<<<<<<< HEAD
       "label": "Behavioural settings",
       "description": "These options will let you control how the game behaves.",
       "fields": [
@@ -70,26 +47,10 @@
         },
         {
           "label": "Add button for retrying when the game is over"
-=======
-      "label":"Behavioural settings",
-      "description":"These options will let you control how the game behaves.",
-      "fields":[
-        {
-          "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."
-        },
-        {
-          "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."
-        },
-        {
-          "label":"Add button for retrying when the game is over"
->>>>>>> master
         }
       ]
     },
     {
-<<<<<<< HEAD
       "label": "Look and feel",
       "description": "Control the visuals of the game.",
       "fields": [
@@ -101,30 +62,13 @@
         {
           "label": "Card Back",
           "description": "Use a custom back for your cards."
-=======
-      "label":"Look and feel",
-      "description":"Control the visuals of the game.",
-      "fields":[
-        {
-          "label":"Theme Color",
-          "description":"Choose a color to create a theme for your card game.",
-          "default":"#909090",
-          "spectrum":{
-            
-          }
-        },
-        {
-          "label":"Card Back",
-          "description":"Use a custom back for your cards."
->>>>>>> master
         }
       ]
     },
     {
-      "label":"Localizzazione",
-      "fields":[
+      "label": "Localizzazione",
+      "fields": [
         {
-<<<<<<< HEAD
           "label": "Testo Gira carta",
           "default": "Card turns"
         },
@@ -163,28 +107,8 @@
         {
           "label": "Card matched label",
           "default": "Match found."
-=======
-          "label":"Testo Gira carta",
-          "default":"Card turns"
-        },
-        {
-          "label":"Testo Tempo trascorso",
-          "default":"Time spent"
-        },
-        {
-          "label":"Testo Feedback",
-          "default":"Good work!"
-        },
-        {
-          "label":"Try again button text",
-          "default":"Try again?"
-        },
-        {
-          "label":"Close button label",
-          "default":"Close"
->>>>>>> master
         }
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/language/nb.json b/language/nb.json
index ce5abb5..21218d7 100644
--- a/language/nb.json
+++ b/language/nb.json
@@ -1,7 +1,6 @@
 {
-  "semantics":[
+  "semantics": [
     {
-<<<<<<< HEAD
       "widgets": [
         {
           "label": "Default"
@@ -30,34 +29,11 @@
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."
-=======
-      "widgets":[
-        {
-          "label":"Default"
-        }
-      ],
-      "label":"Kort",
-      "entity":"kort",
-      "field":{
-        "label":"Kort",
-        "fields":[
-          {
-            "label":"Bilde"
-          },
-          {
-            "label":"Tilhørende bilde",
-            "description":"Et valgfritt bilde som brukes av kort nummer to istedenfor å bruke to kort med samme bilde."
-          },
-          {
-            "label":"Beskrivelse",
-            "description":"En valgfri kort tekst som spretter opp når kort-paret er funnet."
->>>>>>> master
           }
         ]
       }
     },
     {
-<<<<<<< HEAD
       "label": "Innstillinger for oppførsel",
       "description": "Disse instillingene lar deg bestemme hvordan spillet skal oppføre seg.",
       "fields": [
@@ -71,26 +47,10 @@
         },
         {
           "label": "Legg til knapp for å prøve på nytt når spillet er over"
-=======
-      "label":"Innstillinger for oppførsel",
-      "description":"Disse instillingene lar deg bestemme hvordan spillet skal oppføre seg.",
-      "fields":[
-        {
-          "label":"Plasser kortene i en firkant",
-          "description":"Vil forsøk å samsvare antall kolonner og rader når kortene legges ut. Etterpå vil kortene bli skalert til å passe beholderen."
-        },
-        {
-          "label":"Antall kort som skal brukes",
-          "description":"Ved å sette antallet høyere enn 2 vil spillet plukke tilfeldige kort fra listen over kort."
-        },
-        {
-          "label":"Legg til knapp for å prøve på nytt når spillet er over"
->>>>>>> master
         }
       ]
     },
     {
-<<<<<<< HEAD
       "label": "Tilpass utseende",
       "description": "Kontroller de visuelle aspektene ved spillet.",
       "fields": [
@@ -102,27 +62,10 @@
         {
           "label": "Kortbaksiden",
           "description": "Bruk en tilpasset kortbakside for kortene dine."
-=======
-      "label":"Tilpass utseende",
-      "description":"Kontroller de visuelle aspektene ved spillet.",
-      "fields":[
-        {
-          "label":"Temafarge",
-          "description":"Velg en farge for å skape et tema over kortspillet ditt.",
-          "default":"#909090",
-          "spectrum":{
-            
-          }
-        },
-        {
-          "label":"Kortbaksiden",
-          "description":"Bruk en tilpasset kortbakside for kortene dine."
->>>>>>> master
         }
       ]
     },
     {
-<<<<<<< HEAD
       "label": "Oversettelser",
       "fields": [
         {
@@ -164,31 +107,8 @@
         {
           "label": "Card matched label",
           "default": "Match found."
-=======
-      "label":"Oversettelser",
-      "fields":[
-        {
-          "label":"Etikett for antall vendte kort",
-          "default":"Kort vendt"
-        },
-        {
-          "label":"Etikett for tid brukt",
-          "default":"Tid brukt"
-        },
-        {
-          "label":"Tilbakemeldingstekst",
-          "default":"Godt jobbet!"
-        },
-        {
-          "label":"Prøv på nytt-tekst",
-          "default":"Prøv på nytt?"
-        },
-        {
-          "label":"Lukk knapp-merkelapp",
-          "default":"Lukk"
->>>>>>> master
         }
       ]
     }
   ]
-}
\ No newline at end of file
+}