Design update to questions set completed. No changes made to dragNdrop so far.
pull/1/head
Magnus Vik Magnussen 2013-10-31 13:39:51 +01:00
parent e766e50b7b
commit 2c26b7692d
11 changed files with 182 additions and 62 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -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 { .questionset, .intro-page, .questionset-results {
overflow: hidden; overflow: hidden;
} }
@ -11,10 +29,9 @@
position: relative; position: relative;
} }
.h5p-multichoice > .h5p-question { .h5p-multichoice > .h5p-question {
margin: 1em 0.5em 0; text-align: left;
padding: 0.5em 0.75em; padding: 1em 0 0.2em;
box-shadow: 0 0 0.5em #e3e3e3; margin: 0 0.5em 0.7em;
border-radius: 0.5em;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6FFFFFF,endColorstr=#e6FFFFFF); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6FFFFFF,endColorstr=#e6FFFFFF);
zoom: 1; zoom: 1;
@ -25,32 +42,22 @@
} }
.progress-dot { .progress-dot {
display: inline-block; display: inline-block;
width: 0.75em; width: 0.6em;
height: 0.75em; height: 0.6em;
border-radius: 50%; border-radius: 50%;
margin: 0 0.25em; margin: 0 0.25em;
cursor: pointer; cursor: pointer;
background: #fff; background: #fff;
border: 0.0625em solid #c7c7c7; background: #cecece;
} }
.progress-dot:hover { .progress-dot:hover {
box-shadow: 0 0 0.5em #c7c7c7; box-shadow: 0 0 0.5em #c7c7c7;
} }
.progress-dot.answered { .progress-dot.answered {
border: 0.0625em solid #fff;
background: #bccade; background: #bccade;
} }
.progress-dot.current { .progress-dot.current {
width: 1em;
height: 1em;
border: 0.0625em solid #fff;
margin-bottom: -0.125em;
background: #267ec9; 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 { .intro-page .title {
font-size: 2em; font-size: 2em;
@ -72,40 +79,75 @@
} }
.qs-footer .button, .qs-startbutton, .qs-finishbutton, .questionset-results .button, .video-container > .button { .qs-footer .button, .qs-startbutton, .qs-finishbutton, .questionset-results .button, .video-container > .button {
display: block; display: inline-block;
line-height: 1.25em; padding: 0.2em 1em;
padding: 0.25em 1em; border: 0.2em solid #fff;
border-radius: 0.75em; border-radius: 0.4em;
margin: 0 0.5em 1em;
cursor: pointer; cursor: pointer;
color: #fff; color: #fff;
box-shadow: 0 0 0.5em #aebdc9; box-shadow: 0 0 0.5em #999;
margin: 0.5em;
background: #267ec9; background: rgb(100,152,254); /* Old browsers */
background-image: -webkit-linear-gradient(top, #3999ea, #267ec9); background: -moz-linear-gradient(top, rgba(100,152,254,1) 0%, rgba(4,104,206,1) 100%); /* FF3.6+ */
background-image: -moz-linear-gradient(top, #3999ea, #267ec9); 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-image: -o-linear-gradient(top, #3999ea, #267ec9); background: -webkit-linear-gradient(top, rgba(100,152,254,1) 0%,rgba(4,104,206,1) 100%); /* Chrome10+,Safari5.1+ */
background-image: -ms-linear-gradient(top, #3999ea, #267ec9); background: -o-linear-gradient(top, rgba(100,152,254,1) 0%,rgba(4,104,206,1) 100%); /* Opera 11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3999ea', endColorstr='#267ec9',GradientType=0); 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 { .qs-footer .button:hover, .qs-startbutton:hover, .questionset-results .button:hover, .video-container > .button:hover {
text-decoration: none; text-decoration: none;
color: #fff; box-shadow: 0 0 0.5em #999;
box-shadow: 0 0 0.5em #267ec9;
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 { .qs-startbutton {
display: inline-block; display: inline-block;
font-size: 2.5em; font-size: 2.5em;
} }
.qs-footer > .prev, .qs-solutionbutton { .qs-footer > .prev {
float: left; float: left;
} }
.qs-footer > .qs-solutionbutton {
float: none;
}
.qs-footer > .next, .qs-footer > .finish, .qs-finishbutton { .qs-footer > .next, .qs-footer > .finish, .qs-finishbutton {
float: right; 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 { .questionset-results .qs-finishbutton {
display: none; 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 { .video-container {
position: relative; position: relative;
} }
@ -127,40 +169,85 @@
text-align: center; text-align: center;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6FFFFFF,endColorstr=#E6FFFFFF); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6FFFFFF,endColorstr=#E6FFFFFF);
padding: 0.625em;
} }
.questionset-results .greeting { .questionset-results .greeting {
margin: 1em; text-align: left;
border-bottom: 0.1em solid #ddd;
width: 100%;
} }
.questionset-results .score { .questionset-results .score {
font-size: 1.5em; margin: 0;
margin: 1em; display: block;
margin-bottom: 2em;
} }
.questionset-results .resulttext { .questionset-results .resulttext {
text-align: left; text-align: left;
font-size: 1.25em; font-size: 1.25em;
line-height: 1.25em; line-height: 1.25em;
margin: 1em 3em; margin: 1em 0em;
padding-left: 3em;
min-height: 3em;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left center; background-position: left center;
} }
.questionset-results .resulttext.fail {
background-image: url(img/mark-fail.png);
}
.questionset-results .resulttext.fail em { .questionset-results .resulttext.fail em {
font-style: normal; font-style: normal;
color: #b9272d; color: #b9272d;
} }
.questionset-results .resulttext.success { .questionset-results .score.success .emoticon:before {
background-image: url(img/mark-pass.png); 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 { .questionset-results .resulttext.success em {
font-style: normal; font-style: normal;
color: #6aa81b; color: #6aa81b;
text-align: left;
} }

BIN
fonts/icomoon.eot Normal file

Binary file not shown.

14
fonts/icomoon.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
fonts/icomoon.ttf Normal file

Binary file not shown.

BIN
fonts/icomoon.woff Normal file

Binary file not shown.

View File

@ -69,8 +69,10 @@ H5P.QuestionSet = function (options, contentId) {
var resulttemplate = var resulttemplate =
'<div class="questionset-results">' + '<div class="questionset-results">' +
' <div class="greeting"><%= greeting %></div>' + ' <div class="greeting"><%= greeting %></div>' +
' <div class="score <%= scoreclass %>"><%= score %></div>' + ' <div class="score <%= scoreclass %>">' +
' <div class="resulttext <%= scoreclass %>"><%= resulttext %></div>' + ' <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 class="buttons"><a class="button qs-finishbutton"><%= finishButtonText %></a><a class="button qs-solutionbutton"><%= solutionButtonText %></a></div>' +
'</div>'; '</div>';
@ -95,18 +97,18 @@ H5P.QuestionSet = function (options, contentId) {
}, },
endGame: { endGame: {
showResultPage: true, showResultPage: true,
greeting: 'Your result:',
successGreeting: 'Congratulations!', successGreeting: 'Congratulations!',
successComment: 'You have enough correct answers to pass the test.', successComment: 'You have enough correct answers to pass the test.',
failGreeting: 'Sorry!', failGreeting: 'Sorry!',
failComment: "You don't have enough correct answers to pass this test.", 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', finishButtonText: 'Finish',
solutionButtonText: 'Show solution', solutionButtonText: 'Show solution',
showAnimations: false, showAnimations: false,
successVideo: undefined, successVideo: undefined,
failVideo: undefined failVideo: undefined
}, }
postUserStatistics: (H5P.postUserStatistics === true)
}; };
var template = new EJS({text: texttemplate}); var template = new EJS({text: texttemplate});
@ -128,10 +130,6 @@ H5P.QuestionSet = function (options, contentId) {
// TODO: Render on init, inject in template. // TODO: Render on init, inject in template.
var libraryObject = H5P.libraryFromString(question.library); var libraryObject = H5P.libraryFromString(question.library);
$.extend(question.params, {
displaySolutionsButton: false,
postUserStatistics: false
});
var tmp = new (H5P.classFromName(libraryObject.machineName))(question.params, contentId); var tmp = new (H5P.classFromName(libraryObject.machineName))(question.params, contentId);
questionInstances.push(tmp); questionInstances.push(tmp);
} }
@ -172,7 +170,7 @@ H5P.QuestionSet = function (options, contentId) {
$('.question-container', $myDom).hide().eq(questionNumber).show(); $('.question-container', $myDom).hide().eq(questionNumber).show();
// Trigger resize on question in case the size of the QS has changed. // 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(); questionInstances[questionNumber].resize();
} }
@ -222,17 +220,14 @@ H5P.QuestionSet = function (options, contentId) {
passed: success passed: success
}; };
var displayResults = function () { var displayResults = function () {
if (params.postUserStatistics === true) {
H5P.setFinished(contentId, getScore(), totalScore());
}
if (!params.endGame.showResultPage) { if (!params.endGame.showResultPage) {
$(returnObject).trigger('h5pQuestionSetFinished', eventData); $(returnObject).trigger('h5pQuestionSetFinished', eventData);
return; return;
} }
var eparams = { var eparams = {
greeting: (success ? params.endGame.successGreeting : params.endGame.failGreeting), greeting: params.endGame.greeting,
comment: (success ? params.endGame.successGreeting : params.endGame.failGreeting),
score: scoreString, score: scoreString,
scoreclass: (success ? 'success' : 'fail'), scoreclass: (success ? 'success' : 'fail'),
resulttext: (success ? params.endGame.successComment : params.endGame.failComment), resulttext: (success ? params.endGame.successComment : params.endGame.failComment),
@ -311,6 +306,7 @@ 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));
question.$solutionButton.hide();
$(question).on('h5pQuestionAnswered', function () { $(question).on('h5pQuestionAnswered', function () {
$('.progress-dot:eq(' + currentQuestion +')', $myDom).removeClass('unanswered').addClass('answered'); $('.progress-dot:eq(' + currentQuestion +')', $myDom).removeClass('unanswered').addClass('answered');
_updateButtons(); _updateButtons();

View File

@ -81,6 +81,11 @@
{ {
"label": "Vis resultater" "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", "label": "Tittel ved bestått",
"default": "Gratulerer!", "default": "Gratulerer!",

View File

@ -79,7 +79,12 @@
"label": "Spørsmålssett avslutning", "label": "Spørsmålssett avslutning",
"fields": [ "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", "label": "Tittel ved bestått",

View File

@ -37,6 +37,7 @@
"name": "questions", "name": "questions",
"label": "Questions", "label": "Questions",
"type": "list", "type": "list",
"widget": "verticalTabs",
"min": 1, "min": 1,
"entity": "question", "entity": "question",
"field": { "field": {
@ -147,14 +148,26 @@
"label": "Display results", "label": "Display results",
"default": true "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", "name": "successGreeting",
"type": "text", "type": "text",
"label": "Quiz passed title", "label": "Quiz passed greeting",
"placeholder": "Congratulations!", "placeholder": "Congratulations!",
"default": "Congratulations!", "default": "Congratulations!",
"optional": true, "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": [ "tags": [
"strong", "strong",
"em" "em"
@ -182,7 +195,7 @@
"label": "Quiz failed title", "label": "Quiz failed title",
"default": "Oh, no!", "default": "Oh, no!",
"optional": true, "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": [ "tags": [
"strong", "strong",
"em" "em"