From b4d4944e125ecf70f1fc317e5cad8ec8720aef1e Mon Sep 17 00:00:00 2001
From: Frank Ronny Larsen <frank.larsen@amendor.no>
Date: Sun, 13 Jan 2013 09:43:55 +0100
Subject: [PATCH] Several changes:

Added h5pQuestionsetFinished event trigger
Use H5P.jQuery
Added result page.
Initial code for endGame (results, animations)
Revised code for showing current question.
Added passPercentage option (default 50)
Intro page and endGame in schema. (Only endGame has been implemented in code yet)
---
 js/questionset.js             | 136 +++++++++++++++++++++++++++++-----
 schema.json                   | 131 +++++++++++++++++++++++++++++++-
 views/questionset-intro.ejs   |   5 ++
 views/questionset-results.ejs |   6 ++
 4 files changed, 256 insertions(+), 22 deletions(-)
 create mode 100644 views/questionset-intro.ejs
 create mode 100644 views/questionset-results.ejs

diff --git a/js/questionset.js b/js/questionset.js
index 9a482de..59d7feb 100644
--- a/js/questionset.js
+++ b/js/questionset.js
@@ -7,12 +7,17 @@
 //   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)
 window.H5P = window.H5P || {};
 
 H5P.QuestionSet = function (options) {
   if ( !(this instanceof H5P.QuestionSet) )
     return new H5P.QuestionSet(options);
 
+  var $ = H5P.jQuery;
+
   var texttemplate = '' +
 '<style type="text/css">' +
 '.dots-container {' +
@@ -60,22 +65,63 @@ H5P.QuestionSet = function (options) {
 '</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;
   var defaults = {
     title: "",
     randomOrder: false,
     initialQuestion: 0,
+    backgroundImage: "",
     progressType: 'textual',
+    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: ""}
+        }
+      }
     }
   };
 
   var template = new EJS({text: texttemplate});
-  var params = jQuery.extend({}, defaults, options);
+  var endTemplate = new EJS({text: resulttemplate});
+  var params = $.extend({}, defaults, options);
 
   var currentQuestion = 0;
   var questionInstances = new Array();
@@ -87,12 +133,21 @@ H5P.QuestionSet = function (options) {
     console.log("TODO: Randomize order of questions");
   }
 
-  var _allQuestionsAnswered = function () {
+  // 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();
     }
-    return answered;
+    $('.finish.button', myDom).attr({'disabled': !answered});
   };
 
   var _showQuestion = function (questionNumber) {
@@ -102,7 +157,7 @@ H5P.QuestionSet = function (options) {
 
     $('.prev.button', myDom).attr({'disabled': (questionNumber === 0)});
     $('.next.button', myDom).attr({'disabled': (questionNumber == params.questions.length-1)});
-    $('.finish.button', myDom).attr({'disabled': !(_allQuestionsAnswered())});
+
 
     // Hide all questions
     $('.question-container', myDom).hide();
@@ -114,14 +169,10 @@ H5P.QuestionSet = function (options) {
     // 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));
-      // $('.progress-current', myDom).text("" + (questionNumber+1));
     } else {
+      // Set currentNess
       $('.progress-dot.current', myDom).removeClass('current');
-      // Set answered/unanswered for current.
       $('#qdot-' + questionNumber, myDom).addClass('current');
-      if (questionInstances[currentQuestion].getAnswerGiven()) {
-        $('#qdot-' + currentQuestion, myDom).removeClass('unanswered').addClass('answered');
-      }
     }
 
     // Remember where we are
@@ -133,14 +184,17 @@ H5P.QuestionSet = function (options) {
   var attach = function (targetId) {
     // Render own DOM into target.
     template.update(targetId, params);
-    myDom = jQuery('#' + targetId);
+    myDom = $('#' + targetId);
 
     // Attach questions
-    for (var i=0; i<params.questions.length; i++) {
-      var quest = params.questions[i];
+    for (var i=0; i<questionInstances.length; i++) {
+      var quest = questionInstances[i];
       // TODO: Render on init, inject in template.
-      var tmp = new (H5P.classFromName(quest.machineName))(quest.options).attach('q-' + i);
-      questionInstances.push(tmp);
+      quest.attach('q-' + i);
+      $(quest).on('h5pQuestionAnswered', function (ev) {
+        $('#qdot-' + currentQuestion, myDom).removeClass('unanswered').addClass('answered');
+        _updateFinishButton();
+      });
     }
 
     // Set event listeners.
@@ -151,19 +205,47 @@ H5P.QuestionSet = function (options) {
       _showQuestion(currentQuestion - 1);
     });
     $('.finish.button', myDom).click(function (ev) {
-      // get total score.
+      // 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);
+
       // Display result page.
-      // Display animation if present.
-      // Remove DOM. (delete container)
-      myDom.remove();
+      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');
+          } else {
+            // Trigger finished event.
+            $(returnObject).trigger('h5pQuestionSetFinished');
+          }
+        });
+      } else {
+        $(returnObject).trigger('h5pQuestionSetFinished');
+      }
     });
 
     // Hide all but initial Question.
     _showQuestion(params.initialQuestion);
-
+    _updateFinishButton();
     return this;
   };
 
