HFJ-1

Design update to questions set completed. No changes made to dragNdrop so far.
2013-10-31 13:39:51 +01:00 · 2013-10-31 13:39:51 +01:00 · 2c26b7692d
parent e766e50b7b
commit 2c26b7692d
11 changed files with 182 additions and 62 deletions
--- a/css/img/mark-fail.png
+++ b/css/img/mark-fail.png
--- a/css/img/mark-pass.png
+++ b/css/img/mark-pass.png
--- a/css/questionset.css
+++ b/css/questionset.css
@ -1,3 +1,21 @@
+/* IcoMoon font licensed under the GNU General Public License: http://www.gnu.org/licenses/gpl.html */
+@font-face {
+  font-family: 'icomoon';
+  src:url('../fonts/icomoon.eot');
+  src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon.woff') format('woff'),
+    url('../fonts/icomoon.ttf') format('truetype'),
+    url('../fonts/icomoon.svg#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.questionset-results h2 {
+  font-size: 1.2em;
+  font-weight: bold;
+  padding-bottom: 0.5em;
+} 
+
 .questionset, .intro-page, .questionset-results {
  overflow: hidden;
 }
@ -11,10 +29,9 @@
  position: relative;
 }
 .h5p-multichoice > .h5p-question {
-  margin: 1em 0.5em 0;
-  padding: 0.5em 0.75em;
-  box-shadow: 0 0 0.5em #e3e3e3;
-  border-radius: 0.5em;
+  text-align: left;
+  padding: 1em 0 0.2em;
+  margin: 0 0.5em 0.7em;
  background: rgba(255, 255, 255, 0.9);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6FFFFFF,endColorstr=#e6FFFFFF);
  zoom: 1;
@ -25,32 +42,22 @@
 }
 .progress-dot {
  display: inline-block;
-  width: 0.75em;
-  height: 0.75em;
+  width: 0.6em;
+  height: 0.6em;
  border-radius: 50%;
  margin: 0 0.25em;
  cursor: pointer;
  background: #fff;
-  border: 0.0625em solid #c7c7c7;
+  background: #cecece;
 }
 .progress-dot:hover {
  box-shadow: 0 0 0.5em #c7c7c7;
 }
 .progress-dot.answered {
-  border: 0.0625em solid #fff;
  background: #bccade;
 }
 .progress-dot.current {
-  width: 1em;
-  height: 1em;
-  border: 0.0625em solid #fff;
-  margin-bottom: -0.125em;
  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);
 }
 .intro-page .title {
  font-size: 2em;
@ -72,40 +79,75 @@
 }

 .qs-footer .button, .qs-startbutton, .qs-finishbutton, .questionset-results .button, .video-container > .button {
-  display: block;
-  line-height: 1.25em;
-  padding: 0.25em 1em;
-  border-radius: 0.75em;
+  display: inline-block;
+  padding: 0.2em 1em;
+  border: 0.2em solid #fff;
+  border-radius: 0.4em;
+  margin: 0 0.5em 1em;
  cursor: pointer;
  color: #fff;
-  box-shadow: 0 0 0.5em #aebdc9;
-  margin: 0.5em;
+  box-shadow: 0 0 0.5em #999;

-  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);
+  background: rgb(100,152,254); /* Old browsers */
+  background: -moz-linear-gradient(top,  rgba(100,152,254,1) 0%, rgba(4,104,206,1) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100,152,254,1)), color-stop(100%,rgba(4,104,206,1))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  rgba(100,152,254,1) 0%,rgba(4,104,206,1) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  rgba(100,152,254,1) 0%,rgba(4,104,206,1) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  rgba(100,152,254,1) 0%,rgba(4,104,206,1) 100%); /* IE10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6498fe', endColorstr='#0468ce',GradientType=0 ); /* IE6-9 */
 }
 .qs-footer .button:hover, .qs-startbutton:hover, .questionset-results .button:hover, .video-container > .button:hover {
  text-decoration: none;
-  color: #fff;
-  box-shadow: 0 0 0.5em #267ec9;
+  box-shadow: 0 0 0.5em #999;
+
+  background: rgb(4,104,206); /* Old browsers */
+  background: -moz-linear-gradient(top,  rgba(4,104,206,1) 0%, rgba(100,152,254,1) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(4,104,206,1)), color-stop(100%,rgba(100,152,254,1))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  rgba(4,104,206,1) 0%,rgba(100,152,254,1) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  rgba(4,104,206,1) 0%,rgba(100,152,254,1) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  rgba(4,104,206,1) 0%,rgba(100,152,254,1) 100%); /* IE10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0468ce', endColorstr='#6498fe',GradientType=0 ); /* IE6-9 */
 }
 .qs-startbutton {
  display: inline-block;
  font-size: 2.5em;
 }
