Accessible navigation line.

Made readspeakers abel to announce all visible elements of the navigation line, i.e. answered/unanswered, current, and number.
HFJ-2040
pull/5/head
Thomas Marstrander 2016-06-28 15:07:05 +02:00
parent 917a8ed3c4
commit bc5668a4a0
8 changed files with 147 additions and 14 deletions

View File

@ -41,7 +41,7 @@ H5P.QuestionSet = function (options, contentId) {
' <% if (progressType == "dots") { %>' + ' <% if (progressType == "dots") { %>' +
' <div class="dots-container">' + ' <div class="dots-container">' +
' <% for (var i=0; i<questions.length; i++) { %>' + ' <% for (var i=0; i<questions.length; i++) { %>' +
' <a href="#" class="progress-dot unanswered" aria-label="<%= texts.jumpToQuestion.replace("%d", i + 1) %>"></a>' + ' <a href="#" class="progress-dot unanswered" aria-label="<%= texts.unansweredText + ", " + texts.jumpToQuestion.replace("%d", i + 1) %>"></a>' +
' <%} %>' + ' <%} %>' +
' </div>' + ' </div>' +
' <% } else if (progressType == "textual") { %>' + ' <% } else if (progressType == "textual") { %>' +
@ -90,7 +90,10 @@ H5P.QuestionSet = function (options, contentId) {
textualProgress: 'Question: @current of @total questions', textualProgress: 'Question: @current of @total questions',
jumpToQuestion: 'Jump to question %d', jumpToQuestion: 'Jump to question %d',
questionLabel: 'Question', questionLabel: 'Question',
readSpeakerProgress: 'Question @current of @total' readSpeakerProgress: 'Question @current of @total',
unansweredText: 'Unanswered',
answeredText: 'Answered',
currentQuestionText: 'Current question'
}, },
endGame: { endGame: {
showResultPage: true, showResultPage: true,
@ -227,15 +230,12 @@ H5P.QuestionSet = function (options, contentId) {
} }
else { else {
// Set currentNess // Set currentNess
var $currentQuestion = $('.progress-dot.current', $myDom); var previousQuestion = $('.progress-dot.current', $myDom).index();
var previousQuestion = $currentQuestion.index(); if (previousQuestion >= 0) {
$currentQuestion.removeClass('current'); toggleCurrentDot(previousQuestion, false);
if (previousQuestion >= 0 && !questionInstances[previousQuestion].getAnswerGiven()) { toggleAnsweredDot(previousQuestion, questionInstances[previousQuestion].getAnswerGiven());
$currentQuestion
.removeClass('answered')
.addClass('unanswered');
} }
$('.progress-dot:eq(' + questionNumber +')', $myDom).addClass('current'); toggleCurrentDot(questionNumber, true);
} }
// Announce question number of total, must use timeout because of buttons logic // 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'); questionInstances[questionInstances.length - 1].hideButton('finish');
// Mark all tasks as unanswered: // 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 //Force the last page to be reRendered
rendered = false; 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 () { var _displayEndGame = function () {
if (rendered) { if (rendered) {
$myDom.children().hide().filter('.questionset-results').show(); $myDom.children().hide().filter('.questionset-results').show();
@ -536,9 +580,8 @@ H5P.QuestionSet = function (options, contentId) {
if (shortVerb === 'interacted' || if (shortVerb === 'interacted' ||
shortVerb === 'answered' || shortVerb === 'answered' ||
shortVerb === 'attempted') { shortVerb === 'attempted') {
if (questionInstances[currentQuestion].getAnswerGiven()) { toggleAnsweredDot(currentQuestion,
$('.progress-dot:eq(' + currentQuestion +')', $myDom).removeClass('unanswered').addClass('answered'); questionInstances[currentQuestion].getAnswerGiven());
}
_updateButtons(); _updateButtons();
} }
if (shortVerb === 'completed') { if (shortVerb === 'completed') {

View File

@ -88,6 +88,18 @@
"label": "Readspeaker progress", "label": "Readspeaker progress",
"description": "May use @current and @total question variables", "description": "May use @current and @total question variables",
"default": "Question @current of @total" "default": "Question @current of @total"
},
{
"label": "Unanswered question text",
"default": "Unanswered"
},
{
"label": "Answered question text",
"default": "Answered"
},
{
"label": "Current question text",
"default": "Current question"
} }
] ]
}, },

View File

@ -93,6 +93,18 @@
"label": "Readspeaker progress", "label": "Readspeaker progress",
"description": "May use @current and @total question variables", "description": "May use @current and @total question variables",
"default": "Question @current of @total" "default": "Question @current of @total"
},
{
"label": "Unanswered question text",
"default": "Unanswered"
},
{
"label": "Answered question text",
"default": "Answered"
},
{
"label": "Current question text",
"default": "Current question"
} }
] ]
}, },

View File

@ -88,6 +88,18 @@
"label": "Readspeaker progress", "label": "Readspeaker progress",
"description": "May use @current and @total question variables", "description": "May use @current and @total question variables",
"default": "Question @current of @total" "default": "Question @current of @total"
},
{
"label": "Unanswered question text",
"default": "Unanswered"
},
{
"label": "Answered question text",
"default": "Answered"
},
{
"label": "Current question text",
"default": "Current question"
} }
] ]
}, },

View File

@ -88,6 +88,18 @@
"label": "Readspeaker progress", "label": "Readspeaker progress",
"description": "May use @current and @total question variables", "description": "May use @current and @total question variables",
"default": "Question @current of @total" "default": "Question @current of @total"
},
{
"label": "Unanswered question text",
"default": "Unanswered"
},
{
"label": "Answered question text",
"default": "Answered"
},
{
"label": "Current question text",
"default": "Current question"
} }
] ]
}, },

View File

@ -90,6 +90,18 @@
"label": "Fremdriftstekst for hjelpemiddelteknologi", "label": "Fremdriftstekst for hjelpemiddelteknologi",
"description": "Kan bruke @current og @total variabler", "description": "Kan bruke @current og @total variabler",
"default": "Deloppgave @current av @total" "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"
} }
] ]
}, },

View File

@ -90,6 +90,18 @@
"label": "Fremdriftstekst for hjelpemiddelteknologi", "label": "Fremdriftstekst for hjelpemiddelteknologi",
"description": "Kan bruke @current og @total variabler", "description": "Kan bruke @current og @total variabler",
"default": "Deloppgave @current av @total" "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"
} }
] ]
}, },

View File

@ -172,6 +172,24 @@
"label": "Readspeaker progress", "label": "Readspeaker progress",
"description": "May use @current and @total question variables", "description": "May use @current and @total question variables",
"default": "Question @current of @total" "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"
} }
] ]
}, },