EDUCATIC
/
h5p-memory-game
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'accessibility'

pull/30/head^2
Frode Petterson 2017-09-26 14:39:10 +02:00
parent d0f007bc40 46d769ef0b
commit cd4947476f
35 changed files with 2320 additions and 1288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
card.js
View File

@ -7,10 +7,12 @@
* @extends H5P.EventDispatcher
* @param {Object} image
* @param {number} id
* @param {string} alt
* @param {Object} l10n Localization
* @param {string} [description]
* @param {Object} [styles]
*/
MemoryGame.Card = function (image, id, description, styles) {
MemoryGame.Card = function (image, id, alt, l10n, description, styles) {
/** @alias H5P.MemoryGame.Card# */
var self = this;
@ -18,7 +20,9 @@
EventDispatcher.call(self);
var path = H5P.getPath(image.path, id);
var width, height, margin, $card;
var width, height, margin, $card, $wrapper, removedState, flippedState;
alt = alt || 'Missing description'; // Default for old games
if (image.width !== undefined && image.height !== undefined) {
if (image.width > image.height) {
@ -34,32 +38,71 @@
width = height = '100%';
}
/**
* Update the cards label to make it accessible to users with a readspeaker
*
* @param {boolean} isMatched The card has been matched
* @param {boolean} announce Announce the current state of the card
* @param {boolean} reset Go back to the default label
*/
self.updateLabel = function (isMatched, announce, reset) {
// Determine new label from input params
var label = (reset ? l10n.cardUnturned : alt);
if (isMatched) {
label = l10n.cardMatched + ' ' + label;
}
// Update the card's label
$wrapper.attr('aria-label', l10n.cardPrefix.replace('%num', $wrapper.index() + 1) + ' ' + label);
// Update disabled property
$wrapper.attr('aria-disabled', reset ? null : 'true');
// Announce the label change
if (announce) {
$wrapper.blur().focus(); // Announce card label
}
};
/**
* Flip card.
*/
self.flip = function () {
if (flippedState) {
$wrapper.blur().focus(); // Announce card label again
return;
}
$card.addClass('h5p-flipped');
self.trigger('flip');
flippedState = true;
};
/**
* Flip card back.
*/
self.flipBack = function () {
self.updateLabel(null, null, true); // Reset card label
$card.removeClass('h5p-flipped');
flippedState = false;
};
/**
* Remove.
*/
self.remove = function () {
self.remove = function (announce) {
$card.addClass('h5p-matched');
removedState = true;
};
/**
* Reset card to natural state
*/
self.reset = function () {
self.updateLabel(null, null, true); // Reset card label
flippedState = false;
removedState = false;
$card[0].classList.remove('h5p-flipped', 'h5p-matched');
};
@ -87,15 +130,47 @@
* @param {H5P.jQuery} $container
*/
self.appendTo = function ($container) {
// TODO: Translate alt attr
$card = $('<li class="h5p-memory-wrap"><div class="h5p-memory-card" role="button" tabindex="1">' +
$wrapper = $('<li class="h5p-memory-wrap" tabindex="-1" role="button"><div class="h5p-memory-card">' +
'<div class="h5p-front"' + (styles && styles.front ? styles.front : '') + '>' + (styles && styles.backImage ? '' : '<span></span>') + '</div>' +
'<div class="h5p-back"' + (styles && styles.back ? styles.back : '') + '>' +
'<img src="' + path + '" alt="Memory Card" style="width:' + width + ';height:' + height + '"/>' +
'<img src="' + path + '" alt="' + alt + '" style="width:' + width + ';height:' + height + '"/>' +
'</div>' +
'</div></li>')
.appendTo($container)
.children('.h5p-memory-card')
.on('keydown', function (event) {
switch (event.which) {
case 13: // Enter
case 32: // Space
self.flip();
event.preventDefault();
return;
case 39: // Right
case 40: // Down
// Move focus forward
self.trigger('next');
event.preventDefault();
return;
case 37: // Left
case 38: // Up
// Move focus back
self.trigger('prev');
event.preventDefault();
return;
case 35:
// Move to last card
self.trigger('last');
event.preventDefault();
return;
case 36:
// Move to first card
self.trigger('first');
event.preventDefault();
return;
}
});
$wrapper.attr('aria-label', l10n.cardPrefix.replace('%num', $wrapper.index() + 1) + ' ' + l10n.cardUnturned);
$card = $wrapper.children('.h5p-memory-card')
.children('.h5p-front')
.click(function () {
self.flip();
@ -104,11 +179,47 @@
};
/**
* Re-append to parent container
* Re-append to parent container.
*/
self.reAppend = function () {
var parent = $card[0].parentElement.parentElement;
parent.appendChild($card[0].parentElement);
var parent = $wrapper[0].parentElement;
parent.appendChild($wrapper[0]);
};
/**
* Make the card accessible when tabbing
*/
self.makeTabbable = function () {
if ($wrapper) {
$wrapper.attr('tabindex', '0');
}
};
/**
* Prevent tabbing to the card
*/
self.makeUntabbable = function () {
if ($wrapper) {
$wrapper.attr('tabindex', '-1');
}
};
/**
* Make card tabbable and move focus to it
*/
self.setFocus = function () {
self.makeTabbable();
if ($wrapper) {
$wrapper.focus();
}
};
/**
* Check if the card has been removed from the game, i.e. if has
* been matched.
*/
self.isRemoved = function () {
return removedState;
};
};

31
language/.en.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,8 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default": "#909090",
"spectrum": {}
"default": "#909090"
},
{
"label": "Card Back",
@ -80,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/af.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

35
language/ar.json
View File

@ -21,6 +21,14 @@
{
"label": "الوصف",
"description": "نص قصير يتم عرضه مرة واحدة علي اثنين من البطاقات متساوية"
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -77,11 +82,31 @@
},
{
"label": "Try again button text",
"default":"Try again?"
"default": "Reset"
},
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/bs.json
View File

@ -21,6 +21,14 @@
{
"label": "Opis",
"description": "Kratak tekst koji će biti prikazan čim se pronađu dvije iste karte."
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/ca.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/cs.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/da.json
View File

@ -21,6 +21,14 @@
{
"label": "Beskrivelse",
"description": "Valgfri tekst, som popper op, når to matchende billeder er fundet."
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
@ -49,10 +57,7 @@
{
"label": "Farvetema",
"description": "Vælg en farve til bagsiden af dine kort.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Bagsidebillede",
@ -82,6 +87,26 @@
{
"label": "Luk knaptekst",
"default": "Luk"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

73
language/de.json
View File

@ -3,7 +3,7 @@
{
"widgets": [
{
"label":"Vorgaben"
"label": "Default"
}
],
"label": "Karten",
@ -15,48 +15,53 @@
"label": "Bild"
},
{
"label":"Passendes Bild",
"description":"Ein optionales anderes Bild als Gegenstück statt zwei Karten mit dem selben Bild zu nutzen"
"label": "Matching Image",
"description": "An optional image to match against instead of using two cards with the same image."
},
{
"label": "Beschreibung",
"description": "Ein kurzer Text, der angezeigt wird, sobald zwei identische Karten gefunden werden."
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
},
{
"label":"Interaktionseinstellungen",
"description":"Mit diesen Einstellungen kannst du das Verhalten des Spiels anpassen.",
"label": "Behavioural settings",
"description": "These options will let you control how the game behaves.",
"fields": [
{
"label":"Positioniere die Karten in einem Quadrat.",
"description":"Es wird versucht, die Anzahl der Zeilen und Spalten passend zu den Karten einzustellen. Danach werden die Karten passend skaliert."
"label": "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":"Anzahl der zu nutzenden Karten",
"description":"Wird hier eine Zahl größer als 2 eingestellt, werden zufällig Karten aus der Kartenliste gezogen."
"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":"Füge einen Button hinzu, um das Spiel noch einmal neu zu starten zu können, wenn es vorbei ist."
"label": "Add button for retrying when the game is over"
}
]
},
{
"label":"Design-Aspekte",
"description":"Beeinflusse die Optik des Spiels",
"label": "Look and feel",
"description": "Control the visuals of the game.",
"fields": [
{
"label":"Themenfarbe",
"description":"Wähle eine Farbe, um ein Theme für deine Karten zu erstellen.",
"default":"#909090",
"spectrum":{
}
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default": "#909090"
},
{
"label":"Kartenrückseite",
"description":"Nutze eine individuelle Rückseite für deine Karten."
"label": "Card Back",
"description": "Use a custom back for your cards."
}
]
},
@ -76,12 +81,32 @@
"default": "Gute Arbeit!"
},
{
"label":"Text des Wiederholen-Buttons",
"default":"Erneut versuchen?"
"label": "Try again button text",
"default": "Reset"
},
{
"label":"Beschriftung des \"Abbrechen\"-Buttons",
"default":"Schließen"
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/el.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/es.json
View File

@ -21,6 +21,14 @@
{
"label": "Descripción",
"description": "Un breve texto opcional que aparecerá una vez se encuentren las dos cartas coincidentes."
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
@ -49,10 +57,7 @@
{
"label": "Color del tema",
"description": "Elegir un color para crear un tema para su juego de cartas.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Parte posterior de la tarjeta",
@ -82,6 +87,26 @@
{
"label": "Etiqueta del botón Cerrar",
"default": "Cerrar"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/et.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/fi.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

35
language/fr.json
View File

@ -21,6 +21,14 @@
{
"label": "Description",
"description": "Petit texte affiché quand deux cartes identiques sont trouvées."
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -77,11 +82,31 @@
},
{
"label": "Try again button text",
"default":"Try again?"
"default": "Reset"
},
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/he.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/hu.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

35
language/it.json
View File

@ -21,6 +21,14 @@
{
"label": "Descrizione",
"description": "Breve testo visualizzato quando due carte uguali vengono trovate."
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -77,11 +82,31 @@
},
{
"label": "Try again button text",
"default":"Try again?"
"default": "Reset"
},
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/ja.json
View File

@ -21,6 +21,14 @@
{
"label": "説明",
"description": "一致する2つのカードが見つかるとポップアップするオプションの短文テキスト。"
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
@ -49,10 +57,7 @@
{
"label": "テーマ色",
"description": "カードゲームのテーマとなる色を選択してください。",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "カード裏",
@ -82,6 +87,26 @@
{
"label": "閉じるボタンのテキスト",
"default": "閉じる"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/ko.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/nb.json
View File

@ -21,6 +21,14 @@
{
"label": "Beskrivelse",
"description": "En valgfri kort tekst som spretter opp når kort-paret er funnet."
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
@ -49,10 +57,7 @@
{
"label": "Temafarge",
"description": "Velg en farge for å skape et tema over kortspillet ditt.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Kortbaksiden",
@ -82,6 +87,26 @@
{
"label": "Lukk knapp-merkelapp",
"default": "Lukk"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/nl.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/nn.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/pl.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/pt.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/ro.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/ru.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/sr.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/sv.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/tr.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

33
language/vi.json
View File

@ -18,6 +18,14 @@
"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": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
@ -49,10 +57,7 @@
{
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default":"#909090",
"spectrum":{
}
"default": "#909090"
},
{
"label": "Card Back",
@ -82,6 +87,26 @@
{
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

14
memory-game.css
View File

@ -1,6 +1,14 @@
.h5p-memory-game {
overflow: hidden;
}
.h5p-memory-game .h5p-memory-hidden-read {
position: absolute;
top: -1px;
left: -1px;
width: 1px;
height: 1px;
color: transparent;
}
.h5p-memory-game > ul {
list-style: none !important;
padding: 0.25em 0.5em !important;
@ -186,9 +194,6 @@
margin: 0 1em 0 0;
font-weight: bold;
}
.h5p-memory-game .h5p-status > dt:after {
content: ":";
}
.h5p-memory-game .h5p-status > dd {
margin: 0;
}
@ -307,3 +312,6 @@
transform: translate(-50%,-450%) scale(0) rotate(360deg);
opacity: 0;
}
.h5p-memory-complete {
display: none;
}

173
memory-game.js
View File

@ -5,6 +5,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
var CARD_STD_SIZE = 116; // PX
var STD_FONT_SIZE = 16; // PX
var LIST_PADDING = 1; // EMs
var numInstances = 0;
/**
* Memory Game Constructor
@ -21,11 +22,28 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// Initialize event inheritance
EventDispatcher.call(self);
var flipped, timer, counter, popup, $feedback, $wrapper, maxWidth, numCols;
var flipped, timer, counter, popup, $bottom, $taskComplete, $feedback, $wrapper, maxWidth, numCols;
var cards = [];
var flipBacks = []; // Que of cards to be flipped back
var numFlipped = 0;
var removed = 0;
numInstances++;
// Add defaults
parameters = $.extend(true, {
l10n: {
cardTurns: 'Card turns',
timeSpent: 'Time spent',
feedback: 'Good work!',
tryAgain: 'Reset',
closeLabel: 'Close',
label: 'Memory Game. Find the matching cards.',
done: 'All of the cards have been found.',
cardPrefix: 'Card %num: ',
cardUnturned: 'Unturned.',
cardMatched: 'Match found.'
}
}, parameters);
/**
* Check if these two cards belongs together.
@ -49,17 +67,17 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
return;
}
// Remove them from the game.
card.remove();
mate.remove();
// Update counters
numFlipped -= 2;
removed += 2;
var isFinished = (removed === cards.length);
var desc = card.getDescription();
// Remove them from the game.
card.remove(!isFinished);
mate.remove();
var desc = card.getDescription();
if (desc !== undefined) {
// Pause timer and show desciption.
timer.pause();
@ -67,19 +85,25 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
if (card.hasTwoImages) {
imgs.push(mate.getImage());
}
popup.show(desc, imgs, cardStyles ? cardStyles.back : undefined, function () {
popup.show(desc, imgs, cardStyles ? cardStyles.back : undefined, function (refocus) {
if (isFinished) {
// Game done
card.makeUntabbable();
finished();
}
else {
// Popup is closed, continue.
timer.play();
if (refocus) {
card.setFocus();
}
}
});
}
else if (isFinished) {
// Game done
card.makeUntabbable();
finished();
}
};
@ -90,7 +114,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
*/
var finished = function () {
timer.stop();
$feedback.addClass('h5p-show');
$taskComplete.show();
$feedback.addClass('h5p-show'); // Announce
$bottom.focus();
// Create and trigger xAPI event 'completed'
var completedEvent = self.createXAPIEventTemplate('completed');
@ -113,7 +139,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
});
retryButton.classList.add('h5p-memory-transin');
setTimeout(function () {
// Remove class on nextTick to get transition effect
// Remove class on nextTick to get transition effectupd
retryButton.classList.remove('h5p-memory-transin');
}, 0);
@ -132,12 +158,10 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// Reset cards
removed = 0;
for (var i = 0; i < cards.length; i++) {
cards[i].reset();
}
// Remove feedback
$feedback[0].classList.remove('h5p-show');
$taskComplete.hide();
// Reset timer and counter
timer.reset();
@ -151,11 +175,15 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
for (var i = 0; i < cards.length; i++) {
cards[i].reAppend();
}
for (var j = 0; j < cards.length; j++) {
cards[j].reset();
}
// Scale new layout
$wrapper.children('ul').children('.h5p-row-break').removeClass('h5p-row-break');
maxWidth = -1;
self.trigger('resize');
cards[0].setFocus();
}, 600);
};
@ -190,6 +218,14 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
*/
var addCard = function (card, mate) {
card.on('flip', function () {
// Always return focus to the card last flipped
for (var i = 0; i < cards.length; i++) {
cards[i].makeUntabbable();
}
card.makeTabbable();
popup.close();
self.triggerXAPI('interacted');
// Keep track of time spent
timer.play();
@ -197,6 +233,11 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// Keep track of the number of flipped cards
numFlipped++;
// Announce the card unless it's the last one and it's correct
var isMatched = (flipped === mate);
var isLast = ((removed + 2) === cards.length);
card.updateLabel(isMatched, !(isMatched && isLast));
if (flipped !== undefined) {
var matie = flipped;
// Reset the flipped card.
@ -220,6 +261,72 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
counter.increment();
});
/**
* Create event handler for moving focus to the next or the previous
* card on the table.
*
* @private
* @param {number} direction +1/-1
* @return {function}
*/
var createCardChangeFocusHandler = function (direction) {
return function () {
// Locate next card
for (var i = 0; i < cards.length; i++) {
if (cards[i] === card) {
// Found current card
var nextCard, fails = 0;
do {
fails++;
nextCard = cards[i + (direction * fails)];
if (!nextCard) {
return; // No more cards
}
}
while (nextCard.isRemoved());
card.makeUntabbable();
nextCard.setFocus();
return;
}
}
};
};
// Register handlers for moving focus to next and previous card
card.on('next', createCardChangeFocusHandler(1));
card.on('prev', createCardChangeFocusHandler(-1));
/**
* Create event handler for moving focus to the first or the last card
* on the table.
*
* @private
* @param {number} direction +1/-1
* @return {function}
*/
var createEndCardFocusHandler = function (direction) {
return function () {
var focusSet = false;
for (var i = 0; i < cards.length; i++) {
var j = (direction === -1 ? cards.length - (i + 1) : i);
if (!focusSet && !cards[j].isRemoved()) {
cards[j].setFocus();
focusSet = true;
}
else if (cards[j] === card) {
card.makeUntabbable();
}
}
};
};
// Register handlers for moving focus to first and last card
card.on('first', createEndCardFocusHandler(1));
card.on('last', createEndCardFocusHandler(-1));
cards.push(card);
};
@ -277,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.description, cardStyles);
var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles);
if (MemoryGame.Card.hasTwoImages(cardParams)) {
// Use matching image for card two
cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.description, cardStyles);
cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.matchAlt, parameters.l10n, cardParams.description, cardStyles);
cardOne.hasTwoImages = cardTwo.hasTwoImages = true;
}
else {
// Add two cards with the same image
cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.description, cardStyles);
cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles);
}
// Add cards to card list for shuffeling
@ -310,25 +417,45 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
}
// Add cards to list
var $list = $('<ul/>');
var $list = $('<ul/>', {
role: 'application',
'aria-labelledby': 'h5p-intro-' + numInstances
});
for (var i = 0; i < cards.length; i++) {
cards[i].appendTo($list);
}
cards[0].makeTabbable();
if ($list.children().length) {
$('<div/>', {
id: 'h5p-intro-' + numInstances,
'class': 'h5p-memory-hidden-read',
html: parameters.l10n.label,
appendTo: $container
});
$list.appendTo($container);
$feedback = $('<div class="h5p-feedback">' + parameters.l10n.feedback + '</div>').appendTo($container);
$bottom = $('<div/>', {
tabindex: '-1',
appendTo: $container
});
$taskComplete = $('<div/>', {
'class': 'h5p-memory-complete h5p-memory-hidden-read',
html: parameters.l10n.done,
appendTo: $bottom
});
$feedback = $('<div class="h5p-feedback">' + parameters.l10n.feedback + '</div>').appendTo($bottom);
// Add status bar
var $status = $('<dl class="h5p-status">' +
'<dt>' + parameters.l10n.timeSpent + '</dt>' +
'<dd class="h5p-time-spent">0:00</dd>' +
'<dt>' + parameters.l10n.cardTurns + '</dt>' +
'<dd class="h5p-card-turns">0</dd>' +
'</dl>').appendTo($container);
'<dt>' + parameters.l10n.timeSpent + ':</dt>' +
'<dd class="h5p-time-spent"><time role="timer" datetime="PT0M0S">0:00</time><span class="h5p-memory-hidden-read">.</span></dd>' +
'<dt>' + parameters.l10n.cardTurns + ':</dt>' +
'<dd class="h5p-card-turns">0<span class="h5p-memory-hidden-read">.</span></dd>' +
'</dl>').appendTo($bottom);
timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
timer = new MemoryGame.Timer($status.find('time')[0]);
counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
popup = new MemoryGame.Popup($container, parameters.l10n);

14
popup.js
View File

@ -13,16 +13,16 @@
var closed;
var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"></div><div class="h5p-memory-desc"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
var $popup = $('<div class="h5p-memory-pop" role="dialog"><div class="h5p-memory-top"></div><div class="h5p-memory-desc" tabindex="-1"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
var $desc = $popup.find('.h5p-memory-desc');
var $top = $popup.find('.h5p-memory-top');
// Hook up the close button
$popup.find('.h5p-memory-close').on('click', function () {
self.close();
self.close(true);
}).on('keypress', function (event) {
if (event.which === 13 || event.which === 32) {
self.close();
self.close(true);
event.preventDefault();
}
});
@ -41,22 +41,26 @@
$('<div class="h5p-memory-image"' + (styles ? styles : '') + '></div>').append(imgs[i]).appendTo($top);
}
$popup.show();
$desc.focus();
closed = done;
};
/**
* Close the popup.
*
* @param {boolean} refocus Sets focus after closing the dialog
*/
self.close = function () {
self.close = function (refocus) {
if (closed !== undefined) {
$popup.hide();
closed();
closed(refocus);
closed = undefined;
}
};
/**
* Sets popup size relative to the card size
*
* @param {number} fontSize
*/
self.setSize = function (fontSize) {

52
semantics.json
View File

@ -26,6 +26,13 @@
"importance": "high",
"ratio": 1
},
{
"name": "imageAlt",
"type": "text",
"label": "Alternative text for Image",
"importance": "high",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"name": "match",
"type": "image",
@ -35,6 +42,14 @@
"description": "An optional image to match against instead of using two cards with the same image.",
"ratio": 1
},
{
"name": "matchAlt",
"type": "text",
"label": "Alternative text for Matching Image",
"importance": "low",
"optional": true,
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"name": "description",
"type": "text",
@ -146,7 +161,7 @@
"importance": "low",
"name": "tryAgain",
"type": "text",
"default": "Try again?"
"default": "Reset"
},
{
"label": "Close button label",
@ -154,6 +169,41 @@
"name": "closeLabel",
"type": "text",
"default": "Close"
},
{
"label": "Game label",
"importance": "low",
"name": "label",
"type": "text",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"importance": "low",
"name": "done",
"type": "text",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"importance": "low",
"name": "cardPrefix",
"type": "text",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"importance": "low",
"name": "cardUnturned",
"type": "text",
"default": "Unturned."
},
{
"label": "Card matched label",
"importance": "low",
"name": "cardMatched",
"type": "text",
"default": "Match found."
}
]
}

5
timer.js
View File

@ -28,6 +28,11 @@
var minutes = Timer.extractTimeElement(time, 'minutes');
var seconds = Timer.extractTimeElement(time, 'seconds') % 60;
// Update duration attribute
element.setAttribute('datetime', 'PT' + minutes + 'M' + seconds + 'S');
// Add leading zero
if (seconds < 10) {
seconds = '0' + seconds;
}