From bc5668a4a006b64aa55681c0483b5e8a9c1a3001 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Tue, 28 Jun 2016 15:07:05 +0200 Subject: [PATCH] Accessible navigation line. Made readspeakers abel to announce all visible elements of the navigation line, i.e. answered/unanswered, current, and number. HFJ-2040 --- js/questionset.js | 71 +++++++++++++++++++++++++++++++++++++---------- language/ar.json | 12 ++++++++ language/de.json | 12 ++++++++ language/fr.json | 12 ++++++++ language/it.json | 12 ++++++++ language/nb.json | 12 ++++++++ language/nn.json | 12 ++++++++ semantics.json | 18 ++++++++++++ 8 files changed, 147 insertions(+), 14 deletions(-) diff --git a/js/questionset.js b/js/questionset.js index 4b9e440..2670ddc 100644 --- a/js/questionset.js +++ b/js/questionset.js @@ -41,7 +41,7 @@ H5P.QuestionSet = function (options, contentId) { ' <% if (progressType == "dots") { %>' + '
' + ' <% for (var i=0; i' + - ' ">' + + ' ">' + ' <%} %>' + '
' + ' <% } else if (progressType == "textual") { %>' + @@ -90,7 +90,10 @@ H5P.QuestionSet = function (options, contentId) { textualProgress: 'Question: @current of @total questions', jumpToQuestion: 'Jump to question %d', questionLabel: 'Question', - readSpeakerProgress: 'Question @current of @total' + readSpeakerProgress: 'Question @current of @total', + unansweredText: 'Unanswered', + answeredText: 'Answered', + currentQuestionText: 'Current question' }, endGame: { showResultPage: true, @@ -227,15 +230,12 @@ H5P.QuestionSet = function (options, contentId) { } else { // Set currentNess - var $currentQuestion = $('.progress-dot.current', $myDom); - var previousQuestion = $currentQuestion.index(); - $currentQuestion.removeClass('current'); - if (previousQuestion >= 0 && !questionInstances[previousQuestion].getAnswerGiven()) { - $currentQuestion - .removeClass('answered') - .addClass('unanswered'); + var previousQuestion = $('.progress-dot.current', $myDom).index(); + if (previousQuestion >= 0) { + toggleCurrentDot(previousQuestion, false); + toggleAnsweredDot(previousQuestion, questionInstances[previousQuestion].getAnswerGiven()); } - $('.progress-dot:eq(' + questionNumber +')', $myDom).addClass('current'); + toggleCurrentDot(questionNumber, true); } // Announce question number of total, must use timeout because of buttons logic @@ -300,7 +300,9 @@ H5P.QuestionSet = function (options, contentId) { questionInstances[questionInstances.length - 1].hideButton('finish'); // Mark all tasks as unanswered: - $('.progress-dot').removeClass('answered').addClass('unanswered'); + $('.progress-dot').each(function (idx) { + toggleAnsweredDot(idx, false); + }); //Force the last page to be reRendered rendered = false; @@ -323,6 +325,48 @@ H5P.QuestionSet = function (options, contentId) { } }; + /** + * Toggle answered state of dot at given index + * @param {number} dotIndex Index of dot + * @param {boolean} isAnswered True if is answered, False if not answered + */ + var toggleAnsweredDot = function(dotIndex, isAnswered) { + var $el = $('.progress-dot:eq(' + dotIndex +')', $myDom); + + // Skip current button + if ($el.hasClass('current')) { + return; + } + + var label = (isAnswered ? params.texts.answeredText : params.texts.unansweredText) + + ', ' + + params.texts.jumpToQuestion.replace('%d', (dotIndex + 1).toString()); + + $el.toggleClass('unanswered', !isAnswered) + .toggleClass('answered', isAnswered) + .attr('aria-label', label); + }; + + /** + * Toggle current state of dot at given index + * @param dotIndex + * @param isCurrent + */ + var toggleCurrentDot = function (dotIndex, isCurrent) { + var $el = $('.progress-dot:eq(' + dotIndex +')', $myDom); + var texts = params.texts; + var label = texts.currentQuestionText + ', '; + + if (!isCurrent) { + var isAnswered = $el.hasClass('answered'); + label = (isAnswered ? texts.answeredText : texts.unansweredText) + ', '; + } + + label += texts.jumpToQuestion.replace('%d', (dotIndex + 1).toString()); + $el.toggleClass('current', isCurrent) + .attr('aria-label', label); + }; + var _displayEndGame = function () { if (rendered) { $myDom.children().hide().filter('.questionset-results').show(); @@ -536,9 +580,8 @@ H5P.QuestionSet = function (options, contentId) { if (shortVerb === 'interacted' || shortVerb === 'answered' || shortVerb === 'attempted') { - if (questionInstances[currentQuestion].getAnswerGiven()) { - $('.progress-dot:eq(' + currentQuestion +')', $myDom).removeClass('unanswered').addClass('answered'); - } + toggleAnsweredDot(currentQuestion, + questionInstances[currentQuestion].getAnswerGiven()); _updateButtons(); } if (shortVerb === 'completed') { diff --git a/language/ar.json b/language/ar.json index bd1d4e0..c8f4942 100644 --- a/language/ar.json +++ b/language/ar.json @@ -88,6 +88,18 @@ "label": "Readspeaker progress", "description": "May use @current and @total question variables", "default": "Question @current of @total" + }, + { + "label": "Unanswered question text", + "default": "Unanswered" + }, + { + "label": "Answered question text", + "default": "Answered" + }, + { + "label": "Current question text", + "default": "Current question" } ] }, diff --git a/language/de.json b/language/de.json index a89cdba..eefb75b 100644 --- a/language/de.json +++ b/language/de.json @@ -93,6 +93,18 @@ "label": "Readspeaker progress", "description": "May use @current and @total question variables", "default": "Question @current of @total" + }, + { + "label": "Unanswered question text", + "default": "Unanswered" + }, + { + "label": "Answered question text", + "default": "Answered" + }, + { + "label": "Current question text", + "default": "Current question" } ] }, diff --git a/language/fr.json b/language/fr.json index ed64dc7..ad1aea9 100644 --- a/language/fr.json +++ b/language/fr.json @@ -88,6 +88,18 @@ "label": "Readspeaker progress", "description": "May use @current and @total question variables", "default": "Question @current of @total" + }, + { + "label": "Unanswered question text", + "default": "Unanswered" + }, + { + "label": "Answered question text", + "default": "Answered" + }, + { + "label": "Current question text", + "default": "Current question" } ] }, diff --git a/language/it.json b/language/it.json index 1e43746..f29ecf6 100644 --- a/language/it.json +++ b/language/it.json @@ -88,6 +88,18 @@ "label": "Readspeaker progress", "description": "May use @current and @total question variables", "default": "Question @current of @total" + }, + { + "label": "Unanswered question text", + "default": "Unanswered" + }, + { + "label": "Answered question text", + "default": "Answered" + }, + { + "label": "Current question text", + "default": "Current question" } ] }, diff --git a/language/nb.json b/language/nb.json index 4702512..503a1d1 100644 --- a/language/nb.json +++ b/language/nb.json @@ -90,6 +90,18 @@ "label": "Fremdriftstekst for hjelpemiddelteknologi", "description": "Kan bruke @current og @total variabler", "default": "Deloppgave @current av @total" + }, + { + "label": "Ikke svart på spørsmål-tekst", + "default": "Ikke svart" + }, + { + "label": "Svart på spørsmål-tekst", + "default": "Svar avgitt" + }, + { + "label": "Aktivt spørsmål-tekst", + "default": "Aktivt spørsmål" } ] }, diff --git a/language/nn.json b/language/nn.json index 7f14bd7..d92e638 100644 --- a/language/nn.json +++ b/language/nn.json @@ -90,6 +90,18 @@ "label": "Fremdriftstekst for hjelpemiddelteknologi", "description": "Kan bruke @current og @total variabler", "default": "Deloppgave @current av @total" + }, + { + "label": "Ikke svart på spørsmål-tekst", + "default": "Ikke svart" + }, + { + "label": "Svart på spørsmål-tekst", + "default": "Svar avgitt" + }, + { + "label": "Aktivt spørsmål-tekst", + "default": "Aktivt spørsmål" } ] }, diff --git a/semantics.json b/semantics.json index b60dbd0..45c80b4 100644 --- a/semantics.json +++ b/semantics.json @@ -172,6 +172,24 @@ "label": "Readspeaker progress", "description": "May use @current and @total question variables", "default": "Question @current of @total" + }, + { + "name": "unansweredText", + "type": "text", + "label": "Unanswered question text", + "default": "Unanswered" + }, + { + "name": "answeredText", + "type": "text", + "label": "Answered question text", + "default": "Answered" + }, + { + "name": "currentQuestionText", + "type": "text", + "label": "Current question text", + "default": "Current question" } ] },