Disable backwards navigation.

Show dots, but they have no action when backward navigation is disabled.
Always show/enable full navigation in solution mode.
Only show forward button when a question has been answered.
Remove navigation button if question has been answered, then retried within the question's logic.
HFP-8
pull/7/head
thomasmars 2016-10-03 13:06:01 +02:00
parent d5eb0f50ed
commit 601ae585e1
1 changed files with 57 additions and 17 deletions

View File

@ -39,7 +39,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
' <% } %>' + ' <% } %>' +
' <div class="qs-footer">' + ' <div class="qs-footer">' +
' <div class="qs-progress">' + ' <div class="qs-progress">' +
' <% if (progressType == "dots" && !disableBackwardsNavigation) { %>' + ' <% 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"><a href="#" class="progress-dot unanswered" ' +
@ -128,6 +128,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
var scoreBar; var scoreBar;
var up; var up;
var renderSolutions = false; var renderSolutions = false;
var showingSolutions = false;
contentData = contentData || {}; contentData = contentData || {};
if (contentData.previousState) { if (contentData.previousState) {
currentQuestion = contentData.previousState.progress; currentQuestion = contentData.previousState.progress;
@ -191,6 +192,16 @@ H5P.QuestionSet = function (options, contentId, contentData) {
// Update button state. // Update button state.
var _updateButtons = function () { var _updateButtons = function () {
// Verify that current question is answered when backward nav is disabled
if (params.disableBackwardsNavigation) {
if (questionInstances[currentQuestion].getAnswerGiven()) {
questionInstances[currentQuestion].showButton('next');
}
else {
questionInstances[currentQuestion].hideButton('next');
}
}
var answered = true; var answered = true;
for (var i = questionInstances.length - 1; i >= 0; i--) { for (var i = questionInstances.length - 1; i >= 0; i--) {
answered = answered && (questionInstances[i]).getAnswerGiven(); answered = answered && (questionInstances[i]).getAnswerGiven();
@ -280,7 +291,17 @@ H5P.QuestionSet = function (options, contentId, contentData) {
* @public * @public
*/ */
var showSolutions = function () { var showSolutions = function () {
showingSolutions = true;
for (var i = 0; i < questionInstances.length; i++) { for (var i = 0; i < questionInstances.length; i++) {
// Enable back and forth navigation in solution mode
if (i < questionInstances.length - 1) {
questionInstances[i].showButton('next');
}
if (i > 0) {
questionInstances[i].showButton('prev');
}
try { try {
// Do not read answers // Do not read answers
questionInstances[i].toggleReadSpeaker(true); questionInstances[i].toggleReadSpeaker(true);
@ -300,9 +321,23 @@ H5P.QuestionSet = function (options, contentId, contentData) {
* @public * @public
*/ */
var resetTask = function () { var resetTask = function () {
showingSolutions = false;
for (var i = 0; i < questionInstances.length; i++) { for (var i = 0; i < questionInstances.length; i++) {
try { try {
questionInstances[i].resetTask(); questionInstances[i].resetTask();
// Hide back and forth navigation in normal mode
if (params.disableBackwardsNavigation) {
// Check if first question is answered by default
if (i === 0 && questionInstances[i].getAnswerGiven()) {
questionInstances[i].showButton('next');
}
else {
questionInstances[i].hideButton('next');
}
questionInstances[i].hideButton('prev');
}
} }
catch(error) { catch(error) {
H5P.error("subcontent does not contain a valid resetTask function"); H5P.error("subcontent does not contain a valid resetTask function");
@ -329,17 +364,19 @@ H5P.QuestionSet = function (options, contentId, contentData) {
}; };
var moveQuestion = function (direction) { var moveQuestion = function (direction) {
if (params.disableBackwardsNavigation && !questionInstances[currentQuestion].getAnswerGiven()) {
questionInstances[currentQuestion].hideButton('next');
questionInstances[currentQuestion].hideButton('finish');
return;
}
_stopQuestion(currentQuestion); _stopQuestion(currentQuestion);
if (currentQuestion + direction >= questionInstances.length) { if (currentQuestion + direction >= questionInstances.length) {
_displayEndGame(); _displayEndGame();
}
else if (!params.disableBackwardsNavigation || questionInstances[currentQuestion].getAnswerGiven()) {
// Allow movement if backward navigation enabled or answer given
_showQuestion(currentQuestion + direction);
} }
else { else {
//TODO: Give an error message ? or disable/grey out previous button when not allowed // Allow movement if backward navigation enabled or answer given
_showQuestion(currentQuestion + direction);
} }
}; };
@ -598,21 +635,20 @@ H5P.QuestionSet = function (options, contentId, contentData) {
moveQuestion.bind(this, 1), false); moveQuestion.bind(this, 1), false);
} else { } else {
// Only show button next button when answered or is allowed to go back
// Add next question button question.addButton('next', '', moveQuestion.bind(this, 1),
question.addButton('next', '', moveQuestion.bind(this, 1), true, { !params.disableBackwardsNavigation || !!question.getAnswerGiven(), {
href: '#', // Use href since this is a navigation button href: '#', // Use href since this is a navigation button
'aria-label': params.texts.nextButton 'aria-label': params.texts.nextButton
}); });
} }
// Add previous question button // Add previous question button
if (questionInstances[0] !== question && !params.disableBackwardsNavigation) { question.addButton('prev', '', moveQuestion.bind(this, -1),
question.addButton('prev', '', moveQuestion.bind(this, -1), true, { !(questionInstances[0] === question || params.disableBackwardsNavigation), {
href: '#', // Use href since this is a navigation button href: '#', // Use href since this is a navigation button
'aria-label': params.texts.prevButton 'aria-label': params.texts.prevButton
}); });
}
question.on('xAPI', function (event) { question.on('xAPI', function (event) {
var shortVerb = event.getVerb(); var shortVerb = event.getVerb();
@ -653,9 +689,13 @@ H5P.QuestionSet = function (options, contentId, contentData) {
* @param {Object} [event] * @param {Object} [event]
*/ */
var handleProgressDotClick = function (event) { var handleProgressDotClick = function (event) {
// Disable dots when backward nav disabled
event.preventDefault();
if (params.disableBackwardsNavigation && !showingSolutions) {
return;
}
_stopQuestion(currentQuestion); _stopQuestion(currentQuestion);
_showQuestion($(this).parent().index()); _showQuestion($(this).parent().index());
event.preventDefault();
}; };
// Set event listeners. // Set event listeners.