Merge branch 'always-continue'
Frode Petterson
commit
031b4bb8e8
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -137,35 +107,60 @@
|
|||
.questionset-results a.h5p-button.qs-retrybutton:before {
|
||||
font-family: 'H5PFontAwesome4';
|
||||
padding-right: 0.5em;
|
||||
content: "\f021";
|
||||
content: "\f01e";
|
||||
}
|
||||
|
||||
.qs-footer > .next, .qs-footer > .finish, .qs-finishbutton {
|
||||
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 {
|
||||
|
|
@ -192,80 +187,31 @@
|
|||
padding: 0.625em;
|
||||
}
|
||||
|
||||
.questionset-results .greeting {
|
||||
text-align: left;
|
||||
border-bottom: 0.1em solid #ddd;
|
||||
width: 100%;
|
||||
.questionset-results .feedback-section {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.questionset-results .score {
|
||||
margin: 0;
|
||||
display: block;
|
||||
margin-bottom: 2em;
|
||||
.questionset-results .feedback-section .feedback-text {
|
||||
font-weight: bold;
|
||||
color: #1a73d9;
|
||||
}
|
||||
|
||||
.questionset-results .resulttext {
|
||||
text-align: left;
|
||||
font-size: 1.25em;
|
||||
line-height: 1.25em;
|
||||
margin: 1em 0em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
.questionset-results .buttons {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.questionset-results .resulttext.fail em {
|
||||
font-style: normal;
|
||||
color: #b9272d;
|
||||
/* No margin for questions when no frame */
|
||||
.h5p-no-frame .questionset .h5p-question > * {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.questionset-results .score.success .emoticon:before {
|
||||
font-family: icomoon-questionset;
|
||||
font-size: 5em;
|
||||
line-height: 100%;
|
||||
content: "\e606";
|
||||
float: left;
|
||||
.h5p-no-frame .questionset-results .feedback-section,
|
||||
.h5p-no-frame .questionset .h5p-question > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.questionset-results .score.fail .emoticon:before {
|
||||
font-family: icomoon-questionset;
|
||||
font-size: 5em;
|
||||
line-height: 100%;
|
||||
content: "\e607";
|
||||
float: left;
|
||||
}
|
||||
|
||||
.questionset-results .resulttext.success,
|
||||
.questionset-results .resulttext.almost,
|
||||
.questionset-results .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,
|
||||
.questionset-results .resulttext.fail:before
|
||||
{
|
||||
font-family: icomoon-questionset;
|
||||
content: "";
|
||||
font-size: 5em;
|
||||
position: absolute;
|
||||
left: -14px;
|
||||
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;
|
||||
.h5p-no-frame .questionset-results .buttons,
|
||||
.h5p-no-frame .questionset .h5p-question > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ H5P.QuestionSet = function (options, contentId) {
|
|||
' <% if (introPage.introduction) { %>' +
|
||||
' <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 class="questionset<% if (introPage.showIntroPage) { %> hidden<% } %>">' +
|
||||
|
|
@ -47,20 +47,20 @@ H5P.QuestionSet = function (options, contentId) {
|
|||
' <span class="progress-text"></span>' +
|
||||
' <% } %>' +
|
||||
' </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>';
|
||||
|
||||
var resulttemplate =
|
||||
'<div class="questionset-results">' +
|
||||
' <div class="greeting"><%= message %></div>' +
|
||||
' <div class="score <%= scoreclass %>">' +
|
||||
' <div class="emoticon"></div>' +
|
||||
' <div class="resulttext <%= scoreclass %>"><% if (comment) { %><h2><%= comment %></h2><% } %><%= score %><br><%= resulttext %></div>' +
|
||||
' <div class="feedback-section">' +
|
||||
' <div class="feedback-scorebar"></div>' +
|
||||
' <div class="feedback-text"></div>' +
|
||||
' </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 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>';
|
||||
|
||||
var defaults = {
|
||||
|
|
@ -109,6 +109,7 @@ H5P.QuestionSet = function (options, contentId) {
|
|||
var currentQuestion = 0;
|
||||
var questionInstances = [];
|
||||
var $myDom;
|
||||
var scoreBar;
|
||||
renderSolutions = false;
|
||||
|
||||
// Instantiate question instances
|
||||
|
|
@ -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');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -201,8 +195,8 @@ H5P.QuestionSet = function (options, contentId) {
|
|||
questionInstances[i].showSolutions();
|
||||
}
|
||||
catch(error) {
|
||||
console.log(error);
|
||||
console.log("subcontent does not contain a valid showSolutions() function");
|
||||
H5P.error("subcontent does not contain a valid showSolutions function");
|
||||
H5P.error(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -218,10 +212,14 @@ H5P.QuestionSet = function (options, contentId) {
|
|||
questionInstances[i].resetTask();
|
||||
}
|
||||
catch(error) {
|
||||
console.log(error);
|
||||
console.log("subcontent does not contain a valid resetTask() function");
|
||||
H5P.error("subcontent does not contain a valid resetTask function");
|
||||
H5P.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide finish button
|
||||
questionInstances[questionInstances.length - 1].hideButton('finish');
|
||||
|
||||
//Force the last page to be reRendered
|
||||
rendered = false;
|
||||
};
|
||||
|
|
@ -260,11 +258,7 @@ H5P.QuestionSet = function (options, contentId) {
|
|||
}
|
||||
|
||||
var eparams = {
|
||||
message: params.endGame.message,
|
||||
comment: (success ? params.endGame.successGreeting : params.endGame.failGreeting),
|
||||
score: scoreString,
|
||||
scoreclass: (success ? 'success' : 'fail'),
|
||||
resulttext: (success ? params.endGame.successComment : params.endGame.failComment),
|
||||
finishButtonText: params.endGame.finishButtonText,
|
||||
solutionButtonText: params.endGame.solutionButtonText
|
||||
};
|
||||
|
|
@ -272,7 +266,7 @@ H5P.QuestionSet = function (options, contentId) {
|
|||
// Show result page.
|
||||
$myDom.children().hide();
|
||||
$myDom.append(endTemplate.render(eparams));
|
||||
$('.qs-finishbutton').click(function () {
|
||||
$('.qs-finishbutton', $myDom).click(function () {
|
||||
self.trigger('h5pQuestionSetFinished', eventData);
|
||||
});
|
||||
$('.qs-solutionbutton', $myDom).click(function () {
|
||||
|
|
@ -286,6 +280,13 @@ H5P.QuestionSet = function (options, contentId) {
|
|||
resetTask();
|
||||
$myDom.children().hide().filter('.questionset').show();
|
||||
_showQuestion(params.initialQuestion);});
|
||||
|
||||
if (scoreBar === undefined) {
|
||||
scoreBar = H5P.JoubelUI.createScoreBar(totals);
|
||||
}
|
||||
scoreBar.appendTo($('.feedback-scorebar', $myDom));
|
||||
scoreBar.setScore(finals);
|
||||
$('.feedback-text', $myDom).html(scoreString);
|
||||
};
|
||||
|
||||
if (params.endGame.showAnimations) {
|
||||
|
|
@ -314,7 +315,7 @@ H5P.QuestionSet = function (options, contentId) {
|
|||
video.play();
|
||||
|
||||
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();
|
||||
$videoContainer.hide();
|
||||
displayResults();
|
||||
|
|
@ -364,9 +365,38 @@ 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') {
|
||||
if (shortVerb === 'interacted' ||
|
||||
shortVerb === 'answered' ||
|
||||
shortVerb === 'attempted') {
|
||||
$('.progress-dot:eq(' + currentQuestion +')', $myDom).removeClass('unanswered').addClass('answered');
|
||||
_updateButtons();
|
||||
}
|
||||
|
|
@ -393,15 +423,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);
|
||||
|
|
|
|||
|
|
@ -41,6 +41,11 @@
|
|||
"machineName": "H5P.Video",
|
||||
"majorVersion": 1,
|
||||
"minorVersion": 1
|
||||
},
|
||||
{
|
||||
"machineName": "H5P.JoubelUI",
|
||||
"majorVersion": 1,
|
||||
"minorVersion": 1
|
||||
}
|
||||
],
|
||||
"editorDependencies": [
|
||||
|
|
|
|||
Loading…
Reference in New Issue