Improved boardgame flexibility.

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%;
+  font-size: 1.25em;
-  margin: 1em 10%;
+  margin: 0 1em;
 }
 .intro-page .buttons {
-  position: absolute;
+  margin: 3em auto;
-  top: 200px;
+  text-align: center;
-  left: 182px;
-  text-align: right;
 }
 
 #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;
 }
 
 .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;

js/questionset.js

@@ -1,25 +1,32 @@
-// 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 = '' +
+  var texttemplate =
           '<% if (introPage.showIntroPage) { %>' +
           '<div class="intro-page">' +
           '  <div class="title"><%= introPage.title %></div>' +
@@ -50,47 +57,45 @@ H5P.QuestionSet = function (options, contentId) {
           '    <a class="next button"><%= texts.nextButton %></a>' +
           '    <a class="finish button"><%= texts.finishButton %></a>' +
           '  </div>' +
-'</div>' +
+          '</div>';
-  '';
+
-  var resulttemplate = '' +
+  var resulttemplate =
           '<div class="questionset-results">' +
           '  <div class="greeting"><%= greeting %></div>' +
           '  <div class="score <%= scoreclass %>"><%= score %></div>' +
           '  <div class="resulttext <%= scoreclass %>"><%= resulttext %></div>' +
           '  <div class="buttons"><a class="button qs-finishbutton"><%= finishButtonText %></a></div>' +
-'</div>' +
+          '</div>';
-  '';
 
-  var that = this;
   var defaults = {
-    title: "",
+    title: '',
     randomOrder: false,
     initialQuestion: 0,
-    backgroundImage: "",
+    backgroundImage: '',
     progressType: 'dots',
     passPercentage: 50,
     questions: [],
     introPage: {
       showIntroPage: true,
-      title: "Welcome",
+      title: 'Welcome',
-      introduction: "Click start to start.",
+      introduction: 'Click start to start.',
-      startButtonText: "Start"
+      startButtonText: 'Start'
     },
     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: {
       showResultPage: true,
       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.",
-        scoreString: "@score/@total",
+        scoreString: '@score/@total',
-        finishButtonText: "Finish"
+        finishButtonText: 'Finish'
       },
       animations: {
         showAnimations: false,
@@ -102,17 +107,15 @@ 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) {
+//  if (params.randomOrder) {
-    // TODO: Randomize order of questions
+//    // TODO: Randomize order of questions
-    console.log("TODO: Randomize order of questions");
+//  }
-  }
 
   // Instantiate question instances
   for (var i = 0; i < params.questions.length; i++) {
@@ -136,7 +139,7 @@ H5P.QuestionSet = function (options, contentId) {
     } else {
       $('.prev.button', $myDom).show();
     }
-    if (currentQuestion == (params.questions.length - 1)) {
+    if (currentQuestion === (params.questions.length - 1)) {
       $('.next.button', $myDom).hide();
       if (answered) {
         $('.finish.button', $myDom).show();
@@ -145,13 +148,16 @@ H5P.QuestionSet = function (options, contentId) {
       $('.next.button', $myDom).show();
       $('.finish.button', $myDom).hide();
     }
-
  };
 
   var _showQuestion = function (questionNumber) {
     // 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
     $('.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 = $('<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();
-        });
+          $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;
       }
     }
@@ -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") {
+    if (typeof(target) === "string") {
-      $myDom = $("#" + target);
+      $myDom = $('#' + target);
-    } else {
+    }
+    else {
       $myDom = $(target);
     }
 
@@ -238,7 +265,7 @@ H5P.QuestionSet = function (options, contentId) {
       var question = questionInstances[i];
       // TODO: Render on init, inject in template.
       question.attach('q-' + i);
-      $(question).on('h5pQuestionAnswered', function (ev) {
+      $(question).on('h5pQuestionAnswered', function () {
         $('#qdot-' + currentQuestion, $myDom).removeClass('unanswered').addClass('answered');
         _updateButtons();
       });
@@ -247,23 +274,23 @@ H5P.QuestionSet = function (options, contentId) {
       }
     }
 
-    $('#qs-startbutton').click(function (ev) {
+    $('#qs-startbutton').click(function () {
       $(this).parents('.intro-page').hide();
       $('.questionset', $myDom).removeClass('hidden');
     });
 
     // Set event listeners.
-    $('.progress-dot', $myDom).click(function (ev) {
+    $('.progress-dot', $myDom).click(function () {
       var idx = parseInt($(this).attr('id').split('-')[1], 10);
       _showQuestion(idx);
     });
-    $('.next.button', $myDom).click(function (ev) {
+    $('.next.button', $myDom).click(function () {
       _showQuestion(currentQuestion + 1);
     });
-    $('.prev.button', $myDom).click(function (ev) {
+    $('.prev.button', $myDom).click(function () {
       _showQuestion(currentQuestion - 1);
     });
-    $('.finish.button', $myDom).click(function (ev) {
+    $('.finish.button', $myDom).click(function () {
       _displayEndGame();
     });
 
@@ -286,7 +313,7 @@ H5P.QuestionSet = function (options, contentId) {
   var totalScore = function () {
     var score = 0;
     for (var i = questionInstances.length - 1; i >= 0; i--) {
-      score += questionInstances[i].totalScore();
+      score += questionInstances[i].getMaxScore();
     }
     return score;
   };