-.qs-footer > .prev, .qs-solutionbutton {
+.qs-footer > .prev {
  float: left;
 }
+
+.qs-footer > .qs-solutionbutton {
+  float: none;
+}
+
 .qs-footer > .next, .qs-footer > .finish, .qs-finishbutton {
  float: right;
 }
+
+.qs-footer a.next.button:after {
+  font-family: FontAwesome;
+  content: " \f054";  
+}
+
+.qs-footer a.prev.button:before {
+  font-family: FontAwesome;
+  content: "\f053  ";  
+}
+
 .questionset-results .qs-finishbutton {
  display: none;
 }
+
+.qs-footer a.finish.button:before {
+  font-family: FontAwesome;
+  content: "\f00c   ";
+}
+
+.questionset-results a.button.qs-solutionbutton:before {
+  font-family: FontAwesome;
+  content: "\f06e   ";
+}
+
 .video-container {
  position: relative;
 }
@ -127,40 +169,85 @@
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6FFFFFF,endColorstr=#E6FFFFFF);
+  padding: 0.625em;
 }

 .questionset-results .greeting {
-  margin: 1em;
+  text-align: left;
+  border-bottom: 0.1em solid #ddd;
+  width: 100%;
 }

 .questionset-results .score {
-  font-size: 1.5em;
-  margin: 1em;
+  margin: 0;
+  display: block;
+  margin-bottom: 2em;
 }

 .questionset-results .resulttext {
  text-align: left;
  font-size: 1.25em;
  line-height: 1.25em;
-  margin: 1em 3em;
-  padding-left: 3em;
-  min-height: 3em;
+  margin: 1em 0em;
  background-repeat: no-repeat;
  background-position: left center;
 }

-.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 .score.success .emoticon:before {
+  font-family: IcoMoon;
+  font-size: 5em;
+  content: "\e606";
+  top: 0.5em;
+  position: relative;
+  float: left;
 }
+
+.questionset-results .score.fail .emoticon:before {
+  font-family: IcoMoon;
+  font-size: 5em;
+  content: "\e607";
+  top: 0.5em;
+  position: relative;
+  float: left;
+}
+
+.questionset-results .resulttext.success, 
+.resulttext.almost, 
+.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, 
+.resulttext.fail:before
+{
+  font-family: IcoMoon;
+  content: "";  
+  font-size: 5em;
+  position: absolute;
+  left: -15px;
+  top: 36px;
+  height: 0;
+  width: 0;
+  border-top: 15px solid transparent;
+  border-bottom: 15px solid transparent;
+  border-right: 15px solid #eee;
+  display: inline-block;  
+}
+
 .questionset-results .resulttext.success em {
  font-style: normal;
  color: #6aa81b;
+  text-align: left;
 }
