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-8pull/7/head
parent
d5eb0f50ed
commit
601ae585e1
|
@ -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.
|
||||||
|
|
Loading…
Reference in New Issue