Styling for result page. Better button states

css/questionset.css

@@ -91,7 +91,7 @@
 }
 
 .qs-footer .button.next {
-  right: 100px;
+  right: 0px;
 }
 .qs-footer .button.finish {
   right: 0px;
@@ -101,12 +101,22 @@
 }
 
 .questionset-results {
-  background-color: rgba(255, 255, 255, 0.75);
+  background: rgba(255, 255, 255, 0.75) url(img/Paper-clean.png);
+
   padding: 10px;
   height: 480px;
   text-align: center;
 }
 
+.questionset-results .greeting {
+  margin-top: 180px;
+}
+
+.questionset-results .score {
+  font-size: 25px;
+  margin-top: 40px;
+}
+
 .questionset-results .resulttext {
   font-size: 20px;
   line-height: 25px;
@@ -120,13 +130,22 @@
 .questionset-results .resulttext.fail {
   background-image: url(img/mark-fail.png);
 }
+.questionset-results .resulttext.fail .em {
+  font-style: normal;
+  color: #b9272d;
+}
 
 .questionset-results .resulttext.success {
   background-image: url(img/mark-pass.png);
 }
-
+.questionset-results .resulttext.success .em {
+  font-style: normal;
+  color: #6aa81b;
+}
 .questionset-results .buttons {
-  text-align: right;
+  position: absolute;
+  bottom: 40px;
+  right: 25px;
 }
 
 button {

js/questionset.js

@@ -123,12 +123,28 @@ H5P.QuestionSet = function (options, contentId) {
     questionInstances.push(tmp);
   }
 
-  var _updateFinishButton = function () {
+  // Update button state.
+  var _updateButtons = function () {
     var answered = true;
     for (var i = questionInstances.length - 1; i >= 0; i--) {
       answered = answered && (questionInstances[i]).getAnswerGiven();
     }
-    $('.finish.button', $myDom).attr({'disabled': !answered});
+
+    if (currentQuestion === 0) {
+      $('.prev.button', $myDom).hide();
+    } else {
+      $('.prev.button', $myDom).show();
+    }
+    if (currentQuestion == (params.questions.length - 1)) {
+      $('.next.button', $myDom).hide();
+      if (answered) {
+        $('.finish.button', $myDom).show();
+      }
+    } else {
+      $('.next.button', $myDom).show();
+      $('.finish.button', $myDom).hide();
+    }
+
  };
 
   var _showQuestion = function (questionNumber) {
@@ -136,10 +152,6 @@ H5P.QuestionSet = function (options, contentId) {
     if (questionNumber < 0) { questionNumber = 0; }
     if (questionNumber >= params.questions.length) { questionNumber = params.questions.length - 1; }
 
-    $('.prev.button', $myDom).attr({'disabled': (questionNumber === 0)});
-    $('.next.button', $myDom).attr({'disabled': (questionNumber == params.questions.length-1)});
-
-
      // Hide all questions
     $('.question-container', $myDom).hide();
 
@@ -158,6 +170,7 @@ H5P.QuestionSet = function (options, contentId) {
 
     // Remember where we are
     currentQuestion = questionNumber;
+    _updateButtons();
     return currentQuestion;
   };
 
@@ -182,7 +195,7 @@ H5P.QuestionSet = function (options, contentId) {
       quest.attach('q-' + i);
       $(quest).on('h5pQuestionAnswered', function (ev) {
         $('#qdot-' + currentQuestion, $myDom).removeClass('unanswered').addClass('answered');
-        _updateFinishButton();
+        _updateButtons();
       });
       if (quest.getAnswerGiven()) {
         $('#qdot-'+i, $myDom).removeClass('unanswered').addClass('answered');
@@ -270,7 +283,7 @@ H5P.QuestionSet = function (options, contentId) {
 
     // Hide all but initial Question.
     _showQuestion(params.initialQuestion);
-    _updateFinishButton();
+    _updateButtons();
     return this;
   };