From c4a78bfdcd71d43be62adbf04c5cbc4216959cc5 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Wed, 12 Aug 2015 14:46:49 +0200 Subject: [PATCH] Use new button design. Add navigation buttons to Question, instead of to QS. Added specific stylings for new button design. HFJ-946 --- css/questionset.css | 77 +++++++++++++++++++++----------------------- js/questionset.js | 78 +++++++++++++++++++++++++++------------------ library.json | 7 +++- 3 files changed, 89 insertions(+), 73 deletions(-) diff --git a/css/questionset.css b/css/questionset.css index 19130c0..6dceb75 100644 --- a/css/questionset.css +++ b/css/questionset.css @@ -62,7 +62,7 @@ font-weight: bold; text-align: center; } -.intro-page .title > span { +.intro-page .title > span { padding: 0.125em 0.5em; border-radius: 0.125em; background: rgb(255,255,255); /* Fallback for browsers not supporting rgba */ @@ -91,37 +91,7 @@ .qs-footer { overflow: hidden; } -.qs-footer .h5p-button, .qs-startbutton, .qs-finishbutton, .questionset-results .h5p-button, .video-container > .h5p-button { - display: inline-block; - padding: 0 0.7em; - border: 0.2em solid #fff; - border-radius: 0.4em; - margin: 0 0.5em 1em; - cursor: pointer; - color: #ffffff; - box-shadow: 0 0 0.5em #999; - line-height: 1.9em; - 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 .h5p-button:hover, .qs-startbutton:hover, .questionset-results .h5p-button:hover, .video-container > .h5p-button:hover { - text-decoration: none; - box-shadow: 0 0 0.5em #999; - color: #ffffff; - border-color: #fff; - 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-footer > .prev { float: left; } @@ -144,28 +114,53 @@ float: right; } -.qs-footer a.next.h5p-button:after { - font-family: 'H5PFontAwesome4'; - content: "\f054"; /* TODO: Use margin not whitespace, spacing is not content! */ +.h5p-question .h5p-question-prev, +.h5p-question .h5p-question-finish, +.h5p-question .h5p-question-next { + float: right; } -.qs-footer a.prev.h5p-button:before { - font-family: 'H5PFontAwesome4'; +.h5p-question .h5p-question-prev, +.h5p-question .h5p-question-next { + padding: 0; + height: 2.1875em; + width: 2.1875em; +} + +.h5p-question .h5p-question-next, +.h5p-question .h5p-question-finish { + margin: 0 0 1.5em 0.5em; +} + +.h5p-question .h5p-question-prev { + margin: 0 0.5em 1.5em 0.5em; +} + +.h5p-question .h5p-question-next:before { + content: "\f054"; + padding-right: 0; + position: relative; + left: 2px; +} + +.h5p-question .h5p-question-prev:before { content: "\f053"; + padding-right: 0; + position: relative; + left: -2px; } .questionset-results .qs-finishbutton { display: none; } -.qs-footer a.finish.h5p-button:before { - font-family: 'H5PFontAwesome4'; - content: "\f00c "; +.h5p-question .h5p-question-finish:before { + content: "\f00c"; } .questionset-results a.h5p-button.qs-solutionbutton:before { font-family: 'H5PFontAwesome4'; - content: "\f06e "; + content: "\f06e "; /* TODO: Use margin not whitespace, spacing is not content! */ } .video-container { diff --git a/js/questionset.js b/js/questionset.js index 27be0d4..20eba15 100644 --- a/js/questionset.js +++ b/js/questionset.js @@ -28,7 +28,7 @@ H5P.QuestionSet = function (options, contentId) { ' <% if (introPage.introduction) { %>' + '
<%= introPage.introduction %>
' + ' <% } %>' + - '
<%= introPage.startButtonText %>
' + + '
<%= introPage.startButtonText %>
' + '' + '<% } %>' + '
' + @@ -47,9 +47,6 @@ H5P.QuestionSet = function (options, contentId) { ' ' + ' <% } %>' + '
' + - ' ' + - ' ' + - ' <%= texts.finishButton %>' + ' ' + ''; @@ -60,7 +57,11 @@ H5P.QuestionSet = function (options, contentId) { '
' + '
<% if (comment) { %>

<%= comment %>

<% } %><%= score %>
<%= resulttext %>
' + ' ' + - '
<%= finishButtonText %><%= solutionButtonText %>
' + + '
' + + ' <%= finishButtonText %>' + + ' <%= solutionButtonText %>' + + ' ' + + '
' + ''; var defaults = { @@ -126,11 +127,15 @@ H5P.QuestionSet = function (options, contentId) { } var questionInstance = H5P.newRunnable(question, contentId, undefined, undefined, {parent: self}); questionInstances.push(questionInstance); - questionInstance.on('resize', function() { - self.trigger('resize'); - }); } + // Resize all interactions on resize + self.on('resize', function () { + for (var i = 0; i < questionInstances.length; i++) { + questionInstances[i].trigger('resize'); + } + }); + // Update button state. var _updateButtons = function () { var answered = true; @@ -138,19 +143,8 @@ H5P.QuestionSet = function (options, contentId) { answered = answered && (questionInstances[i]).getAnswerGiven(); } - if (currentQuestion === 0) { - $('.prev.h5p-button', $myDom).hide(); - } else { - $('.prev.h5p-button', $myDom).show(); - } - if (currentQuestion === (params.questions.length - 1)) { - $('.next.h5p-button', $myDom).hide(); - if (answered) { - $('.finish.h5p-button', $myDom).show(); - } - } else { - $('.next.h5p-button', $myDom).show(); - $('.finish.h5p-button', $myDom).hide(); + if (currentQuestion === (params.questions.length - 1) && answered) { + questionInstances[currentQuestion].showButton('finish'); } }; @@ -222,6 +216,10 @@ H5P.QuestionSet = function (options, contentId) { console.log("subcontent does not contain a valid resetTask() function"); } } + + // Hide finish button + questionInstances[questionInstances.length - 1].hideButton('finish'); + //Force the last page to be reRendered rendered = false; }; @@ -314,7 +312,7 @@ H5P.QuestionSet = function (options, contentId) { video.play(); if (params.endGame.skipButtonText) { - $('').click(function () { + $('').click(function () { video.pause(); $videoContainer.hide(); displayResults(); @@ -364,6 +362,33 @@ H5P.QuestionSet = function (options, contentId) { var question = questionInstances[i]; question.attach($('.question-container:eq(' + i + ')', $myDom)); + + // Disable feedback for question + question.setBehaviour({disableFeedback: true}); + + // Add next/finish button + if (questionInstances[questionInstances.length -1] === question) { + + // Add finish question set button + question.addButton('finish', params.texts.finishButton, function () { + _displayEndGame(); + }); + + } else { + + // Add next question button + question.addButton('next', '', function () { + _showQuestion(currentQuestion + 1); + }); + } + + // Add previous question button + if (questionInstances[0] !== question) { + question.addButton('prev', '', function () { + _showQuestion(currentQuestion - 1); + }); + } + question.on('xAPI', function (event) { var shortVerb = event.getVerb(); if (shortVerb === 'interacted') { @@ -393,15 +418,6 @@ H5P.QuestionSet = function (options, contentId) { $('.progress-dot', $myDom).click(function () { _showQuestion($(this).index()); }); - $('.next.h5p-button', $myDom).click(function () { - _showQuestion(currentQuestion + 1); - }); - $('.prev.h5p-button', $myDom).click(function () { - _showQuestion(currentQuestion - 1); - }); - $('.finish.h5p-button', $myDom).click(function () { - _displayEndGame(); - }); // Hide all but initial Question. _showQuestion(params.initialQuestion); diff --git a/library.json b/library.json index fbe9cd5..897cc19 100644 --- a/library.json +++ b/library.json @@ -41,6 +41,11 @@ "machineName": "H5P.Video", "majorVersion": 1, "minorVersion": 1 + }, + { + "machineName": "H5P.JoubelUI", + "majorVersion": 1, + "minorVersion": 1 } ], "editorDependencies": [ @@ -55,4 +60,4 @@ "minorVersion": 0 } ] -} \ No newline at end of file +}