From 6b6f5e92f18df5b0050c1d354f1306b684afa735 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Mon, 13 Feb 2017 12:35:10 +0100
Subject: [PATCH 01/32] Improve popup size and position

---
 memory-game.css |  6 +++++-
 memory-game.js  |  1 +
 popup.js        | 17 +++++++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/memory-game.css b/memory-game.css
index f491184..afe44ce 100644
--- a/memory-game.css
+++ b/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,11 @@
   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;
+}
diff --git a/memory-game.js b/memory-game.js
index 5165c1c..e3d8794 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -268,6 +268,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…
     };
 
diff --git a/popup.js b/popup.js
index 44a12de..6ef14b9 100644
--- a/popup.js
+++ b/popup.js
@@ -39,6 +39,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);

From 0bc76c6ce8855f57c71def57637d2ab94163990b Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Mon, 13 Feb 2017 14:42:34 +0100
Subject: [PATCH 02/32] Add support for try again

---
 card.js         |  19 +++++++-
 counter.js      |  18 +++++++-
 library.json    |   9 ++--
 memory-game.css |  14 ++++++
 memory-game.js  | 117 ++++++++++++++++++++++++++++++++++++++----------
 popup.js        |   1 +
 timer.js        |  50 +++++++++++++++++++++
 7 files changed, 200 insertions(+), 28 deletions(-)
 create mode 100644 timer.js

diff --git a/card.js b/card.js
index 58bfcfb..9b1aa90 100644
--- a/card.js
+++ b/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
diff --git a/counter.js b/counter.js
index 39343c8..d0e6c75 100644
--- a/counter.js
+++ b/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();
     };
   };
 
diff --git a/library.json b/library.json
index 411aab1..79cb421 100644
--- a/library.json
+++ b/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
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/memory-game.css b/memory-game.css
index afe44ce..cb3f9ef 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -198,3 +198,17 @@
 .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;
+}
diff --git a/memory-game.js b/memory-game.js
index e3d8794..d102067 100644
--- a/memory-game.js
+++ b/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
@@ -39,10 +41,10 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         removed += 2;
 
-        var finished = (removed === cards.length);
+        var isFinished = (removed === cards.length);
         var desc = card.getDescription();
 
-        if (finished) {
+        if (isFinished) {
            self.triggerXAPIScored(1, 1, 'completed');
         }
 
@@ -50,10 +52,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
           // 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 */ }
+            if (isFinished) {
+              // Game done
+              finished();
             }
             else {
               // Popup is closed, continue.
@@ -61,11 +62,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
             }
           });
         }
-        else if (finished) {
-          // Game has finished
-          timer.stop();
-          $feedback.addClass('h5p-show');
-          if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
+        else if (isFinished) {
+          // Game done
+          finished();
         }
       }
       else {
@@ -75,6 +74,88 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       }
     };
 
+    /**
+     * 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', '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;
+    };
+
     /**
      * Adds card to card list and set up a flip listener.
      *
@@ -191,17 +272,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
                         '<dd class="h5p-card-turns">0</dd>' +
                         '</dl>').appendTo($container);
 
-        timer = new H5P.Timer(100);
-        timer.notify('every_tenth_second', function () {
-          var time = timer.getTime();
-          var minutes = H5P.Timer.extractTimeElement(time, 'minutes');
-          var seconds = H5P.Timer.extractTimeElement(time, 'seconds') % 60;
-          if (seconds < 10) {
-            seconds = '0' + seconds;
-          }
-          $status.find('.h5p-time-spent').text(minutes + ':' + seconds);
-        });
-
+        timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
         popup = new MemoryGame.Popup($container);
 
diff --git a/popup.js b/popup.js
index 6ef14b9..bee3ceb 100644
--- a/popup.js
+++ b/popup.js
@@ -7,6 +7,7 @@
    * @param {H5P.jQuery} $container
    */
   MemoryGame.Popup = function ($container) {
+    /** @alias H5P.MemoryGame.Popup# */
     var self = this;
 
     var closed;
diff --git a/timer.js b/timer.js
new file mode 100644
index 0000000..339392e
--- /dev/null
+++ b/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);

From dff2c90df68863ae4e223cb744ee906c41d21c2a Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Mon, 13 Feb 2017 14:47:40 +0100
Subject: [PATCH 03/32] Localize try again button text

---
 language/ar.json | 6 ++++++
 language/de.json | 6 ++++++
 language/fr.json | 6 ++++++
 language/it.json | 6 ++++++
 language/nb.json | 6 ++++++
 memory-game.js   | 2 +-
 semantics.json   | 7 +++++++
 7 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/language/ar.json b/language/ar.json
index 6b999ef..7d27620 100644
--- a/language/ar.json
+++ b/language/ar.json
@@ -55,6 +55,12 @@
         },
         {
           "label": "نص الملاحظات"
+        },
+        {
+          "englishLabel": "Try again button text",
+          "label": "Try again button text",
+          "englishDefault": "Try again?",
+          "default": "Try again?"
         }
       ]
     }
diff --git a/language/de.json b/language/de.json
index e84760f..ae70b44 100644
--- a/language/de.json
+++ b/language/de.json
@@ -58,6 +58,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?"
         }
       ]
     }
diff --git a/language/fr.json b/language/fr.json
index aa3b53b..de49af8 100644
--- a/language/fr.json
+++ b/language/fr.json
@@ -58,6 +58,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?"
         }
       ]
     }
diff --git a/language/it.json b/language/it.json
index 5b58c96..ddac138 100644
--- a/language/it.json
+++ b/language/it.json
@@ -55,6 +55,12 @@
         },
         {
           "label": "Testo Feedback"
+        },
+        {
+          "englishLabel": "Try again button text",
+          "label": "Try again button text",
+          "englishDefault": "Try again?",
+          "default": "Try again?"
         }
       ]
     }
diff --git a/language/nb.json b/language/nb.json
index b90dd68..3c4b401 100644
--- a/language/nb.json
+++ b/language/nb.json
@@ -71,6 +71,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?"
         }
       ]
     }
