h5p-question-set/js/questionset.js

283 lines
9.0 KiB
JavaScript
Raw Normal View History

2013-01-08 13:04:15 +01:00
// Will render a Question with multiple choices for answers.
// Options format:
// {
// title: "Optional title for question box",
// question: "Question text",
// answers: [{text: "Answer text", correct: false}, ...],
// singleAnswer: true, // or false, will change rendered output slightly.
// }
//
// Events provided:
// - h5pQuestionSetFinished: Triggered when a question is finished. (User presses Finish-button)
2013-01-08 13:04:15 +01:00
window.H5P = window.H5P || {};
H5P.QuestionSet = function (options) {
if ( !(this instanceof H5P.QuestionSet) )
return new H5P.QuestionSet(options);
var $ = H5P.jQuery;
2013-01-08 13:04:15 +01:00
var texttemplate = '' +
'<style type="text/css">' +
'.dots-container {' +
' text-align: center;' +
'}' +
'.progress-dot {' +
' display: inline-block;' +
' width: 10px;' +
' height: 10px;' +
' border-radius: 50%;' +
'}' +
'.progress-dot.unanswered {' +
' background: darkred;' +
'}' +
'.progress-dot.answered {' +
' background: darkgreen;' +
'}' +
'.progress-dot.current {' +
' box-shadow: 0px 0px 6px firebrick;' +
'}' +
'</style>' +
2013-01-08 13:04:15 +01:00
'<div class="questionset">' +
' <div class="title"><%= title %></div>' +
2013-01-08 13:04:15 +01:00
' <% for (var i=0; i<questions.length; i++) { %>' +
' <div class="question-container" id="q-<%= i %>">' +
' <div><%= questions[i].machineName %></div>' +
2013-01-08 13:04:15 +01:00
' </div>' +
' <% } %>' +
' <div class="question-footer">' +
' <div class="progress">' +
' <% if (progressType == "dots") { %>' +
' <div class="dots-container">' +
' <% for (var i=0; i<questions.length; i++) { %>' +
' <span class="progress-dot unanswered" id="qdot-<%= i %>"></span>' +
' <%} %>' +
' </div>' +
2013-01-08 13:04:15 +01:00
' <% } else if (progressType == "textual") { %>' +
' <span class="progress-text"></span>' +
2013-01-08 13:04:15 +01:00
' <% } %>' +
' </div>' +
' <button class="prev button"><%= texts.prevButton %></button>' +
' <button class="next button"><%= texts.nextButton %></button>' +
' <button class="finish button"><%= texts.finishButton %></button>' +
2013-01-08 13:04:15 +01:00
' </div>' +
'</div>' +
'';
var resulttemplate = '' +
'<div class="questionset-results">' +
' <div class="greeting"><%= greeting %></div>' +
' <div class="score <%= scoreclass %>"><%= score %></div>' +
' <div class="resulttext"><%= resulttext %></div>' +
' <div><button class="qs-finishbutton"><%= finishButtonText %></button></div>' +
'</div>' +
'';
var that = this;
2013-01-08 13:04:15 +01:00
var defaults = {
title: "",
randomOrder: false,
initialQuestion: 0,
backgroundImage: "",
progressType: 'dots',
passPercentage: 50,
questions: [],
introPage: {
showIntroPage: true,
title: "Welcome",
introduction: "Click start to start.",
startButtonText: "Start"
},
texts: {
prevButton: "Previous",
nextButton: "Next",
finishButton: "Finish",
textualProgress: "Question: @current of @total questions"
},
endGame: {
showResultPage: true,
resultPage: {
succesGreeting: "Congratulations!",
successComment: "You have enough correct answers to pass the test.",
failGreeting: "Sorry!",
failComment: "You don't have enough correct answers to pass this test.",
scoreString: "@score/@total",
finishButtonText: "Finish"
},
animations: {
showAnimations: false,
succesResultAnimation: {
machineName: "H5P.Image",
options: {image: ""}
},
failedResultAnimation: {
machineName: "H5P.Image",
options: {image: ""}
}
}
}
2013-01-08 13:04:15 +01:00
};
var template = new EJS({text: texttemplate});
var endTemplate = new EJS({text: resulttemplate});
var params = $.extend({}, defaults, options);
2013-01-08 13:04:15 +01:00
var currentQuestion = 0;
2013-01-08 13:04:15 +01:00
var questionInstances = new Array();
var allQuestionsAnswered = false;
var $myDom;
2013-01-08 13:04:15 +01:00
if (params.randomOrder) {
// TODO: Randomize order of questions
console.log("TODO: Randomize order of questions");
}
// Instantiate question instances
for (var i=0; i<params.questions.length; i++) {
var quest = params.questions[i];
// TODO: Render on init, inject in template.
var tmp = new (H5P.classFromName(quest.machineName))(quest.options);
questionInstances.push(tmp);
}
var _updateFinishButton = function () {
var answered = true;
for (var i = questionInstances.length - 1; i >= 0; i--) {
answered = answered && (questionInstances[i]).getAnswerGiven();
}
$('.finish.button', $myDom).attr({'disabled': !answered});
};
2013-01-08 13:04:15 +01:00
var _showQuestion = function (questionNumber) {
// Sanitize input.
if (questionNumber < 0) { questionNumber = 0; }
if (questionNumber >= params.questions.length) { questionNumber = params.questions.length - 1; }
$('.prev.button', $myDom).attr({'disabled': (questionNumber === 0)});
$('.next.button', $myDom).attr({'disabled': (questionNumber == params.questions.length-1)});
2013-01-08 13:04:15 +01:00
// Hide all questions
$('.question-container', $myDom).hide();
2013-01-08 13:04:15 +01:00
// Reshow the requested question
$('#q-' + questionNumber, $myDom).show();
2013-01-08 13:04:15 +01:00
// Update progress indicator
// Test if current has been answered.
if (params.progressType == 'textual') {
$('.progress-text', $myDom).text(params.texts.textualProgress.replace("@current", questionNumber+1).replace("@total", params.questions.length));
2013-01-08 13:04:15 +01:00
} else {
// Set currentNess
$('.progress-dot.current', $myDom).removeClass('current');
$('#qdot-' + questionNumber, $myDom).addClass('current');
2013-01-08 13:04:15 +01:00
}
// Remember where we are
currentQuestion = questionNumber;
return currentQuestion;
};
// Function for attaching the multichoice to a DOM element.
var attach = function (targetId) {
// Render own DOM into target.
template.update(targetId, params);
$myDom = $('#' + targetId);
$myDom.find(".questionset").css({backgroundImage: 'url(' + params.backgroundImage + ')'});
2013-01-08 13:04:15 +01:00
// Attach questions
for (var i=0; i<questionInstances.length; i++) {
var quest = questionInstances[i];
2013-01-08 13:04:15 +01:00
// TODO: Render on init, inject in template.
quest.attach('q-' + i);
$(quest).on('h5pQuestionAnswered', function (ev) {
$('#qdot-' + currentQuestion, $myDom).removeClass('unanswered').addClass('answered');
_updateFinishButton();
});
2013-01-08 13:04:15 +01:00
}
// Set event listeners.
$('.next.button', $myDom).click(function (ev) {
2013-01-08 13:04:15 +01:00
_showQuestion(currentQuestion + 1);
});
$('.prev.button', $myDom).click(function (ev) {
2013-01-08 13:04:15 +01:00
_showQuestion(currentQuestion - 1);
});
$('.finish.button', $myDom).click(function (ev) {
// Get total score.
var finals = getScore();
var totals = totalScore();
var scoreString = params.endGame.resultPage.scoreString.replace("@score", finals).replace("@total", totals);
var success = ((100 * finals / totals) >= params.passPercentage);
var eventData = {
score: scoreString,
passed: success
};
// Display result page.
if (params.endGame.showResultPage) {
// Render result page into.
var eparams = {
greeting: (success ? params.endGame.resultPage.succesGreeting : params.endGame.resultPage.failGreeting),
score: scoreString,
scoreclass: (success ? 'success' : 'fail'),
resulttext: (success ? params.endGame.resultPage.successComment : params.endGame.resultPage.failComment),
finishButtonText: params.endGame.resultPage.finishButtonText
};
endTemplate.update(targetId, eparams);
$('.qs-finishbutton').click(function (ev) {
// Display animation if present.
if (params.endGame.animations.showAnimations) {
// Init anims.
console.log("Now we should have started some anims...");
// On animation finished:
$(returnObject).trigger('h5pQuestionSetFinished', eventData);
} else {
// Trigger finished event.
$(returnObject).trigger('h5pQuestionSetFinished', eventData);
}
});
} else {
$(returnObject).trigger('h5pQuestionSetFinished', eventData);
}
});
2013-01-08 13:04:15 +01:00
// Hide all but initial Question.
_showQuestion(params.initialQuestion);
_updateFinishButton();
2013-01-08 13:04:15 +01:00
return this;
};
// Get current score for questionset.
2013-01-08 13:04:15 +01:00
var getScore = function () {
var score = 0;
for (var i = questionInstances.length - 1; i >= 0; i--) {
score += questionInstances[i].getScore();
}
return score;
};
// Get total score possible for questionset.
var totalScore = function () {
return questionInstances.length;
// FIXME: questions need to get totalScore function.
var score = 0;
for (var i = questionInstances.length - 1; i >= 0; i--) {
score += questionInstances[i].totalScore();
}
return score;
};
// Masquerade the main object to hide inner properties and functions.
var returnObject = {
2013-01-08 13:04:15 +01:00
attach: attach, // Attach to DOM object
getQuestions: function () {return questionInstances;},
getScore: getScore,
totalScore: totalScore,
2013-01-08 13:04:15 +01:00
defaults: defaults // Provide defaults for inspection
};
return returnObject;
2013-01-08 13:04:15 +01:00
};