HFP-1266 Add accessibility support to dialog and timer

Improved keyboard support.
Made labels translatable.
pull/30/head^2
Frode Petterson 2017-09-25 14:38:14 +02:00
parent f17d7cb4b2
commit 4ecc636ab0
12 changed files with 420 additions and 169 deletions

22
card.js
View File

@ -8,10 +8,11 @@
* @param {Object} image
* @param {number} id
* @param {string} alt
* @param {Object} l10n Localization
* @param {string} [description]
* @param {Object} [styles]
*/
MemoryGame.Card = function (image, id, alt, description, styles) {
MemoryGame.Card = function (image, id, alt, l10n, description, styles) {
/** @alias H5P.MemoryGame.Card# */
var self = this;
@ -47,13 +48,13 @@
self.updateLabel = function (isMatched, announce, reset) {
// Determine new label from input params
var label = (reset ? 'Unturned' : alt);
var label = (reset ? l10n.cardUnturned : alt);
if (isMatched) {
label = 'Match found. ' + label; // TODO l10n
label = l10n.cardMatched + ' ' + label;
}
// Update the card's label
$wrapper.attr('aria-label', 'Card ' + ($wrapper.index() + 1) + ': ' + label); // TODO l10n
$wrapper.attr('aria-label', l10n.cardPrefix.replace('%num', $wrapper.index() + 1) + ' ' + label);
// Update disabled property
$wrapper.attr('aria-disabled', reset ? null : 'true');
@ -155,9 +156,20 @@
self.trigger('prev');
event.preventDefault();
return;
case 35:
// Move to last card
self.trigger('last');
event.preventDefault();
return;
case 36:
// Move to first card
self.trigger('first');
event.preventDefault();
return;
}
});
$wrapper.attr('aria-label', 'Card ' + ($wrapper.index() + 1) + ': Unturned.'); // TODO l10n
$wrapper.attr('aria-label', l10n.cardPrefix.replace('%num', $wrapper.index() + 1) + ' ' + l10n.cardUnturned);
$card = $wrapper.children('.h5p-memory-card')
.children('.h5p-front')
.click(function () {

View File

@ -1,6 +1,11 @@
{
"semantics": [
{
"widgets": [
{
"label": "Default"
}
],
"label": "البطاقات",
"entity": "بطاقة",
"field": {
@ -10,53 +15,53 @@
"label": "الصورة"
},
{
"englishLabel": "Matching Image",
"label": "Matching Image",
"englishDescription": "An optional image to match against instead of using two cards with the same image.",
"description": "An optional image to match against instead of using two cards with the same image."
},
{
"label": "الوصف",
"description": "نص قصير يتم عرضه مرة واحدة علي اثنين من البطاقات متساوية"
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
},
{
"englishLabel": "Behavioural settings",
"label": "Behavioural settings",
"englishDescription": "These options will let you control how the game behaves.",
"description": "These options will let you control how the game behaves.",
"fields": [
{
"englishLabel": "Position the cards in a square",
"label": "Position the cards in a square",
"englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
"description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
},
{
"englishLabel": "Number of cards to use",
"label": "Number of cards to use",
"englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
"description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
},
{
"englishLabel": "Add button for retrying when the game is over",
"label": "Add button for retrying when the game is over"
}
]
},
{
"englishLabel": "Look and feel",
"englishDescription": "Control the visuals of the game.",
"label": "Look and feel",
"description": "Control the visuals of the game.",
"fields": [
{
"englishLabel": "Theme Color",
"englishDescription": "Choose a color to create a theme for your card game."
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default": "#909090"
},
{
"englishLabel": "Card Back",
"englishDescription": "Use a custom back for your cards."
"label": "Card Back",
"description": "Use a custom back for your cards."
}
]
},
@ -64,21 +69,44 @@
"label": "الأقلمة",
"fields": [
{
"label": "نص تدوير البطاقة"
"label": "نص تدوير البطاقة",
"default": "Card turns"
},
{
"label": "نص التوقيت الزمني"
"label": "نص التوقيت الزمني",
"default": "Time spent"
},
{
"label": "نص الملاحظات"
"label": "نص الملاحظات",
"default": "Good work!"
},
{
"englishLabel": "Try again button text",
"englishDefault": "Try again?"
"label": "Try again button text",
"default": "Reset"
},
{
"englishLabel": "Close button label",
"englishDefault": "Close"
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

View File

@ -1,6 +1,11 @@
{
"semantics": [
{
"widgets": [
{
"label": "Default"
}
],
"label": "Karte",
"entity": "karte",
"field": {
@ -10,53 +15,53 @@
"label": "Slika"
},
{
"englishLabel": "Matching Image",
"label": "Ista slika",
"englishDescription": "An optional image to match against instead of using two cards with the same image.",
"description": "Opcionalna slika koja se koristi umjestodvije iste slike."
},
{
"label": "Opis",
"description": "Kratak tekst koji će biti prikazan čim se pronađu dvije iste karte."
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
},
{
"englishLabel": "Behavioural settings",
"label": "Podešavanje ponašanja",
"englishDescription": "These options will let you control how the game behaves.",
"description": "These options will let you control how the game behaves.",
"fields": [
{
"englishLabel": "Position the cards in a square",
"label": "Poredaj karte u redove ",
"englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
"description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
},
{
"englishLabel": "Number of cards to use",
"label": "Broj karata za upotrebu",
"englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
"description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
},
{
"englishLabel": "Add button for retrying when the game is over",
"label": "Add button for retrying when the game is over"
}
]
},
{
"englishLabel": "Look and feel",
"englishDescription": "Control the visuals of the game.",
"label": "Look and feel",
"description": "Control the visuals of the game.",
"fields": [
{
"englishLabel": "Theme Color",
"englishDescription": "Choose a color to create a theme for your card game."
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default": "#909090"
},
{
"englishLabel": "Poleđina karata",
"englishDescription": "Koristi standardnu pozadinu za karte."
"label": "Card Back",
"description": "Use a custom back for your cards."
}
]
},
@ -76,14 +81,32 @@
"default": "BRAVO!"
},
{
"englishLabel": "Try again button text",
"label": "Tekst na dugmetu pokušaj ponovo",
"englishDefault": "Try again?",
"default": "Pokušaj ponovo?"
},
{
"englishLabel": "Close button label",
"englishDefault": "Close"
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

View File

@ -1,6 +1,11 @@
{
"semantics": [
{
"widgets": [
{
"label": "Default"
}
],
"label": "Karten",
"entity": "karte",
"field": {
@ -10,53 +15,53 @@
"label": "Bild"
},
{
"englishLabel": "Matching Image",
"label": "Matching Image",
"englishDescription": "An optional image to match against instead of using two cards with the same image.",
"description": "An optional image to match against instead of using two cards with the same image."
},
{
"label": "Beschreibung",
"description": "Ein kurzer Text, der angezeigt wird, sobald zwei identische Karten gefunden werden."
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
},
{
"englishLabel": "Behavioural settings",
"label": "Behavioural settings",
"englishDescription": "These options will let you control how the game behaves.",
"description": "These options will let you control how the game behaves.",
"fields": [
{
"englishLabel": "Position the cards in a square",
"label": "Position the cards in a square",
"englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
"description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
},
{
"englishLabel": "Number of cards to use",
"label": "Number of cards to use",
"englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
"description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
},
{
"englishLabel": "Add button for retrying when the game is over",
"label": "Add button for retrying when the game is over"
}
]
},
{
"englishLabel": "Look and feel",
"englishDescription": "Control the visuals of the game.",
"label": "Look and feel",
"description": "Control the visuals of the game.",
"fields": [
{
"englishLabel": "Theme Color",
"englishDescription": "Choose a color to create a theme for your card game."
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default": "#909090"
},
{
"englishLabel": "Card Back",
"englishDescription": "Use a custom back for your cards."
"label": "Card Back",
"description": "Use a custom back for your cards."
}
]
},
@ -76,12 +81,32 @@
"default": "Gute Arbeit!"
},
{
"englishLabel": "Try again button text",
"englishDefault": "Try again?"
"label": "Try again button text",
"default": "Reset"
},
{
"englishLabel": "Close button label",
"englishDefault": "Close"
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

View File

@ -1,6 +1,11 @@
{
"semantics": [
{
"widgets": [
{
"label": "Default"
}
],
"label": "Cartes",
"entity": "carte",
"field": {
@ -10,53 +15,53 @@
"label": "Image"
},
{
"englishLabel": "Matching Image",
"label": "Matching Image",
"englishDescription": "An optional image to match against instead of using two cards with the same image.",
"description": "An optional image to match against instead of using two cards with the same image."
},
{
"label": "Description",
"description": "Petit texte affiché quand deux cartes identiques sont trouvées."
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
},
{
"englishLabel": "Behavioural settings",
"label": "Behavioural settings",
"englishDescription": "These options will let you control how the game behaves.",
"description": "These options will let you control how the game behaves.",
"fields": [
{
"englishLabel": "Position the cards in a square",
"label": "Position the cards in a square",
"englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
"description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
},
{
"englishLabel": "Number of cards to use",
"label": "Number of cards to use",
"englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
"description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
},
{
"englishLabel": "Add button for retrying when the game is over",
"label": "Add button for retrying when the game is over"
}
]
},
{
"englishLabel": "Look and feel",
"englishDescription": "Control the visuals of the game.",
"label": "Look and feel",
"description": "Control the visuals of the game.",
"fields": [
{
"englishLabel": "Theme Color",
"englishDescription": "Choose a color to create a theme for your card game."
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default": "#909090"
},
{
"englishLabel": "Card Back",
"englishDescription": "Use a custom back for your cards."
"label": "Card Back",
"description": "Use a custom back for your cards."
}
]
},
@ -76,12 +81,32 @@
"default": "Bien joué !"
},
{
"englishLabel": "Try again button text",
"englishDefault": "Try again?"
"label": "Try again button text",
"default": "Reset"
},
{
"englishLabel": "Close button label",
"englishDefault": "Close"
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

View File

@ -1,6 +1,11 @@
{
"semantics": [
{
"widgets": [
{
"label": "Default"
}
],
"label": "Carte",
"entity": "carta",
"field": {
@ -10,53 +15,53 @@
"label": "Immagine"
},
{
"englishLabel": "Matching Image",
"label": "Matching Image",
"englishDescription": "An optional image to match against instead of using two cards with the same image.",
"description": "An optional image to match against instead of using two cards with the same image."
},
{
"label": "Descrizione",
"description": "Breve testo visualizzato quando due carte uguali vengono trovate."
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
},
{
"englishLabel": "Behavioural settings",
"label": "Behavioural settings",
"englishDescription": "These options will let you control how the game behaves.",
"description": "These options will let you control how the game behaves.",
"fields": [
{
"englishLabel": "Position the cards in a square",
"label": "Position the cards in a square",
"englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
"description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
},
{
"englishLabel": "Number of cards to use",
"label": "Number of cards to use",
"englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
"description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
},
{
"englishLabel": "Add button for retrying when the game is over",
"label": "Add button for retrying when the game is over"
}
]
},
{
"englishLabel": "Look and feel",
"englishDescription": "Control the visuals of the game.",
"label": "Look and feel",
"description": "Control the visuals of the game.",
"fields": [
{
"englishLabel": "Theme Color",
"englishDescription": "Choose a color to create a theme for your card game."
"label": "Theme Color",
"description": "Choose a color to create a theme for your card game.",
"default": "#909090"
},
{
"englishLabel": "Card Back",
"englishDescription": "Use a custom back for your cards."
"label": "Card Back",
"description": "Use a custom back for your cards."
}
]
},
@ -64,21 +69,44 @@
"label": "Localizzazione",
"fields": [
{
"label": "Testo Gira carta"
"label": "Testo Gira carta",
"default": "Card turns"
},
{
"label": "Testo Tempo trascorso"
"label": "Testo Tempo trascorso",
"default": "Time spent"
},
{
"label": "Testo Feedback"
"label": "Testo Feedback",
"default": "Good work!"
},
{
"englishLabel": "Try again button text",
"englishDefault": "Try again?"
"label": "Try again button text",
"default": "Reset"
},
{
"englishLabel": "Close button label",
"englishDefault": "Close"
"label": "Close button label",
"default": "Close"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

View File

@ -1,110 +1,112 @@
{
"semantics": [
{
"englishLabel": "Cards",
"widgets": [
{
"label": "Default"
}
],
"label": "Kort",
"englishEntity": "card",
"entity": "kort",
"field": {
"englishLabel": "Card",
"label": "Kort",
"fields": [
{
"englishLabel": "Image",
"label": "Bilde"
},
{
"englishLabel": "Matching Image",
"label": "Tilhørende bilde",
"englishDescription": "An optional image to match against instead of using two cards with the same image.",
"description": "Et valgfritt bilde som brukes av kort nummer to istedenfor å bruke to kort med samme bilde."
},
{
"englishLabel": "Description",
"label": "Beskrivelse",
"englishDescription": "An optional short text that will pop up once the two matching cards are found.",
"description": "En valgfri kort tekst som spretter opp når kort-paret er funnet."
},
{
"label": "Alternative text for Matching Image",
"description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
},
{
"label": "Description",
"description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
},
{
"englishLabel": "Behavioural settings",
"label": "Innstillinger for oppførsel",
"englishDescription": "These options will let you control how the game behaves.",
"description": "Disse instillingene lar deg bestemme hvordan spillet skal oppføre seg.",
"fields": [
{
"englishLabel": "Position the cards in a square",
"label": "Plasser kortene i en firkant",
"englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
"description": "Vil forsøk å samsvare antall kolonner og rader når kortene legges ut. Etterpå vil kortene bli skalert til å passe beholderen."
},
{
"englishLabel": "Number of cards to use",
"label": "Antall kort som skal brukes",
"englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
"description": "Ved å sette antallet høyere enn 2 vil spillet plukke tilfeldige kort fra listen over kort."
},
{
"englishLabel": "Add button for retrying when the game is over",
"label": "Legg til knapp for å prøve på nytt når spillet er over"
}
]
},
{
"englishLabel": "Look and feel",
"label": "Tilpass utseende",
"englishDescription": "Control the visuals of the game.",
"description": "Kontroller de visuelle aspektene ved spillet.",
"fields": [
{
"englishLabel": "Theme Color",
"label": "Temafarge",
"englishDescription": "Choose a color to create a theme for your card game.",
"description": "Velg en farge for å skape et tema over kortspillet ditt."
"description": "Velg en farge for å skape et tema over kortspillet ditt.",
"default": "#909090"
},
{
"englishLabel": "Card Back",
"label": "Kortbaksiden",
"englishDescription": "Use a custom back for your cards.",
"description": "Bruk en tilpasset kortbakside for kortene dine."
}
]
},
{
"englishLabel": "Localization",
"label": "Oversettelser",
"fields": [
{
"englishLabel": "Card turns text",
"label": "Etikett for antall vendte kort",
"englishDefault": "Card turns",
"default": "Kort vendt"
},
{
"englishLabel": "Time spent text",
"label": "Etikett for tid brukt",
"englishDefault": "Time spent",
"default": "Tid brukt"
},
{
"englishLabel": "Feedback text",
"label": "Tilbakemeldingstekst",
"englishDefault": "Good work!",
"default": "Godt jobbet!"
},
{
"englishLabel": "Try again button text",
"label": "Prøv på nytt-tekst",
"englishDefault": "Try again?",
"default": "Prøv på nytt?"
},
{
"englishLabel": "Close button label",
"label": "Lukk knapp-merkelapp",
"englishDefault": "Close",
"default": "Lukk"
},
{
"label": "Game label",
"default": "Memory Game. Find the matching cards."
},
{
"label": "Game finished label",
"default": "All of the cards have been found."
},
{
"label": "Card indexing label",
"default": "Card %num:"
},
{
"label": "Card unturned label",
"default": "Unturned."
},
{
"label": "Card matched label",
"default": "Match found."
}
]
}

View File

@ -194,9 +194,6 @@
margin: 0 1em 0 0;
font-weight: bold;
}
.h5p-memory-game .h5p-status > dt:after {
content: ":";
}
.h5p-memory-game .h5p-status > dd {
margin: 0;
}
@ -314,3 +311,6 @@
transform: translate(-50%,-450%) scale(0) rotate(360deg);
opacity: 0;
}
.h5p-memory-complete {
display: none;
}

View File

@ -22,13 +22,29 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// Initialize event inheritance
EventDispatcher.call(self);
var flipped, timer, counter, popup, $bottom, $feedback, $wrapper, maxWidth, numCols;
var flipped, timer, counter, popup, $bottom, $taskComplete, $feedback, $wrapper, maxWidth, numCols;
var cards = [];
var flipBacks = []; // Que of cards to be flipped back
var numFlipped = 0;
var removed = 0;
numInstances++;
// Add defaults
parameters = $.extend(true, {
l10n: {
cardTurns: 'Card turns',
timeSpent: 'Time spent',
feedback: 'Good work!',
tryAgain: 'Reset',
closeLabel: 'Close',
label: 'Memory Game. Find the matching cards.',
done: 'All of the cards have been found.',
cardPrefix: 'Card %num: ',
cardUnturned: 'Unturned.',
cardMatched: 'Match found.'
}
}, parameters);
/**
* Check if these two cards belongs together.
*
@ -69,7 +85,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
if (card.hasTwoImages) {
imgs.push(mate.getImage());
}
popup.show(desc, imgs, cardStyles ? cardStyles.back : undefined, function () {
popup.show(desc, imgs, cardStyles ? cardStyles.back : undefined, function (refocus) {
if (isFinished) {
// Game done
card.makeUntabbable();
@ -78,6 +94,10 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
else {
// Popup is closed, continue.
timer.play();
if (refocus) {
card.setFocus();
}
}
});
}
@ -94,6 +114,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
*/
var finished = function () {
timer.stop();
$taskComplete.show();
$feedback.addClass('h5p-show'); // Announce
$bottom.focus();
@ -140,6 +161,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// Remove feedback
$feedback[0].classList.remove('h5p-show');
$taskComplete.hide();
// Reset timer and counter
timer.reset();
@ -196,6 +218,14 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
*/
var addCard = function (card, mate) {
card.on('flip', function () {
// Always return focus to the card last flipped
for (var i = 0; i < cards.length; i++) {
cards[i].makeUntabbable();
}
card.makeTabbable();
popup.close();
self.triggerXAPI('interacted');
// Keep track of time spent
timer.play();
@ -232,8 +262,12 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
});
/**
* Create event handler for moving focus to the next or the previous
* card on the table.
*
* @private
* @param {number} direction
* @param {number} direction +1/-1
* @return {function}
*/
var createCardChangeFocusHandler = function (direction) {
return function () {
@ -261,8 +295,38 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
};
};
// Register handlers for moving focus to next and previous card
card.on('next', createCardChangeFocusHandler(1));
card.on('prev', createCardChangeFocusHandler(-1));
/**
* Create event handler for moving focus to the first or the last card
* on the table.
*
* @private
* @param {number} direction +1/-1
* @return {function}
*/
var createEndCardFocusHandler = function (direction) {
return function () {
var focusSet = false;
for (var i = 0; i < cards.length; i++) {
var j = (direction === -1 ? cards.length - (i + 1) : i);
if (!focusSet && !cards[j].isRemoved()) {
cards[j].setFocus();
focusSet = true;
}
else if (cards[j] === card) {
card.makeUntabbable();
}
}
};
};
// Register handlers for moving focus to first and last card
card.on('first', createEndCardFocusHandler(1));
card.on('last', createEndCardFocusHandler(-1));
cards.push(card);
};
@ -320,16 +384,16 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
var cardParams = cardsToUse[i];
if (MemoryGame.Card.isValid(cardParams)) {
// Create first card
var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, cardParams.description, cardStyles);
var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles);
if (MemoryGame.Card.hasTwoImages(cardParams)) {
// Use matching image for card two
cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.matchAlt, cardParams.description, cardStyles);
cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.matchAlt, parameters.l10n, cardParams.description, cardStyles);
cardOne.hasTwoImages = cardTwo.hasTwoImages = true;
}
else {
// Add two cards with the same image
cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, cardParams.description, cardStyles);
cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles);
}
// Add cards to card list for shuffeling
@ -366,7 +430,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
$('<div/>', {
id: 'h5p-intro-' + numInstances,
'class': 'h5p-memory-hidden-read',
html: 'Memory Game. Find the matching cards.', // TODO: l10n
html: parameters.l10n.label,
appendTo: $container
});
$list.appendTo($container);
@ -375,9 +439,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
tabindex: '-1',
appendTo: $container
});
$('<div/>', {
'class': 'h5p-memory-hidden-read',
html: 'All of the cards have been found.', // TODO: l10n
$taskComplete = $('<div/>', {
'class': 'h5p-memory-complete h5p-memory-hidden-read',
html: parameters.l10n.done,
appendTo: $bottom
});
@ -385,13 +449,13 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// Add status bar
var $status = $('<dl class="h5p-status">' +
'<dt>' + parameters.l10n.timeSpent + '</dt>' +
'<dd class="h5p-time-spent">0:00</dd>' + // TODO: Add hidden dot ?
'<dt>' + parameters.l10n.cardTurns + '</dt>' +
'<dd class="h5p-card-turns">0</dd>' +
'<dt>' + parameters.l10n.timeSpent + ':</dt>' +
'<dd class="h5p-time-spent"><time role="timer" datetime="PT0M0S">0:00</time><span class="h5p-memory-hidden-read">.</span></dd>' +
'<dt>' + parameters.l10n.cardTurns + ':</dt>' +
'<dd class="h5p-card-turns">0<span class="h5p-memory-hidden-read">.</span></dd>' +
'</dl>').appendTo($bottom);
timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
timer = new MemoryGame.Timer($status.find('time')[0]);
counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
popup = new MemoryGame.Popup($container, parameters.l10n);

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) {

View File

@ -169,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."
}
]
}

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;
}