--- a/fonts/icomoon.eot
+++ b/fonts/icomoon.eot
--- a/fonts/icomoon.svg
+++ b/fonts/icomoon.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
+<glyph unicode="&#xe604;" d="M512-64c282.77 0 512 229.23 512 512s-229.23 512-512 512-512-229.23-512-512 229.23-512 512-512zM512 864c229.75 0 416-186.25 416-416s-186.25-416-416-416-416 186.25-416 416 186.25 416 416 416zM256 640c0 35.346 28.654 64 64 64s64-28.654 64-64c0-35.346-28.654-64-64-64-35.346 0-64 28.654-64 64zM640 640c0 35.346 28.654 64 64 64s64-28.654 64-64c0-35.346-28.654-64-64-64-35.346 0-64 28.654-64 64zM704.098 332.74l82.328-49.396c-55.962-93.070-157.916-155.344-274.426-155.344s-218.464 62.274-274.426 155.344l82.328 49.396c39.174-65.148 110.542-108.74 192.098-108.74s152.924 43.592 192.098 108.74z" />
+<glyph unicode="&#xe605;" d="M512-64c282.77 0 512 229.23 512 512s-229.23 512-512 512-512-229.23-512-512 229.23-512 512-512zM512 864c229.75 0 416-186.25 416-416s-186.25-416-416-416-416 186.25-416 416 186.25 416 416 416zM745.74 358.38l22.488-76.776-437.008-128.002-22.488 76.776zM256 640c0 35.346 28.654 64 64 64s64-28.654 64-64c0-35.346-28.654-64-64-64-35.346 0-64 28.654-64 64zM640 640c0 35.346 28.654 64 64 64s64-28.654 64-64c0-35.346-28.654-64-64-64-35.346 0-64 28.654-64 64z" />
+<glyph unicode="&#xe606;" d="M512-64c282.77 0 512 229.23 512 512s-229.23 512-512 512-512-229.23-512-512 229.23-512 512-512zM512 864c229.75 0 416-186.25 416-416s-186.25-416-416-416-416 186.25-416 416 186.25 416 416 416zM192 448v-64c0-140.8 115.2-256 256-256h128c140.8 0 256 115.2 256 256v64h-640zM384 203.012c-26.538 9.458-50.924 24.822-71.544 45.446-36.406 36.402-56.456 84.54-56.456 135.542h128v-180.988zM576 192h-128v192h128v-192zM711.544 248.458c-20.624-20.624-45.010-35.988-71.544-45.446v180.988h128c0-51.002-20.048-99.14-56.456-135.542zM225.352 576c0.002 0 0 0 0 0 9.768 0 18.108 7.056 19.724 16.69 6.158 36.684 37.668 63.31 74.924 63.31s68.766-26.626 74.924-63.31c1.616-9.632 9.956-16.69 19.722-16.69 9.768 0 18.108 7.056 19.724 16.688 1.082 6.436 1.628 12.934 1.628 19.312 0 63.962-52.038 116-116 116s-116-52.038-116-116c0-6.378 0.548-12.876 1.628-19.312 1.62-9.632 9.96-16.688 19.726-16.688zM609.352 576c0.002 0 0 0 0 0 9.77 0 18.112 7.056 19.724 16.69 6.158 36.684 37.668 63.31 74.924 63.31s68.766-26.626 74.924-63.31c1.616-9.632 9.958-16.69 19.722-16.69s18.108 7.056 19.722 16.688c1.082 6.436 1.628 12.934 1.628 19.312 0 63.962-52.038 116-116 116s-116-52.038-116-116c0-6.378 0.544-12.876 1.626-19.312 1.624-9.632 9.964-16.688 19.73-16.688z" />
+<glyph unicode="&#xe607;" d="M512-64c282.77 0 512 229.23 512 512s-229.23 512-512 512-512-229.23-512-512 229.23-512 512-512zM512 864c229.75 0 416-186.25 416-416s-186.25-416-416-416-416 186.25-416 416 186.25 416 416 416zM384 256c0 70.692 57.308 128 128 128s128-57.308 128-128c0-70.692-57.308-128-128-128-70.692 0-128 57.308-128 128zM640 608c0 53.019 28.654 96 64 96s64-42.981 64-96c0-53.019-28.654-96-64-96-35.346 0-64 42.981-64 96zM256 608c0 53.019 28.654 96 64 96s64-42.981 64-96c0-53.019-28.654-96-64-96-35.346 0-64 42.981-64 96z" />
+</font></defs></svg>
--- a/fonts/icomoon.ttf
+++ b/fonts/icomoon.ttf
--- a/fonts/icomoon.woff
+++ b/fonts/icomoon.woff
--- a/js/questionset.js
+++ b/js/questionset.js
@ -69,8 +69,10 @@ H5P.QuestionSet = function (options, contentId) {
  var resulttemplate =
          '<div class="questionset-results">' +
          '  <div class="greeting"><%= greeting %></div>' +
-          '  <div class="score <%= scoreclass %>"><%= score %></div>' +
-          '  <div class="resulttext <%= scoreclass %>"><%= resulttext %></div>' +
+          '  <div class="score <%= scoreclass %>">' +
+          '     <div class="emoticon"></div>' +
+          '     <div class="resulttext <%= scoreclass %>"><h2><%= comment %></h2><%= score %><br><%= resulttext %></div>' +
+          '  </div>' +
          '  <div class="buttons"><a class="button qs-finishbutton"><%= finishButtonText %></a><a class="button qs-solutionbutton"><%= solutionButtonText %></a></div>' +
          '</div>';

@ -95,18 +97,18 @@ H5P.QuestionSet = function (options, contentId) {
    },
    endGame: {
      showResultPage: true,
+      greeting: 'Your result:',
      successGreeting: 'Congratulations!',
      successComment: 'You have enough correct answers to pass the test.',
      failGreeting: 'Sorry!',
      failComment: "You don't have enough correct answers to pass this test.",
-      scoreString: '@score/@total',
+      scoreString: 'You got @score of @total questions correct.',
      finishButtonText: 'Finish',
      solutionButtonText: 'Show solution',
      showAnimations: false,
      successVideo: undefined,
      failVideo: undefined
-    },
-    postUserStatistics: (H5P.postUserStatistics === true)
+    }
  };

  var template = new EJS({text: texttemplate});
