Made questionset standalone possible.

css/questionset.css

@@ -1,3 +1,13 @@
+.questionset.hidden {
+  display: none;
+}
+.questionset .h5p-multichoice > .h5p-show-solution {
+  display: none;
+}
+.questionset > .title {
+  font-size: 2em;
+  margin: 0.5em 0.16em 0.16em;
+}
 .dots-container {
   text-align: center;
 }
@@ -22,9 +32,9 @@
 }
 .intro-page .title {
   font-size: 2em;
+  line-height: 2em;
   font-weight: bold;
   text-align: center;
-  padding: 1em 1em 0.5em;
 }
 .intro-page .introduction {
   font-size: 1.25em;
@@ -35,18 +45,49 @@
   text-align: center;
 }
 
-#qs-startbutton {
+.qs-footer {
-  font-size: 3em;
+  overflow: hidden;
-  border: 0.083em solid #BABABA;
+}
-  border-radius: 0.2083em;
+
-  padding: 0.2083em 0.4167em;
+.qs-footer .button, .qs-startbutton, .qs-finishbutton, .questionset-results .button {
+  display: block;
+  line-height: 1.25em;
+  padding: 0.25em 1em;
+  border-radius: 0.75em;
   cursor: pointer;
+  color: #fff;
+  box-shadow: 0 0 0.5em #aebdc9;
+  margin: 0.5em;
+
+  background: #267ec9;
+  background-image: -webkit-linear-gradient(top, #3999ea, #267ec9);
+  background-image: -moz-linear-gradient(top, #3999ea, #267ec9);
+  background-image: -o-linear-gradient(top, #3999ea, #267ec9);
+  background-image: -ms-linear-gradient(top, #3999ea, #267ec9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3999ea', endColorstr='#267ec9',GradientType=0);
+}
+.qs-footer .button:hover, .qs-startbutton:hover, .questionset-results .button:hover {
+  text-decoration: none;
+  color: #fff;
+  box-shadow: 0 0 0.5em #267ec9;
+}
+.qs-startbutton {
+  display: inline-block;
+  font-size: 2.5em;
+}
+.qs-footer > .prev, .qs-solutionbutton {
+  float: left;
+}
+.qs-footer > .next, .qs-footer > .finish, .qs-finishbutton {
+  float: right;
+}
+.questionset-results .qs-finishbutton {
+  display: none;
 }
 
 .qs-progress {
-  line-height: 2em;
+  text-align: center;
-  padding: 0;
+  line-height: 1.5em;
-  margin: 1em 1em 0;
 }
 
 .questionset-results {
@@ -58,17 +99,17 @@
 }
 
 .questionset-results .score {
-  font-size: 25px;
+  font-size: 1.5em;
-  margin-top: 40px;
+  margin: 1em;
 }
 
 .questionset-results .resulttext {
   text-align: left;
-  font-size: 20px;
+  font-size: 1.25em;
-  line-height: 25px;
+  line-height: 1.25em;
-  margin: 40px 100px;
+  margin: 1em 4em;
-  padding-left: 60px;
+  padding-left: 3em;
-  min-height: 60px;
+  min-height: 3em;
   background-repeat: no-repeat;
   background-position: left center;
 }
@@ -87,13 +128,4 @@
 .questionset-results .resulttext.success em {
   font-style: normal;
   color: #6aa81b;
-}
-.questionset-results .buttons {
-  position: absolute;
-  bottom: 40px;
-  right: 25px;
-}
-
-button, .button {
-  cursor: pointer;
 }

js/questionset.js

@@ -31,10 +31,10 @@ H5P.QuestionSet = function (options, contentId) {
           '<div class="intro-page">' +
           '  <div class="title"><%= introPage.title %></div>' +
           '  <div class="introduction"><%= introPage.introduction %></div>' +
-          '  <div class="buttons"><a id="qs-startbutton" class="button"><%= introPage.startButtonText %></a></div>' +
+          '  <div class="buttons"><a class="qs-startbutton button"><%= introPage.startButtonText %></a></div>' +
           '</div>' +
-          '<%} %>' +
+          '<% } %>' +
-          '<div class="questionset hidden">' +
+          '<div class="questionset<% if (introPage.showIntroPage) { %> hidden<% } %>">' +
           '  <div class="title"><%= title %></div>' +
           '  <% for (var i=0; i<questions.length; i++) { %>' +
           '    <div class="question-container" id="q-<%= i %>">' +
@@ -64,7 +64,7 @@ H5P.QuestionSet = function (options, contentId) {
           '  <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 class="buttons"><a class="button qs-finishbutton"><%= finishButtonText %></a><a class="button qs-solutionbutton"><%= solutionButtonText %></a></div>' +
           '</div>';
 
   var defaults = {
@@ -95,6 +95,7 @@ H5P.QuestionSet = function (options, contentId) {
       failComment: "You don't have enough correct answers to pass this test.",
       scoreString: '@score/@total',
       finishButtonText: 'Finish',
+      solutionButtonText: 'Show solution',
       showAnimations: false,
       successVideo: undefined,
       failVideo: undefined
@@ -108,6 +109,7 @@ H5P.QuestionSet = function (options, contentId) {
   var currentQuestion = 0;
   var questionInstances = new Array();
   var $myDom;
+  renderSolutions = false;
 
 //  if (params.randomOrder) {
 //    // TODO: Randomize order of questions
@@ -178,7 +180,25 @@ H5P.QuestionSet = function (options, contentId) {
     return currentQuestion;
   };
 
+  var showSolutions = function () {
+    for (var i = 0; i < questionInstances.length; i++) {
+      questionInstances[i].showSolutions();
+    }
+  };
+
+  var rendered = false;
+
+  var reRender = function () {
+    rendered = false;
+  };
+
   var _displayEndGame = function () {
+    if (rendered) {
+      $myDom.children().hide().filter('.questionset-results').show();
+      return;
+    }
+    rendered = true;
+
     // Get total score.
     var finals = getScore();
     var totals = totalScore();
@@ -199,7 +219,8 @@ H5P.QuestionSet = function (options, contentId) {
         score: scoreString,
         scoreclass: (success ? 'success' : 'fail'),
         resulttext: (success ? params.endGame.successComment : params.endGame.failComment),
-        finishButtonText: params.endGame.finishButtonText
+        finishButtonText: params.endGame.finishButtonText,
+        solutionButtonText: params.endGame.solutionButtonText
       };
 
       // Show result page.
@@ -208,6 +229,11 @@ H5P.QuestionSet = function (options, contentId) {
       $('.qs-finishbutton').click(function () {
         $(returnObject).trigger('h5pQuestionSetFinished', eventData);
       });
+      $('.qs-solutionbutton', $myDom).click(function () {
+        showSolutions();
+        $myDom.children().hide().filter('.questionset').show();
+        _showQuestion(params.initialQuestion);
+      });
     };
 
     if (params.endGame.showAnimations) {
@@ -273,7 +299,7 @@ H5P.QuestionSet = function (options, contentId) {
       }
     }
 
-    $('#qs-startbutton').click(function () {
+    $('.qs-startbutton', $myDom).click(function () {
       $(this).parents('.intro-page').hide();
       $('.questionset', $myDom).removeClass('hidden');
     });
@@ -296,6 +322,10 @@ H5P.QuestionSet = function (options, contentId) {
     // Hide all but initial Question.
     _showQuestion(params.initialQuestion);
     _updateButtons();
+
+    if (renderSolutions) {
+      showSolutions();
+    }
     return this;
   };
 
@@ -322,7 +352,11 @@ H5P.QuestionSet = function (options, contentId) {
     attach: attach, // Attach to DOM object
     getQuestions: function () {return questionInstances;},
     getScore: getScore,
+    showSolutions: function () {
+      renderSolutions = true;
+    },
     totalScore: totalScore,
+    reRender: reRender,
     defaults: defaults // Provide defaults for inspection
   };
   return returnObject;