Commit d1b5aa61 authored by Svein-Tore Griff With's avatar Svein-Tore Griff With

Beta 8

parent 0c285980
......@@ -99,4 +99,10 @@
.h5p-blanks input.h5p-blanks-input {
width: 7em;
font-size: 1em;
}
\ No newline at end of file
}
.h5p-blanks-missing-input {
-webkit-box-shadow: inset 0 0 2px 0 red;
-moz-box-shadow: inset 0 0 2px 0 red;
box-shadow: inset 0 0 2px 0 red;
}
var H5P = H5P || {};
H5P.Blanks = function (options, contentId) {
var that = this;
var $panel;
var $answerPanel;
var $ = H5P.jQuery;
var userAnswers = [];
var that = this,
$ = H5P.jQuery,
$panel,
$answerPanel,
$submitbutton,
userAnswers = [];
this.options = H5P.jQuery.extend({}, {
text: "Fill in",
......@@ -65,17 +66,16 @@ H5P.Blanks = function (options, contentId) {
addElement($answerPanel, 'h5p-answer-question', {text: text});
});
var score = that.options.score.replace('@score', getScore()).replace('@total', getMaxScore());
addElement($answerPanel, 'h5p-score', { text: score });
addElement($answerPanel, 'h5p-button', { text: that.options.close, click: hideAnswer });
addElement($answerPanel, 'h5p-score', {
text: score
});
addElement($answerPanel, '', {
text: '<input type="button" class="h5p-button" value="' + that.options.close + '"/>',
click: hideAnswer
});
$('.h5p-button', $answerPanel).focus();
};
var buttons = Array(
{
text: this.options.showSolutions,
click: showSolutions
}
);
function addElement(container, className, el) {
var text = el.text ? el.text : '';
var $el = $('<div class="' + className + '">' + text + '</div>');
......@@ -116,12 +116,37 @@ H5P.Blanks = function (options, contentId) {
$panel = $('<div class="blanks-panel"></div>').appendTo($wrapper);
$panel.append('<h2>' + that.options.text + '</h2>');
var $form = $('<form action="#"/>')
.appendTo($panel)
.on('submit', function (event) {
var $form = $(this);
// If all fields answered show solutions.
var allFilled = true;
$('.h5p-blanks-missing-input', $form).removeClass('h5p-blanks-missing-input');
$('.h5p-blanks-input', $form).each(function(idx, el) {
if (! $(el).val()) {
allFilled = false;
$(el).addClass('h5p-blanks-missing-input');
}
});
if (allFilled) {
if ($('.h5p-button', $submitbutton).is(':visible')) {
showSolutions();
}
}
else {
$('.h5p-blanks-missing-input', $form).first().focus();
}
// Don't actually submit, ever.
return false;
});
// Add questions
for (var i = 0; i < that.options.questions.length; i++) {
var input = '<input class="h5p-blanks-input" type="text" value="' + (userAnswers[i] === undefined ? '' : userAnswers[i]) + '"/>';
var text = that.options.questions[i].replace(/\*[^\*]+\*/, input);
var $element = addElement($panel, 'h5p-blanks-question', { text: text });
if (!i) {
var $element = addElement($form, 'h5p-blanks-question', { text: text });
if (i === 0) {
$element.focus();
}
$element.find('input').data('i', i).blur(function() {
......@@ -136,12 +161,10 @@ H5P.Blanks = function (options, contentId) {
});
}
// Add buttons
for (var i = 0; i < buttons.length; i++) {
addElement($panel, 'h5p-button h5p-solutions-button h5p-hidden-solution-btn', buttons[i]);
// h5p-hidden-solution-btn gets hidden if parent activates the solutions
// h5p-show-solutions can't be used for this since styling might be applied to it
}
// Add button
$submitbutton = addElement($form, 'h5p-solutions-button h5p-hidden-solution-btn', {
text: '<input class="h5p-button" type="submit" value="' + that.options.showSolutions + '" />'
});
$answerPanel = addElement($wrapper, 'h5p-answer-panel', {
top: '-100%',
......
......@@ -3,7 +3,7 @@
"description": "void",
"majorVersion": 1,
"minorVersion": 0,
"patchVersion": 23,
"patchVersion": 24,
"runnable": 1,
"author": "Amendor AS",
"license": "cc-by-sa",
......
......@@ -4,7 +4,7 @@
"description": "Simple library that displays an audio player.",
"majorVersion": 1,
"minorVersion": 0,
"patchVersion": 8,
"patchVersion": 12,
"runnable": 0,
"machineName": "H5P.Audio",
"author": "Amendor AS",
......@@ -14,6 +14,11 @@
}
],
"preloadedDependencies": [
{
"machineName": "H5P.API",
"majorVersion": 1,
"minorVersion": 0
},
{
"machineName": "flowplayer",
"majorVersion": 1,
......
var H5P = H5P || {};
if (H5P.getPath === undefined) {
/**
* Find the path to the content files based on the id of the content
*
* Also identifies and returns absolute paths
*
* @param {String} path Absolute path to a file, or relative path to a file in the content folder
* @param {Number} contentId Identifier of the content requesting the path
* @returns {String} The path to use.
*/
H5P.getPath = function (path, contentId) {
if (path.substr(0, 7) === 'http://' || path.substr(0, 8) === 'https://') {
return path;
}
return H5PIntegration.getContentPath(contentId) + path;
};
}
/**
* Constructor.
*
* @param {object} params Options for this library.
* @param {string} contentPath The path to our content folder.
* @param {Object} params Options for this library.
* @param {Number} id Content identifier
* @returns {undefined}
*/
H5P.Audio = function (params, contentPath) {
H5P.Audio = function (params, id) {
this.params = params;
this.contentPath = contentPath;
this.contentId = id;
};
/**
......@@ -26,13 +46,13 @@ H5P.Audio.prototype.attach = function ($wrapper) {
}
// Add supported source files.
if (this.params.files !== undefined) {
if (this.params.files !== undefined && this.params.files instanceof Object) {
for (var i = 0; i < this.params.files.length; i++) {
var file = this.params.files[i];
if (audio.canPlayType(file.mime)) {
var source = document.createElement('source');
source.src = this.contentPath + file.path;
source.src = H5P.getPath(file.path, this.contentId);
source.type = file.mime;
audio.appendChild(source);
}
......@@ -69,11 +89,11 @@ H5P.Audio.prototype.attach = function ($wrapper) {
* @param {jQuery} $wrapper Our dear container.
*/
H5P.Audio.prototype.attachFlash = function ($wrapper) {
if (this.params.files !== undefined) {
if (this.params.files !== undefined && this.params.files instanceof Object) {
for (var i = 0; i < this.params.files.length; i++) {
var file = this.params.files[i];
if (file.mime === 'audio/mpeg' || file.mime === 'audio/mp3') {
var audioSource = this.contentPath + file.path;
var audioSource = H5P.getPath(file.path, this.contentId);
break;
}
}
......
......@@ -51,7 +51,7 @@
"optional": true,
"regexp": {
"pattern": "^http[s]?://.+",
"modifiers": "gi"
"modifiers": "i"
}
},
{
......
.h5p-blanks {
position: relative;
background-color: #F5F5F5;
overflow: hidden;
}
.h5p-blanks .blanks-panel {
overflow: hidden;
padding: 1em;
}
.h5p-blanks .h5p-answer-panel {
display: block;
position: absolute;
background-color: #EEEEEE;
z-index: 1;
}
.h5p-blanks .h5p-answer-panel .h5p-score {
padding-left: 1.5em;
}
.h5p-blanks .h5p-answer-question {
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color: #ededed;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #dcdcdc;
color: #777777;
font-family: arial;
font-size: 0.875em;
font-weight: bold;
padding: 0.3em 1em;
text-decoration: none;
text-shadow: 1px 1px 0px #ffffff;
margin: 0.4em;
}
.h5p-blanks .h5p-correct-answer {
color: green;
}
.h5p-blanks .h5p-answer-list {
color: green;
}
.h5p-blanks .h5p-wrong-answer {
text-decoration: line-through;
color: red;
}
.h5p-blanks .h5p-blanks-panel {
overflow: hidden;
position: relative;
padding: 1.5em;
padding-bottom: 5em;
}
.h5p-blanks .h5p-blanks-question {
padding-top: 1em;
font-size: 1em;
}
.h5p-blanks .h5p-button {
float: right;
cursor: pointer;
color: #2d2c28;
font-size: 1.1em;
padding: 0.4em 0.7em;
text-align: center;
border: 1px solid #808080;
border-radius: 4px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e0e0e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e0e0e0 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e0e0e0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
bottom: 0.8em;
right: 0.8em;
margin-top: 0.8em;
}
.h5p-blanks .h5p-button:hover {
background: #dddddd; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e3f5ab 47%, #c2ef6e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#e3f5ab), color-stop(100%,#c2ef6e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e3f5ab 47%,#c2ef6e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e3f5ab 47%,#c2ef6e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e3f5ab 47%,#c2ef6e 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e3f5ab 47%,#c2ef6e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c2ef6e',GradientType=0 ); /* IE6-9 */
}
.h5p-blanks .h5p-answer-panel .h5p-button {
margin: 0.8em;
}
.h5p-blanks input.h5p-blanks-input {
width: 7em;
font-size: 1em;
}
\ No newline at end of file
var H5P = H5P || {};
H5P.Blanks = function (options, contentId) {
var that = this;
var $panel;
var $answerPanel;
var $ = H5P.jQuery;
var userAnswers = [];
this.options = H5P.jQuery.extend({}, {
text: "Fill in",
questions: [
"2 + 2 = *4*"
],
score: "You got @score of @total points.",
showSolutions: "Show solutions",
close: "Close"
}, options);
if (!this instanceof H5P.Blanks){
return new H5P.Blanks(options, contentId);
}
var getAnswerGiven = function () {
return userAnswers.length === $panel.find('.h5p-blanks-input').length;
};
var getScore = function () {
var score = 0;
for (var i = 0; i < userAnswers.length; i++) {
var answer = that.options.questions[i].replace(/^.*?\*([^*]+)\*.*$/, '$1').trim().split('/');
for (var j = 0; j < answer.length; j++) {
var userAnswer = userAnswers[i];
score += userAnswer === answer[j].trim() ? 1 : 0;
}
}
return score;
};
var getMaxScore = function () {
return $panel.find('.h5p-blanks-input').length;
};
var showSolutions = function () {
$answerPanel.html('');
$answerPanel.animate({ top: '0%' }, 'slow');
$panel.find('.h5p-blanks-question').each(function (idx, el) {
var $input = $(el).find('input');
if ($input.length === 0) {
return true;
}
var answer = that.options.questions[idx].replace(/^.*?\*([^\*]+)\*.*$/, '$1').trim().split('/');
var list = that.options.questions[idx].replace(/^.*?\*([^\*]+)\*.*$/, '$1').trim();
var userAnswer = $input.val().trim();
var correct = 0;
for (var i = 0; i < answer.length; i++) {
if (userAnswer === answer[i]) {
correct = 1;
break;
}
}
var replace = correct ? '<span class="h5p-correct-answer"><b>✓ ' + userAnswer + '</b></span>' : ' <span class="h5p-wrong-answer">' + userAnswer + '</span> <span class="h5p-answer-list">' + list + '</span>';
var text = that.options.questions[idx].replace(/\*[^\*]+\*/, replace);
addElement($answerPanel, 'h5p-answer-question', {text: text});
});
var score = that.options.score.replace('@score', getScore()).replace('@total', getMaxScore());
addElement($answerPanel, 'h5p-score', { text: score });
addElement($answerPanel, 'h5p-button', { text: that.options.close, click: hideAnswer });