EDUCATIC
/
h5p-question-set
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use menu instead of navigation 

Use keyboard to navigate menu.
HFJ-2040
pull/5/head
Frode Petterson 2016-07-04 11:29:28 +02:00
parent 6c82013c84
commit 7071366b2d
1 changed files with 51 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
js/questionset.js
View File

@ -39,14 +39,14 @@ H5P.QuestionSet = function (options, contentId) {
' <div class="qs-footer">' + ' <div class="qs-footer">' +
' <div class="qs-progress">' + ' <div class="qs-progress">' +
' <% if (progressType == "dots") { %>' + ' <% if (progressType == "dots") { %>' +
' <div class="dots-container" role="navigation">' + ' <ul class="dots-container" role="menu">' +
' <% for (var i=0; i<questions.length; i++) { %>' + ' <% for (var i=0; i<questions.length; i++) { %>' +
' <a href="#" class="progress-dot unanswered" ' + ' <li class="progress-item"><a href="#" class="progress-dot unanswered" ' +
' aria-label="<%=' + ' aria-label="<%=' +
' texts.jumpToQuestion.replace("%d", i + 1).replace("%total", questions.length)' + ' texts.jumpToQuestion.replace("%d", i + 1).replace("%total", questions.length)' +
' + ", " + texts.unansweredText' + ' + ", " + texts.unansweredText' +
' %>"></a>' + ' %>" tabindex="-1"></a></li>' +
' <%} %>' + ' <% } %>' +
' </div>' + ' </div>' +
' <% } else if (progressType == "textual") { %>' + ' <% } else if (progressType == "textual") { %>' +
' <span class="progress-text"></span>' + ' <span class="progress-text"></span>' +
@ -234,7 +234,7 @@ H5P.QuestionSet = function (options, contentId) {
} }
else { else {
// Set currentNess // Set currentNess
var previousQuestion = $('.progress-dot.current', $myDom).index(); var previousQuestion = $('.progress-dot.current', $myDom).parent().index();
if (previousQuestion >= 0) { if (previousQuestion >= 0) {
toggleCurrentDot(previousQuestion, false); toggleCurrentDot(previousQuestion, false);
toggleAnsweredDot(previousQuestion, questionInstances[previousQuestion].getAnswerGiven()); toggleAnsweredDot(previousQuestion, questionInstances[previousQuestion].getAnswerGiven());
@ -367,14 +367,15 @@ H5P.QuestionSet = function (options, contentId) {
if (!isCurrent) { if (!isCurrent) {
var isAnswered = $el.hasClass('answered'); var isAnswered = $el.hasClass('answered');
label += (isAnswered ? texts.answeredText : texts.unansweredText) + ', '; label += ', ' + (isAnswered ? texts.answeredText : texts.unansweredText);
} }
else { else {
label += texts.currentQuestionText + ', '; label += ', ' + texts.currentQuestionText;
} }
$el.toggleClass('current', isCurrent) $el.toggleClass('current', isCurrent)
.attr('aria-label', label); .attr('aria-label', label)
.attr('tabindex', isCurrent ? 0 : -1);
}; };
var _displayEndGame = function () { var _displayEndGame = function () {
@ -614,13 +615,51 @@ H5P.QuestionSet = function (options, contentId) {
_showQuestion(params.initialQuestion); _showQuestion(params.initialQuestion);
}); });
// Set event listeners. /**
$('.progress-dot', $myDom).click(function () { * Triggers changing the current question.
*
* @private
* @param {Object} [event]
*/
var handleProgressDotClick = function (event) {
_stopQuestion(currentQuestion); _stopQuestion(currentQuestion);
_showQuestion($(this).index()); _showQuestion($(this).parent().index());
return false; event.preventDefault();
};
// Set event listeners.
$('.progress-dot', $myDom).click(handleProgressDotClick).keydown(function (event) {
var $this = $(this);
switch (event.which) {
case 13: // Enter
case 32: // Space
handleProgressDotClick.call(this, event);
break;
case 37: // Left Arrow
case 38: // Up Arrow
// Go to previous dot
var $prev = $this.parent().prev();
if ($prev.length) {
$prev.children('a').attr('tabindex', '0').focus();
$this.attr('tabindex', '-1');
}
break;
case 39: // Right Arrow
case 40: // Down Arrow
// Go to next dot
var $next = $this.parent().next();
if ($next.length) {
$next.children('a').attr('tabindex', '0').focus();
$this.attr('tabindex', '-1');
}
break;
}
}); });
// Hide all but initial Question. // Hide all but initial Question.
_showQuestion(params.initialQuestion); _showQuestion(params.initialQuestion);