From c4c526b1e410a559e81f4ff68fd62f0313f585ee Mon Sep 17 00:00:00 2001 From: Frode Petterson Date: Fri, 26 Apr 2013 17:27:35 +0200 Subject: [PATCH] Improved boardgame flexibility. --- css/questionset.css | 40 +++----- js/questionset.js | 221 +++++++++++++++++++++++++------------------- 2 files changed, 138 insertions(+), 123 deletions(-) diff --git a/css/questionset.css b/css/questionset.css index 0fe886e..49ebe12 100644 --- a/css/questionset.css +++ b/css/questionset.css @@ -18,51 +18,38 @@ margin: -1px 4px 1px 2px; } .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 { - font-size: 200%; + font-size: 2em; font-weight: bold; text-align: center; - margin: 1em; + padding: 1em 1em 0.5em; } .intro-page .introduction { - font-size: 125%; - margin: 1em 10%; + font-size: 1.25em; + margin: 0 1em; } .intro-page .buttons { - position: absolute; - top: 200px; - left: 182px; - text-align: right; + margin: 3em auto; + text-align: center; } #qs-startbutton { - border: 4px solid #BABABA; - border-radius: 10px 10px 10px 10px; - font-size: 50px; - padding: 10px 20px; + font-size: 3em; + border: 0.083em solid #BABABA; + border-radius: 0.2083em; + padding: 0.2083em 0.4167em; cursor: pointer; } .qs-progress { - line-height: 40px; + line-height: 2em; padding: 0; + margin: 1em 1em 0; } .questionset-results { - background-image: url(img/Paper-clean.png); - background-color: rgba(255, 255, 255, 0.75); - - padding: 10px; - height: 480px; text-align: center; } @@ -76,6 +63,7 @@ } .questionset-results .resulttext { + text-align: left; font-size: 20px; line-height: 25px; margin: 40px 100px; diff --git a/js/questionset.js b/js/questionset.js index 078d1da..2a7c822 100644 --- a/js/questionset.js +++ b/js/questionset.js @@ -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 || {}; +/** + * 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) { - if ( !(this instanceof H5P.QuestionSet) ) + if (!(this instanceof H5P.QuestionSet)) { return new H5P.QuestionSet(options, contentId); + } var $ = H5P.jQuery; var cp = H5P.getContentPath(contentId); - var texttemplate = '' + -'<% if (introPage.showIntroPage) { %>' + -'
' + -'
<%= introPage.title %>
' + -'
<%= introPage.introduction %>
' + -' ' + -'
' + -'<%} %>' + -'' + - ''; - var resulttemplate = '' + -'
' + -'
<%= greeting %>
' + -'
<%= score %>
' + -'
<%= resulttext %>
' + -' ' + -'
' + - ''; + var texttemplate = + '<% if (introPage.showIntroPage) { %>' + + '
' + + '
<%= introPage.title %>
' + + '
<%= introPage.introduction %>
' + + ' ' + + '
' + + '<%} %>' + + ''; + + var resulttemplate = + '
' + + '
<%= greeting %>
' + + '
<%= score %>
' + + '
<%= resulttext %>
' + + ' ' + + '
'; - var that = this; var defaults = { - title: "", + title: '', randomOrder: false, initialQuestion: 0, - backgroundImage: "", + backgroundImage: '', progressType: 'dots', passPercentage: 50, questions: [], introPage: { showIntroPage: true, - title: "Welcome", - introduction: "Click start to start.", - startButtonText: "Start" + title: 'Welcome', + introduction: 'Click start to start.', + startButtonText: 'Start' }, texts: { - prevButton: "Previous", - nextButton: "Next", - finishButton: "Finish", - textualProgress: "Question: @current of @total questions" + prevButton: 'Previous', + nextButton: 'Next', + finishButton: 'Finish', + textualProgress: 'Question: @current of @total questions' }, endGame: { showResultPage: true, resultPage: { - successGreeting: "Congratulations!", - successComment: "You have enough correct answers to pass the test.", - failGreeting: "Sorry!", + successGreeting: '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" + scoreString: '@score/@total', + finishButtonText: 'Finish' }, animations: { showAnimations: false, @@ -102,20 +107,18 @@ H5P.QuestionSet = function (options, contentId) { var template = new EJS({text: texttemplate}); var endTemplate = new EJS({text: resulttemplate}); - var params = $.extend({}, defaults, options); + var params = $.extend(true, {}, defaults, options); var currentQuestion = 0; var questionInstances = new Array(); - var allQuestionsAnswered = false; var $myDom; - if (params.randomOrder) { - // TODO: Randomize order of questions - console.log("TODO: Randomize order of questions"); - } +// if (params.randomOrder) { +// // TODO: Randomize order of questions +// } // Instantiate question instances - for (var i=0; i= params.questions.length) { questionNumber = params.questions.length - 1; } + if (questionNumber < 0) { + questionNumber = 0; + } + if (questionNumber >= params.questions.length) { + questionNumber = params.questions.length - 1; + } // Hide all questions $('.question-container', $myDom).hide(); @@ -161,9 +167,10 @@ H5P.QuestionSet = function (options, contentId) { // Update progress indicator // 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)); - } else { + } + else { // Set currentNess $('.progress-dot.current', $myDom).removeClass('current'); $('#qdot-' + questionNumber, $myDom).addClass('current'); @@ -202,7 +209,7 @@ H5P.QuestionSet = function (options, contentId) { // Show result page. $myDom.children().hide(); $myDom.append(endTemplate.render(eparams)); - $('.qs-finishbutton').click(function (ev) { + $('.qs-finishbutton').click(function () { $(returnObject).trigger('h5pQuestionSetFinished', eventData); }); }; @@ -210,9 +217,28 @@ H5P.QuestionSet = function (options, contentId) { if (params.endGame.animations.showAnimations) { var videoData = success ? params.endGame.animations.successVideo : params.endGame.animations.failVideo; if (videoData) { - H5P.playVideo($myDom, videoData, params.endGame.animations.skipButtonText, cp, function () { + var $videoContainer = $('
').appendTo($myDom); + + var video = new H5P.Video({ + files: videoData, + fitToWrapper: true, + controls: false, + autoplay: true + }, cp); + video.endedCallback = function () { displayResults(); - }); + $videoContainer.hide(); + }; + video.attach($videoContainer); + + if (params.endGame.animations.skipButtonText) { + $('').click(function () { + video.stop(); + $videoContainer.hide(); + displayResults(); + }).appendTo($videoContainer); + } + return; } } @@ -222,9 +248,10 @@ H5P.QuestionSet = function (options, contentId) { // Function for attaching the multichoice to a DOM element. var attach = function (target) { - if (typeof(target) == "string") { - $myDom = $("#" + target); - } else { + if (typeof(target) === "string") { + $myDom = $('#' + target); + } + else { $myDom = $(target); } @@ -234,11 +261,11 @@ H5P.QuestionSet = function (options, contentId) { }); // Attach questions - for (var i=0; i= 0; i--) { - score += questionInstances[i].totalScore(); + score += questionInstances[i].getMaxScore(); } return score; }; @@ -300,4 +327,4 @@ H5P.QuestionSet = function (options, contentId) { defaults: defaults // Provide defaults for inspection }; return returnObject; -}; +}; \ No newline at end of file