Improved boardgame flexibility.
parent
3fa4b0486c
commit
c4c526b1e4
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
@ -300,4 +327,4 @@ H5P.QuestionSet = function (options, contentId) {
|
||||||
defaults: defaults // Provide defaults for inspection
|
defaults: defaults // Provide defaults for inspection
|
||||||
};
|
};
|
||||||
return returnObject;
|
return returnObject;
|
||||||
};
|
};
|
Loading…
Reference in New Issue