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

Refactor initialization. Relates to: #HFP-200

ramdomize
Tom Arild Jakobsen 2016-11-11 12:58:21 +01:00
parent 7fa05df98b
commit 8e2935dd67
1 changed files with 206 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

419
js/questionset.js
View File

@ -21,65 +21,65 @@ H5P.QuestionSet = function (options, contentId, contentData) {
this.contentId = contentId; this.contentId = contentId;
var texttemplate = var texttemplate =
'<% if (introPage.showIntroPage) { %>' + '<% if (introPage.showIntroPage) { %>' +
'<div class="intro-page">' + '<div class="intro-page">' +
' <% if (introPage.title) { %>' + ' <% if (introPage.title) { %>' +
' <div class="title"><span><%= introPage.title %></span></div>' + ' <div class="title"><span><%= introPage.title %></span></div>' +
' <% } %>' + ' <% } %>' +
' <% if (introPage.introduction) { %>' + ' <% if (introPage.introduction) { %>' +
' <div class="introduction"><%= introPage.introduction %></div>' + ' <div class="introduction"><%= introPage.introduction %></div>' +
' <% } %>' + ' <% } %>' +
' <div class="buttons"><a class="qs-startbutton h5p-joubelui-button h5p-button"><%= introPage.startButtonText %></a></div>' + ' <div class="buttons"><a class="qs-startbutton h5p-joubelui-button h5p-button"><%= introPage.startButtonText %></a></div>' +
'</div>' + '</div>' +
'<% } %>' + '<% } %>' +
'<div tabindex="-1" class="qs-progress-announcer"></div>' + '<div tabindex="-1" class="qs-progress-announcer"></div>' +
'<div class="questionset<% if (introPage.showIntroPage) { %> hidden<% } %>">' + '<div class="questionset<% if (introPage.showIntroPage) { %> hidden<% } %>">' +
' <% for (var i=0; i<questions.length; i++) { %>' + ' <% for (var i=0; i<questions.length; i++) { %>' +
' <div class="question-container"></div>' + ' <div class="question-container"></div>' +
' <% } %>' + ' <% } %>' +
' <div class="qs-footer">' + ' <div class="qs-footer">' +
' <div class="qs-progress">' + ' <div class="qs-progress">' +
' <% 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">' + ' <li class="progress-item">' +
' <a href="#" ' + ' <a href="#" ' +
' class="progress-dot unanswered<%' + ' class="progress-dot unanswered<%' +
' if (disableBackwardsNavigation) { %> disabled <% } %>"' + ' if (disableBackwardsNavigation) { %> disabled <% } %>"' +
' 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 %>" tabindex="-1" ' + ' + ", " + texts.unansweredText %>" tabindex="-1" ' +
' <% if (disableBackwardsNavigation) { %> aria-disabled="true" <% } %>' + ' <% if (disableBackwardsNavigation) { %> aria-disabled="true" <% } %>' +
' ></a>' + ' ></a>' +
' </li>' + ' </li>' +
' <% } %>' + ' <% } %>' +
' </div>' + ' </div>' +
' <% } else if (progressType == "textual") { %>' + ' <% } else if (progressType == "textual") { %>' +
' <span class="progress-text"></span>' + ' <span class="progress-text"></span>' +
' <% } %>' + ' <% } %>' +
' </div>' + ' </div>' +
' </div>' + ' </div>' +
'</div>'; '</div>';
var resulttemplate = var resulttemplate =
'<div class="questionset-results">' + '<div class="questionset-results">' +
' <div class="greeting"><%= message %></div>' + ' <div class="greeting"><%= message %></div>' +
' <div class="feedback-section">' + ' <div class="feedback-section">' +
' <div class="feedback-scorebar"></div>' + ' <div class="feedback-scorebar"></div>' +
' <div class="feedback-text"></div>' + ' <div class="feedback-text"></div>' +
' </div>' + ' </div>' +
' <% if (comment) { %>' + ' <% if (comment) { %>' +
' <div class="result-header"><%= comment %></div>' + ' <div class="result-header"><%= comment %></div>' +
' <% } %>' + ' <% } %>' +
' <% if (resulttext) { %>' + ' <% if (resulttext) { %>' +
' <div class="result-text"><%= resulttext %></div>' + ' <div class="result-text"><%= resulttext %></div>' +
' <% } %>' + ' <% } %>' +
' <div class="buttons">' + ' <div class="buttons">' +
' <button type="button" class="h5p-joubelui-button h5p-button qs-finishbutton"><%= finishButtonText %></button>' + ' <button type="button" class="h5p-joubelui-button h5p-button qs-finishbutton"><%= finishButtonText %></button>' +
' <button type="button" class="h5p-joubelui-button h5p-button qs-solutionbutton"><%= solutionButtonText %></button>' + ' <button type="button" class="h5p-joubelui-button h5p-button qs-solutionbutton"><%= solutionButtonText %></button>' +
' <button type="button" class="h5p-joubelui-button h5p-button qs-retrybutton"><%= retryButtonText %></button>' + ' <button type="button" class="h5p-joubelui-button h5p-button qs-retrybutton"><%= retryButtonText %></button>' +
' </div>' + ' </div>' +
'</div>'; '</div>';
var defaults = { var defaults = {
initialQuestion: 0, initialQuestion: 0,
@ -135,6 +135,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
var up; var up;
var renderSolutions = false; var renderSolutions = false;
var showingSolutions = false; var showingSolutions = false;
var $template;
contentData = contentData || {}; contentData = contentData || {};
// Bring question set up to date when resuming // Bring question set up to date when resuming
@ -145,17 +146,22 @@ H5P.QuestionSet = function (options, contentId, contentData) {
questionOrder = contentData.previousState.order; questionOrder = contentData.previousState.order;
} }
// Create a pool of questions if necessary // Create a pool of questions if necessary
/** /**
* Randomizes questions in an array and updates an array containing their order * Randomizes questions in an array and updates an array containing their order
* @param {array} questions * @param {array} questions
* @param {array} questionOrder * @param {array} questionOrder
*
* @return {Object.<array, array>} questionOrdering * @return {Object.<array, array>} questionOrdering
*/ */
var randomizeQuestionOrdering = function (questions, questionOrder) { var randomizeQuestionOrdering = function (questions, questionOrder) {
// Save the original order of the questions in a multidimensional array [[question0,0],[question1,1]... // Save the original order of the questions in a multidimensional array [[question0,0],[question1,1]...
var questionOrdering = questions.map(function(questionInstance, index) { return [questionInstance, index] }); var questionOrdering = questions.map(function (questionInstance, index) {
return [questionInstance, index]
});
// Shuffle the multidimensional array // Shuffle the multidimensional array
questionOrdering = H5P.shuffleArray(questionOrdering); questionOrdering = H5P.shuffleArray(questionOrdering);
@ -168,10 +174,10 @@ H5P.QuestionSet = function (options, contentId, contentData) {
// Retrieve the new shuffled order from the second index // Retrieve the new shuffled order from the second index
var newOrder = []; var newOrder = [];
for (var i = 0; i< questionOrdering.length; i++) { for (var i = 0; i < questionOrdering.length; i++) {
// Use a previous order if it exists // Use a previous order if it exists
if(questionOrder) { if (questionOrder) {
newOrder[i] = questionOrder[questionOrdering[i][1]]; newOrder[i] = questionOrder[questionOrdering[i][1]];
} }
else { else {
@ -184,121 +190,125 @@ H5P.QuestionSet = function (options, contentId, contentData) {
questions: questions, questions: questions,
questionOrder: newOrder questionOrder: newOrder
}; };
} };
// Create a pool (a subset) of questions if necessary var cloneQuestionAndIndex = function (question, index) {
if (params.poolSize && params.poolSize < params.questions.length) { var result = H5P.cloneObject(question, true);
result.initialIndex = index;
return result;
};
// If a previous pool exists, recreate it var limitArrayToPoolSize = function(array, poolSize){
if(contentData.previousState && contentData.previousState.poolOrder) { return array.slice(0, poolSize);
poolOrder = contentData.previousState.poolOrder; };
// Recreate the pool from the saved data var initQuestions = function(questions, poolSize){
var pool = []; var result = questions.map(cloneQuestionAndIndex);
for (var i = 0; i < poolOrder.length; i++) { result = H5P.shuffleArray(questions);
pool[i] = params.questions[poolOrder[i]]; result = limitArrayToPoolSize(result, poolSize);
return result;
};
var useQuestionPool = function(questions, poolSize){
return poolSize && poolSize < questions.length || poolSize > 0;
};
var createQuestionContainerDom = function(params, questions){
var clonedParams = H5P.cloneObject(params, true);
clonedParams.questions = questions;
return $(template.render(clonedParams));
};
var overrideBehaviourAndSettings = function(override, $template, instance) {
return function(question) {
if (override.showSolutionButton) {
question.params.behaviour.enableSolutionsButton = (override.showSolutionButton === 'on');
} }
// Replace original questions with just the ones in the pool if (override.retryButton) {
params.questions = pool; question.params.behaviour.enableRetry = (override.retryButton === 'on');
}
question.params.overrideSettings = question.params.overrideSettings || {};
question.params.overrideSettings.$confirmationDialogParent = $template.last();
question.params.overrideSettings.instance = instance;
return params;
} }
else { // Otherwise create a new pool };
// Randomize and get the results
var poolResult = randomizeQuestionOrdering(params.questions, poolOrder);
var poolQuestions = poolResult.questions;
poolOrder = poolResult.questionOrder;
// Discard extra questions var getAnswersPreviousState = function(contentData, questionIndex){
if(contentData.previousState && contentData.previousState.answers){
poolQuestions = poolQuestions.slice(0, params.poolSize); return contentData.previousState.answers[questionIndex];
poolOrder = poolOrder.slice(0, params.poolSize);
// Replace original questions with just the ones in the pool
params.questions = poolQuestions;
} }
} };
// Create the html template for the question container var createQuestionIntance = function(params, contentData){
var $template = $(template.render(params)); return function(question, questionIndex){
var previousState = getAnswersPreviousState(contentData, questionIndex);
// Set overrides for questions debugger;
var override; var instance = H5P.newRunnable(question, contentId, undefined, undefined, {
if (params.override.showSolutionButton || params.override.retryButton) { previousState: previousState,
override = {};
if (params.override.showSolutionButton) {
// Force "Show solution" button to be on or off for all interactions
override.enableSolutionsButton =
(params.override.showSolutionButton === 'on' ? true : false);
}
if (params.override.retryButton) {
// Force "Retry" button to be on or off for all interactions
override.enableRetry =
(params.override.retryButton === 'on' ? true : false);
}
}
// Instantiate question instances
for (var i = 0; i < params.questions.length; i++) {
var question;
// If a previous order exists, use it
if (questionOrder !== undefined) {
question = params.questions[questionOrder[i]];
}
else {
// Use a generic order when initialzing for the first time
question = params.questions[i];
}
if (override) {
// Extend subcontent with the overrided settings.
$.extend(question.params.behaviour, override);
}
question.params = question.params || {};
question.params.overrideSettings = question.params.overrideSettings || {};
question.params.overrideSettings.$confirmationDialogParent = $template.last();
question.params.overrideSettings.instance = this;
var hasAnswers = contentData.previousState && contentData.previousState.answers;
var questionInstance = H5P.newRunnable(question, contentId, undefined, undefined,
{
previousState: hasAnswers ? contentData.previousState.answers[i] : undefined,
parent: self parent: self
}); });
questionInstance.on('resize', function () {
up = true; instance.on('resize', function () {
self.trigger('resize'); up = true;
self.trigger('resize');
});
return instance;
}
};
var init = function (params, previousState) {
var questions = params.questions;
if(previousState && previousState.questions){
questions = previousState.questions;
}
else if(useQuestionPool(questions, params.poolSize)) {
questions = initQuestions(questions, params.poolSize);
}
else if(params.randomQuestions){
questions = H5P.shuffleArray(questions);
}
// Create the html template for the question container
$template = createQuestionContainerDom(params, questions);
questions = questions.map(overrideBehaviourAndSettings(params.override, $template, self));
questionInstances = questions.map(createQuestionIntance(params, contentData));
// Randomize questions only on instantiation
if (params.randomQuestions && contentData.previousState === undefined) {
var result = randomizeQuestionOrdering(questionInstances, questionOrder);
questionInstances = result.questions;
questionOrder = result.questionOrder;
}
// Resize all interactions on resize
self.on('resize', function () {
if (up) {
// Prevent resizing the question again.
up = false;
return;
}
for (var i = 0; i < questionInstances.length; i++) {
questionInstances[i].trigger('resize');
}
}); });
questionInstances.push(questionInstance); };
}
// Randomize questions only on instantiation init(params, contentData.previousState);
if (params.randomQuestions && contentData.previousState === undefined) {
var result = randomizeQuestionOrdering(questionInstances,questionOrder);
questionInstances = result.questions;
questionOrder = result.questionOrder;
}
// Resize all interactions on resize
self.on('resize', function () {
if (up) {
// Prevent resizing the question again.
up = false;
return;
}
for (var i = 0; i < questionInstances.length; i++) {
questionInstances[i].trigger('resize');
}
});
// Update button state. // Update button state.
var _updateButtons = function () { var _updateButtons = function () {
// Verify that current question is answered when backward nav is disabled // Verify that current question is answered when backward nav is disabled
if (params.disableBackwardsNavigation) { if (params.disableBackwardsNavigation) {
if (questionInstances[currentQuestion].getAnswerGiven() if (questionInstances[currentQuestion].getAnswerGiven()
&& questionInstances.length-1 !== currentQuestion) { && questionInstances.length - 1 !== currentQuestion) {
questionInstances[currentQuestion].showButton('next'); questionInstances[currentQuestion].showButton('next');
} }
else { else {
@ -312,7 +322,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
} }
if (currentQuestion === (params.questions.length - 1) && if (currentQuestion === (params.questions.length - 1) &&
questionInstances[currentQuestion]) { questionInstances[currentQuestion]) {
if (answered) { if (answered) {
questionInstances[currentQuestion].showButton('finish'); questionInstances[currentQuestion].showButton('finish');
} }
@ -320,7 +330,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
questionInstances[currentQuestion].hideButton('finish'); questionInstances[currentQuestion].hideButton('finish');
} }
} }
}; };
var _stopQuestion = function (questionNumber) { var _stopQuestion = function (questionNumber) {
if (questionInstances[questionNumber]) { if (questionInstances[questionNumber]) {
@ -354,7 +364,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
// Update progress indicator // Update progress indicator
// Test if current has been answered. // Test if current has been answered.
if (params.progressType === 'textual') { if (params.progressType === 'textual') {
$('.progress-text', $myDom).text(params.texts.textualProgress.replace("@current", questionNumber+1).replace("@total", params.questions.length)); $('.progress-text', $myDom).text(params.texts.textualProgress.replace("@current", questionNumber + 1).replace("@total", params.questions.length));
} }
else { else {
// Set currentNess // Set currentNess
@ -413,7 +423,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
questionInstances[i].showSolutions(); questionInstances[i].showSolutions();
questionInstances[i].toggleReadSpeaker(false); questionInstances[i].toggleReadSpeaker(false);
} }
catch(error) { catch (error) {
H5P.error("subcontent does not contain a valid showSolutions function"); H5P.error("subcontent does not contain a valid showSolutions function");
H5P.error(error); H5P.error(error);
} }
@ -460,7 +470,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
questionInstances[i].hideButton('prev'); 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");
H5P.error(error); H5P.error(error);
} }
@ -478,7 +488,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
rendered = false; rendered = false;
if (params.randomQuestions) { if (params.randomQuestions) {
randomizeQuestions(); renderRandomizedQuestions();
} }
}; };
@ -492,20 +502,18 @@ H5P.QuestionSet = function (options, contentId, contentData) {
/** /**
* Randomizes question instances * Randomizes question instances
*/ */
var randomizeQuestions = function () { var renderRandomizedQuestions = function () {
var result = randomizeQuestionOrdering(questionInstances, questionOrder);
var result = randomizeQuestionOrdering(questionInstances,questionOrder);
questionInstances = result.questions; questionInstances = result.questions;
questionOrder = result.questionOrder; questionOrder = result.questionOrder;
// Find all question containers and detach questions from them // Find all question containers and detach questions from them
$('.question-container', $myDom).each(function (){ $('.question-container', $myDom).each(function () {
$(this).children().detach(); $(this).children().detach();
}); });
// Reattach questions and their buttons in the new order // Reattach questions and their buttons in the new order
for (var i = 0; i < questionInstances.length; i++) { for (var i = 0; i < questionInstances.length; i++) {
var question = questionInstances[i]; var question = questionInstances[i];
// Make sure styles are not being added twice // Make sure styles are not being added twice
@ -513,39 +521,25 @@ H5P.QuestionSet = function (options, contentId, contentData) {
question.attach($('.question-container:eq(' + i + ')', $myDom)); question.attach($('.question-container:eq(' + i + ')', $myDom));
//Show buttons if necessary // toggle buttons
if(questionInstances[questionInstances.length -1] === question var isFirst = (i === 0);
&& question.hasButton('finish')) { var isLast = (i === questionInstances.length - 1);
question.showButton('finish'); toggleButtonsForQuestion(question, isFirst, isLast);
}
if(questionInstances[questionInstances.length -1] !== question
&& question.hasButton('next')) {
question.showButton('next');
}
if(questionInstances[0] !== question
&& question.hasButton('prev')
&& !params.disableBackwardsNavigation) {
question.showButton('prev');
}
// Hide relevant buttons since the order has changed
if (questionInstances[0] === question) {
question.hideButton('prev');
}
if (questionInstances[questionInstances.length-1] === question) {
question.hideButton('next');
}
if (questionInstances[questionInstances.length-1] !== question) {
question.hideButton('finish');
}
} }
};
} var toggleButtonsForQuestion = function(question, isFirst, isLast){
//Show buttons if necessary
question[isLast ? 'showButton' : 'hideButton']('finish');
question[!isLast ? 'showButton' : 'hideButton']('next');
if (isFirst || params.disableBackwardsNavigation) {
question.hideButton('prev');
}
else {
question.showButton('prev');
}
};
var moveQuestion = function (direction) { var moveQuestion = function (direction) {
if (params.disableBackwardsNavigation && !questionInstances[currentQuestion].getAnswerGiven()) { if (params.disableBackwardsNavigation && !questionInstances[currentQuestion].getAnswerGiven()) {
@ -569,8 +563,8 @@ H5P.QuestionSet = function (options, contentId, contentData) {
* @param {number} dotIndex Index of dot * @param {number} dotIndex Index of dot
* @param {boolean} isAnswered True if is answered, False if not answered * @param {boolean} isAnswered True if is answered, False if not answered
*/ */
var toggleAnsweredDot = function(dotIndex, isAnswered) { var toggleAnsweredDot = function (dotIndex, isAnswered) {
var $el = $('.progress-dot:eq(' + dotIndex +')', $myDom); var $el = $('.progress-dot:eq(' + dotIndex + ')', $myDom);
// Skip current button // Skip current button
if ($el.hasClass('current')) { if ($el.hasClass('current')) {
@ -581,8 +575,8 @@ H5P.QuestionSet = function (options, contentId, contentData) {
isAnswered = !!isAnswered; isAnswered = !!isAnswered;
var label = params.texts.jumpToQuestion var label = params.texts.jumpToQuestion
.replace('%d', (dotIndex + 1).toString()) .replace('%d', (dotIndex + 1).toString())
.replace('%total', $('.progress-dot', $myDom).length) + .replace('%total', $('.progress-dot', $myDom).length) +
', ' + ', ' +
(isAnswered ? params.texts.answeredText : params.texts.unansweredText); (isAnswered ? params.texts.answeredText : params.texts.unansweredText);
@ -597,7 +591,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
* @param isCurrent * @param isCurrent
*/ */
var toggleCurrentDot = function (dotIndex, isCurrent) { var toggleCurrentDot = function (dotIndex, isCurrent) {
var $el = $('.progress-dot:eq(' + dotIndex +')', $myDom); var $el = $('.progress-dot:eq(' + dotIndex + ')', $myDom);
var texts = params.texts; var texts = params.texts;
var label = texts.jumpToQuestion var label = texts.jumpToQuestion
.replace('%d', (dotIndex + 1).toString()) .replace('%d', (dotIndex + 1).toString())
@ -707,9 +701,9 @@ H5P.QuestionSet = function (options, contentId, contentData) {
setTimeout(function () { setTimeout(function () {
$('.qs-progress-announcer', $myDom) $('.qs-progress-announcer', $myDom)
.html(eparams.message + '.' + .html(eparams.message + '.' +
scoreString + '.' + scoreString + '.' +
eparams.comment + '.' + eparams.comment + '.' +
eparams.resulttext) eparams.resulttext)
.show().focus(); .show().focus();
}, 0); }, 0);
} }
@ -793,7 +787,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
$intro.css({ $intro.css({
background: '#fff url("' + H5P.getPath(bgImg.path, contentId) + '") no-repeat 50% 50%', background: '#fff url("' + H5P.getPath(bgImg.path, contentId) + '") no-repeat 50% 50%',
backgroundSize: 'auto 100%', backgroundSize: 'auto 100%',
minHeight: bgImgRatio * +window.getComputedStyle($intro[0]).width.replace('px','') minHeight: bgImgRatio * +window.getComputedStyle($intro[0]).width.replace('px', '')
}); });
} }
} }
@ -831,15 +825,15 @@ H5P.QuestionSet = function (options, contentId, contentData) {
}); });
// Hide next button if it is the last question // Hide next button if it is the last question
if(questionInstances[questionInstances.length -1] === question) { if (questionInstances[questionInstances.length - 1] === question) {
question.hideButton('next'); question.hideButton('next');
} }
question.on('xAPI', function (event) { question.on('xAPI', function (event) {
var shortVerb = event.getVerb(); var shortVerb = event.getVerb();
if (shortVerb === 'interacted' || if (shortVerb === 'interacted' ||
shortVerb === 'answered' || shortVerb === 'answered' ||
shortVerb === 'attempted') { shortVerb === 'attempted') {
toggleAnsweredDot(currentQuestion, toggleAnsweredDot(currentQuestion,
questionInstances[currentQuestion].getAnswerGiven()); questionInstances[currentQuestion].getAnswerGiven());
_updateButtons(); _updateButtons();
@ -915,7 +909,6 @@ H5P.QuestionSet = function (options, contentId, contentData) {
}); });
// Hide all but current question // Hide all but current question
_showQuestion(currentQuestion, true); _showQuestion(currentQuestion, true);
@ -1022,10 +1015,10 @@ H5P.QuestionSet = function (options, contentId, contentData) {
return info; return info;
}; };
this.getQuestions = function() { this.getQuestions = function () {
return questionInstances; return questionInstances;
}; };
this.showSolutions = function() { this.showSolutions = function () {
renderSolutions = true; renderSolutions = true;
}; };