@ -128,10 +130,6 @@ H5P.QuestionSet = function (options, contentId) {
    // TODO: Render on init, inject in template.

    var libraryObject = H5P.libraryFromString(question.library);
-    $.extend(question.params, {
-      displaySolutionsButton: false,
-      postUserStatistics: false
-    });
    var tmp = new (H5P.classFromName(libraryObject.machineName))(question.params, contentId);
    questionInstances.push(tmp);
  }
@ -172,7 +170,7 @@ H5P.QuestionSet = function (options, contentId) {
    $('.question-container', $myDom).hide().eq(questionNumber).show();

    // Trigger resize on question in case the size of the QS has changed.
-    if (questionInstances[questionNumber].resize !== undefined) {
+    if (questionInstances[questionNumber].resize) {
      questionInstances[questionNumber].resize();
    }

@ -222,17 +220,14 @@ H5P.QuestionSet = function (options, contentId) {
      passed: success
    };
    var displayResults = function () {
-      if (params.postUserStatistics === true) {
-        H5P.setFinished(contentId, getScore(), totalScore());
-      }
-
      if (!params.endGame.showResultPage) {
        $(returnObject).trigger('h5pQuestionSetFinished', eventData);
        return;
      }

      var eparams = {
-        greeting: (success ? params.endGame.successGreeting : params.endGame.failGreeting),
+        greeting: params.endGame.greeting,
+        comment: (success ? params.endGame.successGreeting : params.endGame.failGreeting),
        score: scoreString,
        scoreclass: (success ? 'success' : 'fail'),
        resulttext: (success ? params.endGame.successComment : params.endGame.failComment),
@ -311,6 +306,7 @@ H5P.QuestionSet = function (options, contentId) {
      var question = questionInstances[i];

      question.attach($('.question-container:eq(' + i + ')', $myDom));
+      question.$solutionButton.hide();
      $(question).on('h5pQuestionAnswered', function () {
        $('.progress-dot:eq(' + currentQuestion +')', $myDom).removeClass('unanswered').addClass('answered');
        _updateButtons();
--- a/language/nb.json
+++ b/language/nb.json
@ -81,6 +81,11 @@
        {
          "label": "Vis resultater"
        },
+        {
+          "label": "Overskrift over tilbakemeldinger",
+          "default": "Ditt resultat:",
+          "description": "Denne overskriften vises over tilbakemeldingene på slutten av spørsmålssettet."
+        },
        {
          "label": "Tittel ved bestått",
          "default": "Gratulerer!",
--- a/language/nn.json
+++ b/language/nn.json
@ -79,7 +79,12 @@
      "label": "Spørsmålssett avslutning",
      "fields": [
        {
-          "label": "Vis resultater"
+          "label": "Vis resultat"
+        },
+        {
+          "label": "Overskrift over tilbakemeldingar",
+          "default": "Ditt resultat:",
+          "description": "Denne overskriften vises over tilbakemeldingane på slutten av spørsmålssettet."
        },
        {
          "label": "Tittel ved bestått",
--- a/semantics.json
+++ b/semantics.json
@ -37,6 +37,7 @@
    "name": "questions",
    "label": "Questions",
    "type": "list",
+    "widget": "verticalTabs",
    "min": 1,
    "entity": "question",
    "field": {
@ -147,14 +148,26 @@
        "label": "Display results",
        "default": true
      },
+      {
+        "name": "message",
+        "type": "text",
+        "label": "Feedback heading",
+        "default": "Your result:",
+        "optional": true,
+        "description": "This heading will be displayed at the end of the quiz when the user has answered all questions.",
+        "tags": [
+          "strong",
+          "em"
+        ]
+      },
      {
        "name": "successGreeting",
        "type": "text",
-        "label": "Quiz passed title",
+        "label": "Quiz passed greeting",
        "placeholder": "Congratulations!",
        "default": "Congratulations!",
        "optional": true,
-        "description": "This title will be displayed above results if the user has successfully passed the quiz.",
+        "description": "This text will be displayed above the score if the user has successfully passed the quiz.",
        "tags": [
          "strong",
          "em"
@ -182,7 +195,7 @@
        "label": "Quiz failed title",
        "default": "Oh, no!",
        "optional": true,
-        "description": "This title will be displayed above the results if the user has failed the quiz.",
+        "description": "This text will be displayed above the score if the user has failed the quiz.",
        "tags": [
          "strong",
          "em"