EDUCATIC
/
h5p-question-set
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use new button design. 

Add navigation buttons to Question, instead of to QS.
Added specific stylings for new button design.
HFJ-946
pull/1/head
Thomas Marstrander 2015-08-12 14:46:49 +02:00
parent b399f9530d
commit c4a78bfdcd
3 changed files with 89 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
css/questionset.css
View File

@ -91,37 +91,7 @@
.qs-footer { .qs-footer {
overflow: hidden; 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 { .qs-footer > .prev {
float: left; float: left;
} }
@ -144,28 +114,53 @@
float: right; float: right;
} }
.qs-footer a.next.h5p-button:after { .h5p-question .h5p-question-prev,
font-family: 'H5PFontAwesome4'; .h5p-question .h5p-question-finish,
content: "\f054"; /* TODO: Use margin not whitespace, spacing is not content! */ .h5p-question .h5p-question-next {
float: right;
} }
.qs-footer a.prev.h5p-button:before { .h5p-question .h5p-question-prev,
font-family: 'H5PFontAwesome4'; .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"; content: "\f053";
padding-right: 0;
position: relative;
left: -2px;
} }
.questionset-results .qs-finishbutton { .questionset-results .qs-finishbutton {
display: none; display: none;
} }
.qs-footer a.finish.h5p-button:before { .h5p-question .h5p-question-finish:before {
font-family: 'H5PFontAwesome4';
content: "\f00c"; content: "\f00c";
} }
.questionset-results a.h5p-button.qs-solutionbutton:before { .questionset-results a.h5p-button.qs-solutionbutton:before {
font-family: 'H5PFontAwesome4'; font-family: 'H5PFontAwesome4';
content: "\f06e "; content: "\f06e "; /* TODO: Use margin not whitespace, spacing is not content! */
} }
.video-container { .video-container {

78
js/questionset.js
View File

@ -28,7 +28,7 @@ H5P.QuestionSet = function (options, contentId) {
' <% if (introPage.introduction) { %>' + ' <% if (introPage.introduction) { %>' +
' <div class="introduction"><%= introPage.introduction %></div>' + ' <div class="introduction"><%= introPage.introduction %></div>' +
' <% } %>' + ' <% } %>' +
' <div class="buttons"><a class="qs-startbutton h5p-button"><%= introPage.startButtonText %></a></div>' + ' <div class="buttons"><a class="qs-startbutton h5p-joubelui-button h5p-button"><%= introPage.startButtonText %></a></div>' +
'</div>' + '</div>' +
'<% } %>' + '<% } %>' +
'<div class="questionset<% if (introPage.showIntroPage) { %> hidden<% } %>">' + '<div class="questionset<% if (introPage.showIntroPage) { %> hidden<% } %>">' +
@ -47,9 +47,6 @@ H5P.QuestionSet = function (options, contentId) {
' <span class="progress-text"></span>' + ' <span class="progress-text"></span>' +
' <% } %>' + ' <% } %>' +
' </div>' + ' </div>' +
' <a class="prev h5p-button" title="<%= texts.prevButton %>"></a>' +
' <a class="next h5p-button" title="<%= texts.nextButton %>"></a>' +
' <a class="finish h5p-button"><%= texts.finishButton %></a>' +
' </div>' + ' </div>' +
'</div>'; '</div>';
@ -60,7 +57,11 @@ H5P.QuestionSet = function (options, contentId) {
' <div class="emoticon"></div>' + ' <div class="emoticon"></div>' +
' <div class="resulttext <%= scoreclass %>"><% if (comment) { %><h2><%= comment %></h2><% } %><%= score %><br><%= resulttext %></div>' + ' <div class="resulttext <%= scoreclass %>"><% if (comment) { %><h2><%= comment %></h2><% } %><%= score %><br><%= resulttext %></div>' +
' </div>' + ' </div>' +
' <div class="buttons"><a class="h5p-button qs-finishbutton"><%= finishButtonText %></a><a class="h5p-button qs-solutionbutton"><%= solutionButtonText %></a><a class="h5p-button qs-retrybutton"></a></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-retrybutton"></a>' +
' </div>' +
'</div>'; '</div>';
var defaults = { var defaults = {
@ -126,11 +127,15 @@ H5P.QuestionSet = function (options, contentId) {
} }
var questionInstance = H5P.newRunnable(question, contentId, undefined, undefined, {parent: self}); var questionInstance = H5P.newRunnable(question, contentId, undefined, undefined, {parent: self});
questionInstances.push(questionInstance); 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. // Update button state.
var _updateButtons = function () { var _updateButtons = function () {
var answered = true; var answered = true;
@ -138,19 +143,8 @@ H5P.QuestionSet = function (options, contentId) {
answered = answered && (questionInstances[i]).getAnswerGiven(); answered = answered && (questionInstances[i]).getAnswerGiven();
} }
if (currentQuestion === 0) { if (currentQuestion === (params.questions.length - 1) && answered) {
$('.prev.h5p-button', $myDom).hide(); questionInstances[currentQuestion].showButton('finish');
} 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();
} }
}; };
@ -222,6 +216,10 @@ H5P.QuestionSet = function (options, contentId) {
console.log("subcontent does not contain a valid resetTask() function"); 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 //Force the last page to be reRendered
rendered = false; rendered = false;
}; };
@ -314,7 +312,7 @@ H5P.QuestionSet = function (options, contentId) {
video.play(); video.play();
if (params.endGame.skipButtonText) { if (params.endGame.skipButtonText) {
$('<a class="h5p-button skip">' + params.endGame.skipButtonText + '</a>').click(function () { $('<a class="h5p-joubelui-button h5p-button skip">' + params.endGame.skipButtonText + '</a>').click(function () {
video.pause(); video.pause();
$videoContainer.hide(); $videoContainer.hide();
displayResults(); displayResults();
@ -364,6 +362,33 @@ H5P.QuestionSet = function (options, contentId) {
var question = questionInstances[i]; var question = questionInstances[i];
question.attach($('.question-container:eq(' + i + ')', $myDom)); 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) { question.on('xAPI', function (event) {
var shortVerb = event.getVerb(); var shortVerb = event.getVerb();
if (shortVerb === 'interacted') { if (shortVerb === 'interacted') {
@ -393,15 +418,6 @@ H5P.QuestionSet = function (options, contentId) {
$('.progress-dot', $myDom).click(function () { $('.progress-dot', $myDom).click(function () {
_showQuestion($(this).index()); _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. // Hide all but initial Question.
_showQuestion(params.initialQuestion); _showQuestion(params.initialQuestion);

5
library.json
View File

@ -41,6 +41,11 @@
"machineName": "H5P.Video", "machineName": "H5P.Video",
"majorVersion": 1, "majorVersion": 1,
"minorVersion": 1 "minorVersion": 1
},
{
"machineName": "H5P.JoubelUI",
"majorVersion": 1,
"minorVersion": 1
} }
], ],
"editorDependencies": [ "editorDependencies": [