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

Refactor button creation [HFP-56] 

Add comments
pull/4/head^2
Timothy Lim 2016-10-17 10:43:07 +02:00
parent 46753e2b5e
commit b3dc56c796
1 changed files with 49 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
js/questionset.js
View File

@ -128,7 +128,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
var currentQuestion = 0; var currentQuestion = 0;
var questionInstances = []; var questionInstances = [];
var questionOrder = []; //Stores order of questions to allow resuming of question set var questionOrder; //Stores order of questions to allow resuming of question set
var $myDom; var $myDom;
var scoreBar; var scoreBar;
var up; var up;
@ -145,13 +145,6 @@ H5P.QuestionSet = function (options, contentId, contentData) {
questionOrder = contentData.previousState.order; questionOrder = contentData.previousState.order;
} }
else {
// Set a generic order of 0...N if not resuming
for (var i = 0; i < params.questions.length; i++) {
questionOrder[i] = i;
}
}
var $template = $(template.render(params)); var $template = $(template.render(params));
// Set overrides for questions // Set overrides for questions
var override; var override;
@ -173,8 +166,15 @@ H5P.QuestionSet = function (options, contentId, contentData) {
// Instantiate question instances // Instantiate question instances
for (var i = 0; i < params.questions.length; i++) { for (var i = 0; i < params.questions.length; i++) {
// Create questions in either a generic or randomized order var question;
var question = params.questions[questionOrder[i]]; // If a previous order exists, use it
if (questionOrder !== undefined) {
question = params.questions[questionOrder[i]];
}
else {
// Use generic order when initialzing for the first time
question = params.questions[i];
}
if (override) { if (override) {
// Extend subcontent with the overrided settings. // Extend subcontent with the overrided settings.
@ -198,8 +198,12 @@ H5P.QuestionSet = function (options, contentId, contentData) {
questionInstances.push(questionInstance); questionInstances.push(questionInstance);
} }
// General purpose function to randomize elements and update a map of their indexes /**
// TODO: Move this function to a seperate file * Randomizes elements in an array and updates a map of the order
* @param elements
* @param map
* @return {array}
*/
var randomizeElements = function (elements, map) { var randomizeElements = function (elements, map) {
// Save the original order of the elements in a nested array [[element1,0],[element2,1]... // Save the original order of the elements in a nested array [[element1,0],[element2,1]...
@ -423,7 +427,7 @@ H5P.QuestionSet = function (options, contentId, contentData) {
rendered = false; rendered = false;
if (params.randomQuestions) { if (params.randomQuestions) {
// randomizeQuestions(); randomizeQuestions();
} }
}; };
@ -434,15 +438,14 @@ H5P.QuestionSet = function (options, contentId, contentData) {
rendered = false; rendered = false;
}; };
/**
* Randomizes question instances
*/
var randomizeQuestions = function () { var randomizeQuestions = function () {
// Randomize order of the questions var result = randomizeElements(questionInstances,questionOrder);
questionInstances = H5P.shuffleArray(questionInstances); questionInstances = result.elements;
questionOrder = result.map;
// Save new randomized order in case the question is resumed
for (var i = 0; i < questionInstances.length; i++) {
questionOrder[i] = questionInstances[i].originalOrder;
}
// 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 (){
@ -451,50 +454,25 @@ H5P.QuestionSet = function (options, contentId, contentData) {
// 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];
question.attach($('.question-container:eq(' + i + ')', $myDom)); question.attach($('.question-container:eq(' + i + ')', $myDom));
// Add 'finish' button if needed //Show buttons if necessary
if(questionInstances[questionInstances.length -1] === question) { if(questionInstances[questionInstances.length -1] === question
&& question.hasButton('finish')) {
if (question.hasButton('finish')) {question.showButton('finish');} question.showButton('finish');
else {
// Add finish question set button
question.addButton('finish', params.texts.finishButton,
moveQuestion.bind(this, 1), false);
}
} }
// Add 'next' button if needed if(questionInstances[questionInstances.length -1] !== question
if(questionInstances[questionInstances.length -1] !== question) { && question.hasButton('next')) {
question.showButton('next');
if (question.hasButton('next')) {question.showButton('next');}
else {
// Only show button 'next' button when answered or is allowed to go back
question.addButton('next', '', moveQuestion.bind(this, 1),
!params.disableBackwardsNavigation || !!question.getAnswerGiven(), {
href: '#', // Use href since this is a navigation button
'aria-label': params.texts.nextButton
});
}
} }
// Add 'previous' button if needed if(questionInstances[0] !== question
if(questionInstances[0] !== question) { && question.hasButton('prev')) {
question.showButton('prev');
if (question.hasButton('prev')) {question.showButton('prev');}
else {
// Only show button 'previous' button when answered or is allowed to go forward
question.addButton('prev', '', moveQuestion.bind(this, -1),
!(questionInstances[0] === question || params.disableBackwardsNavigation), {
href: '#', // Use href since this is a navigation button
'aria-label': params.texts.prevButton
});
}
} }
// Hide relevant buttons since the order has changed // Hide relevant buttons since the order has changed
@ -779,29 +757,29 @@ H5P.QuestionSet = function (options, contentId, contentData) {
// Listen for image resize // Listen for image resize
registerImageLoadedListener(question); registerImageLoadedListener(question);
// Add next/finish button // Add finish button
if (questionInstances[questionInstances.length -1] === question) { question.addButton('finish', params.texts.finishButton,
moveQuestion.bind(this, 1), false);
// Add finish question set button // Add next button
question.addButton('finish', params.texts.finishButton, question.addButton('next', '', moveQuestion.bind(this, 1),
moveQuestion.bind(this, 1), false); !params.disableBackwardsNavigation || !!question.getAnswerGiven(), {
href: '#', // Use href since this is a navigation button
'aria-label': params.texts.nextButton
});
} else { // Add previous button
// Only show button next button when answered or is allowed to go back
question.addButton('next', '', moveQuestion.bind(this, 1),
!params.disableBackwardsNavigation || !!question.getAnswerGiven(), {
href: '#', // Use href since this is a navigation button
'aria-label': params.texts.nextButton
});
}
// Add previous question button
question.addButton('prev', '', moveQuestion.bind(this, -1), question.addButton('prev', '', moveQuestion.bind(this, -1),
!(questionInstances[0] === question || params.disableBackwardsNavigation), { !(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
}); });
// Hide next button if it is the last question
if(questionInstances[questionInstances.length -1] === question) {
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' ||