From 653d12a85ed3e0ae0edb9953781713878d94dcac Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Mon, 27 Jun 2016 11:43:00 +0200 Subject: [PATCH 01/16] Make readspeakers announce current question of total when changing question. HFJ-2041 --- css/questionset.css | 7 +++++++ js/questionset.js | 15 ++++++++++++++- language/ar.json | 5 +++++ language/de.json | 5 +++++ language/fr.json | 5 +++++ language/it.json | 5 +++++ language/nb.json | 5 +++++ language/nn.json | 5 +++++ semantics.json | 7 +++++++ 9 files changed, 58 insertions(+), 1 deletion(-) diff --git a/css/questionset.css b/css/questionset.css index 5e9cd9b..1786d12 100644 --- a/css/questionset.css +++ b/css/questionset.css @@ -125,6 +125,13 @@ transition: none; } +.qs-progress-announcer { + height: 0; + width: 0; + position: absolute; + overflow: hidden; +} + .h5p-question .h5p-question-prev, .h5p-question .h5p-question-finish, .h5p-question .h5p-question-next { diff --git a/js/questionset.js b/js/questionset.js index 788b447..9d87537 100644 --- a/js/questionset.js +++ b/js/questionset.js @@ -31,6 +31,7 @@ H5P.QuestionSet = function (options, contentId) { '
<%= introPage.startButtonText %>
' + '' + '<% } %>' + + '
' + '
' + ' <% for (var i=0; i' + '
' + @@ -88,7 +89,8 @@ H5P.QuestionSet = function (options, contentId) { finishButton: 'Finish', textualProgress: 'Question: @current of @total questions', jumpToQuestion: 'Jump to question %d', - questionLabel: 'Question' + questionLabel: 'Question', + readSpeakerProgress: 'Question @current of @total' }, endGame: { showResultPage: true, @@ -224,6 +226,17 @@ H5P.QuestionSet = function (options, contentId) { $('.progress-dot:eq(' + questionNumber +')', $myDom).addClass('current'); } + // Announce question number of total, must use timeout because of buttons logic + setTimeout(function () { + var humanizedProgress = params.texts.readSpeakerProgress + .replace('@current', (currentQuestion + 1).toString()) + .replace('@total', questionInstances.length.toString()); + + $('.qs-progress-announcer', $myDom) + .html(humanizedProgress) + .focus(); + }, 0); + // Remember where we are _updateButtons(); self.trigger('resize'); diff --git a/language/ar.json b/language/ar.json index 5217dad..bd1d4e0 100644 --- a/language/ar.json +++ b/language/ar.json @@ -83,6 +83,11 @@ { "label": "Copyright dialog question label", "default": "Question" + }, + { + "label": "Readspeaker progress", + "description": "May use @current and @total question variables", + "default": "Question @current of @total" } ] }, diff --git a/language/de.json b/language/de.json index 82a29c6..a89cdba 100644 --- a/language/de.json +++ b/language/de.json @@ -88,6 +88,11 @@ { "label": "Copyright dialog question label", "default": "Question" + }, + { + "label": "Readspeaker progress", + "description": "May use @current and @total question variables", + "default": "Question @current of @total" } ] }, diff --git a/language/fr.json b/language/fr.json index 23f6fb9..ed64dc7 100644 --- a/language/fr.json +++ b/language/fr.json @@ -83,6 +83,11 @@ { "label": "Copyright dialog question label", "default": "Question" + }, + { + "label": "Readspeaker progress", + "description": "May use @current and @total question variables", + "default": "Question @current of @total" } ] }, diff --git a/language/it.json b/language/it.json index 8af2417..1e43746 100644 --- a/language/it.json +++ b/language/it.json @@ -83,6 +83,11 @@ { "label": "Copyright dialog question label", "default": "Question" + }, + { + "label": "Readspeaker progress", + "description": "May use @current and @total question variables", + "default": "Question @current of @total" } ] }, diff --git a/language/nb.json b/language/nb.json index 84783da..4702512 100644 --- a/language/nb.json +++ b/language/nb.json @@ -85,6 +85,11 @@ { "label": "Opphavsrett spørsmål-etikett", "default": "Spørsmål" + }, + { + "label": "Fremdriftstekst for hjelpemiddelteknologi", + "description": "Kan bruke @current og @total variabler", + "default": "Deloppgave @current av @total" } ] }, diff --git a/language/nn.json b/language/nn.json index 5e47a98..7f14bd7 100644 --- a/language/nn.json +++ b/language/nn.json @@ -85,6 +85,11 @@ { "label": "Opphavsrett spørsmål-etikett", "default": "Spørsmål" + }, + { + "label": "Fremdriftstekst for hjelpemiddelteknologi", + "description": "Kan bruke @current og @total variabler", + "default": "Deloppgave @current av @total" } ] }, diff --git a/semantics.json b/semantics.json index 1ce4c57..b60dbd0 100644 --- a/semantics.json +++ b/semantics.json @@ -165,6 +165,13 @@ "type": "text", "label": "Copyright dialog question label", "default": "Question" + }, + { + "name": "readSpeakerProgress", + "type": "text", + "label": "Readspeaker progress", + "description": "May use @current and @total question variables", + "default": "Question @current of @total" } ] }, From 45af3ef06e832dd4f31483462cf0be4b14a5f759 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Mon, 27 Jun 2016 11:59:36 +0200 Subject: [PATCH 02/16] Make sure to show announcer when changing it, since resetTask hides it. HFJ-2041 --- js/questionset.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/questionset.js b/js/questionset.js index 9d87537..6f3ceb0 100644 --- a/js/questionset.js +++ b/js/questionset.js @@ -233,6 +233,7 @@ H5P.QuestionSet = function (options, contentId) { .replace('@total', questionInstances.length.toString()); $('.qs-progress-announcer', $myDom) + .show() .html(humanizedProgress) .focus(); }, 0); From 7bcd2472bac436ef96f65441cf3604cafa13f209 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Mon, 27 Jun 2016 15:42:31 +0200 Subject: [PATCH 03/16] Read feedback when changing question. Do not read feedback when showing all solutions. HFJ-2043 --- js/questionset.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/questionset.js b/js/questionset.js index 6f3ceb0..079876c 100644 --- a/js/questionset.js +++ b/js/questionset.js @@ -236,6 +236,10 @@ H5P.QuestionSet = function (options, contentId) { .show() .html(humanizedProgress) .focus(); + + if (instance && instance.readFeedback) { + instance.readFeedback(); + } }, 0); // Remember where we are @@ -252,7 +256,10 @@ H5P.QuestionSet = function (options, contentId) { var showSolutions = function () { for (var i = 0; i < questionInstances.length; i++) { try { + // Do not read answers + questionInstances[i].toggleReadSpeaker(true); questionInstances[i].showSolutions(); + questionInstances[i].toggleReadSpeaker(false); } catch(error) { H5P.error("subcontent does not contain a valid showSolutions function"); From 917a8ed3c471b53c060b69c3a967e3928e166a78 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Tue, 28 Jun 2016 12:29:15 +0200 Subject: [PATCH 04/16] Reset individual questions on retry. Remove finish button if a question is reset. Remove dot styling if a question is reset. HFJ-2044 --- js/questionset.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/js/questionset.js b/js/questionset.js index 079876c..4b9e440 100644 --- a/js/questionset.js +++ b/js/questionset.js @@ -180,9 +180,14 @@ H5P.QuestionSet = function (options, contentId) { answered = answered && (questionInstances[i]).getAnswerGiven(); } - if (currentQuestion === (params.questions.length - 1) && answered && + if (currentQuestion === (params.questions.length - 1) && questionInstances[currentQuestion]) { - questionInstances[currentQuestion].showButton('finish'); + if (answered) { + questionInstances[currentQuestion].showButton('finish'); + } + else { + questionInstances[currentQuestion].hideButton('finish'); + } } }; @@ -222,7 +227,14 @@ H5P.QuestionSet = function (options, contentId) { } else { // Set currentNess - $('.progress-dot.current', $myDom).removeClass('current'); + var $currentQuestion = $('.progress-dot.current', $myDom); + var previousQuestion = $currentQuestion.index(); + $currentQuestion.removeClass('current'); + if (previousQuestion >= 0 && !questionInstances[previousQuestion].getAnswerGiven()) { + $currentQuestion + .removeClass('answered') + .addClass('unanswered'); + } $('.progress-dot:eq(' + questionNumber +')', $myDom).addClass('current'); } From bc5668a4a006b64aa55681c0483b5e8a9c1a3001 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Tue, 28 Jun 2016 15:07:05 +0200 Subject: [PATCH 05/16] 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" } ] }, From 6c82013c840d02bcc21f43ace8a62fa037ab4367 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Thu, 30 Jun 2016 09:47:24 +0200 Subject: [PATCH 06/16] Improved how navigation dots are read. HFJ-2040 --- js/questionset.js | 26 ++++++++++++++++++-------- language/ar.json | 4 ++-- language/de.json | 4 ++-- language/fr.json | 4 ++-- language/it.json | 4 ++-- language/nb.json | 4 ++-- language/nn.json | 4 ++-- semantics.json | 4 ++-- 8 files changed, 32 insertions(+), 22 deletions(-) diff --git a/js/questionset.js b/js/questionset.js index 2670ddc..24a017e 100644 --- a/js/questionset.js +++ b/js/questionset.js @@ -39,9 +39,13 @@ H5P.QuestionSet = function (options, contentId) { '