diff --git a/memory-game.js b/memory-game.js
index d102067..b86cef0 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -83,7 +83,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       $feedback.addClass('h5p-show');
       if (parameters.behaviour && parameters.behaviour.allowRetry) {
         // Create retry button
-        var retryButton = createButton('reset', 'Try again?', function () {
+        var retryButton = createButton('reset', parameters.l10n.tryAgain, function () {
           // Trigger handler (action)
 
           resetGame();
diff --git a/semantics.json b/semantics.json
index 4faf9bf..40446aa 100644
--- a/semantics.json
+++ b/semantics.json
@@ -101,6 +101,13 @@
         "name": "feedback",
         "type": "text",
         "default": "Good work!"
+      },
+      {
+        "label": "Try again button text",
+        "importance": "low",
+        "name": "tryAgain",
+        "type": "text",
+        "default": "Try again?"
       }
     ]
   }

From 2a92e640ef95ec0992171dbbfeb3df4d96734c1c Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Mon, 13 Feb 2017 14:49:53 +0100
Subject: [PATCH 04/32] Add default string for try again button

---
 memory-game.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/memory-game.js b/memory-game.js
index b86cef0..ad48c20 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -83,7 +83,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       $feedback.addClass('h5p-show');
       if (parameters.behaviour && parameters.behaviour.allowRetry) {
         // Create retry button
-        var retryButton = createButton('reset', parameters.l10n.tryAgain, function () {
+        var retryButton = createButton('reset', parameters.l10n.tryAgain || 'Try again?', function () {
           // Trigger handler (action)
 
           resetGame();

From 83c278a0719a040bb49bb9629c71f4bb3ca7b87e Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Mon, 13 Feb 2017 15:41:06 +0100
Subject: [PATCH 05/32] Flip cards back on next click

---
 memory-game.js | 96 ++++++++++++++++++++++++++++++++------------------
 1 file changed, 62 insertions(+), 34 deletions(-)

diff --git a/memory-game.js b/memory-game.js
index ad48c20..2e2cd2f 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -23,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;
 
     /**
@@ -34,43 +36,51 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
      * @param {H5P.MemoryGame.Card} correct
      */
     var check = function (card, mate, correct) {
-      if (mate === correct) {
-        // Remove them from the game.
-        card.remove();
-        mate.remove();
+      if (mate !== correct) {
+        // Incorrect, must be scheduled for flipping back
+        flipBacks.push(card);
+        flipBacks.push(mate);
 
-        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();
+        // Wait for next click to flip them back…
+        if (numFlipped > 2) {
+          // or do it straight away
+          processFlipBacks();
         }
+        return;
       }
-      else {
-        // Flip them back
-        card.flipBack();
-        mate.flipBack();
+
+      // Remove them from the game.
+      card.remove();
+      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();
       }
     };
 
@@ -169,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.
@@ -179,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;
         }
@@ -190,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
      */

From d11a8cf6b4fd6aa88c4b54c4bbb5f8eabe7d8397 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Mon, 13 Feb 2017 15:54:06 +0100
Subject: [PATCH 06/32] Improve behavior option description

---
 language/ar.json | 6 ++++--
 language/de.json | 6 ++++--
 language/fr.json | 6 ++++--
 language/it.json | 6 ++++--
 language/nb.json | 6 ++++--
 semantics.json   | 3 ++-
 6 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/language/ar.json b/language/ar.json
index 7d27620..3ef63b3 100644
--- a/language/ar.json
+++ b/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",
-          "label": "Put the cards in a grid layout"
+          "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",
diff --git a/language/de.json b/language/de.json
index ae70b44..d776e7c 100644
--- a/language/de.json
+++ b/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",
-          "label": "Put the cards in a grid layout"
+          "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",
diff --git a/language/fr.json b/language/fr.json
index de49af8..41f9217 100644
--- a/language/fr.json
+++ b/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",
-          "label": "Put the cards in a grid layout"
+          "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",
diff --git a/language/it.json b/language/it.json
index ddac138..697442b 100644
--- a/language/it.json
+++ b/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",
-          "label": "Put the cards in a grid layout"
+          "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",
diff --git a/language/nb.json b/language/nb.json
index 3c4b401..5633b0d 100644
--- a/language/nb.json
+++ b/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",
-          "label": "Putt kortene i et rutenett"
+          "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",
diff --git a/semantics.json b/semantics.json
index 40446aa..b25e38c 100644
--- a/semantics.json
+++ b/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
       },

From 00c7273f1315a6b435749cb29d6d257160d38f35 Mon Sep 17 00:00:00 2001
From: Timothy Lim <timothylim23@gmail.com>
Date: Mon, 20 Feb 2017 05:25:18 -0500
Subject: [PATCH 07/32] Update Crowdin configuration file

---
 crowdin.yml | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 crowdin.yml

diff --git a/crowdin.yml b/crowdin.yml
new file mode 100644
index 0000000..3b940b2
--- /dev/null
+++ b/crowdin.yml
@@ -0,0 +1,3 @@
+files:
+  - source: /language/source/en.json
+    translation: /language/%two_letters_code%.json

From ec76d44a2b07d0a697411e945d346946ca4f4968 Mon Sep 17 00:00:00 2001
From: Timothy Lim <timothy_lim@outlook.com>
Date: Mon, 20 Feb 2017 11:26:21 +0100
Subject: [PATCH 08/32] Set up crowdin translation service

---
 language/source/en.json | 62 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 language/source/en.json

diff --git a/language/source/en.json b/language/source/en.json
new file mode 100644
index 0000000..823589f
--- /dev/null
+++ b/language/source/en.json
@@ -0,0 +1,62 @@
+{
+  "semantics": [
+    {
+      "label": "Cards",
+      "entity": "card",
+      "field": {
+        "label": "Card",
+        "fields": [
+          {
+            "label": "Image"
+          },
+          {
+            "label": "Matching Image",
+            "description": "An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "label": "Localization",
+      "fields": [
+        {
+          "label": "Card turns text",
+          "default": "Card turns"
+        },
+        {
+          "label": "Time spent text",
+          "default": "Time spent"
+        },
+        {
+          "label": "Feedback text",
+          "default": "Good work!"
+        },
+        {
+          "label": "Try again button text",
+          "default": "Try again?"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file

From 9347b17279bb16bcf74bc63d4b2668bffaf49c3c Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Thu, 4 May 2017 14:20:20 +0200
Subject: [PATCH 09/32] Add options for custom card back and theme color

---
 card.js                 | 86 +++++++++++++++++++++++++++++++++++++++--
 language/ar.json        | 14 +++++++
 language/de.json        | 14 +++++++
 language/fr.json        | 14 +++++++
 language/it.json        | 14 +++++++
 language/nb.json        | 20 ++++++++++
 language/source/en.json | 62 -----------------------------
 library.json            |  9 ++++-
 memory-game.css         | 33 +++++++++++++---
 memory-game.js          | 31 +++++++++++++--
 semantics.json          | 32 +++++++++++++++
 11 files changed, 255 insertions(+), 74 deletions(-)
 delete mode 100644 language/source/en.json

diff --git a/card.js b/card.js
index 9b1aa90..0343f60 100644
--- a/card.js
+++ b/card.js
@@ -8,8 +8,9 @@
    * @param {Object} image
    * @param {number} id
    * @param {string} [description]
+   * @param {Object} [styles]
    */
-  MemoryGame.Card = function (image, id, description) {
+  MemoryGame.Card = function (image, id, description, styles) {
     /** @alias H5P.MemoryGame.Card# */
     var self = this;
 
@@ -88,8 +89,8 @@
     self.appendTo = function ($container) {
       // TODO: Translate alt attr
       $card = $('<li class="h5p-memory-wrap"><div class="h5p-memory-card" role="button" tabindex="1">' +
-                  '<div class="h5p-front"></div>' +
-                  '<div class="h5p-back">' +
+                  '<div class="h5p-front"' + (styles && styles.front ? styles.front : '') + '>' + (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 + '"/>' +
                   '</div>' +
                 '</div></li>')
@@ -141,4 +142,83 @@
             params.match.path !== undefined);
   };
 
+  /**
+   * Determines the theme for how the cards should look
+   *
+   * @param {string} color The base color selected
+   * @param {number} invertShades Factor used to invert shades in case of bad contrast
+   */
+  MemoryGame.Card.determineStyles = function (color, invertShades, backImage) {
+    var styles =  {
+      front: '',
+      back: '',
+      backImage: !!backImage
+    };
+
+    // Create color theme
+    if (color) {
+      var frontColor = shade(color, 43.75 * invertShades);
+      var backColor = shade(color, 56.25 * invertShades);
+
+      styles.front += 'color:' + color + ';' +
+                     'background-color:' + frontColor + ';' +
+                     'border-color:' + frontColor +';';
+      styles.back += 'color:' + color + ';' +
+                    'background-color:' + backColor + ';' +
+                    'border-color:' + frontColor +';';
+    }
+
+    // Add back image for card
+    if (backImage) {
+      var backgroundImage = 'background-image:url(' + backImage + ')';
+
+      styles.front += backgroundImage;
+      styles.back += backgroundImage;
+    }
+
+    // Prep style attribute
+    if (styles.front) {
+      styles.front = ' style="' + styles.front + '"';
+    }
+    if (styles.back) {
+      styles.back = ' style="' + styles.back + '"';
+    }
+
+    return styles;
+  };
+
+  /**
+   * Convert hex color into shade depending on given percent
+   *
+   * @private
+   * @param {string} color
+   * @param {number} percent
+   * @return {string} new color
+   */
+  var shade = function (color, percent) {
+    var newColor = '#';
+
+    // Determine if we should lighten or darken
+    var max = (percent < 0 ? 0 : 255);
+
+    // Always stay positive
+    if (percent < 0) {
+      percent *= -1;
+    }
+    percent /= 100;
+
+    for (var i = 1; i < 6; i += 2) {
+      // Grab channel and convert from hex to dec
+      var channel = parseInt(color.substr(i, 2), 16);
+
+      // Calculate new shade and convert back to hex
+      channel = (Math.round((max - channel) * percent) + channel).toString(16);
+
+      // Make sure to always use two digits
+      newColor += (channel.length < 2 ? '0' + channel : channel);
+    }
+
+    return newColor;
+  };
+
 })(H5P.MemoryGame, H5P.EventDispatcher, H5P.jQuery);
diff --git a/language/ar.json b/language/ar.json
index 3ef63b3..8e9e0a9 100644
--- a/language/ar.json
+++ b/language/ar.json
@@ -46,6 +46,20 @@
         }
       ]
     },
+    {
+      "englishLabel": "Look and feel",
+      "englishDescription": "Control the visuals of the game.",
+      "fields": [
+        {
+          "englishLabel": "Theme Color",
+          "englishDescription": "Choose a color to create a theme for your card game."
+        },
+        {
+          "englishLabel": "Card Back",
+          "englishDescription": "Use a custom back for your cards."
+        }
+      ]
+    },
     {
       "label": "الأقلمة",
       "fields": [
diff --git a/language/de.json b/language/de.json
index d776e7c..2338693 100644
--- a/language/de.json
+++ b/language/de.json
@@ -46,6 +46,20 @@
         }
       ]
     },
+    {
+      "englishLabel": "Look and feel",
+      "englishDescription": "Control the visuals of the game.",
+      "fields": [
+        {
+          "englishLabel": "Theme Color",
+          "englishDescription": "Choose a color to create a theme for your card game."
+        },
+        {
+          "englishLabel": "Card Back",
+          "englishDescription": "Use a custom back for your cards."
+        }
+      ]
+    },
     {
       "label": "Übersetzung",
       "fields": [
diff --git a/language/fr.json b/language/fr.json
index 41f9217..619b64e 100644
--- a/language/fr.json
+++ b/language/fr.json
@@ -46,6 +46,20 @@
         }
       ]
     },
+    {
+      "englishLabel": "Look and feel",
+      "englishDescription": "Control the visuals of the game.",
+      "fields": [
+        {
+          "englishLabel": "Theme Color",
+          "englishDescription": "Choose a color to create a theme for your card game."
+        },
+        {
+          "englishLabel": "Card Back",
+          "englishDescription": "Use a custom back for your cards."
+        }
+      ]
+    },
     {
       "label": "Interface",
       "fields": [
diff --git a/language/it.json b/language/it.json
index 697442b..b0d1dbb 100644
--- a/language/it.json
+++ b/language/it.json
@@ -46,6 +46,20 @@
         }
       ]
     },
+    {
+      "englishLabel": "Look and feel",
+      "englishDescription": "Control the visuals of the game.",
+      "fields": [
+        {
+          "englishLabel": "Theme Color",
+          "englishDescription": "Choose a color to create a theme for your card game."
+        },
+        {
+          "englishLabel": "Card Back",
+          "englishDescription": "Use a custom back for your cards."
+        }
+      ]
+    },
     {
       "label": "Localizzazione",
       "fields": [
diff --git a/language/nb.json b/language/nb.json
index 5633b0d..38801d6 100644
--- a/language/nb.json
+++ b/language/nb.json
@@ -52,6 +52,26 @@
         }
       ]
     },
+    {
+      "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."
+        },
+        {
+          "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",
diff --git a/language/source/en.json b/language/source/en.json
deleted file mode 100644
index 823589f..0000000
--- a/language/source/en.json
+++ /dev/null
@@ -1,62 +0,0 @@
-{
-  "semantics": [
-    {
-      "label": "Cards",
-      "entity": "card",
-      "field": {
-        "label": "Card",
-        "fields": [
-          {
-            "label": "Image"
-          },
-          {
-            "label": "Matching Image",
-            "description": "An optional image to match against instead of using two cards with the same image."
-          },
-          {
-            "label": "Description",
-            "description": "An optional short text that will pop up once the two matching cards are found."
-          }
-        ]
-      }
-    },
-    {
-      "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"
-        }
-      ]
-    },
-    {
-      "label": "Localization",
-      "fields": [
-        {
-          "label": "Card turns text",
-          "default": "Card turns"
-        },
-        {
-          "label": "Time spent text",
-          "default": "Time spent"
-        },
-        {
-          "label": "Feedback text",
-          "default": "Good work!"
-        },
-        {
-          "label": "Try again button text",
-          "default": "Try again?"
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/library.json b/library.json
index bac360c..7aac140 100644
--- a/library.json
+++ b/library.json
@@ -36,5 +36,12 @@
       "majorVersion": 0,
       "minorVersion": 4
     }
+  ],
+  "editorDependencies": [
+    {
+      "machineName": "H5PEditor.ColorSelector",
+      "majorVersion": 1,
+      "minorVersion": 2
+    }
   ]
-}
\ No newline at end of file
+}
diff --git a/memory-game.css b/memory-game.css
index cb3f9ef..d1ef427 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -25,6 +25,7 @@
   display: inline-block !important;
   margin: auto !important;
   vertical-align: middle;
+  position: relative;
 }
 .h5p-memory-game .h5p-memory-wrap {
   float: left;
@@ -55,6 +56,7 @@
   width: 100%;
   height: 100%;
   background: #cfcfcf;
+  background-size: cover;
   border: 2px solid #d0d0d0;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -75,14 +77,30 @@
 .h5p-memory-game .h5p-memory-card .h5p-front {
   cursor: pointer;
   text-align: center;
+  color: #909090;
 }
-.h5p-memory-game .h5p-memory-card .h5p-front:hover {
-  background: #dfdfdf;
+.h5p-memory-game .h5p-memory-card .h5p-front:before,
+.h5p-memory-game .h5p-memory-card .h5p-back:before {
+  position: absolute;
+  display: block;
+  content: "";
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  opacity: 0;
 }
-.h5p-memory-game .h5p-memory-card .h5p-front:before {
+.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-front:before,
+.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-back:before {
+  background: #000;
+}
+
+.h5p-memory-game .h5p-memory-card .h5p-front:hover:before {
+  opacity: 0.4;
+}
+.h5p-memory-game .h5p-memory-card .h5p-front > span:before {
+  position: relative;
   content: "?";
   font-size: 3.75em;
-  color: #909090;
   line-height: 1.67em;
 }
 .h5p-memory-game .h5p-memory-card .h5p-front:after {
@@ -102,13 +120,16 @@
 .h5p-memory-game .h5p-memory-card .h5p-back {
   line-height: 5.9em;
   text-align: center;
-  background: #f0f0f0;
+  background-color: #f0f0f0;
   -webkit-transform: rotateY(-180deg);
   -moz-transform: rotateY(-180deg);
   transform: rotateY(-180deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   -ms-transform: scale(0,1.1);
 }
+.h5p-memory-game .h5p-memory-card .h5p-back:before {
+  opacity: 0.5;
+}
 .h5p-memory-game .h5p-memory-card.h5p-flipped .h5p-back {
   -webkit-transform: rotateY(0deg);
   -moz-transform: rotateY(0deg);
@@ -124,6 +145,8 @@
 }
 .h5p-memory-game .h5p-memory-card.h5p-matched {
   opacity: 0.3;
+}
+.h5p-memory-game .h5p-memory-card.h5p-matched img {
   filter: grayscale(100%);
 }
 
diff --git a/memory-game.js b/memory-game.js
index 2e2cd2f..a0fd4b9 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -247,21 +247,30 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       return cardsToUse;
     };
 
+    var cardStyles, invertShades;
+    if (parameters.lookNFeel) {
+      // If the contrast between the chosen color and white is too low we invert the shades to create good contrast
+      invertShades = (parameters.lookNFeel.themeColor &&
+                      getContrast(parameters.lookNFeel.themeColor) < 1.7 ? -1 : 1);
+      var backImage = (parameters.lookNFeel.cardBack ? H5P.getPath(parameters.lookNFeel.cardBack.path, id) : null);
+      cardStyles = MemoryGame.Card.determineStyles(parameters.lookNFeel.themeColor, invertShades, backImage);
+    }
+
     // Initialize cards.
     var cardsToUse = getCardsToUse();
     for (var i = 0; i < cardsToUse.length; i++) {
       var cardParams = cardsToUse[i];
       if (MemoryGame.Card.isValid(cardParams)) {
         // Create first card
-        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.description);
+        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.description, cardStyles);
 
         if (MemoryGame.Card.hasTwoImages(cardParams)) {
           // Use matching image for card two
-          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.description);
+          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.description, cardStyles);
         }
         else {
           // Add two cards with the same image
-          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.description);
+          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.description, cardStyles);
         }
 
         // Add cards to card list for shuffeling
@@ -280,6 +289,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       this.triggerXAPI('attempted');
       // TODO: Only create on first attach!
       $wrapper = $container.addClass('h5p-memory-game').html('');
+      if (invertShades === -1) {
+        $container.addClass('h5p-invert-shades');
+      }
 
       // Add cards to list
       var $list = $('<ul/>');
@@ -380,5 +392,18 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
   MemoryGame.prototype = Object.create(EventDispatcher.prototype);
   MemoryGame.prototype.constructor = MemoryGame;
 
+  /**
+   * Determine color contrast level compared to white(#fff)
+   *
+   * @private
+   * @param {string} color hex code
+   * @return {number} From 1 to Infinity.
+   */
+  var getContrast = function (color) {
+    return 255 / ((parseInt(color.substr(1, 2), 16) * 299 +
+                   parseInt(color.substr(3, 2), 16) * 587 +
+                   parseInt(color.substr(5, 2), 16) * 144) / 1000);
+  };
+
   return MemoryGame;
 })(H5P.EventDispatcher, H5P.jQuery);
diff --git a/semantics.json b/semantics.json
index b25e38c..ea1e290 100644
--- a/semantics.json
+++ b/semantics.json
@@ -75,6 +75,38 @@
       }
     ]
   },
+  {
+    "name": "lookNFeel",
+    "type": "group",
+    "label": "Look and feel",
+    "importance": "low",
+    "description": "Control the visuals of the game.",
+    "optional": true,
+    "fields": [
+      {
+        "name": "themeColor",
+        "type": "text",
+        "label": "Theme Color",
+        "importance": "low",
+        "description": "Choose a color to create a theme for your card game.",
+        "optional": true,
+        "default": "#909090",
+        "widget": "colorSelector",
+        "spectrum": {
+          "showInput": true
+        }
+      },
+      {
+        "name": "cardBack",
+        "type": "image",
+        "label": "Card Back",
+        "importance": "low",
+        "optional": true,
+        "description": "Use a custom back for your cards.",
+        "ratio": 1
+      }
+    ]
+  },
   {
     "label": "Localization",
     "importance": "low",

From c5ac5f876032e1372c23e073780df0ed0b837a14 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Mon, 8 May 2017 15:14:18 +0200
Subject: [PATCH 10/32] Improved description popup design

---
 card.js         | 15 +++++++++++----
 memory-game.css | 42 ++++++++++++++++++++++++++++++++++--------
 memory-game.js  |  9 +++++++--
 popup.js        | 20 +++++++++++---------
 4 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/card.js b/card.js
index 0343f60..f4ad3fe 100644
--- a/card.js
+++ b/card.js
@@ -152,6 +152,7 @@
     var styles =  {
       front: '',
       back: '',
+      popup: '',
       backImage: !!backImage
     };
 
@@ -161,11 +162,13 @@
       var backColor = shade(color, 56.25 * invertShades);
 
       styles.front += 'color:' + color + ';' +
-                     'background-color:' + frontColor + ';' +
-                     'border-color:' + frontColor +';';
+                      'background-color:' + frontColor + ';' +
+                      'border-color:' + frontColor +';';
       styles.back += 'color:' + color + ';' +
-                    'background-color:' + backColor + ';' +
-                    'border-color:' + frontColor +';';
+                     'background-color:' + backColor + ';' +
+                     'border-color:' + frontColor +';';
+      styles.popup += 'border-color:' + backColor + ';' +
+                      'background-color:' + shade(color, 90 * invertShades) + ';';
     }
 
     // Add back image for card
@@ -174,6 +177,7 @@
 
       styles.front += backgroundImage;
       styles.back += backgroundImage;
+      styles.popup += backgroundImage;
     }
 
     // Prep style attribute
