Improved how navigation dots are read.

HFJ-2040
pull/5/head
Thomas Marstrander 2016-06-30 09:47:24 +02:00
parent bc5668a4a0
commit 6c82013c84
8 changed files with 32 additions and 22 deletions

View File

@ -39,9 +39,13 @@ H5P.QuestionSet = function (options, contentId) {
' <div class="qs-footer">' +
' <div class="qs-progress">' +
' <% if (progressType == "dots") { %>' +
' <div class="dots-container">' +
' <div class="dots-container" role="navigation">' +
' <% for (var i=0; i<questions.length; i++) { %>' +
' <a href="#" class="progress-dot unanswered" aria-label="<%= texts.unansweredText + ", " + texts.jumpToQuestion.replace("%d", i + 1) %>"></a>' +
' <a href="#" class="progress-dot unanswered" ' +
' aria-label="<%=' +
' texts.jumpToQuestion.replace("%d", i + 1).replace("%total", questions.length)' +
' + ", " + texts.unansweredText' +
' %>"></a>' +
' <%} %>' +
' </div>' +
' <% } else if (progressType == "textual") { %>' +
@ -88,7 +92,7 @@ H5P.QuestionSet = function (options, contentId) {
nextButton: 'Next question',
finishButton: 'Finish',
textualProgress: 'Question: @current of @total questions',
jumpToQuestion: 'Jump to question %d',
jumpToQuestion: 'Question %d of %total',
questionLabel: 'Question',
readSpeakerProgress: 'Question @current of @total',
unansweredText: 'Unanswered',
@ -338,9 +342,11 @@ H5P.QuestionSet = function (options, contentId) {
return;
}
var label = (isAnswered ? params.texts.answeredText : params.texts.unansweredText) +
var label = params.texts.jumpToQuestion
.replace('%d', (dotIndex + 1).toString())
.replace('%total', $('.progress-dot', $myDom).length) +
', ' +
params.texts.jumpToQuestion.replace('%d', (dotIndex + 1).toString());
(isAnswered ? params.texts.answeredText : params.texts.unansweredText);
$el.toggleClass('unanswered', !isAnswered)
.toggleClass('answered', isAnswered)
@ -355,14 +361,18 @@ H5P.QuestionSet = function (options, contentId) {
var toggleCurrentDot = function (dotIndex, isCurrent) {
var $el = $('.progress-dot:eq(' + dotIndex +')', $myDom);
var texts = params.texts;
var label = texts.currentQuestionText + ', ';
var label = texts.jumpToQuestion
.replace('%d', (dotIndex + 1).toString())
.replace('%total', $('.progress-dot', $myDom).length);
if (!isCurrent) {
var isAnswered = $el.hasClass('answered');
label = (isAnswered ? texts.answeredText : texts.unansweredText) + ', ';
label += (isAnswered ? texts.answeredText : texts.unansweredText) + ', ';
}
else {
label += texts.currentQuestionText + ', ';
}
label += texts.jumpToQuestion.replace('%d', (dotIndex + 1).toString());
$el.toggleClass('current', isCurrent)
.attr('aria-label', label);
};

View File

@ -77,8 +77,8 @@
},
{
"label": "Label for jumping to a certain question",
"description": "You must use the placeholder '%d' instead of the question number.",
"default": "Jump to question %d"
"description": "You must use the placeholder '%d' instead of the question number, and %total instead of total amount of questions.",
"default": "Question %d of %total"
},
{
"label": "Copyright dialog question label",

View File

@ -82,8 +82,8 @@
},
{
"label": "Label for jumping to a certain question",
"description": "You must use the placeholder '%d' instead of the question number.",
"default": "Jump to question %d"
"description": "You must use the placeholder '%d' instead of the question number, and %total instead of total amount of questions.",
"default": "Question %d of %total"
},
{
"label": "Copyright dialog question label",

View File

@ -77,8 +77,8 @@
},
{
"label": "Label for jumping to a certain question",
"description": "You must use the placeholder '%d' instead of the question number.",
"default": "Jump to question %d"
"description": "You must use the placeholder '%d' instead of the question number, and %total instead of total amount of questions.",
"default": "Question %d of %total"
},
{
"label": "Copyright dialog question label",

View File

@ -77,8 +77,8 @@
},
{
"label": "Label for jumping to a certain question",
"description": "You must use the placeholder '%d' instead of the question number.",
"default": "Jump to question %d"
"description": "You must use the placeholder '%d' instead of the question number, and %total instead of total amount of questions.",
"default": "Question %d of %total"
},
{
"label": "Copyright dialog question label",

View File

@ -79,8 +79,8 @@
},
{
"label": "Merkelapp ved hopping til spørsmål",
"description": "Du må bruke plassholderen '%d' istedenfor spørsmålsnummeret.",
"default": "Hopp til spørsmål %d"
"description": "Du må bruke plassholderen '%d' istedenfor spørsmålsnummeret, og '%total' istedet for totalt antall spørsmål.",
"default": "Spørsmål %d av %total"
},
{
"label": "Opphavsrett spørsmål-etikett",

View File

@ -79,8 +79,8 @@
},
{
"label": "Merkelapp ved hopping til spørsmål",
"description": "Du må bruke plassholderen '%d' istedenfor spørsmålstalet.",
"default": "Hopp til spørsmål %d"
"description": "Du må bruke plassholderen '%d' istedenfor spørsmålsnummeret, og '%total' istedet for totalt antall spørsmål.",
"default": "Spørsmål %d av %total"
},
{
"label": "Opphavsrett spørsmål-etikett",

View File

@ -157,8 +157,8 @@
"name": "jumpToQuestion",
"type": "text",
"label": "Label for jumping to a certain question",
"description": "You must use the placeholder '%d' instead of the question number.",
"default": "Jump to question %d"
"description": "You must use the placeholder '%d' instead of the question number, and %total instead of total amount of questions.",
"default": "Question %d of %total"
},
{
"name": "questionLabel",