Changes to default styles for QuestionSets

css/questionset.css

@@ -1,3 +1,21 @@
+.questionset {
+  width: 535px;
+  height: 400px;
+  padding: 50px;
+  background: transparent url(img/Paper-clean.png);
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  -webkit-transition: top 2s, left 2s, -webkit-transform 2s;
+}
+
+.questionset.hidden {
+  -webkit-transform: rotate(-45deg);
+  top: 525px;
+  left: 100px;
+}
+
 .dots-container {
   text-align: center;
 }
@@ -17,16 +35,88 @@
   box-shadow: 0px 0px 6px firebrick;
 }
 .intro-page {
-  background-color: rgba(255,255,255,0.9);
+  /*background-color: rgba(255,255,255,0.9);*/
   padding: 10px;
   position: absolute;
   z-index: 20;
   height: 100%;
-  width: 100%;
+  /*width: 100%;*/
   left: 0px;
   top: 0px;
 }
+.intro-page .title {
+  font-size: 200%;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 1em;
+}
+.intro-page .introduction {
+  font-size: 125%;
+  margin: 1em 10%;
+}
+.intro-page .buttons {
+  text-align: right;
+}
+
+#qs-startbutton {
+  position: absolute;
+  bottom: 25px;
+  right: -40px; /* TODO: this is probably not right */
+}
+
+.qs-footer {
+  position: absolute;
+  bottom: 50px;
+  height: 40px;
+  width: 535px;
+}
+.qs-progress {
+  line-height: 40px;
+  padding: 0;
+}
+.qs-footer .button {
+  width: 80px;
+  height: 40px;
+  border: 1px solid #bababa;
+  border-radius: 4px;
+  position: absolute;
+  top: 0;
+}
+.qs-footer .button.next {
+  right: 100px;
+}
+.qs-footer .button.finish {
+  right: 0px;
+}
+.qs-footer .button.prev {
+  left: 0px;
+}
+
 .questionset-results {
   background-color: rgba(255, 255, 255, 0.75);
   padding: 10px;
+  height: 480px;
+  text-align: center;
+}
+
+.questionset-results .resulttext {
+  font-size: 20px;
+  line-height: 25px;
+  margin: 40px 100px;
+  padding-left: 60px;
+  min-height: 60px;
+  background-repeat: no-repeat;
+  background-position: left center;
+}
+
+.questionset-results .resulttext.fail {
+  background-image: url(img/mark-fail.png);
+}
+
+.questionset-results .resulttext.success {
+  background-image: url(img/mark-pass.png);
+}
+
+.questionset-results .buttons {
+  text-align: right;
 }

js/questionset.js

@@ -20,22 +20,22 @@ H5P.QuestionSet = function (options, contentId) {
   var cp = H5P.getContentPath(contentId);
 
   var texttemplate = '' +
-'<div class="questionset">' +
+'<% if (introPage.showIntroPage) { %>' +
-'  <% if (introPage.showIntroPage) { %>' +
+'<div class="intro-page">' +
-'  <div class="intro-page">' +
 '  <div class="title"><%= introPage.title %></div>' +
 '  <div class="introduction"><%= introPage.introduction %></div>' +
 '  <div class="buttons"><button id="qs-startbutton"><%= introPage.startButtonText %></button></div>' +
-'  </div>' +
+'</div>' +
-'  <%} %>' +
+'<%} %>' +
+'<div class="questionset hidden">' +
 '  <div class="title"><%= title %></div>' +
 '  <% for (var i=0; i<questions.length; i++) { %>' +
 '    <div class="question-container" id="q-<%= i %>">' +
 '      <div><%= questions[i].machineName %></div>' +
 '    </div>' +
 '  <% } %>' +
-'  <div class="question-footer">' +
+'  <div class="qs-footer">' +
-'    <div class="progress">' +
+'    <div class="qs-progress">' +
 '      <% if (progressType == "dots") { %>' +
 '        <div class="dots-container">' +
 '          <% for (var i=0; i<questions.length; i++) { %>' +
@@ -57,8 +57,8 @@ H5P.QuestionSet = function (options, contentId) {
 '<div class="questionset-results">' +
 '  <div class="greeting"><%= greeting %></div>' +
 '  <div class="score <%= scoreclass %>"><%= score %></div>' +
-'  <div class="resulttext"><%= resulttext %></div>' +
+'  <div class="resulttext <%= scoreclass %>"><%= resulttext %></div>' +
-'  <div><button class="qs-finishbutton"><%= finishButtonText %></button></div>' +
+'  <div class="buttons"><button class="qs-finishbutton"><%= finishButtonText %></button></div>' +
 '</div>' +
 '';
 
@@ -199,6 +199,7 @@ H5P.QuestionSet = function (options, contentId) {
 
     $('#qs-startbutton').click(function (ev) {
       $(this).parents('.intro-page').hide();
+      $('.questionset', $myDom).removeClass('hidden');
     });
 
     // Set event listeners.
@@ -222,6 +223,7 @@ H5P.QuestionSet = function (options, contentId) {
         score: scoreString,
         passed: success
       };
+
       // Display result page.
       if (params.endGame.showResultPage) {
         // Render result page into.

library.json

@@ -3,7 +3,7 @@
   "contentType": "question",
   "majorVersion": 1,
   "minorVersion": 0,
-  "patchVersion": 0,
+  "patchVersion": 2,
   "runnable": 1,
   "machineName": "H5P.QuestionSet",
   "author": "Amendor AS",

schema.json

@@ -147,6 +147,16 @@
             "type": "boolean",
             "default": false
           },
+          "successVideo": {
+            "label": "Success video",
+            "description": "Video displayed on successful quiz",
+            "type": "video"
+          },
+          "failVideo": {
+            "label": "Fail video",
+            "description": "Video displayed on failed quiz",
+            "type": "video"
+          },
           "successResultAnimation": {
             "label": "Result animation for success",
             "description": "Add animation for successful completion of the quiz",

views/questionset-intro.ejs

@@ -1,5 +0,0 @@
-<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>

views/questionset-results.ejs

@@ -1,6 +1,6 @@
 <div class="questionset-results">
   <div class="greeting"><%= greeting %></div>
   <div class="score <%= scoreclass %>"><%= score %></div>
-  <div class="resulttext"><%= resulttext %></div>
+  <div class="resulttext <%= scoreclass %>"><%= resulttext %></div>
-  <div><button class="qs-finishbutton"><%= finishButtonText %></button></div>
+  <div class="buttons"><button class="qs-finishbutton"><%= finishButtonText %></button></div>
 </div>

views/questionset.ejs

@@ -1,19 +1,19 @@
-<div class="questionset">
+<% if (introPage.showIntroPage) { %>
-  <% if (introPage.showIntroPage) { %>
+<div class="intro-page">
-  <div class="intro-page">
   <div class="title"><%= introPage.title %></div>
   <div class="introduction"><%= introPage.introduction %></div>
   <div class="buttons"><button id="qs-startbutton"><%= introPage.startButtonText %></button></div>
-  </div>
+</div>
-  <%} %>
+<%} %>
+<div class="questionset hidden">
   <div class="title"><%= title %></div>
   <% for (var i=0; i<questions.length; i++) { %>
     <div class="question-container" id="q-<%= i %>">
       <div><%= questions[i].machineName %></div>
     </div>
   <% } %>
-  <div class="question-footer">
+  <div class="qs-footer">
-    <div class="progress">
+    <div class="qs-progress">
       <% if (progressType == "dots") { %>
         <div class="dots-container">
           <% for (var i=0; i<questions.length; i++) { %>