@@ -183,6 +187,9 @@
     if (styles.back) {
       styles.back = ' style="' + styles.back + '"';
     }
+    if (styles.popup) {
+      styles.popup = ' style="' + styles.popup + '"';
+    }
 
     return styles;
   };
diff --git a/memory-game.css b/memory-game.css
index d1ef427..510444b 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -80,7 +80,8 @@
   color: #909090;
 }
 .h5p-memory-game .h5p-memory-card .h5p-front:before,
-.h5p-memory-game .h5p-memory-card .h5p-back:before {
+.h5p-memory-game .h5p-memory-card .h5p-back:before,
+.h5p-memory-game .h5p-memory-image:before {
   position: absolute;
   display: block;
   content: "";
@@ -90,7 +91,8 @@
   opacity: 0;
 }
 .h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-front:before,
-.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-back:before {
+.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-back:before,
+.h5p-memory-game.h5p-invert-shades .h5p-memory-image:before {
   background: #000;
 }
 
@@ -127,7 +129,8 @@
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   -ms-transform: scale(0,1.1);
 }
-.h5p-memory-game .h5p-memory-card .h5p-back:before {
+.h5p-memory-game .h5p-memory-card .h5p-back:before,
+.h5p-memory-game .h5p-memory-image:before {
   opacity: 0.5;
 }
 .h5p-memory-game .h5p-memory-card.h5p-flipped .h5p-back {
@@ -193,19 +196,31 @@
 .h5p-memory-game .h5p-memory-pop {
   display: none;
   background: #fff;
-  padding: 1em;
-  width: 20em;
+  padding: 0.25em;
+  width: 24em;
   max-width: 90%;
   position: absolute;
   top: 50%;
   left: 50%;
-  box-shadow: 0 0 1em #666;
+  box-shadow: 0 0 2em #666;
+  border-radius: 0.25em;
   -webkit-transform: translate(-50%,-50%);
   -moz-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
 }
+.h5p-memory-game .h5p-memory-top {
+  padding: 0em 1em;
+  background-color: #f0f0f0;
+  background-size: cover;
+  text-align: center;
+  margin-bottom: 1.75em;
+  border-bottom: 1px solid #d0d0d0;
+}
 .h5p-memory-game .h5p-memory-image {
-  float: left;
+  display: inline-block;
+  position: relative;
+  top: 1.5em;
+  left: -0.5em;
   border: 2px solid #d0d0d0;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -214,12 +229,23 @@
   width: 6.25em;
   height: 6.25em;
   text-align: center;
+  overflow: hidden;
+  box-shadow: 0 0 1em rgba(125,125,125,0.5);
+}
+.h5p-memory-game .h5p-memory-image:first-child {
+  top: 1em;
+  left: 0;
+}
+.h5p-memory-game .h5p-memory-two-images .h5p-memory-image:first-child {
+  left: 0.5em;
 }
 .h5p-memory-game .h5p-row-break {
   clear: left;
 }
 .h5p-memory-game .h5p-memory-desc {
-  margin-left: 7em;
+  padding: 1em;
+  margin-bottom: 0.5em;
+  text-align: center;
 }
 .h5p-memory-reset {
   position: absolute;
diff --git a/memory-game.js b/memory-game.js
index a0fd4b9..3933631 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -67,7 +67,11 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       if (desc !== undefined) {
         // Pause timer and show desciption.
         timer.pause();
-        popup.show(desc, card.getImage(), function () {
+        var imgs = [card.getImage()];
+        if (card.hasTwoImages) {
+          imgs.push(mate.getImage());
+        }
+        popup.show(desc, imgs, cardStyles.back, function () {
           if (isFinished) {
             // Game done
             finished();
@@ -267,6 +271,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         if (MemoryGame.Card.hasTwoImages(cardParams)) {
           // Use matching image for card two
           cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.description, cardStyles);
+          cardOne.hasTwoImages = cardTwo.hasTwoImages = true;
         }
         else {
           // Add two cards with the same image
@@ -314,7 +319,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
-        popup = new MemoryGame.Popup($container);
+        popup = new MemoryGame.Popup($container, cardStyles.popup);
 
         $container.click(function () {
           popup.close();
diff --git a/popup.js b/popup.js
index bee3ceb..5f07339 100644
--- a/popup.js
+++ b/popup.js
@@ -6,26 +6,29 @@
    * @class H5P.MemoryGame.Popup
    * @param {H5P.jQuery} $container
    */
-  MemoryGame.Popup = function ($container) {
+  MemoryGame.Popup = function ($container, styles) {
     /** @alias H5P.MemoryGame.Popup# */
     var self = this;
 
     var closed;
 
-    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-image"></div><div class="h5p-memory-desc"></div></div>').appendTo($container);
+    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + styles + '></div><div class="h5p-memory-desc"></div></div>').appendTo($container);
     var $desc = $popup.find('.h5p-memory-desc');
-    var $image = $popup.find('.h5p-memory-image');
+    var $top = $popup.find('.h5p-memory-top');
 
     /**
      * Show the popup.
      *
      * @param {string} desc
-     * @param {H5P.jQuery} $img
+     * @param {H5P.jQuery[]} imgs
      * @param {function} done
      */
-    self.show = function (desc, $img, done) {
+    self.show = function (desc, imgs, styles, done) {
       $desc.html(desc);
-      $img.appendTo($image.html(''));
+      $top.html('').toggleClass('h5p-memory-two-images', imgs.length > 1);
+      for (var i = 0; i < imgs.length; i++) {
+        $('<div class="h5p-memory-image"' + styles + '></div>').append(imgs[i]).appendTo($top);
+      }
       $popup.show();
       closed = done;
     };
@@ -47,15 +50,14 @@
      */
     self.setSize = function (fontSize) {
       // Set image size
-      $image[0].style.fontSize = fontSize + 'px';
+      $top[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.minWidth = (cardSize * 2.5) + 'px';
       $popup[0].style.minHeight = cardSize + 'px';
-      $desc[0].style.marginLeft = (cardSize + 20) + 'px';
     };
   };
 

From 5583307cb640480ce72a746e48fa4d5691b8a532 Mon Sep 17 00:00:00 2001
From: sabahuddin <sabahuddin.s@gmail.com>
Date: Wed, 14 Jun 2017 05:58:27 +0200
Subject: [PATCH 11/32] (Bosnian) bs-BA.json

Bosnian translation
---
 language/bs-BA.json | 87 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 language/bs-BA.json

diff --git a/language/bs-BA.json b/language/bs-BA.json
new file mode 100644
index 0000000..872b720
--- /dev/null
+++ b/language/bs-BA.json
@@ -0,0 +1,87 @@
+{
+  "semantics": [
+    {
+      "label": "Karte",
+      "entity": "karte",
+      "field": {
+        "label": "Karte",
+        "fields": [
+          {
+            "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."
+          }
+        ]
+      }
+    },
+    {
+      "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.",
+      "fields": [
+        {
+          "englishLabel": "Theme Color",
+          "englishDescription": "Choose a color to create a theme for your card game."
+        },
+        {
+          "englishLabel": "Poleđina karata",
+          "englishDescription": "Koristi standardnu pozadinu za karte."
+        }
+      ]
+    },
+    {
+      "label": "Prijevod",
+      "fields": [
+        {
+          "label": "Tekst kad se okrene karta ",
+          "default": "Okrenuta karta"
+        },
+        {
+          "label": "Tekst za provedeno vrijeme",
+          "default": "Provedeno vrijeme"
+        },
+        {
+          "label": "Feedback tekst",
+          "default": "BRAVO!"
+        },
+        {
+          "englishLabel": "Tekst na dugmetu pokušaj ponovo",
+          "label": "Tekst na dugmetu pokušaj ponovo",
+          "englishDefault": "Pokušaj ponovo?",
+          "default": "Pokušaj ponovo?"
+        }
+      ]
+    }
+  ]
+}

From fb65581a8c1ccf97e91781fc525c1a068820177a Mon Sep 17 00:00:00 2001
From: Timothy Lim <timothylim23@gmail.com>
Date: Fri, 16 Jun 2017 10:10:03 +0200
Subject: [PATCH 12/32] Rename bs-BA.json to bs.json

---
 language/{bs-BA.json => bs.json} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename language/{bs-BA.json => bs.json} (100%)

diff --git a/language/bs-BA.json b/language/bs.json
similarity index 100%
rename from language/bs-BA.json
rename to language/bs.json

From f99003cf4cf6f8ab8674d5f76dd7a96e1467b542 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 10:20:01 +0200
Subject: [PATCH 13/32] Fix image alignment in popup

---
 memory-game.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/memory-game.css b/memory-game.css
index 510444b..6a1ab7b 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -218,6 +218,7 @@
 }
 .h5p-memory-game .h5p-memory-image {
   display: inline-block;
+  line-height: 6;
   position: relative;
   top: 1.5em;
   left: -0.5em;

From ce33c50ab9004cdb4b3a60c671e2f2c079528475 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 10:34:34 +0200
Subject: [PATCH 14/32] Fix image alignment again

---
 memory-game.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/memory-game.css b/memory-game.css
index 6a1ab7b..b2aa5e3 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -218,7 +218,7 @@
 }
 .h5p-memory-game .h5p-memory-image {
   display: inline-block;
-  line-height: 6;
+  line-height: 5.9;
   position: relative;
   top: 1.5em;
   left: -0.5em;

From 2ac7ca6721cb04957e1d66a0bd59b9f0e2894985 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 10:37:55 +0200
Subject: [PATCH 15/32] Patch version bump

---
 library.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/library.json b/library.json
index 7aac140..52a3496 100644
--- a/library.json
+++ b/library.json
@@ -3,7 +3,7 @@
   "description": "See how many cards you can remember!",
   "majorVersion": 1,
   "minorVersion": 2,
-  "patchVersion": 2,
+  "patchVersion": 3,
   "runnable": 1,
   "author": "Joubel",
   "license": "MIT",

From 8289ff5f8cdfd4511227499d1c3c94866de2d411 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 10:58:13 +0200
Subject: [PATCH 16/32] Fix issues with old content

---
 card.js        | 2 +-
 memory-game.js | 4 ++--
 popup.js       | 5 +++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/card.js b/card.js
index f4ad3fe..9543016 100644
--- a/card.js
+++ b/card.js
@@ -89,7 +89,7 @@
     self.appendTo = function ($container) {
       // TODO: Translate alt attr
       $card = $('<li class="h5p-memory-wrap"><div class="h5p-memory-card" role="button" tabindex="1">' +
-                  '<div class="h5p-front"' + (styles && styles.front ? styles.front : '') + '>' + (styles.backImage ? '' : '<span></span>') + '</div>' +
+                  '<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 + '"/>' +
                   '</div>' +
diff --git a/memory-game.js b/memory-game.js
index 3933631..99b9a14 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -71,7 +71,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         if (card.hasTwoImages) {
           imgs.push(mate.getImage());
         }
-        popup.show(desc, imgs, cardStyles.back, function () {
+        popup.show(desc, imgs, cardStyles ? cardStyles.back : undefined, function () {
           if (isFinished) {
             // Game done
             finished();
@@ -319,7 +319,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
-        popup = new MemoryGame.Popup($container, cardStyles.popup);
+        popup = new MemoryGame.Popup($container, cardStyles ? cardStyles.popup : undefined);
 
         $container.click(function () {
           popup.close();
diff --git a/popup.js b/popup.js
index 5f07339..7bbcac6 100644
--- a/popup.js
+++ b/popup.js
@@ -5,6 +5,7 @@
    *
    * @class H5P.MemoryGame.Popup
    * @param {H5P.jQuery} $container
+   * @param {string} [styles]
    */
   MemoryGame.Popup = function ($container, styles) {
     /** @alias H5P.MemoryGame.Popup# */
@@ -12,7 +13,7 @@
 
     var closed;
 
-    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + styles + '></div><div class="h5p-memory-desc"></div></div>').appendTo($container);
+    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + (styles ? styles : '') + '></div><div class="h5p-memory-desc"></div></div>').appendTo($container);
     var $desc = $popup.find('.h5p-memory-desc');
     var $top = $popup.find('.h5p-memory-top');
 
@@ -27,7 +28,7 @@
       $desc.html(desc);
       $top.html('').toggleClass('h5p-memory-two-images', imgs.length > 1);
       for (var i = 0; i < imgs.length; i++) {
-        $('<div class="h5p-memory-image"' + styles + '></div>').append(imgs[i]).appendTo($top);
+        $('<div class="h5p-memory-image"' + (styles ? styles : '') + '></div>').append(imgs[i]).appendTo($top);
       }
       $popup.show();
       closed = done;

From 7dd0d60758e3a4ea68b91cd97675342d29d01392 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 11:25:04 +0200
Subject: [PATCH 17/32] Perfect image aligment

---
 memory-game.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/memory-game.css b/memory-game.css
index b2aa5e3..2015804 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -120,7 +120,7 @@
   background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
 }
 .h5p-memory-game .h5p-memory-card .h5p-back {
-  line-height: 5.9em;
+  line-height: 5.83em;
   text-align: center;
   background-color: #f0f0f0;
   -webkit-transform: rotateY(-180deg);
@@ -218,7 +218,7 @@
 }
 .h5p-memory-game .h5p-memory-image {
   display: inline-block;
-  line-height: 5.9;
+  line-height: 5.83em;
   position: relative;
   top: 1.5em;
   left: -0.5em;

From aa5cc002b398b4bba3b7ebdfa259964fd8b44500 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 11:52:30 +0200
Subject: [PATCH 18/32] Add close button to dialog

---
 language/ar.json |  8 +++++---
 language/bs.json |  8 ++++++--
 language/de.json |  8 +++++---
 language/fr.json |  8 +++++---
 language/it.json |  8 +++++---
 language/nb.json |  6 ++++++
 memory-game.css  | 20 ++++++++++++++++++++
 memory-game.js   |  2 +-
 popup.js         | 15 +++++++++++++--
 semantics.json   |  7 +++++++
 10 files changed, 73 insertions(+), 17 deletions(-)

diff --git a/language/ar.json b/language/ar.json
index 8e9e0a9..0f2a1fa 100644
--- a/language/ar.json
+++ b/language/ar.json
@@ -74,9 +74,11 @@
         },
         {
           "englishLabel": "Try again button text",
-          "label": "Try again button text",
-          "englishDefault": "Try again?",
-          "default": "Try again?"
+          "englishDefault": "Try again?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }
diff --git a/language/bs.json b/language/bs.json
index 872b720..c97e6ca 100644
--- a/language/bs.json
+++ b/language/bs.json
@@ -76,10 +76,14 @@
           "default": "BRAVO!"
         },
         {
-          "englishLabel": "Tekst na dugmetu pokušaj ponovo",
+          "englishLabel": "Try again button text",
           "label": "Tekst na dugmetu pokušaj ponovo",
-          "englishDefault": "Pokušaj ponovo?",
+          "englishDefault": "Try again?",
           "default": "Pokušaj ponovo?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }
diff --git a/language/de.json b/language/de.json
index 2338693..9abf453 100644
--- a/language/de.json
+++ b/language/de.json
@@ -77,9 +77,11 @@
         },
         {
           "englishLabel": "Try again button text",
-          "label": "Try again button text",
-          "englishDefault": "Try again?",
-          "default": "Try again?"
+          "englishDefault": "Try again?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }
diff --git a/language/fr.json b/language/fr.json
index 619b64e..204a6d9 100644
--- a/language/fr.json
+++ b/language/fr.json
@@ -77,9 +77,11 @@
         },
         {
           "englishLabel": "Try again button text",
-          "label": "Try again button text",
-          "englishDefault": "Try again?",
-          "default": "Try again?"
+          "englishDefault": "Try again?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }
diff --git a/language/it.json b/language/it.json
index b0d1dbb..1137a03 100644
--- a/language/it.json
+++ b/language/it.json
@@ -74,9 +74,11 @@
         },
         {
           "englishLabel": "Try again button text",
-          "label": "Try again button text",
-          "englishDefault": "Try again?",
-          "default": "Try again?"
+          "englishDefault": "Try again?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }
diff --git a/language/nb.json b/language/nb.json
index 38801d6..53e6ccc 100644
--- a/language/nb.json
+++ b/language/nb.json
@@ -99,6 +99,12 @@
           "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"
         }
       ]
     }
diff --git a/memory-game.css b/memory-game.css
index 2015804..e4140ed 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -248,6 +248,26 @@
   margin-bottom: 0.5em;
   text-align: center;
 }
+.h5p-memory-game .h5p-memory-close {
+  cursor: pointer;
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  font-size: 2em;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  color: #888;
+}
+.h5p-memory-game .h5p-memory-close:before {
+  content: "\00D7"
+}
+.h5p-memory-game .h5p-memory-close:hover {
+  color: #666;
+}
+.h5p-memory-game .h5p-memory-close:focus {
+  outline: 2px dashed pink;
+}
 .h5p-memory-reset {
   position: absolute;
   top: 50%;
diff --git a/memory-game.js b/memory-game.js
index 99b9a14..4ace9de 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -319,7 +319,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
-        popup = new MemoryGame.Popup($container, cardStyles ? cardStyles.popup : undefined);
+        popup = new MemoryGame.Popup($container, cardStyles ? cardStyles.popup : undefined, parameters.l10n);
 
         $container.click(function () {
           popup.close();
diff --git a/popup.js b/popup.js
index 7bbcac6..ccebb6b 100644
--- a/popup.js
+++ b/popup.js
@@ -6,17 +6,28 @@
    * @class H5P.MemoryGame.Popup
    * @param {H5P.jQuery} $container
    * @param {string} [styles]
+   * @param {Object.<string, string>} l10n
    */
-  MemoryGame.Popup = function ($container, styles) {
+  MemoryGame.Popup = function ($container, styles, l10n) {
     /** @alias H5P.MemoryGame.Popup# */
     var self = this;
 
     var closed;
 
-    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + (styles ? styles : '') + '></div><div class="h5p-memory-desc"></div></div>').appendTo($container);
+    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + (styles ? styles : '') + '></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 $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();
+    }).on('keypress', function (event) {
+      if (event.which === 13 || event.which === 32) {
+        self.close();
+        event.preventDefault();
+      }
+    });
+
     /**
      * Show the popup.
      *
diff --git a/semantics.json b/semantics.json
index ea1e290..67f7223 100644
--- a/semantics.json
+++ b/semantics.json
@@ -141,6 +141,13 @@
         "name": "tryAgain",
         "type": "text",
         "default": "Try again?"
+      },
+      {
+        "label": "Close button label",
+        "importance": "low",
+        "name": "closeLabel",
+        "type": "text",
+        "default": "Close"
       }
     ]
   }

From 11bc5fa2a2befba4b01d01815df52eded26993c9 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 13:17:49 +0200
Subject: [PATCH 19/32] Add duration, completion and success to xAPI completed
 event

---
 memory-game.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/memory-game.js b/memory-game.js
index 4ace9de..9a0e2da 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -60,10 +60,6 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       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();
@@ -95,6 +91,13 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
     var finished = function () {
       timer.stop();
       $feedback.addClass('h5p-show');
+
+      // Create and trigger xAPI event 'completed'
+      var completedEvent = self.createXAPIEventTemplate('completed');
+      completedEvent.setScoredResult(1, 1, self, true, true);
+      completedEvent.data.statement.result.duration = 'PT' + (Math.round(timer.getTime() / 10) / 100) + 'S';
+      self.trigger(completedEvent);
+
       if (parameters.behaviour && parameters.behaviour.allowRetry) {
         // Create retry button
         var retryButton = createButton('reset', parameters.l10n.tryAgain || 'Try again?', function () {

From 1ca7cc70f474dbd470641e719cf962e53f67868e Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 13:28:15 +0200
Subject: [PATCH 20/32] Remove theme styling of popup

---
 card.js        | 7 -------
 memory-game.js | 2 +-
 popup.js       | 5 ++---
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/card.js b/card.js
index 9543016..660a9bf 100644
--- a/card.js
+++ b/card.js
@@ -152,7 +152,6 @@
     var styles =  {
       front: '',
       back: '',
-      popup: '',
       backImage: !!backImage
     };
 
@@ -167,8 +166,6 @@
       styles.back += 'color:' + color + ';' +
                      'background-color:' + backColor + ';' +
                      'border-color:' + frontColor +';';
-      styles.popup += 'border-color:' + backColor + ';' +
-                      'background-color:' + shade(color, 90 * invertShades) + ';';
     }
 
     // Add back image for card
@@ -177,7 +174,6 @@
 
       styles.front += backgroundImage;
       styles.back += backgroundImage;
-      styles.popup += backgroundImage;
     }
 
     // Prep style attribute
@@ -187,9 +183,6 @@
     if (styles.back) {
       styles.back = ' style="' + styles.back + '"';
     }
-    if (styles.popup) {
-      styles.popup = ' style="' + styles.popup + '"';
-    }
 
     return styles;
   };
diff --git a/memory-game.js b/memory-game.js
index 9a0e2da..b60a575 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -322,7 +322,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
-        popup = new MemoryGame.Popup($container, cardStyles ? cardStyles.popup : undefined, parameters.l10n);
+        popup = new MemoryGame.Popup($container, parameters.l10n);
 
         $container.click(function () {
           popup.close();
diff --git a/popup.js b/popup.js
index ccebb6b..24b2b46 100644
--- a/popup.js
+++ b/popup.js
@@ -5,16 +5,15 @@
    *
    * @class H5P.MemoryGame.Popup
    * @param {H5P.jQuery} $container
-   * @param {string} [styles]
    * @param {Object.<string, string>} l10n
    */
-  MemoryGame.Popup = function ($container, styles, l10n) {
+  MemoryGame.Popup = function ($container, l10n) {
     /** @alias H5P.MemoryGame.Popup# */
     var self = this;
 
     var closed;
 
-    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + (styles ? styles : '') + '></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"><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 $desc = $popup.find('.h5p-memory-desc');
     var $top = $popup.find('.h5p-memory-top');
 

From 857b5069b68dfc9f8a041d68ae03ffc85e8614fe Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 13:42:14 +0200
Subject: [PATCH 21/32] Make sure card back covers popup image

---
 memory-game.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/memory-game.css b/memory-game.css
index e4140ed..da2a72b 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -232,6 +232,7 @@
   text-align: center;
   overflow: hidden;
   box-shadow: 0 0 1em rgba(125,125,125,0.5);
+  background-size: cover;
 }
 .h5p-memory-game .h5p-memory-image:first-child {
   top: 1em;

From 746e599208ddf932753dda19773e0e0e3934a637 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 14:25:31 +0200
Subject: [PATCH 22/32] Add vertical tabs + new styling for retry button +
 effects

---
 library.json    | 10 ++++++++++
 memory-game.css | 35 +++++++++++++++++++++++++++++------
 memory-game.js  | 18 +++++++++++++-----
 semantics.json  |  6 ++++++
 4 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/library.json b/library.json
index 52a3496..a396e92 100644
--- a/library.json
+++ b/library.json
@@ -35,6 +35,11 @@
       "machineName": "H5P.Timer",
       "majorVersion": 0,
       "minorVersion": 4
+    },
+    {
+      "machineName": "FontAwesome",
+      "majorVersion": 4,
+      "minorVersion": 5
     }
   ],
   "editorDependencies": [
@@ -42,6 +47,11 @@
       "machineName": "H5PEditor.ColorSelector",
       "majorVersion": 1,
       "minorVersion": 2
+    },
+    {
+      "machineName": "H5PEditor.VerticalTabs",
+      "majorVersion": 1,
+      "minorVersion": 3
     }
   ]
 }
diff --git a/memory-game.css b/memory-game.css
index da2a72b..199a07b 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -273,13 +273,36 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%) scale(1) rotate(0);
   cursor: pointer;
-  font-style: italic;
-  text-shadow: 0 0 0.5em white;
-  padding: 0.125em 0.25em;
-  line-height: 1;
+  line-height: 1.2;
+  padding: 0.5em 1.25em;
+  border-radius: 2em;
+  background: #1a73d9;
+  color: #ffffff;
+  box-shadow: 0 0.5em 1em #999;
+  opacity: 1;
+  transition: box-shadow 200ms linear, margin 200ms linear, transform 300ms ease-out, opacity 300ms ease-out;
+}
+.h5p-memory-reset:before {
+  font-family: 'H5PFontAwesome4';
+  content: "\f01e";
+  margin-right: 0.5em;
+}
+.h5p-memory-reset:hover,
+.h5p-memory-reset:focus {
+  background: #1356a3;
+  box-shadow: 0 1em 1.5em #999;
+  margin-top: -0.2em;
 }
 .h5p-memory-reset:focus {
-  outline: dashed pink;
+  outline: 2px dashed pink;
+}
+.h5p-memory-transin {
+  transform: translate(-50%,-50%) scale(0) rotate(180deg);
+  opacity: 0;
+}
+.h5p-memory-transout {
+  transform: translate(-50%,-450%) scale(0) rotate(360deg);
+  opacity: 0;
 }
diff --git a/memory-game.js b/memory-game.js
index b60a575..976d8d0 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -100,17 +100,25 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
       if (parameters.behaviour && parameters.behaviour.allowRetry) {
         // Create retry button
-        var retryButton = createButton('reset', parameters.l10n.tryAgain || 'Try again?', function () {
+        var retryButton = createButton('reset', parameters.l10n.tryAgain || 'Reset', function () {
           // Trigger handler (action)
 
-          resetGame();
+          retryButton.classList.add('h5p-memory-transout');
+          setTimeout(function () {
+            // Remove button on nextTick to get transition effect
+            $wrapper[0].removeChild(retryButton);
+          }, 300);
 
-          // Remove button from DOM
-          $wrapper[0].removeChild(this);
+          resetGame();
         });
+        retryButton.classList.add('h5p-memory-transin');
+        setTimeout(function () {
+          // Remove class on nextTick to get transition effect
+          retryButton.classList.remove('h5p-memory-transin');
+        }, 0);
 
         // Same size as cards
-        retryButton.style.fontSize = $wrapper.children('ul')[0].style.fontSize;
+        retryButton.style.fontSize = (parseFloat($wrapper.children('ul')[0].style.fontSize) * 0.5) + 'px';
 
         $wrapper[0].appendChild(retryButton); // Add to DOM
       }
diff --git a/semantics.json b/semantics.json
index 67f7223..fd274e2 100644
--- a/semantics.json
+++ b/semantics.json
@@ -2,6 +2,12 @@
   {
     "name": "cards",
     "type": "list",
+    "widgets": [
+      {
+        "name": "VerticalTabs",
+        "label": "Default"
+      }
+    ],
     "label": "Cards",
     "importance": "high",
     "entity": "card",

From aead8728d8b1fc1a2b6c4a82d3e01c379898eb53 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 20 Jun 2017 14:29:23 +0200
Subject: [PATCH 23/32] Adjust button size

---
 memory-game.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/memory-game.js b/memory-game.js
index 976d8d0..a0029f6 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -118,7 +118,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         }, 0);
 
         // Same size as cards
-        retryButton.style.fontSize = (parseFloat($wrapper.children('ul')[0].style.fontSize) * 0.5) + 'px';
+        retryButton.style.fontSize = (parseFloat($wrapper.children('ul')[0].style.fontSize) * 0.75) + 'px';
 
         $wrapper[0].appendChild(retryButton); // Add to DOM
       }

From 4cedecf944ba15879ddd9f147f2c550c8a35314a Mon Sep 17 00:00:00 2001
From: Timothy Lim <timothylim23@gmail.com>
Date: Fri, 23 Jun 2017 14:13:15 +0200
Subject: [PATCH 24/32] HFP-1210 Set up Crowdin

---
 crowdin.yml       |  2 +-
 language/.en.json | 87 +++++++++++++++++++++++++++++++++++++++++++++++
 language/ar.json  | 33 +++---------------
 language/bs.json  | 30 +++-------------
 language/de.json  | 33 +++---------------
 language/fr.json  | 33 +++---------------
 language/it.json  | 33 +++---------------
 language/nb.json  | 34 +-----------------
 8 files changed, 113 insertions(+), 172 deletions(-)
 create mode 100644 language/.en.json

diff --git a/crowdin.yml b/crowdin.yml
index 3b940b2..48edea1 100644
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -1,3 +1,3 @@
 files:
-  - source: /language/source/en.json
+  - source: /language/.en.json
     translation: /language/%two_letters_code%.json
diff --git a/language/.en.json b/language/.en.json
new file mode 100644
index 0000000..8f501f2
--- /dev/null
+++ b/language/.en.json
@@ -0,0 +1,87 @@
+{
+  "semantics": [
+    {
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
+      "label": "Cards",
+      "entity": "card",
+      "field": {
+        "label": "Card",
+        "fields": [
+          {
+            "label": "Image"
+          },
+          {
+            "label": "Matching Image",
+            "description": "An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label": "Localization",
+      "fields": [
+        {
+          "label": "Card turns text",
+          "default": "Card turns"
+        },
+        {
+          "label": "Time spent text",
+          "default": "Time spent"
+        },
+        {
+          "label": "Feedback text",
+          "default": "Good work!"
+        },
+        {
+          "label": "Try again button text",
+          "default": "Try again?"
+        },
+        {
+          "label": "Close button label",
+          "default": "Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/ar.json b/language/ar.json
index 0f2a1fa..a61cb4e 100644
--- a/language/ar.json
+++ b/language/ar.json
@@ -10,9 +10,7 @@
             "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."
           },
           {
@@ -23,41 +21,26 @@
       }
     },
     {
-      "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.",
       "fields": [
-        {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
-        },
-        {
-          "englishLabel": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
-        }
+        {},
+        {}
       ]
     },
     {
@@ -72,15 +55,9 @@
         {
           "label": "نص الملاحظات"
         },
-        {
-          "englishLabel": "Try again button text",
-          "englishDefault": "Try again?"
-        },
-        {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
-        }
+        {},
+        {}
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/bs.json b/language/bs.json
index c97e6ca..9a6c016 100644
--- a/language/bs.json
+++ b/language/bs.json
@@ -10,9 +10,7 @@
             "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."
           },
           {
@@ -23,41 +21,26 @@
       }
     },
     {
-      "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.",
       "fields": [
-        {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
-        },
-        {
-          "englishLabel": "Poleđina karata",
-          "englishDescription": "Koristi standardnu pozadinu za karte."
-        }
+        {},
+        {}
       ]
     },
     {
@@ -76,16 +59,11 @@
           "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"
-        }
+        {}
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/de.json b/language/de.json
index 9abf453..533d1d3 100644
--- a/language/de.json
+++ b/language/de.json
@@ -10,9 +10,7 @@
             "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."
           },
           {
@@ -23,41 +21,26 @@
       }
     },
     {
-      "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.",
       "fields": [
-        {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
-        },
-        {
-          "englishLabel": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
-        }
+        {},
+        {}
       ]
     },
     {
@@ -75,15 +58,9 @@
           "label": "Text als Rückmeldung",
           "default": "Gute Arbeit!"
         },
-        {
-          "englishLabel": "Try again button text",
-          "englishDefault": "Try again?"
-        },
-        {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
-        }
+        {},
+        {}
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/fr.json b/language/fr.json
index 204a6d9..22313fc 100644
--- a/language/fr.json
+++ b/language/fr.json
@@ -10,9 +10,7 @@
             "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."
           },
           {
@@ -23,41 +21,26 @@
       }
     },
     {
-      "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.",
       "fields": [
-        {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
-        },
-        {
-          "englishLabel": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
-        }
+        {},
+        {}
       ]
     },
     {
@@ -75,15 +58,9 @@
           "label": "Texte de l'appréciation finale",
           "default": "Bien joué !"
         },
-        {
-          "englishLabel": "Try again button text",
-          "englishDefault": "Try again?"
-        },
-        {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
-        }
+        {},
+        {}
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/it.json b/language/it.json
index 1137a03..1484e25 100644
--- a/language/it.json
+++ b/language/it.json
@@ -10,9 +10,7 @@
             "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."
           },
           {
@@ -23,41 +21,26 @@
       }
     },
     {
-      "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.",
       "fields": [
-        {
-          "englishLabel": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
-        },
-        {
-          "englishLabel": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
-        }
+        {},
+        {}
       ]
     },
     {
@@ -72,15 +55,9 @@
         {
           "label": "Testo Feedback"
         },
-        {
-          "englishLabel": "Try again button text",
-          "englishDefault": "Try again?"
-        },
-        {
-          "englishLabel": "Close button label",
-          "englishDefault": "Close"
-        }
+        {},
+        {}
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/language/nb.json b/language/nb.json
index 53e6ccc..5905bb6 100644
--- a/language/nb.json
+++ b/language/nb.json
@@ -1,112 +1,80 @@
 {
   "semantics": [
     {
-      "englishLabel": "Cards",
       "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."
           }
         ]
       }
     },
     {
-      "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."
         },
         {
-          "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"
         }
       ]
     }
   ]
-}
+}
\ No newline at end of file

From f08b18bbaf8b74406e5f8d57a70cd454ca5bba89 Mon Sep 17 00:00:00 2001
From: Timothy Lim <timothylim23@gmail.com>
Date: Fri, 23 Jun 2017 14:20:33 +0200
Subject: [PATCH 25/32] HFP-1210 Update english source file

---
 language/.en.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/language/.en.json b/language/.en.json
index 8f501f2..a5ecf4d 100644
--- a/language/.en.json
+++ b/language/.en.json
@@ -49,7 +49,6 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
-          "default": "#909090",
           "spectrum": {}
         },
         {
@@ -84,4 +83,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}

From 26cccd6530652b183e5412a1dcc6dda6010e9d84 Mon Sep 17 00:00:00 2001
From: Timothy Lim <timothylim23@gmail.com>
Date: Mon, 26 Jun 2017 14:29:52 +0200
Subject: [PATCH 26/32] HFP-1210 Update .en.json

---
 language/.en.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/language/.en.json b/language/.en.json
index a5ecf4d..8f501f2 100644
--- a/language/.en.json
+++ b/language/.en.json
@@ -49,6 +49,7 @@
         {
           "label": "Theme Color",
           "description": "Choose a color to create a theme for your card game.",
+          "default": "#909090",
           "spectrum": {}
         },
         {
@@ -83,4 +84,4 @@
       ]
     }
   ]
-}
+}
\ No newline at end of file

From 23c477c1f00ef9afaf847a4a3b953f5c0f760f4e Mon Sep 17 00:00:00 2001
From: Paal Joergensen <pal.jorgensen@gmail.com>
Date: Fri, 4 Aug 2017 08:40:47 +0200
Subject: [PATCH 27/32] Preparing release - updating version

---
 library.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/library.json b/library.json
index a396e92..caabf32 100644
--- a/library.json
+++ b/library.json
@@ -3,7 +3,7 @@
   "description": "See how many cards you can remember!",
   "majorVersion": 1,
   "minorVersion": 2,
-  "patchVersion": 3,
+  "patchVersion": 4,
   "runnable": 1,
   "author": "Joubel",
   "license": "MIT",
@@ -54,4 +54,4 @@
       "minorVersion": 3
     }
   ]
-}
+}
\ No newline at end of file

From fcee67e2f82bf94a5be90a9da6a534cfa0bb686a Mon Sep 17 00:00:00 2001
From: Paal Joergensen <pal.jorgensen@gmail.com>
Date: Mon, 7 Aug 2017 13:32:20 +0200
Subject: [PATCH 28/32] Made reset button's text displayed on one line

---
 memory-game.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/memory-game.css b/memory-game.css
index 199a07b..5808ffb 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -276,6 +276,7 @@
   transform: translate(-50%,-50%) scale(1) rotate(0);
   cursor: pointer;
   line-height: 1.2;
+  white-space: nowrap;
   padding: 0.5em 1.25em;
   border-radius: 2em;
   background: #1a73d9;

From 252bae0220203e52f4edf405323f0a03f3b8c86a Mon Sep 17 00:00:00 2001
From: Paal Joergensen <pal.jorgensen@gmail.com>
Date: Mon, 7 Aug 2017 13:38:24 +0200
Subject: [PATCH 29/32] HFP-1343 Using iframe as embed type

---
 library.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/library.json b/library.json
index caabf32..a16a0dd 100644
--- a/library.json
+++ b/library.json
@@ -8,6 +8,7 @@
   "author": "Joubel",
   "license": "MIT",
   "machineName": "H5P.MemoryGame",
+  "embedTypes": ["iframe"],
   "preloadedCss": [
     {
       "path": "memory-game.css"
@@ -54,4 +55,4 @@
       "minorVersion": 3
     }
   ]
-}
\ No newline at end of file
+}