+  // Get current score for questionset.
   var getScore = function () {
     var score = 0;
     for (var i = questionInstances.length - 1; i >= 0; i--) {
@@ -172,10 +254,24 @@ H5P.QuestionSet = function (options) {
     return score;
   };
 
-  return {
+  // 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 = {
     attach: attach, // Attach to DOM object
     getQuestions: function () {return questionInstances;},
     getScore: getScore,
+    totalScore: totalScore,
     defaults: defaults // Provide defaults for inspection
   };
+  return returnObject;
 };
diff --git a/schema.json b/schema.json
index 9e5654f..84f4f55 100644
--- a/schema.json
+++ b/schema.json
@@ -20,7 +20,8 @@
   "backgroundImage": {
     "name": "Background image",
     "description": "An optional background image for the Question set.",
-    "type": "image"
+    "type": "image",
+    "default": ""
   },
   "progressType": {
     "name": "Progress indicator",
@@ -29,13 +30,139 @@
     "values": [{"text": "Textual", "value": "textual"}, {"text": "Dots", "value": "dots"}],
     "default": "textual"
   },
+  "passPercentage": {
+    "name": "Pass percentage",
+    "description": "Percentage of total score required for passing the quiz.",
+    "type": "integer",
+    "minValue": 0,
+    "maxValue": 100,
+    "default": 50
+  },
   "questions": {
     "name": "Questions",
     "description": "List of questions in this set.",
     "type": "h5p-library",
-    "validLibs": ["H5P.MultiChoice"],
+    "validLibs": ["H5P.MultiChoice", "H5P.DragTextMatch", "H5PDragImageIntoPosition"],
     "array": true,
     "minEntries": 1,
     "maxEntries": -1
+  },
+  "introPage": {
+    "name": "Intro page",
+    "description": "Data for the intro page",
+    "type": "combined",
+    "fields": {
+      "showIntroPage": {
+        "name": "Show intro page?",
+        "type": "boolean"
+      },
+      "title": {
+        "name": "Title",
+        "type": "text"
+      },
+      "introduction": {
+        "name": "Introduction text",
+        "type": "text"
+      },
+      "startButtonText": {
+        "name": "Start button text",
+        "type": "text"
+      }
+    }
+  },
+  "texts": {
+    "name": "Interface texts in quiz",
+    "type": "combined"
+    "fields": {
+      "prevButton": {
+        "name": "Back button",
+        "type": "text",
+        "default": "Previous"
+      },
+      "nextButton": {
+        "name": "Next button",
+        "type": "text",
+        "default": "Next"
+      },
+      "finishButton": {
+        "name": "Finish button",
+        "type": "text",
+        "default": "Finish"
+      },
+      "textualProgress": {
+        "name": "Progress text",
+        "description": "Text used if textual progress is selected.",
+        "type": "text",
+        "default": "Question: @current of @total questions"
+      }
+    }
+  },
+  "endGame": {
+    "name": "End game data",
+    "type": "combined",
+    "fields" {
+      "showResultPage": {
+        "name": "Show result page",
+        "type": "boolean",
+        "default": true
+      },
+      "resultPage": {
+        "name": "Result page",
+        "description": "Data and texts for the result page",
+        "type": "combined",
+        "fields": {
+          "successGreeting": {
+            "name": "Success greeting",
+            "description": "Title in result page on success",
+            "type": "text"
+          },
+          "successComment": {
+            "name": "Success comment",
+            "description": "Comment shown after the score",
+            "type": "text"
+          },
+          "failGreeting": {
+            "name": "Failed greeting",
+            "description": "Title in result page on failed quiz",
+            "type": "text"
+          },
+          "failComment": {
+            "name": "Failed comment",
+            "description": "Comment shown after the score on failed quiz",
+            "type": "text"
+          },
+          "finishButtonText": {
+            "name": "Finish button text",
+            "description": "Text for the finish button",
+            "type": "text"
+          }
+        }
+      },
+      "animations": {
+        "name": "Animations",
+        "type": "combined"
+        "fields": {
+          "showAnimations": {
+            "name": "Show animations",
+            "type": "boolean",
+            "default": false
+          }
+          "successResultAnimation": {
+            "name": "Result animation for success",
+            "description": "Add animation for successful completion of the quiz",
+            "optional": true,
+            "type": "h5p-library",
+            "validLibs": ["H5P.Animation", "H5P.Video", "H5P.Image"]
+          },
+          "failedResultAnimation": {
+            "name": "Result animation for failed quiz",
+            "description": "Add animation for failed completion of the quiz",
+            "optional": true,
+            "type": "h5p-library",
+            "validLibs": ["H5P.Animation", "H5P.Video", "H5P.Image"]
+          }
+        }
+      }
+    }
   }
 }
diff --git a/views/questionset-intro.ejs b/views/questionset-intro.ejs
new file mode 100644
index 0000000..8285586
--- /dev/null
+++ b/views/questionset-intro.ejs
@@ -0,0 +1,5 @@
+<div class="questionset-intro">
+  <div class="title"><%= title %></div>
+  <div class="introduction"><%= introduction %></div>
+  <div class="buttons"><button id='qs-startbutton'><%= startButtonText %></button></div>
+</div>
\ No newline at end of file
diff --git a/views/questionset-results.ejs b/views/questionset-results.ejs
new file mode 100644
index 0000000..a107cb5
--- /dev/null
+++ b/views/questionset-results.ejs
@@ -0,0 +1,6 @@
+<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>