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

Improved boardgame flexibility.

pull/1/head
Frode Petterson 2013-04-26 17:27:35 +02:00
parent 3fa4b0486c
commit c4c526b1e4
2 changed files with 138 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
css/questionset.css
View File

@ -18,51 +18,38 @@
margin: -1px 4px 1px 2px; margin: -1px 4px 1px 2px;
} }
.intro-page { .intro-page {
/*background-color: rgba(255,255,255,0.9);*/
/*padding: 10px;*/
position: absolute;
z-index: 20;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
} }
.intro-page .title { .intro-page .title {
font-size: 200%; font-size: 2em;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
margin: 1em; padding: 1em 1em 0.5em;
} }
.intro-page .introduction { .intro-page .introduction {
font-size: 125%; font-size: 1.25em;
margin: 1em 10%; margin: 0 1em;
} }
.intro-page .buttons { .intro-page .buttons {
position: absolute; margin: 3em auto;
top: 200px; text-align: center;
left: 182px;
text-align: right;
} }
#qs-startbutton { #qs-startbutton {
border: 4px solid #BABABA; font-size: 3em;
border-radius: 10px 10px 10px 10px; border: 0.083em solid #BABABA;
font-size: 50px; border-radius: 0.2083em;
padding: 10px 20px; padding: 0.2083em 0.4167em;
cursor: pointer; cursor: pointer;
} }
.qs-progress { .qs-progress {
line-height: 40px; line-height: 2em;
padding: 0; padding: 0;
margin: 1em 1em 0;
} }
.questionset-results { .questionset-results {
background-image: url(img/Paper-clean.png);
background-color: rgba(255, 255, 255, 0.75);
padding: 10px;
height: 480px;
text-align: center; text-align: center;
} }
@ -76,6 +63,7 @@
} }
.questionset-results .resulttext { .questionset-results .resulttext {
text-align: left;
font-size: 20px; font-size: 20px;
line-height: 25px; line-height: 25px;
margin: 40px 100px; margin: 40px 100px;

219
js/questionset.js
View File

@ -1,96 +1,101 @@
// 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)
var H5P = H5P || {}; var H5P = H5P || {};
/**
* 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)
*
* @param {Array} options
* @param {int} contentId
* @returns {H5P.QuestionSet} Instance
*/
H5P.QuestionSet = function (options, contentId) { H5P.QuestionSet = function (options, contentId) {
if ( !(this instanceof H5P.QuestionSet) ) if (!(this instanceof H5P.QuestionSet)) {
return new H5P.QuestionSet(options, contentId); return new H5P.QuestionSet(options, contentId);
}
var $ = H5P.jQuery; var $ = H5P.jQuery;
var cp = H5P.getContentPath(contentId); var cp = H5P.getContentPath(contentId);
var texttemplate = '' + var texttemplate =
'<% if (introPage.showIntroPage) { %>' + '<% if (introPage.showIntroPage) { %>' +
'<div class="intro-page">' + '<div class="intro-page">' +
' <div class="title"><%= introPage.title %></div>' + ' <div class="title"><%= introPage.title %></div>' +
' <div class="introduction"><%= introPage.introduction %></div>' + ' <div class="introduction"><%= introPage.introduction %></div>' +
' <div class="buttons"><a id="qs-startbutton" class="button"><%= introPage.startButtonText %></a></div>' + ' <div class="buttons"><a id="qs-startbutton" class="button"><%= introPage.startButtonText %></a></div>' +
'</div>' + '</div>' +
'<%} %>' + '<%} %>' +
'<div class="questionset hidden">' + '<div class="questionset hidden">' +
' <div class="title"><%= title %></div>' + ' <div class="title"><%= title %></div>' +
' <% for (var i=0; i<questions.length; i++) { %>' + ' <% for (var i=0; i<questions.length; i++) { %>' +
' <div class="question-container" id="q-<%= i %>">' + ' <div class="question-container" id="q-<%= i %>">' +
' <div><%= questions[i].library %></div>' + ' <div><%= questions[i].library %></div>' +
' </div>' + ' </div>' +
' <% } %>' + ' <% } %>' +
' <div class="qs-footer">' + ' <div class="qs-footer">' +
' <div class="qs-progress">' + ' <div class="qs-progress">' +
' <% if (progressType == "dots") { %>' + ' <% if (progressType == "dots") { %>' +
' <div class="dots-container">' + ' <div class="dots-container">' +
' <% for (var i=0; i<questions.length; i++) { %>' + ' <% for (var i=0; i<questions.length; i++) { %>' +
' <span class="progress-dot unanswered" id="qdot-<%= i %>"></span>' + ' <span class="progress-dot unanswered" id="qdot-<%= i %>"></span>' +
' <%} %>' + ' <%} %>' +
' </div>' + ' </div>' +
' <% } else if (progressType == "textual") { %>' + ' <% } else if (progressType == "textual") { %>' +
' <span class="progress-text"></span>' + ' <span class="progress-text"></span>' +
' <% } %>' + ' <% } %>' +
' </div>' + ' </div>' +
' <a class="prev button"><%= texts.prevButton %></a>' + ' <a class="prev button"><%= texts.prevButton %></a>' +
' <a class="next button"><%= texts.nextButton %></a>' + ' <a class="next button"><%= texts.nextButton %></a>' +
' <a class="finish button"><%= texts.finishButton %></a>' + ' <a class="finish button"><%= texts.finishButton %></a>' +
' </div>' + ' </div>' +
'</div>' + '</div>';
'';
var resulttemplate = '' + var resulttemplate =
'<div class="questionset-results">' + '<div class="questionset-results">' +
' <div class="greeting"><%= greeting %></div>' + ' <div class="greeting"><%= greeting %></div>' +
' <div class="score <%= scoreclass %>"><%= score %></div>' + ' <div class="score <%= scoreclass %>"><%= score %></div>' +
' <div class="resulttext <%= scoreclass %>"><%= resulttext %></div>' + ' <div class="resulttext <%= scoreclass %>"><%= resulttext %></div>' +
' <div class="buttons"><a class="button qs-finishbutton"><%= finishButtonText %></a></div>' + ' <div class="buttons"><a class="button qs-finishbutton"><%= finishButtonText %></a></div>' +
'</div>' + '</div>';
'';
var that = this;
var defaults = { var defaults = {
title: "", title: '',
randomOrder: false, randomOrder: false,
initialQuestion: 0, initialQuestion: 0,
backgroundImage: "", backgroundImage: '',
progressType: 'dots', progressType: 'dots',
passPercentage: 50, passPercentage: 50,
questions: [], questions: [],
introPage: { introPage: {
showIntroPage: true, showIntroPage: true,
title: "Welcome", title: 'Welcome',
introduction: "Click start to start.", introduction: 'Click start to start.',
startButtonText: "Start" startButtonText: 'Start'
}, },
texts: { texts: {
prevButton: "Previous", prevButton: 'Previous',
nextButton: "Next", nextButton: 'Next',
finishButton: "Finish", finishButton: 'Finish',
textualProgress: "Question: @current of @total questions" textualProgress: 'Question: @current of @total questions'
}, },
endGame: { endGame: {
showResultPage: true, showResultPage: true,
resultPage: { resultPage: {
successGreeting: "Congratulations!", successGreeting: 'Congratulations!',
successComment: "You have enough correct answers to pass the test.", successComment: 'You have enough correct answers to pass the test.',
failGreeting: "Sorry!", failGreeting: 'Sorry!',
failComment: "You don't have enough correct answers to pass this test.", failComment: "You don't have enough correct answers to pass this test.",
scoreString: "@score/@total", scoreString: '@score/@total',
finishButtonText: "Finish" finishButtonText: 'Finish'
}, },
animations: { animations: {
showAnimations: false, showAnimations: false,
@ -102,20 +107,18 @@ H5P.QuestionSet = function (options, contentId) {
var template = new EJS({text: texttemplate}); var template = new EJS({text: texttemplate});
var endTemplate = new EJS({text: resulttemplate}); var endTemplate = new EJS({text: resulttemplate});
var params = $.extend({}, defaults, options); var params = $.extend(true, {}, defaults, options);
var currentQuestion = 0; var currentQuestion = 0;
var questionInstances = new Array(); var questionInstances = new Array();
var allQuestionsAnswered = false;
var $myDom; var $myDom;
if (params.randomOrder) { // if (params.randomOrder) {
// TODO: Randomize order of questions // // TODO: Randomize order of questions
console.log("TODO: Randomize order of questions"); // }
}
// Instantiate question instances // Instantiate question instances
for (var i=0; i<params.questions.length; i++) { for (var i = 0; i < params.questions.length; i++) {
var question = params.questions[i]; var question = params.questions[i];
// TODO: Render on init, inject in template. // TODO: Render on init, inject in template.
@ -136,7 +139,7 @@ H5P.QuestionSet = function (options, contentId) {
} else { } else {
$('.prev.button', $myDom).show(); $('.prev.button', $myDom).show();
} }
if (currentQuestion == (params.questions.length - 1)) { if (currentQuestion === (params.questions.length - 1)) {
$('.next.button', $myDom).hide(); $('.next.button', $myDom).hide();
if (answered) { if (answered) {
$('.finish.button', $myDom).show(); $('.finish.button', $myDom).show();
@ -145,13 +148,16 @@ H5P.QuestionSet = function (options, contentId) {
$('.next.button', $myDom).show(); $('.next.button', $myDom).show();
$('.finish.button', $myDom).hide(); $('.finish.button', $myDom).hide();
} }
}; };
var _showQuestion = function (questionNumber) { var _showQuestion = function (questionNumber) {
// Sanitize input. // Sanitize input.
if (questionNumber < 0) { questionNumber = 0; } if (questionNumber < 0) {
if (questionNumber >= params.questions.length) { questionNumber = params.questions.length - 1; } questionNumber = 0;
}
if (questionNumber >= params.questions.length) {
questionNumber = params.questions.length - 1;
}
// Hide all questions // Hide all questions
$('.question-container', $myDom).hide(); $('.question-container', $myDom).hide();
@ -161,9 +167,10 @@ H5P.QuestionSet = function (options, contentId) {
// 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
$('.progress-dot.current', $myDom).removeClass('current'); $('.progress-dot.current', $myDom).removeClass('current');
$('#qdot-' + questionNumber, $myDom).addClass('current'); $('#qdot-' + questionNumber, $myDom).addClass('current');
@ -202,7 +209,7 @@ H5P.QuestionSet = function (options, contentId) {
// Show result page. // Show result page.
$myDom.children().hide(); $myDom.children().hide();
$myDom.append(endTemplate.render(eparams)); $myDom.append(endTemplate.render(eparams));
$('.qs-finishbutton').click(function (ev) { $('.qs-finishbutton').click(function () {
$(returnObject).trigger('h5pQuestionSetFinished', eventData); $(returnObject).trigger('h5pQuestionSetFinished', eventData);
}); });
}; };
@ -210,9 +217,28 @@ H5P.QuestionSet = function (options, contentId) {
if (params.endGame.animations.showAnimations) { if (params.endGame.animations.showAnimations) {
var videoData = success ? params.endGame.animations.successVideo : params.endGame.animations.failVideo; var videoData = success ? params.endGame.animations.successVideo : params.endGame.animations.failVideo;
if (videoData) { if (videoData) {
H5P.playVideo($myDom, videoData, params.endGame.animations.skipButtonText, cp, function () { var $videoContainer = $('<div class="video-container"></div>').appendTo($myDom);
var video = new H5P.Video({
files: videoData,
fitToWrapper: true,
controls: false,
autoplay: true
}, cp);
video.endedCallback = function () {
displayResults(); displayResults();
}); $videoContainer.hide();
};
video.attach($videoContainer);
if (params.endGame.animations.skipButtonText) {
$('<a class="button skip">' + params.endGame.animations.skipButtonText + '</a>').click(function () {
video.stop();
$videoContainer.hide();
displayResults();
}).appendTo($videoContainer);
}
return; return;
} }
} }
@ -222,9 +248,10 @@ H5P.QuestionSet = function (options, contentId) {
// Function for attaching the multichoice to a DOM element. // Function for attaching the multichoice to a DOM element.
var attach = function (target) { var attach = function (target) {
if (typeof(target) == "string") { if (typeof(target) === "string") {
$myDom = $("#" + target); $myDom = $('#' + target);
} else { }
else {
$myDom = $(target); $myDom = $(target);
} }
@ -234,11 +261,11 @@ H5P.QuestionSet = function (options, contentId) {
}); });
// Attach questions // Attach questions
for (var i=0; i<questionInstances.length; i++) { for (var i = 0; i < questionInstances.length; i++) {
var question = questionInstances[i]; var question = questionInstances[i];
// TODO: Render on init, inject in template. // TODO: Render on init, inject in template.
question.attach('q-' + i); question.attach('q-' + i);
$(question).on('h5pQuestionAnswered', function (ev) { $(question).on('h5pQuestionAnswered', function () {
$('#qdot-' + currentQuestion, $myDom).removeClass('unanswered').addClass('answered'); $('#qdot-' + currentQuestion, $myDom).removeClass('unanswered').addClass('answered');
_updateButtons(); _updateButtons();
}); });
@ -247,23 +274,23 @@ H5P.QuestionSet = function (options, contentId) {
} }
} }
$('#qs-startbutton').click(function (ev) { $('#qs-startbutton').click(function () {
$(this).parents('.intro-page').hide(); $(this).parents('.intro-page').hide();
$('.questionset', $myDom).removeClass('hidden'); $('.questionset', $myDom).removeClass('hidden');
}); });
// Set event listeners. // Set event listeners.
$('.progress-dot', $myDom).click(function (ev) { $('.progress-dot', $myDom).click(function () {
var idx = parseInt($(this).attr('id').split('-')[1], 10); var idx = parseInt($(this).attr('id').split('-')[1], 10);
_showQuestion(idx); _showQuestion(idx);
}); });
$('.next.button', $myDom).click(function (ev) { $('.next.button', $myDom).click(function () {
_showQuestion(currentQuestion + 1); _showQuestion(currentQuestion + 1);
}); });
$('.prev.button', $myDom).click(function (ev) { $('.prev.button', $myDom).click(function () {
_showQuestion(currentQuestion - 1); _showQuestion(currentQuestion - 1);
}); });
$('.finish.button', $myDom).click(function (ev) { $('.finish.button', $myDom).click(function () {
_displayEndGame(); _displayEndGame();
}); });
@ -286,7 +313,7 @@ H5P.QuestionSet = function (options, contentId) {
var totalScore = function () { var totalScore = function () {
var score = 0; var score = 0;
for (var i = questionInstances.length - 1; i >= 0; i--) { for (var i = questionInstances.length - 1; i >= 0; i--) {
score += questionInstances[i].totalScore(); score += questionInstances[i].getMaxScore();
} }
return score; return score;
}; };