From 3fa7df69fb4074dd55e16cc48aed627d95ed7a13 Mon Sep 17 00:00:00 2001
From: timothyylim <timothylim23@gmail.com>
Date: Mon, 21 Aug 2017 14:01:10 +0200
Subject: [PATCH 30/32] Merge translations

---
 language/af.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/ar.json | 84 +++++++++++++++++++++++++++++----------------
 language/bs.json | 86 ++++++++++++++++++++++++++++------------------
 language/ca.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/cs.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/da.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/de.json | 87 +++++++++++++++++++++++++++++-----------------
 language/el.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/es.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/et.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/fi.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/fr.json | 87 +++++++++++++++++++++++++++++-----------------
 language/he.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/hu.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/it.json | 84 +++++++++++++++++++++++++++++----------------
 language/ja.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/ko.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/nb.json | 85 ++++++++++++++++++++++++---------------------
 language/nl.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/nn.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/pl.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/pt.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/ro.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/ru.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/sr.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/sv.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/tr.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 language/vi.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++++
 28 files changed, 2278 insertions(+), 193 deletions(-)
 create mode 100644 language/af.json
 create mode 100644 language/ca.json
 create mode 100644 language/cs.json
 create mode 100644 language/da.json
 create mode 100644 language/el.json
 create mode 100644 language/es.json
 create mode 100644 language/et.json
 create mode 100644 language/fi.json
 create mode 100644 language/he.json
 create mode 100644 language/hu.json
 create mode 100644 language/ja.json
 create mode 100644 language/ko.json
 create mode 100644 language/nl.json
 create mode 100644 language/nn.json
 create mode 100644 language/pl.json
 create mode 100644 language/pt.json
 create mode 100644 language/ro.json
 create mode 100644 language/ru.json
 create mode 100644 language/sr.json
 create mode 100644 language/sv.json
 create mode 100644 language/tr.json
 create mode 100644 language/vi.json

