', {'class': WRAPPER_MESSAGE}).appendTo(self.$inner);
this.$charMessage = $('
', {'class': CHAR_MESSAGE}).appendTo($wrapperMessage);
this.$inputField.on('change keyup paste', function () {
if (self.params.maximumLength !== undefined) {
self.$charMessage.html(self.params.remainingChars.replace(/@chars/g, self.computeRemainingChars()));
}
});
this.$inputField.blur(function () {
var xApiTemplate = self.createXAPIEventTemplate('interacted');
var xApiEvent = self.XAPIGenerator.generateXApi(xApiTemplate, self.$inputField.val());
self.trigger(xApiEvent);
});
this.$inputField.trigger('change');
};
/**
* Returns true if input field is not required or non-empty
* @returns {boolean} True if input field is filled or not required
*/
TextInputField.prototype.isRequiredInputFilled = function () {
if (!this.params.requiredField) {
return true;
}
if (this.params.requiredField && this.$inputField.val().length) {
return true;
}
return false;
};
/**
* Retrieves the text input field
* @returns {description:string, value:string} Returns input field
*/
TextInputField.prototype.getInput = function () {
// Strip away HTML from description:
var descriptionDoc = new DOMParser().parseFromString(this.params.taskDescription, 'text/html');
var description = (descriptionDoc.body && descriptionDoc.body.textContent) ? descriptionDoc.body.textContent : '';
// Remove trailing newlines
var cleanedTaskDescription = description
.replace(/^\s+|\s+$/g, '')
.replace(/(
|<\/p>)/img, "");
// Escape html
var descriptionElement = document.createElement('div');
descriptionElement.textContent = cleanedTaskDescription;
return {
description: descriptionElement.innerHTML,
value: this.$inputField.val()
};
};
/**
* Get current state for H5P.Question.
* @return {object} Current state.
*/
TextInputField.prototype.getCurrentState = function () {
// We could have just uses a string, but you never know when you need to store more parameters
return {
'inputField': this.$inputField.val()
};
};
/**
* Set state from previous state.
* @param {object} previousState - PreviousState.
*/
TextInputField.prototype.setState = function (previousState) {
var self = this;
if (previousState === undefined) {
return;
}
if (typeof previousState === 'object' && !Array.isArray(previousState)) {
self.$inputField.html(previousState.inputField || '');
}
};
/**
* Mark field if empty until it's filled.
*/
TextInputField.prototype.markEmptyField = function () {
const self = this;
if (this.$inputField.val().length === 0) {
this.$inputField.addClass('required-input');
}
this.$inputField.one('input', function () {
self.$inputField.removeClass('required-input');
});
};
/**
* Compute the remaining number of characters
* @returns {number} Returns number of characters left
*/
TextInputField.prototype.computeRemainingChars = function () {
return this.maxTextLength - this.$inputField.val().length;
};
/**
* Triggers an 'answered' xAPI event for all inputs
*/
TextInputField.prototype.triggerAnsweredEvent = function () {
var xApiTemplate = this.createXAPIEventTemplate('answered');
var xApiEvent = this.XAPIGenerator.generateXApi(xApiTemplate, this.getCurrentState().inputField);
this.trigger(xApiEvent);
};
/**
* Get xAPI data.
* Contract used by report rendering engine.
*
* @see contract at {@link https://h5p.org/documentation/developers/contracts#guides-header-6}
*/
TextInputField.prototype.getXAPIData = function () {
var xApiTemplate = this.createXAPIEventTemplate('answered');
var xApiEvent = this.XAPIGenerator.generateXApi(xApiTemplate, this.getCurrentState().inputField);
return {
statement: xApiEvent.data.statement
};
};
return TextInputField;
}(H5P.jQuery));
;
var H5P = H5P || {};
H5P.TextInputField = H5P.TextInputField || {};
/**
* Generate xAPI statements
*/
H5P.TextInputField.XAPIGenerator = (function ($) {
function XAPIGenerator(question) {
// Set up default response object
this.event = {
description: {
'en-US': question // We don't actually know the language of the question
},
type: 'http://adlnet.gov/expapi/activities/cmi.interaction',
interactionType: 'fill-in',
};
}
XAPIGenerator.prototype.constructor = XAPIGenerator;
/**
* Extend xAPI template
* @param {H5P.XAPIEvent} xApiTemplate xAPI event template
* @param {string} answer Text input given
* @return {H5P.XAPIEvent} Extended xAPI event
*/
XAPIGenerator.prototype.generateXApi = function (xApiTemplate, answer) {
let statement = xApiTemplate.data.statement;
statement = $.extend(true, statement, {
result: {
response: answer
}
});
if (statement.object) {
statement.object.definition = $.extend(true, statement.object.definition, this.event);
}
return xApiTemplate;
};
return XAPIGenerator;
})(H5P.jQuery);
;
var H5P = H5P || {};
/**
* Constructor.
*
* @param {Object} params Options for this library.
* @param {Number} id Content identifier
* @returns {undefined}
*/
(function ($) {
H5P.Image = function (params, id, extras) {
H5P.EventDispatcher.call(this);
this.extras = extras;
if (params.file === undefined || !(params.file instanceof Object)) {
this.placeholder = true;
}
else {
this.source = H5P.getPath(params.file.path, id);
this.width = params.file.width;
this.height = params.file.height;
}
this.alt = params.alt !== undefined ? params.alt : 'New image';
if (params.title !== undefined) {
this.title = params.title;
}
};
H5P.Image.prototype = Object.create(H5P.EventDispatcher.prototype);
H5P.Image.prototype.constructor = H5P.Image;
/**
* Wipe out the content of the wrapper and put our HTML in it.
*
* @param {jQuery} $wrapper
* @returns {undefined}
*/
H5P.Image.prototype.attach = function ($wrapper) {
var self = this;
var source = this.source;
if (self.$img === undefined) {
if(self.placeholder) {
self.$img = $('
', {
width: '100%',
height: '100%',
class: 'h5p-placeholder',
title: this.title === undefined ? '' : this.title,
on: {
load: function () {
self.trigger('loaded');
}
}
});
} else {
self.$img = $('
', {
width: '100%',
height: '100%',
src: source,
alt: this.alt,
title: this.title === undefined ? '' : this.title,
on: {
load: function () {
self.trigger('loaded');
}
}
});
}
}
$wrapper.addClass('h5p-image').html(self.$img);
};
return H5P.Image;
}(H5P.jQuery));
;
/*!
* mustache.js - Logic-less {{mustache}} templates with JavaScript
* http://github.com/janl/mustache.js
*/
/*global define: false*/
(function (global, factory) {
if (typeof exports === "object" && exports) {
factory(exports); // CommonJS
} else if (typeof define === "function" && define.amd) {
define(['exports'], factory); // AMD
} else {
factory(global.Mustache = {}); //