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

Disable navigation bar visuals and functions when backward navigation is disabled. 

HFP-8
pull/7/head
thomasmars 2016-10-04 14:18:50 +02:00
parent 55d66eb469
commit 46ca884681
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/questionset.css
View File

@ -52,7 +52,12 @@
background: #fff; background: #fff;
background: #cecece; background: #cecece;
} }
.progress-dot:hover {
.progress-dot.disabled {
cursor: default;
}
.progress-dot:not(.disabled):hover {
box-shadow: 0 0 0.5em #c7c7c7; box-shadow: 0 0 0.5em #c7c7c7;
} }
.progress-dot.answered { .progress-dot.answered {
@ -61,6 +66,11 @@
.progress-dot.current { .progress-dot.current {
background: #285585; background: #285585;
} }
.progress-dot.disabled:focus {
outline: none
}
.progress-dot:focus { .progress-dot:focus {
outline-color: rgb(40, 130, 211); outline-color: rgb(40, 130, 211);
outline-width: thin; outline-width: thin;

24
js/questionset.js
View File

@ -42,12 +42,16 @@ H5P.QuestionSet = function (options, contentId, contentData) {
' <% if (progressType == "dots") { %>' + ' <% if (progressType == "dots") { %>' +
' <ul class="dots-container" role="navigation">' + ' <ul class="dots-container" role="navigation">' +
' <% for (var i=0; i<questions.length; i++) { %>' + ' <% for (var i=0; i<questions.length; i++) { %>' +
' <li class="progress-item"><a href="#" class="progress-dot unanswered" ' + ' <li class="progress-item">' +
' aria-label="<%=' + ' <a href="#" ' +
' texts.jumpToQuestion.replace("%d", i + 1).replace("%total", questions.length)' + ' class="progress-dot unanswered<%' +
' + ", " + texts.unansweredText %>" tabindex="-1" ' + ' if (disableBackwardsNavigation) { %> disabled <% } %>"' +
' <% if (disableBackwardsNavigation) { %> aria-disabled="true" <% } %>' + ' aria-label="<%=' +
' ></a></li>' + ' texts.jumpToQuestion.replace("%d", i + 1).replace("%total", questions.length)' +
' + ", " + texts.unansweredText %>" tabindex="-1" ' +
' <% if (disableBackwardsNavigation) { %> aria-disabled="true" <% } %>' +
' ></a>' +
' </li>' +
' <% } %>' + ' <% } %>' +
' </div>' + ' </div>' +
' <% } else if (progressType == "textual") { %>' + ' <% } else if (progressType == "textual") { %>' +
@ -323,7 +327,12 @@ H5P.QuestionSet = function (options, contentId, contentData) {
*/ */
var toggleDotsNavigation = function (enable) { var toggleDotsNavigation = function (enable) {
$('.progress-dot', $myDom).each(function () { $('.progress-dot', $myDom).each(function () {
$(this).toggleClass('disabled', !enable);
$(this).attr('aria-disabled', enable ? 'false' : 'true'); $(this).attr('aria-disabled', enable ? 'false' : 'true');
// Remove tabindex
if (!enable) {
$(this).attr('tabindex', '-1');
}
}); });
}; };
@ -441,9 +450,10 @@ H5P.QuestionSet = function (options, contentId, contentData) {
label += ', ' + texts.currentQuestionText; label += ', ' + texts.currentQuestionText;
} }
var disabledTabindex = params.disableBackwardsNavigation && !showingSolutions;
$el.toggleClass('current', isCurrent) $el.toggleClass('current', isCurrent)
.attr('aria-label', label) .attr('aria-label', label)
.attr('tabindex', isCurrent ? 0 : -1); .attr('tabindex', isCurrent && !disabledTabindex ? 0 : -1);
}; };
var _displayEndGame = function () { var _displayEndGame = function () {