diff --git a/card.js b/card.js index 867d405..81e9219 100644 --- a/card.js +++ b/card.js @@ -12,30 +12,73 @@ * @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 width, height, $card, $wrapper, removedState, flippedState; + var path, width, height, $card, $wrapper, removedState, flippedState, audioPlayer; alt = alt || 'Missing description'; // Default for old games - if (image.width !== undefined && image.height !== undefined) { - if (image.width > image.height) { - width = '100%'; - height = 'auto'; + if (image && image.path) { + path = H5P.getPath(image.path, id); + + if (image.width !== undefined && image.height !== undefined) { + if (image.width > image.height) { + width = '100%'; + height = 'auto'; + } + else { + height = '100%'; + width = 'auto'; + } } else { - height = '100%'; - width = 'auto'; + width = height = '100%'; } } - 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'); + self.trigger('audioplay'); + } + }; + var handleStopping = function () { + if ($card) { + $card.removeClass('h5p-memory-audio-playing'); + self.trigger('audiostop'); + } + }; + audioPlayer.addEventListener('play', handlePlaying); + audioPlayer.addEventListener('ended', handleStopping); + audioPlayer.addEventListener('pause', handleStopping); + } } /** @@ -77,12 +120,17 @@ $card.addClass('h5p-flipped'); self.trigger('flip'); flippedState = true; + + if (audioPlayer) { + audioPlayer.play(); + } }; /** * Flip card back. */ self.flipBack = function () { + self.stopAudio(); self.updateLabel(null, null, true); // Reset card label $card.removeClass('h5p-flipped'); flippedState = false; @@ -100,6 +148,7 @@ * Reset card to natural state */ self.reset = function () { + self.stopAudio(); self.updateLabel(null, null, true); // Reset card label flippedState = false; removedState = false; @@ -133,7 +182,7 @@ $wrapper = $('
  • ' + '
    ' + (styles && styles.backImage ? '' : '') + '
    ' + '
    ' + - '' + alt + '' + + (path ? '' + alt + '' + (audioPlayer ? '
    ' : '') : '') + '
    ' + '
    • ') .appendTo($container) @@ -176,6 +225,18 @@ self.flip(); }) .end(); + + if (audioPlayer) { + $card.children('.h5p-back') + .click(function () { + if ($card.hasClass('h5p-memory-audio-playing')) { + self.stopAudio(); + } + else { + audioPlayer.play(); + } + }) + } }; /** @@ -221,6 +282,16 @@ self.isRemoved = function () { return removedState; }; + + /** + * Stop any audio track that might be playing. + */ + self.stopAudio = function () { + if (audioPlayer) { + audioPlayer.pause(); + audioPlayer.currentTime = 0; + } + }; }; // Extends the event dispatcher @@ -236,8 +307,9 @@ */ MemoryGame.Card.isValid = function (params) { return (params !== undefined && - params.image !== undefined && - params.image.path !== undefined); + (params.image !== undefined && + params.image.path !== undefined) || + params.audio); }; /** @@ -249,8 +321,9 @@ */ MemoryGame.Card.hasTwoImages = function (params) { return (params !== undefined && - params.match !== undefined && - params.match.path !== undefined); + (params.match !== undefined && + params.match.path !== undefined) || + params.matchAudio); }; /** diff --git a/language/.en.json b/language/.en.json index 2a9e4d6..839d83f 100644 --- a/language/.en.json +++ b/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." diff --git a/language/af.json b/language/af.json index 2a9e4d6..839d83f 100644 --- a/language/af.json +++ b/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." diff --git a/language/ar.json b/language/ar.json index 073bd2c..404938e 100644 --- a/language/ar.json +++ b/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": "نص قصير يتم عرضه مرة واحدة علي اثنين من البطاقات متساوية" diff --git a/language/bs.json b/language/bs.json index 522c820..3a1cbd6 100644 --- a/language/bs.json +++ b/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." diff --git a/language/ca.json b/language/ca.json index 2a9e4d6..839d83f 100644 --- a/language/ca.json +++ b/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." diff --git a/language/cs.json b/language/cs.json index 2a9e4d6..839d83f 100644 --- a/language/cs.json +++ b/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." diff --git a/language/da.json b/language/da.json index 91a2e3a..aaca471 100644 --- a/language/da.json +++ b/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." diff --git a/language/de.json b/language/de.json index 7c5f0fe..5d96311 100644 --- a/language/de.json +++ b/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." diff --git a/language/el.json b/language/el.json index 2a9e4d6..839d83f 100644 --- a/language/el.json +++ b/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." diff --git a/language/es.json b/language/es.json index 4a2c1de..c1e934c 100644 --- a/language/es.json +++ b/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." @@ -111,4 +119,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/language/et.json b/language/et.json index 2a9e4d6..839d83f 100644 --- a/language/et.json +++ b/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." diff --git a/language/eu.json b/language/eu.json new file mode 100644 index 0000000..6102bae --- /dev/null +++ b/language/eu.json @@ -0,0 +1,122 @@ +{ + "semantics": [ + { + "widgets": [ + { + "label": "Lehenetsia" + } + ], + "label": "Txartelak", + "entity": "karta", + "field": { + "label": "Karta", + "fields": [ + { + "label": "Irudia" + }, + { + "label": "Irudiaren ordezko testua", + "description": "Deskribatu irudian ikusi daitekeena. Testua irakurketa tresna automatikoek irakurriko dute ikusmen urritasunak dituztenentzat." + }, + { + "label": "Audio Pista", + "description": "Karta itzultzen denean erreproduzitzeko aukerazko soinua." + }, + { + "label": "Pareko irudia", + "description": "Irudi bera duten bi karta ez erabiltzeko parekatzeko aukeran eskainiko den irudia." + }, + { + "label": "Pareko irudiaren ordezko irudia", + "description": "Deskribatu argazkian ikusi daitekeena. Testua irakurketa tresna automatikoek irakurriko dute ikusmen urritasunak dituztenentzat." + }, + { + "label": "Pareko Audio Pista", + "description": "Bigarren karta itzultzen denean erreproduzitzeko aukerazko soinua." + }, + { + "label": "Deskribapena", + "description": "Bi karta parekatzen direnean bat-batean agertu den aukerako testu laburra." + } + ] + } + }, + { + "label": "Portaera-ezarpenak", + "description": "Aukera hauen bidez kontrolatu ahal izango duzu zereginaren portaera.", + "fields": [ + { + "label": "Kokatu karta karratuan", + "description": "Txartelak banatzean lerro eta zutabe kopurua betetzen saiatuko da. Gero, kartak eskalatuko dira." + }, + { + "label": "Erabiliko den karta kopurua", + "description": "2 baino altuagoa den zenbaki bat ezarriz gero jokoak hausazko karta hartuko du karta-zerrendatik." + }, + { + "label": "Saiakera berria egiteko botoia txertatu jokoa amaitzerakoan" + } + ] + }, + { + "label": "Itxura", + "description": "Jokoaren itxura kontrolatu", + "fields": [ + { + "label": "Estiloaren kolorea", + "description": "Aukeratu kolorea zure karta jokoarentzat estiloa sortzeko.", + "default": "#909090" + }, + { + "label": "Kartaren atzeko aldea", + "description": "Erabili karta-atzeko alde pertsonalizatua." + } + ] + }, + { + "label": "Lokalizazioa", + "fields": [ + { + "label": "Txartelak buelta ematen du testua", + "default": "Txartelak buelta ematen du" + }, + { + "label": "Igarotako denboraren testua", + "default": "Igarotako denbora" + }, + { + "label": "Feedback testua", + "default": "Lan bikaina!" + }, + { + "label": "Saiatu berriro botoiaren", + "default": "Saiatu berriro?" + }, + { + "label": "Itxi botoiaren etiketa", + "default": "Itxi" + }, + { + "label": "Jokoaren etiketa", + "default": "Memoria jokoa. Aurkitu pareko kartak." + }, + { + "label": "Amaitutako jokoaren etiketa", + "default": "Karta guztiak aurkitu dira." + }, + { + "label": "Txartela zenbakiaren etiketa", + "default": "%num. txartela:" + }, + { + "label": "buelta eman gabeko txartela", + "default": "Itzuli gabe" + }, + { + "label": "Parekatutako txartelaren etiketa", + "default": "Parekoa topatuta." + } + ] + } + ] +} diff --git a/language/fi.json b/language/fi.json index a692a57..d9b8a7c 100644 --- a/language/fi.json +++ b/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." diff --git a/language/fr.json b/language/fr.json index f33d0c2..ce6fc6f 100644 --- a/language/fr.json +++ b/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." diff --git a/language/he.json b/language/he.json index 2a9e4d6..839d83f 100644 --- a/language/he.json +++ b/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." diff --git a/language/hu.json b/language/hu.json index 2a9e4d6..839d83f 100644 --- a/language/hu.json +++ b/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." diff --git a/language/it.json b/language/it.json index 9e2932a..274d6a9 100644 --- a/language/it.json +++ b/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." diff --git a/language/ja.json b/language/ja.json index d9883e8..624b3bb 100644 --- a/language/ja.json +++ b/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つのカードが見つかるとポップアップするオプションの短文テキスト。" diff --git a/language/ko.json b/language/ko.json index 2a9e4d6..839d83f 100644 --- a/language/ko.json +++ b/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." diff --git a/language/nb.json b/language/nb.json index d5187ef..e4aa1b2 100644 --- a/language/nb.json +++ b/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." diff --git a/language/nl.json b/language/nl.json index c81981b..3888504 100644 --- a/language/nl.json +++ b/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." diff --git a/language/nn.json b/language/nn.json index 2a9e4d6..839d83f 100644 --- a/language/nn.json +++ b/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." diff --git a/language/pl.json b/language/pl.json index 2a9e4d6..839d83f 100644 --- a/language/pl.json +++ b/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." diff --git a/language/pt.json b/language/pt.json index 8133dc7..2a6b9b0 100644 --- a/language/pt.json +++ b/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." @@ -111,4 +119,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/language/ro.json b/language/ro.json index 2a9e4d6..839d83f 100644 --- a/language/ro.json +++ b/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." diff --git a/language/ru.json b/language/ru.json index 2a9e4d6..839d83f 100644 --- a/language/ru.json +++ b/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." diff --git a/language/sr.json b/language/sr.json index 2a9e4d6..839d83f 100644 --- a/language/sr.json +++ b/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." diff --git a/language/sv.json b/language/sv.json index 2a9e4d6..839d83f 100644 --- a/language/sv.json +++ b/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." diff --git a/language/tr.json b/language/tr.json index 2a9e4d6..839d83f 100644 --- a/language/tr.json +++ b/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." diff --git a/language/vi.json b/language/vi.json index 2a9e4d6..839d83f 100644 --- a/language/vi.json +++ b/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." diff --git a/language/zh-tw.json b/language/zh-tw.json index 3db28bf..bbaf222 100644 --- a/language/zh-tw.json +++ b/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": "選填。當找到兩張相稱圖示時所顯示的文字." diff --git a/language/zh.json b/language/zh.json index f7ac798..36e889d 100644 --- a/language/zh.json +++ b/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": "在找到配對時會跳出的文字訊息。" diff --git a/library.json b/library.json index bb52385..b8f7026 100644 --- a/library.json +++ b/library.json @@ -2,8 +2,8 @@ "title": "Memory Game", "description": "See how many cards you can remember!", "majorVersion": 1, - "minorVersion": 2, - "patchVersion": 14, + "minorVersion": 3, + "patchVersion": 0, "runnable": 1, "author": "Joubel", "license": "MIT", @@ -52,6 +52,11 @@ "machineName": "H5PEditor.VerticalTabs", "majorVersion": 1, "minorVersion": 3 + }, + { + "machineName": "H5PEditor.AudioRecorder", + "majorVersion": 1, + "minorVersion": 0 } ] -} \ No newline at end of file +} diff --git a/memory-game.css b/memory-game.css index c188210..1b53971 100644 --- a/memory-game.css +++ b/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"; +} diff --git a/memory-game.js b/memory-game.js index 38829de..4b63def 100644 --- a/memory-game.js +++ b/memory-game.js @@ -22,7 +22,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) { // Initialize event inheritance EventDispatcher.call(self); - var flipped, timer, counter, popup, $bottom, $taskComplete, $feedback, $wrapper, maxWidth, numCols; + var flipped, timer, counter, popup, $bottom, $taskComplete, $feedback, $wrapper, maxWidth, numCols, audioCard; var cards = []; var flipBacks = []; // Que of cards to be flipped back var numFlipped = 0; @@ -218,6 +218,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) { */ var addCard = function (card, mate) { card.on('flip', function () { + if (audioCard) { + audioCard.stopAudio(); + } // Always return focus to the card last flipped for (var i = 0; i < cards.length; i++) { @@ -260,6 +263,15 @@ H5P.MemoryGame = (function (EventDispatcher, $) { // Count number of cards turned counter.increment(); }); + card.on('audioplay', function () { + if (audioCard) { + audioCard.stopAudio(); + } + audioCard = card; + }); + card.on('audiostop', function () { + audioCard = undefined; + }); /** * Create event handler for moving focus to the next or the previous @@ -384,16 +396,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 diff --git a/popup.js b/popup.js index 9d8d63d..b9ec59a 100644 --- a/popup.js +++ b/popup.js @@ -13,7 +13,7 @@ var closed; - var $popup = $('').appendTo($container); + var $popup = $('').appendTo($container); var $desc = $popup.find('.h5p-memory-desc'); var $top = $popup.find('.h5p-memory-top'); diff --git a/semantics.json b/semantics.json index 0333ce0..b09372b 100644 --- a/semantics.json +++ b/semantics.json @@ -33,6 +33,15 @@ "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, + "extraTabs": ["AudioRecorder"] + }, { "name": "match", "type": "image", @@ -50,6 +59,15 @@ "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, + "extraTabs": ["AudioRecorder"] + }, { "name": "description", "type": "text", @@ -207,4 +225,4 @@ } ] } -] \ No newline at end of file +]