Added Question design to QS

HFJ-946

css/questionset.css

@@ -187,82 +187,17 @@
   padding: 0.625em;
 }
 
-.questionset-results .greeting {
+.questionset-results .feedback-section {
-  text-align: left;
+  margin: 1.5em;
-  border-bottom: 0.1em solid #ddd;
-  width: 100%;
 }
 
-.questionset-results .score {
+.questionset-results .feedback-section .feedback-text {
-  margin: 0;
+  font-weight: bold;
-  display: block;
+  color: #1a73d9;
-  margin-bottom: 2em;
-}
-
-.questionset-results .resulttext {
-  text-align: left;
-  font-size: 1.25em;
-  line-height: 1.25em;
-  margin: 1em 0em;
-  background-repeat: no-repeat;
-  background-position: left center;
-}
-
-.questionset-results .resulttext.fail em {
-  font-style: normal;
-  color: #b9272d;
-}
-
-.questionset-results .score.success .emoticon:before {
-  font-family: icomoon-questionset;
-  font-size: 5em;
-  line-height: 100%;
-  content: "\e606";
-  float: left;
-}
-
-.questionset-results .score.fail .emoticon:before {
-  font-family: icomoon-questionset;
-  font-size: 5em;
-  line-height: 100%;
-  content: "\e607";
-  float: left;
-}
-
-.questionset-results .resulttext.success,
-.questionset-results .resulttext.almost,
-.questionset-results .resulttext.fail
-{
-  display: block;
-  background: #eee;
-  padding: 1em;
-  border-radius: 1em;
-  margin-left: 6.5em;
-  position: relative;
-  font-size: 1em;
-}
-
-.questionset-results .resulttext.success:before,
-.questionset-results .resulttext.fail:before
-{
-  font-family: icomoon-questionset;
-  content: "";
-  font-size: 5em;
-  position: absolute;
-  left: -14px;
-  top: 36px;
-  height: 0;
-  width: 0;
-  border-top: 15px solid transparent;
-  border-bottom: 15px solid transparent;
-  border-right: 15px solid #eee;
   display: inline-block;
-}
+  position: relative;
-
+  top: -1em;
-.questionset-results .resulttext.success em {
+  margin-top: .8em;
-  font-style: normal;
-  color: #6aa81b;
-  text-align: left;
 }
 
 /* No margin for questions when no frame */
@@ -278,3 +213,7 @@
 .h5p-no-frame .questionset .h5p-question > *:last-child {
   margin-bottom: 0;
 }
+
+.h5p-no-frame .questionset-results .feedback-section {
+  margin-top: 0;
+}

js/questionset.js

@@ -52,10 +52,9 @@ H5P.QuestionSet = function (options, contentId) {
 
   var resulttemplate =
           '<div class="questionset-results">' +
-          '  <div class="greeting"><%= message %></div>' +
+          '  <div class="feedback-section">' +
-          '  <div class="score <%= scoreclass %>">' +
+          '    <div class="feedback-scorebar"></div>' +
-          '     <div class="emoticon"></div>' +
+          '    <div class="feedback-text"></div>' +
-          '     <div class="resulttext <%= scoreclass %>"><% if (comment) { %><h2><%= comment %></h2><% } %><%= score %><br><%= resulttext %></div>' +
           '  </div>' +
           '  <div class="buttons">' +
           '    <a class="h5p-joubelui-button h5p-button qs-finishbutton"><%= finishButtonText %></a>' +
@@ -110,6 +109,7 @@ H5P.QuestionSet = function (options, contentId) {
   var currentQuestion = 0;
   var questionInstances = [];
   var $myDom;
+  var scoreBar;
   renderSolutions = false;
 
   // Instantiate question instances
@@ -258,11 +258,7 @@ H5P.QuestionSet = function (options, contentId) {
       }
 
       var eparams = {
-        message: params.endGame.message,
         comment: (success ? params.endGame.successGreeting : params.endGame.failGreeting),
-        score: scoreString,
-        scoreclass: (success ? 'success' : 'fail'),
-        resulttext: (success ? params.endGame.successComment : params.endGame.failComment),
         finishButtonText: params.endGame.finishButtonText,
         solutionButtonText: params.endGame.solutionButtonText
       };
@@ -270,7 +266,7 @@ H5P.QuestionSet = function (options, contentId) {
       // Show result page.
       $myDom.children().hide();
       $myDom.append(endTemplate.render(eparams));
-      $('.qs-finishbutton').click(function () {
+      $('.qs-finishbutton', $myDom).click(function () {
         self.trigger('h5pQuestionSetFinished', eventData);
       });
       $('.qs-solutionbutton', $myDom).click(function () {
@@ -284,6 +280,16 @@ H5P.QuestionSet = function (options, contentId) {
           resetTask();
           $myDom.children().hide().filter('.questionset').show();
           _showQuestion(params.initialQuestion);});
+
+      if (scoreBar === undefined) {
+        scoreBar = H5P.JoubelUI.createScoreBar(totals);
+      }
+      console.log($myDom);
+      console.log($('.feedback-scorebar', $myDom));
+      scoreBar.appendTo($('.feedback-scorebar', $myDom));
+      scoreBar.setScore(finals);
+      console.log($('.feedback-text', $myDom));
+      $('.feedback-text', $myDom).html(scoreString);
     };
 
     if (params.endGame.showAnimations) {