diff --git a/language/af.json b/language/af.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/af.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/ar.json b/language/ar.json
index a61cb4e..2b1b46e 100644
--- a/language/ar.json
+++ b/language/ar.json
@@ -1,62 +1,88 @@
 {
-  "semantics": [
+  "semantics":[
     {
-      "label": "البطاقات",
-      "entity": "بطاقة",
-      "field": {
-        "label": "البطاقة",
-        "fields": [
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"البطاقات",
+      "entity":"بطاقة",
+      "field":{
+        "label":"البطاقة",
+        "fields":[
           {
-            "label": "الصورة"
+            "label":"الصورة"
           },
           {
-            "label": "Matching Image",
-            "description": "An optional image to match against instead of using two cards with the same image."
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
           },
           {
-            "label": "الوصف",
-            "description": "نص قصير يتم عرضه مرة واحدة علي اثنين من البطاقات متساوية"
+            "label":"الوصف",
+            "description":"نص قصير يتم عرضه مرة واحدة علي اثنين من البطاقات متساوية"
           }
         ]
       }
     },
     {
-      "label": "Behavioural settings",
-      "description": "These options will let you control how the game behaves.",
-      "fields": [
+      "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":"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":"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"
+          "label":"Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "fields": [
-        {},
-        {}
+      "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."
+        }
       ]
     },
     {
-      "label": "الأقلمة",
-      "fields": [
+      "label":"الأقلمة",
+      "fields":[
         {
-          "label": "نص تدوير البطاقة"
+          "label":"نص تدوير البطاقة",
+          "default":"Card turns"
         },
         {
-          "label": "نص التوقيت الزمني"
+          "label":"نص التوقيت الزمني",
+          "default":"Time spent"
         },
         {
-          "label": "نص الملاحظات"
+          "label":"نص الملاحظات",
+          "default":"Good work!"
         },
-        {},
-        {}
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
       ]
     }
   ]
diff --git a/language/bs.json b/language/bs.json
index 9a6c016..b1c4312 100644
--- a/language/bs.json
+++ b/language/bs.json
@@ -1,68 +1,88 @@
 {
-  "semantics": [
+  "semantics":[
     {
-      "label": "Karte",
-      "entity": "karte",
-      "field": {
-        "label": "Karte",
-        "fields": [
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Karte",
+      "entity":"karte",
+      "field":{
+        "label":"Karte",
+        "fields":[
           {
-            "label": "Slika"
+            "label":"Slika"
           },
           {
-            "label": "Ista slika",
-            "description": "Opcionalna slika koja se koristi umjestodvije iste slike."
+            "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."
+            "label":"Opis",
+            "description":"Kratak tekst koji će biti prikazan čim se pronađu dvije iste karte."
           }
         ]
       }
     },
     {
-      "label": "Podešavanje ponašanja",
-      "description": "These options will let you control how the game behaves.",
-      "fields": [
+      "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":"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":"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"
+          "label":"Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "fields": [
-        {},
-        {}
+      "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."
+        }
       ]
     },
     {
-      "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!"
         },
         {
-          "label": "Tekst na dugmetu pokušaj ponovo",
-          "default": "Pokušaj ponovo?"
+          "label":"Tekst na dugmetu pokušaj ponovo",
+          "default":"Pokušaj ponovo?"
         },
-        {}
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
       ]
     }
   ]
diff --git a/language/ca.json b/language/ca.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/ca.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/cs.json b/language/cs.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/cs.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/da.json b/language/da.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/da.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/de.json b/language/de.json
index 533d1d3..5c725a1 100644
--- a/language/de.json
+++ b/language/de.json
@@ -1,65 +1,88 @@
 {
-  "semantics": [
+  "semantics":[
     {
-      "label": "Karten",
-      "entity": "karte",
-      "field": {
-        "label": "Karte",
-        "fields": [
+      "widgets":[
+        {
+          "label":"Vorgaben"
+        }
+      ],
+      "label":"Karten",
+      "entity":"karte",
+      "field":{
+        "label":"Karte",
+        "fields":[
           {
-            "label": "Bild"
+            "label":"Bild"
           },
           {
-            "label": "Matching Image",
-            "description": "An optional image to match against instead of using two cards with the same image."
+            "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."
+            "label":"Beschreibung",
+            "description":"Ein kurzer Text, der angezeigt wird, sobald zwei identische Karten gefunden werden."
           }
         ]
       }
     },
     {
-      "label": "Behavioural settings",
-      "description": "These options will let you control how the game behaves.",
-      "fields": [
+      "label":"Interaktionseinstellungen",
+      "description":"Mit diesen Einstellungen kannst du das Verhalten des Spiels anpassen.",
+      "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":"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": "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":"Anzahl der zu nutzenden Karten",
+          "description":"Wird hier eine Zahl größer als 2 eingestellt, werden zufällig Karten aus der Kartenliste gezogen."
         },
         {
-          "label": "Add button for retrying when the game is over"
+          "label":"Füge einen Button hinzu, um das Spiel noch einmal neu zu starten zu können, wenn es vorbei ist."
         }
       ]
     },
     {
-      "fields": [
-        {},
-        {}
+      "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."
+        }
       ]
     },
     {
-      "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!"
         },
-        {},
-        {}
+        {
+          "label":"Text des Wiederholen-Buttons",
+          "default":"Erneut versuchen?"
+        },
+        {
+          "label":"Beschriftung des \"Abbrechen\"-Buttons",
+          "default":"Schließen"
+        }
       ]
     }
   ]
diff --git a/language/el.json b/language/el.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/el.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/es.json b/language/es.json
new file mode 100644
index 0000000..ba7edf2
--- /dev/null
+++ b/language/es.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Predeterminado"
+        }
+      ],
+      "label":"Tarjetas",
+      "entity":"card",
+      "field":{
+        "label":"Tarjeta",
+        "fields":[
+          {
+            "label":"Imagen"
+          },
+          {
+            "label":"Imagen coincidente",
+            "description":"Una imagen opcional para emparejar, en vez de usar dos tarjetas con la misma imagen."
+          },
+          {
+            "label":"Descripción",
+            "description":"Un breve texto opcional que aparecerá una vez se encuentren las dos cartas coincidentes."
+          }
+        ]
+      }
+    },
+    {
+      "label":"Ajustes de comportamiento",
+      "description":"Estas opciones le permitirán controlar cómo se comporta el juego.",
+      "fields":[
+        {
+          "label":"Coloca las tarjetas en un cuadrado",
+          "description":"Intentará igualar el número de columnas y filas al distribuir las tarjetas. Después, las tarjetas se escalarán para que se ajusten al contenedor."
+        },
+        {
+          "label":"Número de tarjetas a utilizar",
+          "description":"Establecer esto a un número mayor que 2 hará que el juego seleccione tarjetas aleatorias de la lista de tarjetas."
+        },
+        {
+          "label":"Añadir botón para volver a intentarlo cuando el juego ha terminado"
+        }
+      ]
+    },
+    {
+      "label":"Aspecto y comportamiento",
+      "description":"Controla los efectos visuales del juego.",
+      "fields":[
+        {
+          "label":"Color del tema",
+          "description":"Elegir un color para crear un tema para su juego de cartas.",
+          "default":"#909090",
+          "spectrum":{
+            
+          }
+        },
+        {
+          "label":"Parte posterior de la tarjeta",
+          "description":"Utilice una parte posterior personalizada para sus tarjetas."
+        }
+      ]
+    },
+    {
+      "label":"Localización",
+      "fields":[
+        {
+          "label":"Texto para los giros de tarjetas",
+          "default":"Giros de tarjeta"
+        },
+        {
+          "label":"Texto de tiempo usado",
+          "default":"Tiempo usado"
+        },
+        {
+          "label":"Texto de comentarios",
+          "default":"¡Buen trabajo!"
+        },
+        {
+          "label":"Intente del botón Intente de nuevo",
+          "default":"¿Volver a intentarlo?"
+        },
+        {
+          "label":"Etiqueta del botón Cerrar",
+          "default":"Cerrar"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/et.json b/language/et.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/et.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/fi.json b/language/fi.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/fi.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/fr.json b/language/fr.json
index 22313fc..d2952ac 100644
--- a/language/fr.json
+++ b/language/fr.json
@@ -1,65 +1,88 @@
 {
-  "semantics": [
+  "semantics":[
     {
-      "label": "Cartes",
-      "entity": "carte",
-      "field": {
-        "label": "Carte",
-        "fields": [
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cartes",
+      "entity":"carte",
+      "field":{
+        "label":"Carte",
+        "fields":[
           {
-            "label": "Image"
+            "label":"Image"
           },
           {
-            "label": "Matching Image",
-            "description": "An optional image to match against instead of using two cards with the same image."
+            "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."
+            "label":"Description",
+            "description":"Petit texte affiché quand deux cartes identiques sont trouvées."
           }
         ]
       }
     },
     {
-      "label": "Behavioural settings",
-      "description": "These options will let you control how the game behaves.",
-      "fields": [
+      "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":"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":"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"
+          "label":"Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "fields": [
-        {},
-        {}
+      "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."
+        }
       ]
     },
     {
-      "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é !"
         },
-        {},
-        {}
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
       ]
     }
   ]
diff --git a/language/he.json b/language/he.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/he.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/hu.json b/language/hu.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/hu.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/it.json b/language/it.json
index 1484e25..606af60 100644
--- a/language/it.json
+++ b/language/it.json
@@ -1,62 +1,88 @@
 {
-  "semantics": [
+  "semantics":[
     {
-      "label": "Carte",
-      "entity": "carta",
-      "field": {
-        "label": "Carta",
-        "fields": [
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Carte",
+      "entity":"carta",
+      "field":{
+        "label":"Carta",
+        "fields":[
           {
-            "label": "Immagine"
+            "label":"Immagine"
           },
           {
-            "label": "Matching Image",
-            "description": "An optional image to match against instead of using two cards with the same image."
+            "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."
+            "label":"Descrizione",
+            "description":"Breve testo visualizzato quando due carte uguali vengono trovate."
           }
         ]
       }
     },
     {
-      "label": "Behavioural settings",
-      "description": "These options will let you control how the game behaves.",
-      "fields": [
+      "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":"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":"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"
+          "label":"Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "fields": [
-        {},
-        {}
+      "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."
+        }
       ]
     },
     {
-      "label": "Localizzazione",
-      "fields": [
+      "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!"
         },
-        {},
-        {}
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
       ]
     }
   ]
diff --git a/language/ja.json b/language/ja.json
new file mode 100644
index 0000000..5f235f6
--- /dev/null
+++ b/language/ja.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"デフォルト"
+        }
+      ],
+      "label":"カード",
+      "entity":"card",
+      "field":{
+        "label":"カード",
+        "fields":[
+          {
+            "label":"画像"
+          },
+          {
+            "label":"一致させる画像",
+            "description":"同じ画像の2枚のカードを使用する代わりに、別に一致させるためのオプション画像"
+          },
+          {
+            "label":"説明",
+            "description":"一致する2つのカードが見つかるとポップアップするオプションの短文テキスト。"
+          }
+        ]
+      }
+    },
+    {
+      "label":"動作設定",
+      "description":"これらのオプションを使用して、ゲームの動作を制御できます。",
+      "fields":[
+        {
+          "label":"カードを正方形に配置",
+          "description":"カードをレイアウトするときに、列と行の数を一致させてみてください。そうすると、カードは、コンテナに合わせてスケーリングされます。"
+        },
+        {
+          "label":"使用するカードの数",
+          "description":"これを2よりも大きい数値に設定すると、カードのリストからランダムなカードが選ばれるようになります。"
+        },
+        {
+          "label":"ゲームが終了したときに、リトライのためのボタンを追加"
+        }
+      ]
+    },
+    {
+      "label":"ルック＆フィール",
+      "description":"ゲームの外観を制御します。",
+      "fields":[
+        {
+          "label":"テーマ色",
+          "description":"カードゲームのテーマとなる色を選択してください。",
+          "default":"#909090",
+          "spectrum":{
+            
+          }
+        },
+        {
+          "label":"カード裏",
+          "description":"カードに独自の裏を使います。"
+        }
+      ]
+    },
+    {
+      "label":"ローカリゼーション",
+      "fields":[
+        {
+          "label":"カードターン のテキスト",
+          "default":"カードターン"
+        },
+        {
+          "label":"経過時間のテキスト",
+          "default":"経過時間"
+        },
+        {
+          "label":"フィードバックテキスト",
+          "default":"よくできました！"
+        },
+        {
+          "label":"リトライボタンのテキスト",
+          "default":"もう一度トライしますか ?"
+        },
+        {
+          "label":"閉じるボタンのテキスト",
+          "default":"閉じる"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/ko.json b/language/ko.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/ko.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/nb.json b/language/nb.json
index 5905bb6..0a422f9 100644
--- a/language/nb.json
+++ b/language/nb.json
@@ -1,78 +1,87 @@
 {
-  "semantics": [
+  "semantics":[
     {
-      "label": "Kort",
-      "entity": "kort",
-      "field": {
-        "label": "Kort",
-        "fields": [
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Kort",
+      "entity":"kort",
+      "field":{
+        "label":"Kort",
+        "fields":[
           {
-            "label": "Bilde"
+            "label":"Bilde"
           },
           {
-            "label": "Tilhørende bilde",
-            "description": "Et valgfritt bilde som brukes av kort nummer to istedenfor å bruke to kort med samme 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."
+            "label":"Beskrivelse",
+            "description":"En valgfri kort tekst som spretter opp når kort-paret er funnet."
           }
         ]
       }
     },
     {
-      "label": "Innstillinger for oppførsel",
-      "description": "Disse instillingene lar deg bestemme hvordan spillet skal oppføre seg.",
-      "fields": [
+      "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":"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":"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"
+          "label":"Legg til knapp for å prøve på nytt når spillet er over"
         }
       ]
     },
     {
-      "label": "Tilpass utseende",
-      "description": "Kontroller de visuelle aspektene ved spillet.",
-      "fields": [
+      "label":"Tilpass utseende",
+      "description":"Kontroller de visuelle aspektene ved spillet.",
+      "fields":[
         {
-          "label": "Temafarge",
-          "description": "Velg en farge for å skape et tema over kortspillet ditt."
+          "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."
+          "label":"Kortbaksiden",
+          "description":"Bruk en tilpasset kortbakside for kortene dine."
         }
       ]
     },
     {
-      "label": "Oversettelser",
-      "fields": [
+      "label":"Oversettelser",
+      "fields":[
         {
-          "label": "Etikett for antall vendte kort",
-          "default": "Kort vendt"
+          "label":"Etikett for antall vendte kort",
+          "default":"Kort vendt"
         },
         {
-          "label": "Etikett for tid brukt",
-          "default": "Tid brukt"
+          "label":"Etikett for tid brukt",
+          "default":"Tid brukt"
         },
         {
-          "label": "Tilbakemeldingstekst",
-          "default": "Godt jobbet!"
+          "label":"Tilbakemeldingstekst",
+          "default":"Godt jobbet!"
         },
         {
-          "label": "Prøv på nytt-tekst",
-          "default": "Prøv på nytt?"
+          "label":"Prøv på nytt-tekst",
+          "default":"Prøv på nytt?"
         },
         {
-          "label": "Lukk knapp-merkelapp",
-          "default": "Lukk"
+          "label":"Lukk knapp-merkelapp",
+          "default":"Lukk"
         }
       ]
     }
diff --git a/language/nl.json b/language/nl.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/nl.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/nn.json b/language/nn.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/nn.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/pl.json b/language/pl.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/pl.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/pt.json b/language/pt.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/pt.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/ro.json b/language/ro.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/ro.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/ru.json b/language/ru.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/ru.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/sr.json b/language/sr.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/sr.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/sv.json b/language/sv.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/sv.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/tr.json b/language/tr.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/tr.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/language/vi.json b/language/vi.json
new file mode 100644
index 0000000..240360f
--- /dev/null
+++ b/language/vi.json
@@ -0,0 +1,89 @@
+{
+  "semantics":[
+    {
+      "widgets":[
+        {
+          "label":"Default"
+        }
+      ],
+      "label":"Cards",
+      "entity":"card",
+      "field":{
+        "label":"Card",
+        "fields":[
+          {
+            "label":"Image"
+          },
+          {
+            "label":"Matching Image",
+            "description":"An optional image to match against instead of using two cards with the same image."
+          },
+          {
+            "label":"Description",
+            "description":"An optional short text that will pop up once the two matching cards are found."
+          }
+        ]
+      }
+    },
+    {
+      "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"
+        }
+      ]
+    },
+    {
+      "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."
+        }
+      ]
+    },
+    {
+      "label":"Localization",
+      "fields":[
+        {
+          "label":"Card turns text",
+          "default":"Card turns"
+        },
+        {
+          "label":"Time spent text",
+          "default":"Time spent"
+        },
+        {
+          "label":"Feedback text",
+          "default":"Good work!"
+        },
+        {
+          "label":"Try again button text",
+          "default":"Try again?"
+        },
+        {
+          "label":"Close button label",
+          "default":"Close"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file

From d69df7b8991b4cfcd520efa211dcee05fde860cf Mon Sep 17 00:00:00 2001
From: Paal Joergensen <pal.jorgensen@gmail.com>
Date: Fri, 25 Aug 2017 10:08:27 +0200
Subject: [PATCH 31/32] Revert "HFP-1343 Using iframe as embed type"

This reverts commit 252bae0220203e52f4edf405323f0a03f3b8c86a.
---
 library.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/library.json b/library.json
index a16a0dd..caabf32 100644
--- a/library.json
+++ b/library.json
@@ -8,7 +8,6 @@
   "author": "Joubel",
   "license": "MIT",
   "machineName": "H5P.MemoryGame",
-  "embedTypes": ["iframe"],
   "preloadedCss": [
     {
       "path": "memory-game.css"
@@ -55,4 +54,4 @@
       "minorVersion": 3
     }
   ]
-}
+}
\ No newline at end of file

From 472507f943f21fa2602da4ed69fcb60f35f55338 Mon Sep 17 00:00:00 2001
From: Paal Joergensen <pal.jorgensen@gmail.com>
Date: Mon, 4 Sep 2017 13:08:23 +0200
Subject: [PATCH 32/32] Bump patch before release

---
 library.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/library.json b/library.json
index caabf32..2437820 100644
--- a/library.json
+++ b/library.json
@@ -3,7 +3,7 @@
   "description": "See how many cards you can remember!",
   "majorVersion": 1,
   "minorVersion": 2,
-  "patchVersion": 4,
+  "patchVersion": 5,
   "runnable": 1,
   "author": "Joubel",
   "license": "MIT",