Merge branch 'with-audio'

card.js

@@ -12,18 +12,20 @@
    * @param {string} [description]
    * @param {Object} [styles]
    */
-  MemoryGame.Card = function (image, id, alt, l10n, description, styles) {
+  MemoryGame.Card = function (image, id, alt, l10n, description, styles, audio) {
     /** @alias H5P.MemoryGame.Card# */
     var self = this;
 
     // Initialize event inheritance
     EventDispatcher.call(self);
 
-    var path = H5P.getPath(image.path, id);
+    var path, width, height, $card, $wrapper, removedState, flippedState, audioPlayer;
-    var width, height, $card, $wrapper, removedState, flippedState;
 
     alt = alt || 'Missing description'; // Default for old games
 
+    if (image && image.path) {
+      path = H5P.getPath(image.path, id);
+
       if (image.width !== undefined && image.height !== undefined) {
         if (image.width > image.height) {
           width = '100%';
@@ -37,6 +39,45 @@
       else {
         width = height = '100%';
       }
+    }
+
+    if (audio) {
+      // Check if browser supports audio.
+      audioPlayer = document.createElement('audio');
+      if (audioPlayer.canPlayType !== undefined) {
+        // Add supported source files.
+        for (var i = 0; i < audio.length; i++) {
+          if (audioPlayer.canPlayType(audio[i].mime)) {
+            var source = document.createElement('source');
+            source.src = H5P.getPath(audio[i].path, id);
+            source.type = audio[i].mime;
+            audioPlayer.appendChild(source);
+          }
+        }
+      }
+
+      if (!audioPlayer.children.length) {
+        audioPlayer = null; // Not supported
+      }
+      else {
+        audioPlayer.controls = false;
+        audioPlayer.preload = 'auto';
+
+        var handlePlaying = function () {
+          if ($card) {
+            $card.addClass('h5p-memory-audio-playing');
+          }
+        };
+        var handleStopping = function () {
+          if ($card) {
+            $card.removeClass('h5p-memory-audio-playing');
+          }
+        };
+        audioPlayer.addEventListener('play', handlePlaying);
+        audioPlayer.addEventListener('ended', handleStopping);
+        audioPlayer.addEventListener('pause', handleStopping);
+      }
+    }
 
     /**
      * Update the cards label to make it accessible to users with a readspeaker
@@ -74,6 +115,10 @@
         return;
       }
 
+      if (audioPlayer) {
+        audioPlayer.play();
+      }
+
       $card.addClass('h5p-flipped');
       self.trigger('flip');
       flippedState = true;
@@ -83,6 +128,11 @@
      * Flip card back.
      */
     self.flipBack = function () {
+      if (audioPlayer) {
+        audioPlayer.pause();
+        audioPlayer.currentTime = 0;
+      }
+
       self.updateLabel(null, null, true); // Reset card label
       $card.removeClass('h5p-flipped');
       flippedState = false;
@@ -100,6 +150,11 @@
      * Reset card to natural state
      */
     self.reset = function () {
+      if (audioPlayer) {
+        audioPlayer.pause();
+        audioPlayer.currentTime = 0;
+      }
+
       self.updateLabel(null, null, true); // Reset card label
       flippedState = false;
       removedState = false;
@@ -133,7 +188,7 @@
       $wrapper = $('<li class="h5p-memory-wrap" tabindex="-1" role="button"><div class="h5p-memory-card">' +
                   '<div class="h5p-front"' + (styles && styles.front ? styles.front : '') + '>' + (styles && styles.backImage ? '' : '<span></span>') + '</div>' +
                   '<div class="h5p-back"' + (styles && styles.back ? styles.back : '') + '>' +
-                    '<img src="' + path + '" alt="' + alt + '" style="width:' + width + ';height:' + height + '"/>' +
+                    (path ? '<img src="' + path + '" alt="' + alt + '" style="width:' + width + ';height:' + height + '"/>' + (audioPlayer ? '<div class="h5p-memory-audio-button"></div>' : '') : '<i class="h5p-memory-audio-instead-of-image">') +
                   '</div>' +
                 '</div></li>')
         .appendTo($container)
@@ -176,6 +231,19 @@
             self.flip();
           })
           .end();
+
+      if (audioPlayer) {
+        $card.children('.h5p-back')
+          .click(function () {
+            if ($card.hasClass('h5p-memory-audio-playing')) {
+              audioPlayer.pause();
+              audioPlayer.currentTime = 0;
+            }
+            else {
+              audioPlayer.play();
+            }
+          })
+      }
     };
 
     /**
@@ -236,8 +304,9 @@
    */
   MemoryGame.Card.isValid = function (params) {
     return (params !== undefined &&
-            params.image !== undefined &&
+             (params.image !== undefined &&
-            params.image.path !== undefined);
+             params.image.path !== undefined) ||
+           params.audio);
   };
 
   /**
@@ -249,8 +318,9 @@
    */
   MemoryGame.Card.hasTwoImages = function (params) {
     return (params !== undefined &&
-            params.match !== undefined &&
+             (params.match !== undefined &&
-            params.match.path !== undefined);
+              params.match.path !== undefined) ||
+           params.matchAudio);
   };
 
   /**

language/.en.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/af.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/ar.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "الوصف",
             "description": "نص قصير يتم عرضه مرة واحدة علي اثنين من البطاقات متساوية"

language/bs.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Ista slika",
             "description": "Opcionalna slika koja se koristi umjestodvije iste slike."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Opis",
             "description": "Kratak tekst koji će biti prikazan čim se pronađu dvije iste karte."

language/ca.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/cs.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/da.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matchende billede",
             "description": "Valgfrit billede som match i stedet for at have to kort med det samme billede."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Beskrivelse",
             "description": "Valgfri tekst, som popper op, når to matchende billeder er fundet."

language/de.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Beschreibung",
             "description": "Ein kurzer Text, der angezeigt wird, sobald zwei identische Karten gefunden werden."

language/el.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/es.json

@@ -18,6 +18,10 @@
             "label": "Texto alternativo para la imagen",
             "description": "Describe lo que se puede ver en la foto. El texto es leído por una herramienta de conversion de texto a voz, a usuarios con discapacidad visual."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Imagen coincidente",
             "description": "Una imagen opcional para emparejar, en vez de usar dos tarjetas con la misma imagen."
@@ -26,6 +30,10 @@
             "label": "Texto alternativo para imagenes coincidentes",
             "description": "El texto es leído por una herramienta de conversion de texto a voz, a usuarios con discapacidad visual."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Descripción",
             "description": "Un breve texto opcional que aparecerá una vez se encuentren las dos cartas coincidentes."

language/et.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/fi.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Vastattava kuva",
             "description": "Valinnainen kuva johon verrata korttia sen sijaan, että kortille etsitään toista samaa kuvaa pariksi."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Selite",
             "description": "Valinnainen lyhyt teksti, joka näytetään kun oikea pari on löydetty."

language/fr.json

@@ -18,6 +18,10 @@
             "label": "Texte alternatif pour l'image",
             "description": "Décrivez ce que représente l'image. Le texte est lu par la synthèse vocale."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Image correspondante",
             "description": "Une image facultative à comparer au lieu d'utiliser deux cartes avec la même image."
@@ -26,6 +30,10 @@
             "label": "Texte alternatif pour l'image correspondante",
             "description": "Décrivez ce que représente l'image correspondante. Le texte est lu par la synthèse vocale."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "Un texte court optionnel qui apparaîtra une fois que les deux cartes correspondantes auront été trouvées."

language/he.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/hu.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/it.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Descrizione",
             "description": "Breve testo visualizzato quando due carte uguali vengono trovate."

language/ja.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "一致させる画像",
             "description": "同じ画像の2枚のカードを使用する代わりに、別に一致させるためのオプション画像"
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "説明",
             "description": "一致する2つのカードが見つかるとポップアップするオプションの短文テキスト。"

language/ko.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/nb.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Tilhørende bilde",
             "description": "Et valgfritt bilde som brukes av kort nummer to istedenfor å bruke to kort med samme bilde."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Beskrivelse",
             "description": "En valgfri kort tekst som spretter opp når kort-paret er funnet."

language/nl.json

@@ -18,6 +18,10 @@
             "label": "Bijpassende afbeelding",
             "description": "Een optionele afbeelding die past in plaats van 2 kaarten met dezelfde afbeelding."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Omschrijving",
             "description": "Een optionele korte tekst die zal verschijnen zodra de 2 overeenkomende kaarten zijn gevonden."
@@ -26,6 +30,10 @@
             "label": "De alternatieve tekst voor de bijpassende afbeelding",
             "description": "Omschrijf wat de afbeelding voorstelt. De tekst zal worden gelezen door tekst-naar-spraak tools voor slechtzienden."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Omschrijving",
             "description": "Een optionele korte tekst die zal verschijnen zodra de 2 overeenkomende kaarten zijn gevonden."

language/nn.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/pl.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/pt.json

@@ -18,6 +18,10 @@
             "label": "Texto alternativo para a imagem",
             "description": "Descreva o que pode ser visto na foto. O texto será lido para os usuários que necessitam utilizar leitores de tela."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Imagem-par",
             "description": "Uma imagem opcional para ser combinada ao invés de utilizar dois cartões com a mesma imagem."
@@ -26,6 +30,10 @@
             "label": "Texto alternativo para a Imagem-par",
             "description": "Descreva o que pode ser visto na foto. O texto será lido para os usuários que necessitam utilizar leitores de tela."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Descrição",
             "description": "Um texto curto opcional que aparecerá quando duas cartas forem combinadas corretamente."

language/ro.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/ru.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/sr.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/sv.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/tr.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/vi.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "Matching Image",
             "description": "An optional image to match against instead of using two cards with the same image."
@@ -26,6 +30,10 @@
             "label": "Alternative text for Matching Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "Description",
             "description": "An optional short text that will pop up once the two matching cards are found."

language/zh-tw.json

@@ -18,6 +18,10 @@
             "label": "Alternative text for Image",
             "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "相稱圖示",
             "description": "可選用一張與主圖示相稱的圖示,並非使用兩張相同的圖示."
@@ -26,6 +30,10 @@
             "label": "相稱圖示的替代文字",
             "description": "請描述此張圖示中可以看到什麼. 此段文字將做為閱讀器導讀文字，對視障使用者更為友善."
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "描述",
             "description": "選填。當找到兩張相稱圖示時所顯示的文字."

language/zh.json

@@ -18,6 +18,10 @@
             "label": "配對圖像（非必要項）",
             "description": "如果遊戲中要配對的不是同一張圖像，那麼可以在這裡添加要配對的另一張圖像。"
           },
+          {
+            "label": "Audio Track",
+            "description": "An optional sound that plays when the card is turned."
+          },
           {
             "label": "配對成功文字（非必要項）",
             "description": "在找到配對時會跳出的文字訊息。"
@@ -26,6 +30,10 @@
             "label": "配對圖像的替代文字",
             "description": "在報讀器上用、或是配對圖像無法正常輸出時顯示的文字。"
           },
+          {
+            "label": "Matching Audio Track",
+            "description": "An optional sound that plays when the second card is turned."
+          },
           {
             "label": "配對成功文字（非必要項）",
             "description": "在找到配對時會跳出的文字訊息。"

library.json

@@ -2,8 +2,8 @@
   "title": "Memory Game",
   "description": "See how many cards you can remember!",
   "majorVersion": 1,
-  "minorVersion": 2,
+  "minorVersion": 3,
-  "patchVersion": 13,
+  "patchVersion": 0,
   "runnable": 1,
   "author": "Joubel",
   "license": "MIT",

memory-game.css

@@ -318,3 +318,28 @@
 .h5p-memory-game .h5p-programatically-focusable {
   outline: none;
 }
+.h5p-memory-audio-instead-of-image {
+  font-family: 'H5PFontAwesome4';
+  width: 100%;
+  height: 100%;
+  font-style: normal;
+  color: #404040;
+  font-size: 2em;
+}
+.h5p-memory-audio-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-family: 'H5PFontAwesome4';
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+}
+.h5p-memory-audio-instead-of-image:before,
+.h5p-memory-audio-button:before {
+  content: "\f026";
+}
+.h5p-memory-audio-playing .h5p-memory-audio-instead-of-image:before,
+.h5p-memory-audio-playing .h5p-memory-audio-button:before {
+  content: "\f028";
+}

memory-game.js

@@ -384,16 +384,16 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       var cardParams = cardsToUse[i];
       if (MemoryGame.Card.isValid(cardParams)) {
         // Create first card
-        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles);
+        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles, cardParams.audio);
 
         if (MemoryGame.Card.hasTwoImages(cardParams)) {
           // Use matching image for card two
-          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.matchAlt, parameters.l10n, cardParams.description, cardStyles);
+          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.matchAlt, parameters.l10n, cardParams.description, cardStyles, cardParams.matchAudio);
           cardOne.hasTwoImages = cardTwo.hasTwoImages = true;
         }
         else {
           // Add two cards with the same image
-          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles);
+          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles, cardParams.audio);
         }
 
         // Add cards to card list for shuffeling

semantics.json

@@ -33,6 +33,14 @@
           "importance": "high",
           "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
         },
+        {
+          "name": "audio",
+          "type": "audio",
+          "importance": "high",
+          "label": "Audio Track",
+          "description": "An optional sound that plays when the card is turned.",
+          "optional": true
+        },
         {
           "name": "match",
           "type": "image",
@@ -50,6 +58,14 @@
           "optional": true,
           "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
         },
+        {
+          "name": "matchAudio",
+          "type": "audio",
+          "importance": "low",
+          "label": "Matching Audio Track",
+          "description": "An optional sound that plays when the second card is turned.",
+          "optional": true
+        },
         {
           "name": "description",
           "type": "text",