From d8be2e07ad300893a580b37b8be8711f4792406d Mon Sep 17 00:00:00 2001
From: Thomas Marstrander <thomasmars87@gmail.com>
Date: Thu, 7 Apr 2016 16:23:15 +0200
Subject: [PATCH] Added unused semantics to Score/summary screen. HFJ-1710

---
 css/questionset.css | 30 ++++++++++++++++++++++++++----
 js/questionset.js   | 15 +++++++++++++--
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/css/questionset.css b/css/questionset.css
index a6959fa..022d06b 100644
--- a/css/questionset.css
+++ b/css/questionset.css
@@ -190,22 +190,44 @@
   text-align: center;
   background: rgba(255, 255, 255, 0.9);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6FFFFFF,endColorstr=#E6FFFFFF);
-  padding: 0.625em;
 }
 
 .questionset-results .feedback-section {
-  margin: 1em;
+  margin: 0.75em;
+}
+
+.questionset-results .greeting {
+  margin-top: 1em;
+  color: #777;
+  font-size: 1.25em;
 }
 
 .questionset-results .feedback-section .feedback-text {
-  font-weight: bold;
-  color: #1a73d9;
+  font-weight: normal;
+  color: #777;
 }
 
 .questionset-results .buttons {
   margin-bottom: 1.5em;
 }
 
+.questionset-results .result-header,
+.questionset-results .result-text {
+  color: #1a73d9;
+  font-weight: bold;
+}
+
+.questionset-results .result-header {
+  font-size: 2em;
+  margin-top: 1em;
+}
+
+.questionset-results .result-text {
+  font-size: 1.25em;
+  line-height: 1.25em;
+  margin: 1em 1em 2.25em;
+}
+
 /* No margin for questions when no frame */
 .h5p-no-frame .questionset .h5p-question > * {
   margin-left: 0;
diff --git a/js/questionset.js b/js/questionset.js
index 50151c4..70c1c30 100644
--- a/js/questionset.js
+++ b/js/questionset.js
@@ -52,13 +52,22 @@ H5P.QuestionSet = function (options, contentId) {
 
   var resulttemplate =
           '<div class="questionset-results">' +
+          '  <div class="greeting"><%= message %></div>' +
           '  <div class="feedback-section">' +
           '    <div class="feedback-scorebar"></div>' +
           '    <div class="feedback-text"></div>' +
           '  </div>' +
+          '  <% if (comment) { %>' +
+          '  <div class="result-header"><%= comment %></div>' +
+          '  <% } %>' +
+          '  <div class="result-text"><%= resulttext %></div>' +
           '  <div class="buttons">' +
-          '    <a class="h5p-joubelui-button h5p-button qs-finishbutton"><%= finishButtonText %></a>' +
-          '    <a class="h5p-joubelui-button h5p-button qs-solutionbutton"><%= solutionButtonText %></a>' +
+          '    <a class="h5p-joubelui-button h5p-button qs-finishbutton">' +
+          '      <%= finishButtonText %>' +
+          '    </a>' +
+          '    <a class="h5p-joubelui-button h5p-button qs-solutionbutton">' +
+          '      <%= solutionButtonText %>' +
+          '    </a>' +
           '    <a class="h5p-joubelui-button h5p-button qs-retrybutton"></a>' +
           '  </div>' +
           '</div>';
@@ -292,7 +301,9 @@ H5P.QuestionSet = function (options, contentId) {
       }
 
       var eparams = {
+        message: params.endGame.message,
         comment: (success ? params.endGame.successGreeting : params.endGame.failGreeting),
+        resulttext: (success ? params.endGame.successComment : params.endGame.failComment),
         finishButtonText: params.endGame.finishButtonText,
         solutionButtonText: params.endGame.solutionButtonText
       };