diff --git a/css/img/mark-fail.png b/css/img/mark-fail.png deleted file mode 100644 index cbd3936..0000000 Binary files a/css/img/mark-fail.png and /dev/null differ diff --git a/css/img/mark-pass.png b/css/img/mark-pass.png deleted file mode 100644 index cceccd3..0000000 Binary files a/css/img/mark-pass.png and /dev/null differ diff --git a/css/questionset.css b/css/questionset.css index b0b11a8..d3ecdaf 100644 --- 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; } \ No newline at end of file diff --git a/fonts/icomoon.eot b/fonts/icomoon.eot new file mode 100644 index 0000000..d8cdc1a Binary files /dev/null and b/fonts/icomoon.eot differ diff --git a/fonts/icomoon.svg b/fonts/icomoon.svg new file mode 100644 index 0000000..1a48364 --- /dev/null +++ b/fonts/icomoon.svg @@ -0,0 +1,14 @@ + + + +Generated by IcoMoon + + + + + + + + + + \ No newline at end of file diff --git a/fonts/icomoon.ttf b/fonts/icomoon.ttf new file mode 100644 index 0000000..9649f7e Binary files /dev/null and b/fonts/icomoon.ttf differ diff --git a/fonts/icomoon.woff b/fonts/icomoon.woff new file mode 100644 index 0000000..5d29f5d Binary files /dev/null and b/fonts/icomoon.woff differ diff --git a/js/questionset.js b/js/questionset.js index a3b8d41..72db963 100644 --- a/js/questionset.js +++ b/js/questionset.js @@ -69,8 +69,10 @@ H5P.QuestionSet = function (options, contentId) { var resulttemplate = '
' + '
<%= greeting %>
' + - '
<%= score %>
' + - '
<%= resulttext %>
' + + '
' + + '
' + + '

<%= comment %>

<%= score %>
<%= resulttext %>
' + + '
' + '
<%= finishButtonText %><%= solutionButtonText %>
' + '
'; @@ -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(); diff --git a/language/nb.json b/language/nb.json index 32d1f28..4e496eb 100644 --- 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!", diff --git a/language/nn.json b/language/nn.json index b64f8b8..fe5d97f 100644 --- 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", diff --git a/semantics.json b/semantics.json index d008917..83df6d9 100644 --- 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"