var H5P = H5P || {};
/**
* Transition contains helper function relevant for transitioning
*/
H5P.Transition = (function ($) {
/**
* @class
* @namespace H5P
*/
Transition = {};
/**
* @private
*/
Transition.transitionEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'transition': 'transitionend',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd'
};
/**
* @private
*/
Transition.cache = [];
/**
* Get the vendor property name for an event
*
* @function H5P.Transition.getVendorPropertyName
* @static
* @private
* @param {string} prop Generic property name
* @return {string} Vendor specific property name
*/
Transition.getVendorPropertyName = function (prop) {
if (Transition.cache[prop] !== undefined) {
return Transition.cache[prop];
}
var div = document.createElement('div');
// Handle unprefixed versions (FF16+, for example)
if (prop in div.style) {
Transition.cache[prop] = prop;
}
else {
var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1);
if (prop in div.style) {
Transition.cache[prop] = prop;
}
else {
for (var i = 0; i < prefixes.length; ++i) {
var vendorProp = prefixes[i] + prop_;
if (vendorProp in div.style) {
Transition.cache[prop] = vendorProp;
break;
}
}
}
}
return Transition.cache[prop];
};
/**
* Get the name of the transition end event
*
* @static
* @private
* @return {string} description
*/
Transition.getTransitionEndEventName = function () {
return Transition.transitionEndEventNames[Transition.getVendorPropertyName('transition')] || undefined;
};
/**
* Helper function for listening on transition end events
*
* @function H5P.Transition.onTransitionEnd
* @static
* @param {domElement} $element The element which is transitioned
* @param {function} callback The callback to be invoked when transition is finished
* @param {number} timeout Timeout in milliseconds. Fallback if transition event is never fired
*/
Transition.onTransitionEnd = function ($element, callback, timeout) {
// Fallback on 1 second if transition event is not supported/triggered
timeout = timeout || 1000;
Transition.transitionEndEventName = Transition.transitionEndEventName || Transition.getTransitionEndEventName();
var callbackCalled = false;
var doCallback = function () {
if (callbackCalled) {
return;
}
$element.off(Transition.transitionEndEventName, callback);
callbackCalled = true;
clearTimeout(timer);
callback();
};
var timer = setTimeout(function () {
doCallback();
}, timeout);
$element.on(Transition.transitionEndEventName, function () {
doCallback();
});
};
/**
* Wait for a transition - when finished, invokes next in line
*
* @private
*
* @param {Object[]} transitions Array of transitions
* @param {H5P.jQuery} transitions[].$element Dom element transition is performed on
* @param {number=} transitions[].timeout Timeout fallback if transition end never is triggered
* @param {bool=} transitions[].break If true, sequence breaks after this transition
* @param {number} index The index for current transition
*/
var runSequence = function (transitions, index) {
if (index >= transitions.length) {
return;
}
var transition = transitions[index];
H5P.Transition.onTransitionEnd(transition.$element, function () {
if (transition.end) {
transition.end();
}
if (transition.break !== true) {
runSequence(transitions, index+1);
}
}, transition.timeout || undefined);
};
/**
* Run a sequence of transitions
*
* @function H5P.Transition.sequence
* @static
* @param {Object[]} transitions Array of transitions
* @param {H5P.jQuery} transitions[].$element Dom element transition is performed on
* @param {number=} transitions[].timeout Timeout fallback if transition end never is triggered
* @param {bool=} transitions[].break If true, sequence breaks after this transition
*/
Transition.sequence = function (transitions) {
runSequence(transitions, 0);
};
return Transition;
})(H5P.jQuery);
;
var H5P = H5P || {};
/**
* Class responsible for creating a help text dialog
*/
H5P.JoubelHelpTextDialog = (function ($) {
var numInstances = 0;
/**
* Display a pop-up containing a message.
*
* @param {H5P.jQuery} $container The container which message dialog will be appended to
* @param {string} message The message
* @param {string} closeButtonTitle The title for the close button
* @return {H5P.jQuery}
*/
function JoubelHelpTextDialog(header, message, closeButtonTitle) {
H5P.EventDispatcher.call(this);
var self = this;
numInstances++;
var headerId = 'joubel-help-text-header-' + numInstances;
var helpTextId = 'joubel-help-text-body-' + numInstances;
var $helpTextDialogBox = $('<div>', {
'class': 'joubel-help-text-dialog-box',
'role': 'dialog',
'aria-labelledby': headerId,
'aria-describedby': helpTextId
});
$('<div>', {
'class': 'joubel-help-text-dialog-background'
}).appendTo($helpTextDialogBox);
var $helpTextDialogContainer = $('<div>', {
'class': 'joubel-help-text-dialog-container'
}).appendTo($helpTextDialogBox);
$('<div>', {
'class': 'joubel-help-text-header',
'id': headerId,
'role': 'header',
'html': header
}).appendTo($helpTextDialogContainer);
$('<div>', {
'class': 'joubel-help-text-body',
'id': helpTextId,
'html': message,
'role': 'document',
'tabindex': 0
}).appendTo($helpTextDialogContainer);
var handleClose = function () {
$helpTextDialogBox.remove();
self.trigger('closed');
};
var $closeButton = $('<div>', {
'class': 'joubel-help-text-remove',
'role': 'button',
'title': closeButtonTitle,
'tabindex': 1,
'click': handleClose,
'keydown': function (event) {
// 32 - space, 13 - enter
if ([32, 13].indexOf(event.which) !== -1) {
event.preventDefault();
handleClose();
}
}
}).appendTo($helpTextDialogContainer);
/**
* Get the DOM element
* @return {HTMLElement}
*/
self.getElement = function () {
return $helpTextDialogBox;
};
self.focus = function () {
$closeButton.focus();
};
}
JoubelHelpTextDialog.prototype = Object.create(H5P.EventDispatcher.prototype);
JoubelHelpTextDialog.prototype.constructor = JoubelHelpTextDialog;
return JoubelHelpTextDialog;
}(H5P.jQuery));
;
var H5P = H5P || {};
/**
* Class responsible for creating auto-disappearing dialogs
*/
H5P.JoubelMessageDialog = (function ($) {
/**
* Display a pop-up containing a message.
*
* @param {H5P.jQuery} $container The container which message dialog will be appended to
* @param {string} message The message
* @return {H5P.jQuery}
*/
function JoubelMessageDialog ($container, message) {
var timeout;
var removeDialog = function () {
$warning.remove();
clearTimeout(timeout);
$container.off('click.messageDialog');
};
// Create warning popup:
var $warning = $('<div/>', {
'class': 'joubel-message-dialog',
text: message
}).appendTo($container);
// Remove after 3 seconds or if user clicks anywhere in $container:
timeout = setTimeout(removeDialog, 3000);
$container.on('click.messageDialog', removeDialog);
return $warning;
}
return JoubelMessageDialog;
})(H5P.jQuery);
;
var H5P = H5P || {};
/**
* Class responsible for creating a circular progress bar
*/
H5P.JoubelProgressCircle = (function ($) {
/**
* Constructor for the Progress Circle
*
* @param {Number} number The amount of progress to display
* @param {string} progressColor Color for the progress meter
* @param {string} backgroundColor Color behind the progress meter
*/
function ProgressCircle(number, progressColor, fillColor, backgroundColor) {
progressColor = progressColor || '#1a73d9';
fillColor = fillColor || '#f0f0f0';
backgroundColor = backgroundColor || '#ffffff';
var progressColorRGB = this.hexToRgb(progressColor);
//Verify number
try {
number = Number(number);
if (number === '') {
throw 'is empty';
}
if (isNaN(number)) {
throw 'is not a number';
}
} catch (e) {
number = 'err';
}
//Draw circle
if (number > 100) {
number = 100;
}
// We can not use rgba, since they will stack on top of each other.
// Instead we create the equivalent of the rgba color
// and applies this to the activeborder and background color.
var progressColorString = 'rgb(' + parseInt(progressColorRGB.r, 10) +
',' + parseInt(progressColorRGB.g, 10) +
',' + parseInt(progressColorRGB.b, 10) + ')';
// Circle wrapper
var $wrapper = $('<div/>', {
'class': "joubel-progress-circle-wrapper"
});
//Active border indicates progress
var $activeBorder = $('<div/>', {
'class': "joubel-progress-circle-active-border"
}).appendTo($wrapper);
//Background circle
var $backgroundCircle = $('<div/>', {
'class': "joubel-progress-circle-circle"
}).appendTo($activeBorder);
//Progress text/number
$('<span/>', {
'text': number + '%',
'class': "joubel-progress-circle-percentage"
}).appendTo($backgroundCircle);
var deg = number * 3.6;
if (deg <= 180) {
$activeBorder.css('background-image',
'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, ' + fillColor + ' 50%),' +
'linear-gradient(90deg, ' + fillColor + ' 50%, transparent 50%)')
.css('border', '2px solid' + backgroundColor)
.css('background-color', progressColorString);
} else {
$activeBorder.css('background-image',
'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, ' + progressColorString + ' 50%),' +
'linear-gradient(90deg, ' + fillColor + ' 50%, transparent 50%)')
.css('border', '2px solid' + backgroundColor)
.css('background-color', progressColorString);
}
this.$activeBorder = $activeBorder;
this.$backgroundCircle = $backgroundCircle;
this.$wrapper = $wrapper;
this.initResizeFunctionality();
return $wrapper;
}
/**
* Initializes resize functionality for the progress circle
*/
ProgressCircle.prototype.initResizeFunctionality = function () {
var self = this;
$(window).resize(function () {
// Queue resize
setTimeout(function () {
self.resize();
});
});
// First resize
setTimeout(function () {
self.resize();
}, 0);
};
/**
* Resize function makes progress circle grow or shrink relative to parent container
*/
ProgressCircle.prototype.resize = function () {
var $parent = this.$wrapper.parent();
if ($parent !== undefined && $parent) {
// Measurements
var fontSize = parseInt($parent.css('font-size'), 10);
// Static sizes
var fontSizeMultiplum = 3.75;
var progressCircleWidthPx = parseInt((fontSize / 4.5), 10) % 2 === 0 ? parseInt((fontSize / 4.5), 10) + 4 : parseInt((fontSize / 4.5), 10) + 5;
var progressCircleOffset = progressCircleWidthPx / 2;
var width = fontSize * fontSizeMultiplum;
var height = fontSize * fontSizeMultiplum;
this.$activeBorder.css({
'width': width,
'height': height
});
this.$backgroundCircle.css({
'width': width - progressCircleWidthPx,
'height': height - progressCircleWidthPx,
'top': progressCircleOffset,
'left': progressCircleOffset
});
}
};
/**
* Hex to RGB conversion
* @param hex
* @returns {{r: Number, g: Number, b: Number}}
*/
ProgressCircle.prototype.hexToRgb = function (hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
};
return ProgressCircle;
}(H5P.jQuery));
;
var H5P = H5P || {};
H5P.SimpleRoundedButton = (function ($) {
/**
* Creates a new tip
*/
function SimpleRoundedButton(text) {
var $simpleRoundedButton = $('<div>', {
'class': 'joubel-simple-rounded-button',
'title': text,
'role': 'button',
'tabindex': '0'
}).keydown(function (e) {
// 32 - space, 13 - enter
if ([32, 13].indexOf(e.which) !== -1) {
$(this).click();
e.preventDefault();
}
});
$('<span>', {
'class': 'joubel-simple-rounded-button-text',
'html': text
}).appendTo($simpleRoundedButton);
return $simpleRoundedButton;
}
return SimpleRoundedButton;
}(H5P.jQuery));
;
var H5P = H5P || {};
/**
* Class responsible for creating speech bubbles
*/
H5P.JoubelSpeechBubble = (function ($) {
var $currentSpeechBubble;
var $currentContainer;
var $tail;
var $innerTail;
var removeSpeechBubbleTimeout;
var currentMaxWidth;
var DEFAULT_MAX_WIDTH = 400;
var iDevice = navigator.userAgent.match(/iPod|iPhone|iPad/g) ? true : false;
/**
* Creates a new speech bubble
*
* @param {H5P.jQuery} $container The speaking object
* @param {string} text The text to display
* @param {number} maxWidth The maximum width of the bubble
* @return {H5P.JoubelSpeechBubble}
*/
function JoubelSpeechBubble($container, text, maxWidth) {
maxWidth = maxWidth || DEFAULT_MAX_WIDTH;
currentMaxWidth = maxWidth;
$currentContainer = $container;
this.isCurrent = function ($tip) {
return $tip.is($currentContainer);
};
this.remove = function () {
remove();
};
var fadeOutSpeechBubble = function ($speechBubble) {
if (!$speechBubble) {
return;
}
// Stop removing bubble
clearTimeout(removeSpeechBubbleTimeout);
$speechBubble.removeClass('show');
setTimeout(function () {
if ($speechBubble) {
$speechBubble.remove();
$speechBubble = undefined;
}
}, 500);
};
if ($currentSpeechBubble !== undefined) {
remove();
}
var $h5pContainer = getH5PContainer($container);
// Make sure we fade out old speech bubble
fadeOutSpeechBubble($currentSpeechBubble);
// Create bubble
$tail = $('<div class="joubel-speech-bubble-tail"></div>');
$innerTail = $('<div class="joubel-speech-bubble-inner-tail"></div>');
var $innerBubble = $(
'<div class="joubel-speech-bubble-inner">' +
'<div class="joubel-speech-bubble-text">' + text + '</div>' +
'</div>'
).prepend($innerTail);
$currentSpeechBubble = $(
'<div class="joubel-speech-bubble" aria-live="assertive">'
).append([$tail, $innerBubble])
.appendTo($h5pContainer);
// Show speech bubble with transition
setTimeout(function () {
$currentSpeechBubble.addClass('show');
}, 0);
position($currentSpeechBubble, $currentContainer, maxWidth, $tail, $innerTail);
// Handle click to close
H5P.$body.on('mousedown.speechBubble', handleOutsideClick);
// Handle window resizing
H5P.$window.on('resize', '', handleResize);
// Handle clicks when inside IV which blocks bubbling.
$container.parents('.h5p-dialog')
.on('mousedown.speechBubble', handleOutsideClick);
if (iDevice) {
H5P.$body.css('cursor', 'pointer');
}
return this;
}
// Remove speechbubble if it belongs to a dom element that is about to be hidden
H5P.externalDispatcher.on('domHidden', function (event) {
if ($currentSpeechBubble !== undefined && event.data.$dom.find($currentContainer).length !== 0) {
remove();
}
});
/**
* Returns the closest h5p container for the given DOM element.
*
* @param {object} $container jquery element
* @return {object} the h5p container (jquery element)
*/
function getH5PContainer($container) {
var $h5pContainer = $container.closest('.h5p-frame');
// Check closest h5p frame first, then check for container in case there is no frame.
if (!$h5pContainer.length) {
$h5pContainer = $container.closest('.h5p-container');
}
return $h5pContainer;
}
/**
* Event handler that is called when the window is resized.
*/
function handleResize() {
position($currentSpeechBubble, $currentContainer, currentMaxWidth, $tail, $innerTail);
}
/**
* Repositions the speech bubble according to the position of the container.
*
* @param {object} $currentSpeechbubble the speech bubble that should be positioned
* @param {object} $container the container to which the speech bubble should point
* @param {number} maxWidth the maximum width of the speech bubble
* @param {object} $tail the tail (the triangle that points to the referenced container)
* @param {object} $innerTail the inner tail (the triangle that points to the referenced container)
*/
function position($currentSpeechBubble, $container, maxWidth, $tail, $innerTail) {
var $h5pContainer = getH5PContainer($container);
// Calculate offset between the button and the h5p frame
var offset = getOffsetBetween($h5pContainer, $container);
var direction = (offset.bottom > offset.top ? 'bottom' : 'top');
var tipWidth = offset.outerWidth * 0.9; // Var needs to be renamed to make sense
var bubbleWidth = tipWidth > maxWidth ? maxWidth : tipWidth;
var bubblePosition = getBubblePosition(bubbleWidth, offset);
var tailPosition = getTailPosition(bubbleWidth, bubblePosition, offset, $container.width());
// Need to set font-size, since element is appended to body.
// Using same font-size as parent. In that way it will grow accordingly
// when resizing
var fontSize = 16;//parseFloat($parent.css('font-size'));
// Set width and position of speech bubble
$currentSpeechBubble.css(bubbleCSS(
direction,
bubbleWidth,
bubblePosition,
fontSize
));
var preparedTailCSS = tailCSS(direction, tailPosition);
$tail.css(preparedTailCSS);
$innerTail.css(preparedTailCSS);
}
/**
* Static function for removing the speechbubble
*/
var remove = function () {
H5P.$body.off('mousedown.speechBubble');
H5P.$window.off('resize', '', handleResize);
$currentContainer.parents('.h5p-dialog').off('mousedown.speechBubble');
if (iDevice) {
H5P.$body.css('cursor', '');
}
if ($currentSpeechBubble !== undefined) {
// Apply transition, then remove speech bubble
$currentSpeechBubble.removeClass('show');
// Make sure we remove any old timeout before reassignment
clearTimeout(removeSpeechBubbleTimeout);
removeSpeechBubbleTimeout = setTimeout(function () {
$currentSpeechBubble.remove();
$currentSpeechBubble = undefined;
}, 500);
}
// Don't return false here. If the user e.g. clicks a button when the bubble is visible,
// we want the bubble to disapear AND the button to receive the event
};
/**
* Remove the speech bubble and container reference
*/
function handleOutsideClick(event) {
if (event.target === $currentContainer[0]) {
return; // Button clicks are not outside clicks
}
remove();
// There is no current container when a container isn't clicked
$currentContainer = undefined;
}
/**
* Calculate position for speech bubble
*
* @param {number} bubbleWidth The width of the speech bubble
* @param {object} offset
* @return {object} Return position for the speech bubble
*/
function getBubblePosition(bubbleWidth, offset) {
var bubblePosition = {};
var tailOffset = 9;
var widthOffset = bubbleWidth / 2;
// Calculate top position
bubblePosition.top = offset.top + offset.innerHeight;
// Calculate bottom position
bubblePosition.bottom = offset.bottom + offset.innerHeight + tailOffset;
// Calculate left position
if (offset.left < widthOffset) {
bubblePosition.left = 3;
}
else if ((offset.left + widthOffset) > offset.outerWidth) {
bubblePosition.left = offset.outerWidth - bubbleWidth - 3;
}
else {
bubblePosition.left = offset.left - widthOffset + (offset.innerWidth / 2);
}
return bubblePosition;
}
/**
* Calculate position for speech bubble tail
*
* @param {number} bubbleWidth The width of the speech bubble
* @param {object} bubblePosition Speech bubble position
* @param {object} offset
* @param {number} iconWidth The width of the tip icon
* @return {object} Return position for the tail
*/
function getTailPosition(bubbleWidth, bubblePosition, offset, iconWidth) {
var tailPosition = {};
// Magic numbers. Tuned by hand so that the tail fits visually within
// the bounds of the speech bubble.
var leftBoundary = 9;
var rightBoundary = bubbleWidth - 20;
tailPosition.left = offset.left - bubblePosition.left + (iconWidth / 2) - 6;
if (tailPosition.left < leftBoundary) {
tailPosition.left = leftBoundary;
}
if (tailPosition.left > rightBoundary) {
tailPosition.left = rightBoundary;
}
tailPosition.top = -6;
tailPosition.bottom = -6;
return tailPosition;
}
/**
* Return bubble CSS for the desired growth direction
*
* @param {string} direction The direction the speech bubble will grow
* @param {number} width The width of the speech bubble
* @param {object} position Speech bubble position
* @param {number} fontSize The size of the bubbles font
* @return {object} Return CSS
*/
function bubbleCSS(direction, width, position, fontSize) {
if (direction === 'top') {
return {
width: width + 'px',
bottom: position.bottom + 'px',
left: position.left + 'px',
fontSize: fontSize + 'px',
top: ''
};
}
else {
return {
width: width + 'px',
top: position.top + 'px',
left: position.left + 'px',
fontSize: fontSize + 'px',
bottom: ''
};
}
}
/**
* Return tail CSS for the desired growth direction
*
* @param {string} direction The direction the speech bubble will grow
* @param {object} position Tail position
* @return {object} Return CSS
*/
function tailCSS(direction, position) {
if (direction === 'top') {
return {
bottom: position.bottom + 'px',
left: position.left + 'px',
top: ''
};
}
else {
return {
top: position.top + 'px',
left: position.left + 'px',
bottom: ''
};
}
}
/**
* Calculates the offset between an element inside a container and the
* container. Only works if all the edges of the inner element are inside the
* outer element.
* Width/height of the elements is included as a convenience.
*
* @param {H5P.jQuery} $outer
* @param {H5P.jQuery} $inner
* @return {object} Position offset
*/
function getOffsetBetween($outer, $inner) {
var outer = $outer[0].getBoundingClientRect();
var inner = $inner[0].getBoundingClientRect();
return {
top: inner.top - outer.top,
right: outer.right - inner.right,
bottom: outer.bottom - inner.bottom,
left: inner.left - outer.left,
innerWidth: inner.width,
innerHeight: inner.height,
outerWidth: outer.width,
outerHeight: outer.height
};
}
return JoubelSpeechBubble;
})(H5P.jQuery);
;
var H5P = H5P || {};
H5P.JoubelThrobber = (function ($) {
/**
* Creates a new tip
*/
function JoubelThrobber() {
// h5p-throbber css is described in core
var $throbber = $('<div/>', {
'class': 'h5p-throbber'
});
return $throbber;
}
return JoubelThrobber;
}(H5P.jQuery));
;
H5P.JoubelTip = (function ($) {
var $conv = $('<div/>');
/**
* Creates a new tip element.
*
* NOTE that this may look like a class but it doesn't behave like one.
* It returns a jQuery object.
*
* @param {string} tipHtml The text to display in the popup
* @param {Object} [behaviour] Options
* @param {string} [behaviour.tipLabel] Set to use a custom label for the tip button (you want this for good A11Y)
* @param {boolean} [behaviour.helpIcon] Set to 'true' to Add help-icon classname to Tip button (changes the icon)
* @param {boolean} [behaviour.showSpeechBubble] Set to 'false' to disable functionality (you may this in the editor)
* @param {boolean} [behaviour.tabcontrol] Set to 'true' if you plan on controlling the tabindex in the parent (tabindex="-1")
* @return {H5P.jQuery|undefined} Tip button jQuery element or 'undefined' if invalid tip
*/
function JoubelTip(tipHtml, behaviour) {
// Keep track of the popup that appears when you click the Tip button
var speechBubble;
// Parse tip html to determine text
var tipText = $conv.html(tipHtml).text().trim();
if (tipText === '') {
return; // The tip has no textual content, i.e. it's invalid.
}
// Set default behaviour
behaviour = $.extend({
tipLabel: tipText,
helpIcon: false,
showSpeechBubble: true,
tabcontrol: false
}, behaviour);
// Create Tip button
var $tipButton = $('<div/>', {
class: 'joubel-tip-container' + (behaviour.showSpeechBubble ? '' : ' be-quiet'),
'aria-label': behaviour.tipLabel,
'aria-expanded': false,
role: 'button',
tabindex: (behaviour.tabcontrol ? -1 : 0),
click: function (event) {
// Toggle show/hide popup
toggleSpeechBubble();
event.preventDefault();
},
keydown: function (event) {
if (event.which === 32 || event.which === 13) { // Space & enter key
// Toggle show/hide popup
toggleSpeechBubble();
event.stopPropagation();
event.preventDefault();
}
else { // Any other key
// Toggle hide popup
toggleSpeechBubble(false);
}
},
// Add markup to render icon
html: '<span class="joubel-icon-tip-normal ' + (behaviour.helpIcon ? ' help-icon': '') + '">' +
'<span class="h5p-icon-shadow"></span>' +
'<span class="h5p-icon-speech-bubble"></span>' +
'<span class="h5p-icon-info"></span>' +
'</span>'
// IMPORTANT: All of the markup elements must have 'pointer-events: none;'
});
const $tipAnnouncer = $('<div>', {
'class': 'hidden-but-read',
'aria-live': 'polite',
appendTo: $tipButton,
});
/**
* Tip button interaction handler.
* Toggle show or hide the speech bubble popup when interacting with the
* Tip button.
*
* @private
* @param {boolean} [force] 'true' shows and 'false' hides.
*/
var toggleSpeechBubble = function (force) {
if (speechBubble !== undefined && speechBubble.isCurrent($tipButton)) {
// Hide current popup
speechBubble.remove();
speechBubble = undefined;
$tipButton.attr('aria-expanded', false);
$tipAnnouncer.html('');
}
else if (force !== false && behaviour.showSpeechBubble) {
// Create and show new popup
speechBubble = H5P.JoubelSpeechBubble($tipButton, tipHtml);
$tipButton.attr('aria-expanded', true);
$tipAnnouncer.html(tipHtml);
}
};
return $tipButton;
}
return JoubelTip;
})(H5P.jQuery);
;
var H5P = H5P || {};
H5P.JoubelSlider = (function ($) {
/**
* Creates a new Slider
*
* @param {object} [params] Additional parameters
*/
function JoubelSlider(params) {
H5P.EventDispatcher.call(this);
this.$slider = $('<div>', $.extend({
'class': 'h5p-joubel-ui-slider'
}, params));
this.$slides = [];
this.currentIndex = 0;
this.numSlides = 0;
}
JoubelSlider.prototype = Object.create(H5P.EventDispatcher.prototype);
JoubelSlider.prototype.constructor = JoubelSlider;
JoubelSlider.prototype.addSlide = function ($content) {
$content.addClass('h5p-joubel-ui-slide').css({
'left': (this.numSlides*100) + '%'
});
this.$slider.append($content);
this.$slides.push($content);
this.numSlides++;
if(this.numSlides === 1) {
$content.addClass('current');
}
};
JoubelSlider.prototype.attach = function ($container) {
$container.append(this.$slider);
};
JoubelSlider.prototype.move = function (index) {
var self = this;
if(index === 0) {
self.trigger('first-slide');
}
if(index+1 === self.numSlides) {
self.trigger('last-slide');
}
self.trigger('move');
var $previousSlide = self.$slides[this.currentIndex];
H5P.Transition.onTransitionEnd(this.$slider, function () {
$previousSlide.removeClass('current');
self.trigger('moved');
});
this.$slides[index].addClass('current');
var translateX = 'translateX(' + (-index*100) + '%)';
this.$slider.css({
'-webkit-transform': translateX,
'-moz-transform': translateX,
'-ms-transform': translateX,
'transform': translateX
});
this.currentIndex = index;
};
JoubelSlider.prototype.remove = function () {
this.$slider.remove();
};
JoubelSlider.prototype.next = function () {
if(this.currentIndex+1 >= this.numSlides) {
return;
}
this.move(this.currentIndex+1);
};
JoubelSlider.prototype.previous = function () {
this.move(this.currentIndex-1);
};
JoubelSlider.prototype.first = function () {
this.move(0);
};
JoubelSlider.prototype.last = function () {
this.move(this.numSlides-1);
};
return JoubelSlider;
})(H5P.jQuery);
;
var H5P = H5P || {};
/**
* @module
*/
H5P.JoubelScoreBar = (function ($) {
/* Need to use an id for the star SVG since that is the only way to reference
SVG filters */
var idCounter = 0;
/**
* Creates a score bar
* @class H5P.JoubelScoreBar
* @param {number} maxScore Maximum score
* @param {string} [label] Makes it easier for readspeakers to identify the scorebar
* @param {string} [helpText] Score explanation
* @param {string} [scoreExplanationButtonLabel] Label for score explanation button
*/
function JoubelScoreBar(maxScore, label, helpText, scoreExplanationButtonLabel) {
var self = this;
self.maxScore = maxScore;
self.score = 0;
idCounter++;
/**
* @const {string}
*/
self.STAR_MARKUP = '<svg tabindex="-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.77 53.87" aria-hidden="true" focusable="false">' +
'<title>star</title>' +
'<filter tabindex="-1" id="h5p-joubelui-score-bar-star-inner-shadow-' + idCounter + '" x0="-50%" y0="-50%" width="200%" height="200%">' +
'<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"></feGaussianBlur>' +
'<feOffset dy="2" dx="4"></feOffset>' +
'<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>' +
'<feFlood flood-color="#ffe95c" flood-opacity="1"></feFlood>' +
'<feComposite in2="shadowDiff" operator="in"></feComposite>' +
'<feComposite in2="SourceGraphic" operator="over" result="firstfilter"></feComposite>' +
'<feGaussianBlur in="firstfilter" stdDeviation="3" result="blur2"></feGaussianBlur>' +
'<feOffset dy="-2" dx="-4"></feOffset>' +
'<feComposite in2="firstfilter" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>' +
'<feFlood flood-color="#ffe95c" flood-opacity="1"></feFlood>' +
'<feComposite in2="shadowDiff" operator="in"></feComposite>' +
'<feComposite in2="firstfilter" operator="over"></feComposite>' +
'</filter>' +
'<path tabindex="-1" class="h5p-joubelui-score-bar-star-shadow" d="M35.08,43.41V9.16H20.91v0L9.51,10.85,9,10.93C2.8,12.18,0,17,0,21.25a11.22,11.22,0,0,0,3,7.48l8.73,8.53-1.07,6.16Z"/>' +
'<g tabindex="-1">' +
'<path tabindex="-1" class="h5p-joubelui-score-bar-star-border" d="M61.36,22.8,49.72,34.11l2.78,16a2.6,2.6,0,0,1,.05.64c0,.85-.37,1.6-1.33,1.6A2.74,2.74,0,0,1,49.94,52L35.58,44.41,21.22,52a2.93,2.93,0,0,1-1.28.37c-.91,0-1.33-.75-1.33-1.6,0-.21.05-.43.05-.64l2.78-16L9.8,22.8A2.57,2.57,0,0,1,9,21.25c0-1,1-1.33,1.81-1.49l16.07-2.35L34.09,2.83c.27-.59.85-1.33,1.55-1.33s1.28.69,1.55,1.33l7.21,14.57,16.07,2.35c.75.11,1.81.53,1.81,1.49A3.07,3.07,0,0,1,61.36,22.8Z"/>' +
'<path tabindex="-1" class="h5p-joubelui-score-bar-star-fill" d="M61.36,22.8,49.72,34.11l2.78,16a2.6,2.6,0,0,1,.05.64c0,.85-.37,1.6-1.33,1.6A2.74,2.74,0,0,1,49.94,52L35.58,44.41,21.22,52a2.93,2.93,0,0,1-1.28.37c-.91,0-1.33-.75-1.33-1.6,0-.21.05-.43.05-.64l2.78-16L9.8,22.8A2.57,2.57,0,0,1,9,21.25c0-1,1-1.33,1.81-1.49l16.07-2.35L34.09,2.83c.27-.59.85-1.33,1.55-1.33s1.28.69,1.55,1.33l7.21,14.57,16.07,2.35c.75.11,1.81.53,1.81,1.49A3.07,3.07,0,0,1,61.36,22.8Z"/>' +
'<path tabindex="-1" filter="url(#h5p-joubelui-score-bar-star-inner-shadow-' + idCounter + ')" class="h5p-joubelui-score-bar-star-fill-full-score" d="M61.36,22.8,49.72,34.11l2.78,16a2.6,2.6,0,0,1,.05.64c0,.85-.37,1.6-1.33,1.6A2.74,2.74,0,0,1,49.94,52L35.58,44.41,21.22,52a2.93,2.93,0,0,1-1.28.37c-.91,0-1.33-.75-1.33-1.6,0-.21.05-.43.05-.64l2.78-16L9.8,22.8A2.57,2.57,0,0,1,9,21.25c0-1,1-1.33,1.81-1.49l16.07-2.35L34.09,2.83c.27-.59.85-1.33,1.55-1.33s1.28.69,1.55,1.33l7.21,14.57,16.07,2.35c.75.11,1.81.53,1.81,1.49A3.07,3.07,0,0,1,61.36,22.8Z"/>' +
'</g>' +
'</svg>';
/**
* @function appendTo
* @memberOf H5P.JoubelScoreBar#
* @param {H5P.jQuery} $wrapper Dom container
*/
self.appendTo = function ($wrapper) {
self.$scoreBar.appendTo($wrapper);
};
/**
* Create the text representation of the scorebar .
*
* @private
* @return {string}
*/
var createLabel = function (score) {
if (!label) {
return '';
}
return label.replace(':num', score).replace(':total', self.maxScore);
};
/**
* Creates the html for this widget
*
* @method createHtml
* @private
*/
var createHtml = function () {
// Container div
self.$scoreBar = $('<div>', {
'class': 'h5p-joubelui-score-bar',
});
var $visuals = $('<div>', {
'class': 'h5p-joubelui-score-bar-visuals',
appendTo: self.$scoreBar
});
// The progress bar wrapper
self.$progressWrapper = $('<div>', {
'class': 'h5p-joubelui-score-bar-progress-wrapper',
appendTo: $visuals
});
self.$progress = $('<div>', {
'class': 'h5p-joubelui-score-bar-progress',
'html': createLabel(self.score),
appendTo: self.$progressWrapper
});
// The star
$('<div>', {
'class': 'h5p-joubelui-score-bar-star',
html: self.STAR_MARKUP
}).appendTo($visuals);
// The score container
var $numerics = $('<div>', {
'class': 'h5p-joubelui-score-numeric',
appendTo: self.$scoreBar,
'aria-hidden': true
});
// The current score
self.$scoreCounter = $('<span>', {
'class': 'h5p-joubelui-score-number h5p-joubelui-score-number-counter',
text: 0,
appendTo: $numerics
});
// The separator
$('<span>', {
'class': 'h5p-joubelui-score-number-separator',
text: '/',
appendTo: $numerics
});
// Max score
self.$maxScore = $('<span>', {
'class': 'h5p-joubelui-score-number h5p-joubelui-score-max',
text: self.maxScore,
appendTo: $numerics
});
if (helpText) {
H5P.JoubelUI.createTip(helpText, {
tipLabel: scoreExplanationButtonLabel ? scoreExplanationButtonLabel : helpText,
helpIcon: true
}).appendTo(self.$scoreBar);
self.$scoreBar.addClass('h5p-score-bar-has-help');
}
};
/**
* Set the current score
* @method setScore
* @memberOf H5P.JoubelScoreBar#
* @param {number} score
*/
self.setScore = function (score) {
// Do nothing if score hasn't changed
if (score === self.score) {
return;
}
self.score = score > self.maxScore ? self.maxScore : score;
self.updateVisuals();
};
/**
* Increment score
* @method incrementScore
* @memberOf H5P.JoubelScoreBar#
* @param {number=} incrementBy Optional parameter, defaults to 1
*/
self.incrementScore = function (incrementBy) {
self.setScore(self.score + (incrementBy || 1));
};
/**
* Set the max score
* @method setMaxScore
* @memberOf H5P.JoubelScoreBar#
* @param {number} maxScore The max score
*/
self.setMaxScore = function (maxScore) {
self.maxScore = maxScore;
};
/**
* Updates the progressbar visuals
* @memberOf H5P.JoubelScoreBar#
* @method updateVisuals
*/
self.updateVisuals = function () {
self.$progress.html(createLabel(self.score));
self.$scoreCounter.text(self.score);
self.$maxScore.text(self.maxScore);
setTimeout(function () {
// Start the progressbar animation
self.$progress.css({
width: ((self.score / self.maxScore) * 100) + '%'
});
H5P.Transition.onTransitionEnd(self.$progress, function () {
// If fullscore fill the star and start the animation
self.$scoreBar.toggleClass('h5p-joubelui-score-bar-full-score', self.score === self.maxScore);
self.$scoreBar.toggleClass('h5p-joubelui-score-bar-animation-active', self.score === self.maxScore);
// Only allow the star animation to run once
self.$scoreBar.one("animationend", function() {
self.$scoreBar.removeClass("h5p-joubelui-score-bar-animation-active");
});
}, 600);
}, 300);
};
/**
* Removes all classes
* @method reset
*/
self.reset = function () {
self.$scoreBar.removeClass('h5p-joubelui-score-bar-full-score');
};
createHtml();
}
return JoubelScoreBar;
})(H5P.jQuery);
;
var H5P = H5P || {};
H5P.JoubelProgressbar = (function ($) {
/**
* Joubel progressbar class
* @method JoubelProgressbar
* @constructor
* @param {number} steps Number of steps
* @param {Object} [options] Additional options
* @param {boolean} [options.disableAria] Disable readspeaker assistance
* @param {string} [options.progressText] A progress text for describing
* current progress out of total progress for readspeakers.
* e.g. "Slide :num of :total"
*/
function JoubelProgressbar(steps, options) {
H5P.EventDispatcher.call(this);
var self = this;
this.options = $.extend({
progressText: 'Slide :num of :total'
}, options);
this.currentStep = 0;
this.steps = steps;
this.$progressbar = $('<div>', {
'class': 'h5p-joubelui-progressbar'
});
this.$background = $('<div>', {
'class': 'h5p-joubelui-progressbar-background'
}).appendTo(this.$progressbar);
}
JoubelProgressbar.prototype = Object.create(H5P.EventDispatcher.prototype);
JoubelProgressbar.prototype.constructor = JoubelProgressbar;
JoubelProgressbar.prototype.updateAria = function () {
var self = this;
if (this.options.disableAria) {
return;
}
if (!this.$currentStatus) {
this.$currentStatus = $('<div>', {
'class': 'h5p-joubelui-progressbar-slide-status-text',
'aria-live': 'assertive'
}).appendTo(this.$progressbar);
}
var interpolatedProgressText = self.options.progressText
.replace(':num', self.currentStep)
.replace(':total', self.steps);
this.$currentStatus.html(interpolatedProgressText);
};
/**
* Appends to a container
* @method appendTo
* @param {H5P.jquery} $container
*/
JoubelProgressbar.prototype.appendTo = function ($container) {
this.$progressbar.appendTo($container);
};
/**
* Update progress
* @method setProgress
* @param {number} step
*/
JoubelProgressbar.prototype.setProgress = function (step) {
// Check for valid value:
if (step > this.steps || step < 0) {
return;
}
this.currentStep = step;
this.$background.css({
width: ((this.currentStep/this.steps)*100) + '%'
});
this.updateAria();
};
/**
* Increment progress with 1
* @method next
*/
JoubelProgressbar.prototype.next = function () {
this.setProgress(this.currentStep+1);
};
/**
* Reset progressbar
* @method reset
*/
JoubelProgressbar.prototype.reset = function () {
this.setProgress(0);
};
/**
* Check if last step is reached
* @method isLastStep
* @return {Boolean}
*/
JoubelProgressbar.prototype.isLastStep = function () {
return this.steps === this.currentStep;
};
return JoubelProgressbar;
})(H5P.jQuery);
;
var H5P = H5P || {};
/**
* H5P Joubel UI library.
*
* This is a utility library, which does not implement attach. I.e, it has to bee actively used by
* other libraries
* @module
*/
H5P.JoubelUI = (function ($) {
/**
* The internal object to return
* @class H5P.JoubelUI
* @static
*/
function JoubelUI() {}
/* Public static functions */
/**
* Create a tip icon
* @method H5P.JoubelUI.createTip
* @param {string} text The textual tip
* @param {Object} params Parameters
* @return {H5P.JoubelTip}
*/
JoubelUI.createTip = function (text, params) {
return new H5P.JoubelTip(text, params);
};
/**
* Create message dialog
* @method H5P.JoubelUI.createMessageDialog
* @param {H5P.jQuery} $container The dom container
* @param {string} message The message
* @return {H5P.JoubelMessageDialog}
*/
JoubelUI.createMessageDialog = function ($container, message) {
return new H5P.JoubelMessageDialog($container, message);
};
/**
* Create help text dialog
* @method H5P.JoubelUI.createHelpTextDialog
* @param {string} header The textual header
* @param {string} message The textual message
* @param {string} closeButtonTitle The title for the close button
* @return {H5P.JoubelHelpTextDialog}
*/
JoubelUI.createHelpTextDialog = function (header, message, closeButtonTitle) {
return new H5P.JoubelHelpTextDialog(header, message, closeButtonTitle);
};
/**
* Create progress circle
* @method H5P.JoubelUI.createProgressCircle
* @param {number} number The progress (0 to 100)
* @param {string} progressColor The progress color in hex value
* @param {string} fillColor The fill color in hex value
* @param {string} backgroundColor The background color in hex value
* @return {H5P.JoubelProgressCircle}
*/
JoubelUI.createProgressCircle = function (number, progressColor, fillColor, backgroundColor) {
return new H5P.JoubelProgressCircle(number, progressColor, fillColor, backgroundColor);
};
/**
* Create throbber for loading
* @method H5P.JoubelUI.createThrobber
* @return {H5P.JoubelThrobber}
*/
JoubelUI.createThrobber = function () {
return new H5P.JoubelThrobber();
};
/**
* Create simple rounded button
* @method H5P.JoubelUI.createSimpleRoundedButton
* @param {string} text The button label
* @return {H5P.SimpleRoundedButton}
*/
JoubelUI.createSimpleRoundedButton = function (text) {
return new H5P.SimpleRoundedButton(text);
};
/**
* Create Slider
* @method H5P.JoubelUI.createSlider
* @param {Object} [params] Parameters
* @return {H5P.JoubelSlider}
*/
JoubelUI.createSlider = function (params) {
return new H5P.JoubelSlider(params);
};
/**
* Create Score Bar
* @method H5P.JoubelUI.createScoreBar
* @param {number=} maxScore The maximum score
* @param {string} [label] Makes it easier for readspeakers to identify the scorebar
* @return {H5P.JoubelScoreBar}
*/
JoubelUI.createScoreBar = function (maxScore, label, helpText, scoreExplanationButtonLabel) {
return new H5P.JoubelScoreBar(maxScore, label, helpText, scoreExplanationButtonLabel);
};
/**
* Create Progressbar
* @method H5P.JoubelUI.createProgressbar
* @param {number=} numSteps The total numer of steps
* @param {Object} [options] Additional options
* @param {boolean} [options.disableAria] Disable readspeaker assistance
* @param {string} [options.progressText] A progress text for describing
* current progress out of total progress for readspeakers.
* e.g. "Slide :num of :total"
* @return {H5P.JoubelProgressbar}
*/
JoubelUI.createProgressbar = function (numSteps, options) {
return new H5P.JoubelProgressbar(numSteps, options);
};
/**
* Create standard Joubel button
*
* @method H5P.JoubelUI.createButton
* @param {object} params
* May hold any properties allowed by jQuery. If href is set, an A tag
* is used, if not a button tag is used.
* @return {H5P.jQuery} The jquery element created
*/
JoubelUI.createButton = function(params) {
var type = 'button';
if (params.href) {
type = 'a';
}
else {
params.type = 'button';
}
if (params.class) {
params.class += ' h5p-joubelui-button';
}
else {
params.class = 'h5p-joubelui-button';
}
return $('<' + type + '/>', params);
};
/**
* Fix for iframe scoll bug in IOS. When focusing an element that doesn't have
* focus support by default the iframe will scroll the parent frame so that
* the focused element is out of view. This varies dependening on the elements
* of the parent frame.
*/
if (H5P.isFramed && !H5P.hasiOSiframeScrollFix &&
/iPad|iPhone|iPod/.test(navigator.userAgent)) {
H5P.hasiOSiframeScrollFix = true;
// Keep track of original focus function
var focus = HTMLElement.prototype.focus;
// Override the original focus
HTMLElement.prototype.focus = function () {
// Only focus the element if it supports it natively
if ( (this instanceof HTMLAnchorElement ||
this instanceof HTMLInputElement ||
this instanceof HTMLSelectElement ||
this instanceof HTMLTextAreaElement ||
this instanceof HTMLButtonElement ||
this instanceof HTMLIFrameElement ||
this instanceof HTMLAreaElement) && // HTMLAreaElement isn't supported by Safari yet.
!this.getAttribute('role')) { // Focus breaks if a different role has been set
// In theory this.isContentEditable should be able to recieve focus,
// but it didn't work when tested.
// Trigger the original focus with the proper context
focus.call(this);
}
};
}
return JoubelUI;
})(H5P.jQuery);
;
var H5P = H5P || {};
/**
* H5P-Text Utilities
*
* Some functions that can be useful when dealing with texts in H5P.
*
* @param {H5P.jQuery} $
*/
H5P.TextUtilities = function () {
'use strict';
/**
* Create Text Utilities.
*
* Might be needed later.
*
* @constructor
*/
function TextUtilities () {
}
// Inheritance
TextUtilities.prototype = Object.create(H5P.EventDispatcher.prototype);
TextUtilities.prototype.constructor = TextUtilities;
/** @constant {object} */
TextUtilities.WORD_DELIMITER = /[\s.?!,\';\"]/g;
/**
* Check if a candidate string is considered isolated (in a larger string) by
* checking the symbol before and after the candidate.
*
* @param {string} candidate - String to be looked for.
* @param {string} text - (Larger) string that should contain candidate.
* @param {object} params - Parameters.
* @param {object} params.delimiter - Regular expression containing symbols used to isolate the candidate.
* @return {boolean} True if string is isolated.
*/
TextUtilities.isIsolated = function (candidate, text, params) {
// Sanitization
if (!candidate || !text) {
return;
}
var delimiter = (!!params && !!params.delimiter) ? params.delimiter : TextUtilities.WORD_DELIMITER;
var pos = (!!params && !!params.index && typeof params.index === 'number') ? params.index : text.indexOf(candidate);
if (pos < 0 || pos > text.length-1) {
return false;
}
var pred = (pos === 0 ? '' : text[pos - 1].replace(delimiter, ''));
var succ = (pos + candidate.length === text.length ? '' : text[pos + candidate.length].replace(delimiter, ''));
if (pred !== '' || succ !== '') {
return false;
}
return true;
};
/**
* Check whether two strings are considered to be similar.
* The similarity is temporarily computed by word length and number of number of operations
* required to change one word into the other (Damerau-Levenshtein). It's subject to
* change, cmp. https://github.com/otacke/udacity-machine-learning-engineer/blob/master/submissions/capstone_proposals/h5p_fuzzy_blanks.md
*
* @param {String} string1 - String #1.
* @param {String} string2 - String #2.
* @param {object} params - Parameters.
* @return {boolean} True, if strings are considered to be similar.
*/
TextUtilities.areSimilar = function (string1, string2) {
// Sanitization
if (!string1 || typeof string1 !== 'string') {
return;
}
if (!string2 || typeof string2 !== 'string') {
return;
}
// Just temporariliy this unflexible. Will be configurable via params.
var length = Math.min(string1.length, string2.length);
var levenshtein = H5P.TextUtilities.computeLevenshteinDistance(string1, string2, true);
if (levenshtein === 0) {
return true;
}
if ((length > 9) && (levenshtein <= 2)) {
return true;
}
if ((length > 3) && (levenshtein <= 1)) {
return true;
}
return false;
};
/**
* Compute the (Damerau-)Levenshtein distance for two strings.
*
* The (Damerau-)Levenshtein distance that is returned is equivalent to the
* number of operations that are necessary to transform one string into the
* other. Consequently, lower numbers indicate higher similarity between the
* two strings.
*
* While the Levenshtein distance counts deletions, insertions and mismatches,
* the Damerau-Levenshtein distance also counts swapping two characters as
* only one operation (instead of two mismatches), because this seems to
* happen quite often.
*
* See http://en.wikipedia.org/wiki/Damerau%E2%80%93Levenshtein_distance for details
*
* @public
* @param {string} str1 - String no. 1.
* @param {string} str2 - String no. 2.
* @param {boolean} [countSwapping=false] - If true, swapping chars will count as operation.
* @returns {number} Distance.
*/
TextUtilities.computeLevenshteinDistance = function(str1, str2, countSwapping) {
// sanity checks
if (typeof str1 !== 'string' || typeof str2 !== 'string') {
return undefined;
}
if (countSwapping && typeof countSwapping !== 'boolean') {
countSwapping = false;
}
// degenerate cases
if (str1 === str2) {
return 0;
}
if (str1.length === 0) {
return str2.length;
}
if (str2.length === 0) {
return str1.length;
}
// counter variables
var i, j;
// indicates characters that don't match
var cost;
// matrix for storing distances
var distance = [];
// initialization
for (i = 0; i <= str1.length; i++) {
distance[i] = [i];
}
for (j = 0; j <= str2.length; j++) {
distance[0][j] = j;
}
// computation
for (i = 1; i <= str1.length; i++) {
for (j = 1; j <= str2.length; j++) {
cost = (str1[i-1] === str2[j-1]) ? 0 : 1;
distance[i][j] = Math.min(
distance[i-1][j] + 1, // deletion
distance[i][j-1] + 1, // insertion
distance[i-1][j-1] + cost // mismatch
);
// in Damerau-Levenshtein distance, transpositions are operations
if (countSwapping) {
if (i > 1 && j > 1 && str1[i-1] === str2[j-2] && str1[i-2] === str2[j-1]) {
distance[i][j] = Math.min(distance[i][j], distance[i-2][j-2] + cost);
}
}
}
}
return distance[str1.length][str2.length];
};
/**
* Compute the Jaro(-Winkler) distance for two strings.
*
* The Jaro(-Winkler) distance will return a value between 0 and 1 indicating
* the similarity of two strings. The higher the value, the more similar the
* strings are.
*
* See https://en.wikipedia.org/wiki/Jaro%E2%80%93Winkler_distance for details
*
* It seems that a more generalized implementation of Winkler's modification
* can improve the results. This might be implemented later.
* http://disi.unitn.it/~p2p/RelatedWork/Matching/Hermans_bnaic-2012.pdf
*
* @public
* @param {string} str1 - String no. 1.
* @param {string} str2 - String no. 2.
* @param {boolean} [favorSameStart=false] - If true, strings with same start get higher distance value.
* @param {boolean} [longTolerance=false] - If true, Winkler's tolerance for long words will be used.
* @returns {number} Distance.
*/
TextUtilities.computeJaroDistance = function(str1, str2, favorSameStart, longTolerance) {
// sanity checks
if (typeof str1 !== 'string' || typeof str2 !== 'string') {
return undefined;
}
if (favorSameStart && typeof favorSameStart !== 'boolean') {
favorSameStart = false;
}
if (longTolerance && typeof longTolerance !== 'boolean') {
longTolerance = false;
}
// degenerate cases
if (str1.length === 0 || str2.length === 0) {
return 0;
}
if (str1 === str2) {
return 1;
}
// counter variables
var i, j, k;
// number of matches between both strings
var matches = 0;
// number of transpositions between both strings
var transpositions = 0;
// The Jaro-Winkler distance
var distance = 0;
// length of common prefix up to 4 chars
var l = 0;
// scaling factor, should not exceed 0.25 (Winkler default = 0.1)
var p = 0.1;
// will be used often
var str1Len = str1.length;
var str2Len = str2.length;
// determines the distance that still counts as a match
var matchWindow = Math.floor(Math.max(str1Len, str2Len) / 2)- 1;
// will store matches
var str1Flags = new Array(str1Len);
var str2Flags = new Array(str2Len);
// count matches
for (i = 0; i < str1Len; i++) {
var start = (i >= matchWindow) ? i - matchWindow : 0;
var end = (i + matchWindow <= (str2Len - 1)) ? (i + matchWindow) : (str2Len - 1);
for (j = start; j <= end; j++) {
if (str1Flags[i] !== true && str2Flags[j] !== true && str1[i] === str2[j]) {
str1Flags[i] = str2Flags[j] = true;
matches += 1;
break;
}
}
}
if (matches === 0) {
return 0;
}
// count transpositions
k = 0;
for (i = 0; i < str1Len; i++) {
if (!str1Flags[i]) {
continue;
}
while (!str2Flags[k]) {
k += 1;
}
if (str1[i] !== str2[k]) {
transpositions += 1;
}
k += 1;
}
transpositions = transpositions / 2;
// compute Jaro distance
distance = (matches/str1Len + matches/str2Len + (matches - transpositions) / matches) / 3;
// modification used by Winkler
if (favorSameStart) {
if (distance > 0.7 && str1Len > 3 && str2Len > 3) {
while (str1[l] === str2[l] && l < 4) {
l += 1;
}
distance = distance + l * p * (1 - distance);
// modification for long words
if (longTolerance) {
if (Math.max(str1Len, str2Len) > 4 && matches > l + 1 && 2 * matches >= Math.max(str1Len, str2Len) + l) {
distance += ((1.0 - distance) * ((matches - l - 1) / (str1Len + str2Len - 2 * l + 2)));
}
}
}
}
return distance;
};
/**
* Check whether a text contains a string, but fuzzy.
*
* This function is naive. It moves a window of needle's length (+2)
* over the haystack's text and each move compares for similarity using
* a given string metric. This will be slow for long texts!!!
*
* TODO: You might want to look into the bitap algorithm or experiment
* with regexps
*
* @param {String} needle - String to look for.
* @param {String} haystack - Text to look in.
*/
TextUtilities.fuzzyContains = function (needle, haystack) {
return this.fuzzyFind(needle, haystack).contains;
};
/**
* Find the first position of a fuzzy string within a text
* @param {String} needle - String to look for.
* @param {String} haystack - Text to look in.
*/
TextUtilities.fuzzyIndexOf = function (needle, haystack) {
return this.fuzzyFind(needle, haystack).indexOf;
};
/**
* Find the first fuzzy match of a string within a text
* @param {String} needle - String to look for.
* @param {String} haystack - Text to look in.
*/
TextUtilities.fuzzyMatch = function (needle, haystack) {
return this.fuzzyFind(needle, haystack).match;
};
/**
* Find a fuzzy string with in a text.
* TODO: This could be cleaned ...
* @param {String} needle - String to look for.
* @param {String} haystack - Text to look in.
* @param {object} params - Parameters.
*/
TextUtilities.fuzzyFind = function (needle, haystack, params) {
// Sanitization
if (!needle || typeof needle !== 'string') {
return false;
}
if (!haystack || typeof haystack !== 'string') {
return false;
}
if (params === undefined || params.windowSize === undefined || typeof params.windowSize !== 'number') {
params = {'windowSize': 3};
}
var match;
var found = haystack.split(' ').some(function(hay) {
match = hay;
return H5P.TextUtilities.areSimilar(needle, hay);
});
if (found) {
return {'contains' : found, 'match': match, 'index': haystack.indexOf(match)};
}
// This is not used for single words but for phrases
for (var i = 0; i < haystack.length - needle.length + 1; i++) {
var hay = [];
for (var j = 0; j < params.windowSize; j++) {
hay[j] = haystack.substr(i, needle.length + j);
}
// Checking isIsolated will e.g. prevent finding beginnings of words
for (var j = 0; j < hay.length; j++) {
if (TextUtilities.isIsolated(hay[j], haystack) && TextUtilities.areSimilar(hay[j], needle)) {
match = hay[j];
found = true;
break;
}
}
if (found) {
break;
}
}
if (!found) {
match = undefined;
}
return {'contains' : found, 'match': match, 'index': haystack.indexOf(match)};
};
return TextUtilities;
}();
;
H5P.Tooltip = H5P.Tooltip || function() {};
H5P.Question = (function ($, EventDispatcher, JoubelUI) {
/**
* Extending this class make it alot easier to create tasks for other
* content types.
*
* @class H5P.Question
* @extends H5P.EventDispatcher
* @param {string} type
*/
function Question(type) {
var self = this;
// Inheritance
EventDispatcher.call(self);
// Register default section order
self.order = ['video', 'image', 'audio', 'introduction', 'content', 'explanation', 'feedback', 'scorebar', 'buttons', 'read'];
// Keep track of registered sections
var sections = {};
// Buttons
var buttons = {};
var buttonOrder = [];
// Wrapper when attached
var $wrapper;
// Click element
var clickElement;
// ScoreBar
var scoreBar;
// Keep track of the feedback's visual status.
var showFeedback;
// Keep track of which buttons are scheduled for hiding.
var buttonsToHide = [];
// Keep track of which buttons are scheduled for showing.
var buttonsToShow = [];
// Keep track of the hiding and showing of buttons.
var toggleButtonsTimer;
var toggleButtonsTransitionTimer;
var buttonTruncationTimer;
// Keeps track of initialization of question
var initialized = false;
/**
* @type {Object} behaviour Behaviour of Question
* @property {Boolean} behaviour.disableFeedback Set to true to disable feedback section
*/
var behaviour = {
disableFeedback: false,
disableReadSpeaker: false
};
// Keeps track of thumb state
var imageThumb = true;
// Keeps track of image transitions
var imageTransitionTimer;
// Keep track of whether sections is transitioning.
var sectionsIsTransitioning = false;
// Keep track of auto play state
var disableAutoPlay = false;
// Feedback transition timer
var feedbackTransitionTimer;
// Used when reading messages to the user
var $read, readText;
/**
* Register section with given content.
*
* @private
* @param {string} section ID of the section
* @param {(string|H5P.jQuery)} [content]
*/
var register = function (section, content) {
sections[section] = {};
var $e = sections[section].$element = $('<div/>', {
'class': 'h5p-question-' + section,
});
if (content) {
$e[content instanceof $ ? 'append' : 'html'](content);
}
};
/**
* Update registered section with content.
*
* @private
* @param {string} section ID of the section
* @param {(string|H5P.jQuery)} content
*/
var update = function (section, content) {
if (content instanceof $) {
sections[section].$element.html('').append(content);
}
else {
sections[section].$element.html(content);
}
};
/**
* Insert element with given ID into the DOM.
*
* @private
* @param {array|Array|string[]} order
* List with ordered element IDs
* @param {string} id
* ID of the element to be inserted
* @param {Object} elements
* Maps ID to the elements
* @param {H5P.jQuery} $container
* Parent container of the elements
*/
var insert = function (order, id, elements, $container) {
// Try to find an element id should be after
for (var i = 0; i < order.length; i++) {
if (order[i] === id) {
// Found our pos
while (i > 0 &&
(elements[order[i - 1]] === undefined ||
!elements[order[i - 1]].isVisible)) {
i--;
}
if (i === 0) {
// We are on top.
elements[id].$element.prependTo($container);
}
else {
// Add after element
elements[id].$element.insertAfter(elements[order[i - 1]].$element);
}
elements[id].isVisible = true;
break;
}
}
};
/**
* Make feedback into a popup and position relative to click.
*
* @private
* @param {string} [closeText] Text for the close button
*/
var makeFeedbackPopup = function (closeText) {
var $element = sections.feedback.$element;
var $parent = sections.content.$element;
var $click = (clickElement != null ? clickElement.$element : null);
$element.appendTo($parent).addClass('h5p-question-popup');
if (sections.scorebar) {
sections.scorebar.$element.appendTo($element);
}
$parent.addClass('h5p-has-question-popup');
// Draw the tail
var $tail = $('<div/>', {
'class': 'h5p-question-feedback-tail'
}).hide()
.appendTo($parent);
// Draw the close button
var $close = $('<div/>', {
'class': 'h5p-question-feedback-close',
'tabindex': 0,
'title': closeText,
on: {
click: function (event) {
$element.remove();
$tail.remove();
event.preventDefault();
},
keydown: function (event) {
switch (event.which) {
case 13: // Enter
case 32: // Space
$element.remove();
$tail.remove();
event.preventDefault();
}
}
}
}).hide().appendTo($element);
if ($click != null) {
if ($click.hasClass('correct')) {
$element.addClass('h5p-question-feedback-correct');
$close.show();
sections.buttons.$element.hide();
}
else {
sections.buttons.$element.appendTo(sections.feedback.$element);
}
}
positionFeedbackPopup($element, $click);
};
/**
* Position the feedback popup.
*
* @private
* @param {H5P.jQuery} $element Feedback div
* @param {H5P.jQuery} $click Visual click div
*/
var positionFeedbackPopup = function ($element, $click) {
var $container = $element.parent();
var $tail = $element.siblings('.h5p-question-feedback-tail');
var popupWidth = $element.outerWidth();
var popupHeight = setElementHeight($element);
var space = 15;
var disableTail = false;
var positionY = $container.height() / 2 - popupHeight / 2;
var positionX = $container.width() / 2 - popupWidth / 2;
var tailX = 0;
var tailY = 0;
var tailRotation = 0;
if ($click != null) {
// Edge detection for click, takes space into account
var clickNearTop = ($click[0].offsetTop < space);
var clickNearBottom = ($click[0].offsetTop + $click.height() > $container.height() - space);
var clickNearLeft = ($click[0].offsetLeft < space);
var clickNearRight = ($click[0].offsetLeft + $click.width() > $container.width() - space);
// Click is not in a corner or close to edge, calculate position normally
positionX = $click[0].offsetLeft - popupWidth / 2 + $click.width() / 2;
positionY = $click[0].offsetTop - popupHeight - space;
tailX = positionX + popupWidth / 2 - $tail.width() / 2;
tailY = positionY + popupHeight - ($tail.height() / 2);
tailRotation = 225;
// If popup is outside top edge, position under click instead
if (popupHeight + space > $click[0].offsetTop) {
positionY = $click[0].offsetTop + $click.height() + space;
tailY = positionY - $tail.height() / 2 ;
tailRotation = 45;
}
// If popup is outside left edge, position left
if (positionX < 0) {
positionX = 0;
}
// If popup is outside right edge, position right
if (positionX + popupWidth > $container.width()) {
positionX = $container.width() - popupWidth;
}
// Special cases such as corner clicks, or close to an edge, they override X and Y positions if met
if (clickNearTop && (clickNearLeft || clickNearRight)) {
positionX = $click[0].offsetLeft + (clickNearLeft ? $click.width() : -popupWidth);
positionY = $click[0].offsetTop + $click.height();
disableTail = true;
}
else if (clickNearBottom && (clickNearLeft || clickNearRight)) {
positionX = $click[0].offsetLeft + (clickNearLeft ? $click.width() : -popupWidth);
positionY = $click[0].offsetTop - popupHeight;
disableTail = true;
}
else if (!clickNearTop && !clickNearBottom) {
if (clickNearLeft || clickNearRight) {
positionY = $click[0].offsetTop - popupHeight / 2 + $click.width() / 2;
positionX = $click[0].offsetLeft + (clickNearLeft ? $click.width() + space : -popupWidth + -space);
// Make sure this does not position the popup off screen
if (positionX < 0) {
positionX = 0;
disableTail = true;
}
else {
tailX = positionX + (clickNearLeft ? - $tail.width() / 2 : popupWidth - $tail.width() / 2);
tailY = positionY + popupHeight / 2 - $tail.height() / 2;
tailRotation = (clickNearLeft ? 315 : 135);
}
}
}
// Contain popup from overflowing bottom edge
if (positionY + popupHeight > $container.height()) {
positionY = $container.height() - popupHeight;
if (popupHeight > $container.height() - ($click[0].offsetTop + $click.height() + space)) {
disableTail = true;
}
}
}
else {
disableTail = true;
}
// Contain popup from ovreflowing top edge
if (positionY < 0) {
positionY = 0;
}
$element.css({top: positionY, left: positionX});
$tail.css({top: tailY, left: tailX});
if (!disableTail) {
$tail.css({
'left': tailX,
'top': tailY,
'transform': 'rotate(' + tailRotation + 'deg)'
}).show();
}
else {
$tail.hide();
}
};
/**
* Set element max height, used for animations.
*
* @param {H5P.jQuery} $element
*/
var setElementHeight = function ($element) {
if (!$element.is(':visible')) {
// No animation
$element.css('max-height', 'none');
return;
}
// If this element is shown in the popup, we can't set width to 100%,
// since it already has a width set in CSS
var isFeedbackPopup = $element.hasClass('h5p-question-popup');
// Get natural element height
var $tmp = $element.clone()
.css({
'position': 'absolute',
'max-height': 'none',
'width': isFeedbackPopup ? '' : '100%'
})
.appendTo($element.parent());
// Need to take margins into account when calculating available space
var sideMargins = parseFloat($element.css('margin-left'))
+ parseFloat($element.css('margin-right'));
var tmpElWidth = $tmp.css('width') ? $tmp.css('width') : '100%';
$tmp.css('width', 'calc(' + tmpElWidth + ' - ' + sideMargins + 'px)');
// Apply height to element
var h = Math.round($tmp.get(0).getBoundingClientRect().height);
var fontSize = parseFloat($element.css('fontSize'));
var relativeH = h / fontSize;
$element.css('max-height', relativeH + 'em');
$tmp.remove();
if (h > 0 && sections.buttons && sections.buttons.$element === $element) {
// Make sure buttons section is visible
showSection(sections.buttons);
// Resize buttons after resizing button section
setTimeout(resizeButtons, 150);
}
return h;
};
/**
* Does the actual job of hiding the buttons scheduled for hiding.
*
* @private
* @param {boolean} [relocateFocus] Find a new button to focus
*/
var hideButtons = function (relocateFocus) {
for (var i = 0; i < buttonsToHide.length; i++) {
hideButton(buttonsToHide[i].id);
}
buttonsToHide = [];
if (relocateFocus) {
self.focusButton();
}
};
/**
* Does the actual hiding.
* @private
* @param {string} buttonId
*/
var hideButton = function (buttonId) {
// Using detach() vs hide() makes it harder to cheat.
buttons[buttonId].$element.detach();
buttons[buttonId].isVisible = false;
};
/**
* Shows the buttons on the next tick. This is to avoid buttons flickering
* If they're both added and removed on the same tick.
*
* @private
*/
var toggleButtons = function () {
// If no buttons section, return
if (sections.buttons === undefined) {
return;
}
// Clear transition timer, reevaluate if buttons will be detached
clearTimeout(toggleButtonsTransitionTimer);
// Show buttons
for (var i = 0; i < buttonsToShow.length; i++) {
insert(buttonOrder, buttonsToShow[i].id, buttons, sections.buttons.$element);
buttons[buttonsToShow[i].id].isVisible = true;
}
buttonsToShow = [];
// Hide buttons
var numToHide = 0;
var relocateFocus = false;
for (var j = 0; j < buttonsToHide.length; j++) {
var button = buttons[buttonsToHide[j].id];
if (button.isVisible) {
numToHide += 1;
}
if (button.$element.is(':focus')) {
// Move focus to the first visible button.
relocateFocus = true;
}
}
var animationTimer = 150;
if (sections.feedback && sections.feedback.$element.hasClass('h5p-question-popup')) {
animationTimer = 0;
}
if (numToHide === sections.buttons.$element.children().length) {
// All buttons are going to be hidden. Hide container using transition.
hideSection(sections.buttons);
// Detach buttons
hideButtons(relocateFocus);
}
else {
hideButtons(relocateFocus);
// Show button section
if (!sections.buttons.$element.is(':empty')) {
showSection(sections.buttons);
setElementHeight(sections.buttons.$element);
// Trigger resize after animation
toggleButtonsTransitionTimer = setTimeout(function () {
self.trigger('resize');
}, animationTimer);
}
// Resize buttons to fit container
resizeButtons();
}
toggleButtonsTimer = undefined;
};
/**
* Allows for scaling of the question image.
*/
var scaleImage = function () {
var $imgSection = sections.image.$element;
clearTimeout(imageTransitionTimer);
// Add this here to avoid initial transition of the image making
// content overflow. Alternatively we need to trigger a resize.
$imgSection.addClass('animatable');
if (imageThumb) {
// Expand image
$(this).attr('aria-expanded', true);
$imgSection.addClass('h5p-question-image-fill-width');
imageThumb = false;
imageTransitionTimer = setTimeout(function () {
self.trigger('resize');
}, 600);
}
else {
// Scale down image
$(this).attr('aria-expanded', false);
$imgSection.removeClass('h5p-question-image-fill-width');
imageThumb = true;
imageTransitionTimer = setTimeout(function () {
self.trigger('resize');
}, 600);
}
};
/**
* Get scrollable ancestor of element
*
* @private
* @param {H5P.jQuery} $element
* @param {Number} [currDepth=0] Current recursive calls to ancestor, stop at maxDepth
* @param {Number} [maxDepth=5] Maximum depth for finding ancestor.
* @returns {H5P.jQuery} Parent element that is scrollable
*/
var findScrollableAncestor = function ($element, currDepth, maxDepth) {
if (!currDepth) {
currDepth = 0;
}
if (!maxDepth) {
maxDepth = 5;
}
// Check validation of element or if we have reached document root
if (!$element || !($element instanceof $) || document === $element.get(0) || currDepth >= maxDepth) {
return;
}
if ($element.css('overflow-y') === 'auto') {
return $element;
}
else {
return findScrollableAncestor($element.parent(), currDepth + 1, maxDepth);
}
};
/**
* Scroll to bottom of Question.
*
* @private
*/
var scrollToBottom = function () {
if (!$wrapper || ($wrapper.hasClass('h5p-standalone') && !H5P.isFullscreen)) {
return; // No scroll
}
var scrollableAncestor = findScrollableAncestor($wrapper);
// Scroll to bottom of scrollable ancestor
if (scrollableAncestor) {
scrollableAncestor.animate({
scrollTop: $wrapper.css('height')
}, "slow");
}
};
/**
* Resize buttons to fit container width
*
* @private
*/
var resizeButtons = function () {
if (!buttons || !sections.buttons) {
return;
}
var go = function () {
// Don't do anything if button elements are not visible yet
if (!sections.buttons.$element.is(':visible')) {
return;
}
// Width of all buttons
var buttonsWidth = {
max: 0,
min: 0,
current: 0
};
for (var i in buttons) {
var button = buttons[i];
if (button.isVisible) {
setButtonWidth(buttons[i]);
buttonsWidth.max += button.width.max;
buttonsWidth.min += button.width.min;
buttonsWidth.current += button.isTruncated ? button.width.min : button.width.max;
}
}
var makeButtonsFit = function (availableWidth) {
if (buttonsWidth.max < availableWidth) {
// It is room for everyone on the right side of the score bar (without truncating)
if (buttonsWidth.max !== buttonsWidth.current) {
// Need to make everyone big
restoreButtonLabels(buttonsWidth.current, availableWidth);
}
return true;
}
else if (buttonsWidth.min < availableWidth) {
// Is it room for everyone on the right side of the score bar with truncating?
if (buttonsWidth.current > availableWidth) {
removeButtonLabels(buttonsWidth.current, availableWidth);
}
else {
restoreButtonLabels(buttonsWidth.current, availableWidth);
}
return true;
}
return false;
};
toggleFullWidthScorebar(false);
var buttonSectionWidth = Math.floor(sections.buttons.$element.width()) - 1;
if (!makeButtonsFit(buttonSectionWidth)) {
// If we get here we need to wrap:
toggleFullWidthScorebar(true);
buttonSectionWidth = Math.floor(sections.buttons.$element.width()) - 1;
makeButtonsFit(buttonSectionWidth);
}
};
// If visible, resize right away
if (sections.buttons.$element.is(':visible')) {
go();
}
else { // If not visible, try on the next tick
// Clear button truncation timer if within a button truncation function
if (buttonTruncationTimer) {
clearTimeout(buttonTruncationTimer);
}
buttonTruncationTimer = setTimeout(function () {
buttonTruncationTimer = undefined;
go();
}, 0);
}
};
var toggleFullWidthScorebar = function (enabled) {
if (sections.scorebar &&
sections.scorebar.$element &&
sections.scorebar.$element.hasClass('h5p-question-visible')) {
sections.buttons.$element.addClass('has-scorebar');
sections.buttons.$element.toggleClass('wrap', enabled);
sections.scorebar.$element.toggleClass('full-width', enabled);
}
else {
sections.buttons.$element.removeClass('has-scorebar');
}
};
/**
* Remove button labels until they use less than max width.
*
* @private
* @param {Number} buttonsWidth Total width of all buttons
* @param {Number} maxButtonsWidth Max width allowed for buttons
*/
var removeButtonLabels = function (buttonsWidth, maxButtonsWidth) {
// Reverse traversal
for (var i = buttonOrder.length - 1; i >= 0; i--) {
var buttonId = buttonOrder[i];
var button = buttons[buttonId];
if (!button.isTruncated && button.isVisible) {
var $button = button.$element;
buttonsWidth -= button.width.max - button.width.min;
// Set tooltip (needed by H5P.Tooltip)
let buttonText = $button.text();
$button.attr('data-tooltip', buttonText);
// Use button text as aria label if a specific one isn't provided
if (!button.ariaLabel) {
$button.attr('aria-label', buttonText);
}
// Remove label
$button.html('').addClass('truncated');
button.isTruncated = true;
if (buttonsWidth <= maxButtonsWidth) {
// Buttons are small enough.
return;
}
}
}
};
/**
* Restore button labels until it fills maximum possible width without exceeding the max width.
*
* @private
* @param {Number} buttonsWidth Total width of all buttons
* @param {Number} maxButtonsWidth Max width allowed for buttons
*/
var restoreButtonLabels = function (buttonsWidth, maxButtonsWidth) {
for (var i = 0; i < buttonOrder.length; i++) {
var buttonId = buttonOrder[i];
var button = buttons[buttonId];
if (button.isTruncated && button.isVisible) {
// Calculate new total width of buttons with a static pixel for consistency cross-browser
buttonsWidth += button.width.max - button.width.min + 1;
if (buttonsWidth > maxButtonsWidth) {
return;
}
// Restore label
button.$element.html(button.text);
// Remove tooltip (used by H5P.Tooltip)
button.$element.removeAttr('data-tooltip');
// Remove aria-label if a specific one isn't provided
if (!button.ariaLabel) {
button.$element.removeAttr('aria-label');
}
button.$element.removeClass('truncated');
button.isTruncated = false;
}
}
};
/**
* Helper function for finding index of keyValue in array
*
* @param {String} keyValue Value to be found
* @param {String} key In key
* @param {Array} array In array
* @returns {number}
*/
var existsInArray = function (keyValue, key, array) {
var i;
for (i = 0; i < array.length; i++) {
if (array[i][key] === keyValue) {
return i;
}
}
return -1;
};
/**
* Show a section
* @param {Object} section
*/
var showSection = function (section) {
section.$element.addClass('h5p-question-visible');
section.isVisible = true;
};
/**
* Hide a section
* @param {Object} section
*/
var hideSection = function (section) {
section.$element.css('max-height', '');
section.isVisible = false;
setTimeout(function () {
// Only hide if section hasn't been set to visible in the meantime
if (!section.isVisible) {
section.$element.removeClass('h5p-question-visible');
}
}, 150);
};
/**
* Set behaviour for question.
*
* @param {Object} options An object containing behaviour that will be extended by Question
*/
self.setBehaviour = function (options) {
$.extend(behaviour, options);
};
/**
* A video to display above the task.
*
* @param {object} params
*/
self.setVideo = function (params) {
sections.video = {
$element: $('<div/>', {
'class': 'h5p-question-video'
})
};
if (disableAutoPlay && params.params.playback) {
params.params.playback.autoplay = false;
}
// Never fit to wrapper
if (!params.params.visuals) {
params.params.visuals = {};
}
params.params.visuals.fit = false;
sections.video.instance = H5P.newRunnable(params, self.contentId, sections.video.$element, true);
var fromVideo = false; // Hack to avoid never ending loop
sections.video.instance.on('resize', function () {
fromVideo = true;
self.trigger('resize');
fromVideo = false;
});
self.on('resize', function () {
if (!fromVideo) {
sections.video.instance.trigger('resize');
}
});
return self;
};
/**
* An audio player to display above the task.
*
* @param {object} params
*/
self.setAudio = function (params) {
params.params = params.params || {};
sections.audio = {
$element: $('<div/>', {
'class': 'h5p-question-audio',
})
};
if (disableAutoPlay) {
params.params.autoplay = false;
}
else if (params.params.playerMode === 'transparent') {
params.params.autoplay = true; // false doesn't make sense for transparent audio
}
sections.audio.instance = H5P.newRunnable(params, self.contentId, sections.audio.$element, true);
// The height value that is set by H5P.Audio is counter-productive here.
if (sections.audio.instance.audio) {
sections.audio.instance.audio.style.height = '';
}
return self;
};
/**
* Will stop any playback going on in the task.
*/
self.pause = function () {
if (sections.video && sections.video.isVisible) {
sections.video.instance.pause();
}
if (sections.audio && sections.audio.isVisible) {
sections.audio.instance.pause();
}
};
/**
* Start playback of video
*/
self.play = function () {
if (sections.video && sections.video.isVisible) {
sections.video.instance.play();
}
if (sections.audio && sections.audio.isVisible) {
sections.audio.instance.play();
}
};
/**
* Disable auto play, useful in editors.
*/
self.disableAutoPlay = function () {
disableAutoPlay = true;
};
/**
* Process HTML escaped string for use as attribute value,
* e.g. for alt text or title attributes.
*
* @param {string} value
* @return {string} WARNING! Do NOT use for innerHTML.
*/
self.massageAttributeOutput = function (value) {
const dparser = new DOMParser().parseFromString(value, 'text/html');
const div = document.createElement('div');
div.innerHTML = dparser.documentElement.textContent;;
return div.textContent || div.innerText || '';
};
/**
* Add task image.
*
* @param {string} path Relative
* @param {Object} [options] Options object
* @param {string} [options.alt] Text representation
* @param {string} [options.title] Hover text
* @param {Boolean} [options.disableImageZooming] Set as true to disable image zooming
* @param {string} [options.expandImage] Localization strings
* @param {string} [options.minimizeImage] Localization string
*/
self.setImage = function (path, options) {
options = options ? options : {};
sections.image = {};
// Image container
sections.image.$element = $('<div/>', {
'class': 'h5p-question-image h5p-question-image-fill-width'
});
// Inner wrap
var $imgWrap = $('<div/>', {
'class': 'h5p-question-image-wrap',
appendTo: sections.image.$element
});
// Image element
var $img = $('<img/>', {
src: H5P.getPath(path, self.contentId),
alt: (options.alt === undefined ? '' : self.massageAttributeOutput(options.alt)),
title: (options.title === undefined ? '' : self.massageAttributeOutput(options.title)),
on: {
load: function () {
self.trigger('imageLoaded', this);
self.trigger('resize');
}
},
appendTo: $imgWrap
});
// Disable image zooming
if (options.disableImageZooming) {
$img.css('maxHeight', 'none');
// Make sure we are using the correct amount of width at all times
var determineImgWidth = function () {
// Remove margins if natural image width is bigger than section width
var imageSectionWidth = sections.image.$element.get(0).getBoundingClientRect().width;
// Do not transition, for instant measurements
$imgWrap.css({
'-webkit-transition': 'none',
'transition': 'none'
});
// Margin as translateX on both sides of image.
var diffX = 2 * ($imgWrap.get(0).getBoundingClientRect().left -
sections.image.$element.get(0).getBoundingClientRect().left);
if ($img.get(0).naturalWidth >= imageSectionWidth - diffX) {
sections.image.$element.addClass('h5p-question-image-fill-width');
}
else { // Use margin for small res images
sections.image.$element.removeClass('h5p-question-image-fill-width');
}
// Reset transition rules
$imgWrap.css({
'-webkit-transition': '',
'transition': ''
});
};
// Determine image width
if ($img.is(':visible')) {
determineImgWidth();
}
else {
$img.on('load', determineImgWidth);
}
// Skip adding zoom functionality
return;
}
const setAriaLabel = () => {
const ariaLabel = $imgWrap.attr('aria-expanded') === 'true'
? options.minimizeImage
: options.expandImage;
$imgWrap.attr('aria-label', `${ariaLabel} ${options.alt}`);
};
var sizeDetermined = false;
var determineSize = function () {
if (sizeDetermined || !$img.is(':visible')) {
return; // Try again next time.
}
$imgWrap.addClass('h5p-question-image-scalable')
.attr('aria-expanded', false)
.attr('role', 'button')
.attr('tabIndex', '0')
.on('click', function (event) {
if (event.which === 1) {
scaleImage.apply(this); // Left mouse button click
setAriaLabel();
}
}).on('keypress', function (event) {
if (event.which === 32) {
event.preventDefault(); // Prevent default behaviour; page scroll down
scaleImage.apply(this); // Space bar pressed
setAriaLabel();
}
});
setAriaLabel();
sections.image.$element.removeClass('h5p-question-image-fill-width');
sizeDetermined = true; // Prevent any futher events
};
self.on('resize', determineSize);
return self;
};
/**
* Add the introduction section.
*
* @param {(string|H5P.jQuery)} content
*/
self.setIntroduction = function (content) {
register('introduction', content);
return self;
};
/**
* Add the content section.
*
* @param {(string|H5P.jQuery)} content
* @param {Object} [options]
* @param {string} [options.class]
*/
self.setContent = function (content, options) {
register('content', content);
if (options && options.class) {
sections.content.$element.addClass(options.class);
}
return self;
};
/**
* Force readspeaker to read text. Useful when you have to use
* setTimeout for animations.
*/
self.read = function (content) {
if (!$read) {
return; // Not ready yet
}
if (readText) {
// Combine texts if called multiple times
readText += (readText.substr(-1, 1) === '.' ? ' ' : '. ') + content;
}
else {
readText = content;
}
// Set text
$read.html(readText);
setTimeout(function () {
// Stop combining when done reading
readText = null;
$read.html('');
}, 100);
};
/**
* Read feedback
*/
self.readFeedback = function () {
var invalidFeedback =
behaviour.disableReadSpeaker ||
!showFeedback ||
!sections.feedback ||
!sections.feedback.$element;
if (invalidFeedback) {
return;
}
var $feedbackText = $('.h5p-question-feedback-content-text', sections.feedback.$element);
if ($feedbackText && $feedbackText.html() && $feedbackText.html().length) {
self.read($feedbackText.html());
}
};
/**
* Remove feedback
*
* @return {H5P.Question}
*/
self.removeFeedback = function () {
clearTimeout(feedbackTransitionTimer);
if (sections.feedback && showFeedback) {
showFeedback = false;
// Hide feedback & scorebar
hideSection(sections.scorebar);
hideSection(sections.feedback);
sectionsIsTransitioning = true;
// Detach after transition
feedbackTransitionTimer = setTimeout(function () {
// Avoiding Transition.onTransitionEnd since it will register multiple events, and there's no way to cancel it if the transition changes back to "show" while the animation is happening.
if (!showFeedback) {
sections.feedback.$element.children().detach();
sections.scorebar.$element.children().detach();
// Trigger resize after animation
self.trigger('resize');
}
sectionsIsTransitioning = false;
scoreBar.setScore(0);
}, 150);
if ($wrapper) {
$wrapper.find('.h5p-question-feedback-tail').remove();
}
}
return self;
};
/**
* Set feedback message.
*
* @param {string} [content]
* @param {number} score The score
* @param {number} maxScore The maximum score for this question
* @param {string} [scoreBarLabel] Makes it easier for readspeakers to identify the scorebar
* @param {string} [helpText] Help text that describes the score inside a tip icon
* @param {object} [popupSettings] Extra settings for popup feedback
* @param {boolean} [popupSettings.showAsPopup] Should the feedback display as popup?
* @param {string} [popupSettings.closeText] Translation for close button text
* @param {object} [popupSettings.click] Element representing where user clicked on screen
*/
self.setFeedback = function (content, score, maxScore, scoreBarLabel, helpText, popupSettings, scoreExplanationButtonLabel) {
// Feedback is disabled
if (behaviour.disableFeedback) {
return self;
}
// Need to toggle buttons right away to avoid flickering/blinking
// Note: This means content types should invoke hide/showButton before setFeedback
toggleButtons();
clickElement = (popupSettings != null && popupSettings.click != null ? popupSettings.click : null);
clearTimeout(feedbackTransitionTimer);
var $feedback = $('<div>', {
'class': 'h5p-question-feedback-container'
});
var $feedbackContent = $('<div>', {
'class': 'h5p-question-feedback-content'
}).appendTo($feedback);
// Feedback text
$('<div>', {
'class': 'h5p-question-feedback-content-text',
'html': content
}).appendTo($feedbackContent);
var $scorebar = $('<div>', {
'class': 'h5p-question-scorebar-container'
});
if (scoreBar === undefined) {
scoreBar = JoubelUI.createScoreBar(maxScore, scoreBarLabel, helpText, scoreExplanationButtonLabel);
}
scoreBar.appendTo($scorebar);
$feedbackContent.toggleClass('has-content', content !== undefined && content.length > 0);
// Feedback for readspeakers
if (!behaviour.disableReadSpeaker && scoreBarLabel) {
self.read(scoreBarLabel.replace(':num', score).replace(':total', maxScore) + '. ' + (content ? content : ''));
}
showFeedback = true;
if (sections.feedback) {
// Update section
update('feedback', $feedback);
update('scorebar', $scorebar);
}
else {
// Create section
register('feedback', $feedback);
register('scorebar', $scorebar);
if (initialized && $wrapper) {
insert(self.order, 'feedback', sections, $wrapper);
insert(self.order, 'scorebar', sections, $wrapper);
}
}
showSection(sections.feedback);
showSection(sections.scorebar);
resizeButtons();
if (popupSettings != null && popupSettings.showAsPopup == true) {
makeFeedbackPopup(popupSettings.closeText);
scoreBar.setScore(score);
}
else {
// Show feedback section
feedbackTransitionTimer = setTimeout(function () {
setElementHeight(sections.feedback.$element);
setElementHeight(sections.scorebar.$element);
sectionsIsTransitioning = true;
// Scroll to bottom after showing feedback
scrollToBottom();
// Trigger resize after animation
feedbackTransitionTimer = setTimeout(function () {
sectionsIsTransitioning = false;
self.trigger('resize');
scoreBar.setScore(score);
}, 150);
}, 0);
}
return self;
};
/**
* Set feedback content (no animation).
*
* @param {string} content
* @param {boolean} [extendContent] True will extend content, instead of replacing it
*/
self.updateFeedbackContent = function (content, extendContent) {
if (sections.feedback && sections.feedback.$element) {
if (extendContent) {
content = $('.h5p-question-feedback-content', sections.feedback.$element).html() + ' ' + content;
}
// Update feedback content html
$('.h5p-question-feedback-content', sections.feedback.$element).html(content).addClass('has-content');
// Make sure the height is correct
setElementHeight(sections.feedback.$element);
// Need to trigger resize when feedback has finished transitioning
setTimeout(self.trigger.bind(self, 'resize'), 150);
}
return self;
};
/**
* Set the content of the explanation / feedback panel
*
* @param {Object} data
* @param {string} data.correct
* @param {string} data.wrong
* @param {string} data.text
* @param {string} title Title for explanation panel
*
* @return {H5P.Question}
*/
self.setExplanation = function (data, title) {
if (data) {
var explainer = new H5P.Question.Explainer(title, data);
if (sections.explanation) {
// Update section
update('explanation', explainer.getElement());
}
else {
register('explanation', explainer.getElement());
if (initialized && $wrapper) {
insert(self.order, 'explanation', sections, $wrapper);
}
}
}
else if (sections.explanation) {
// Hide explanation section
sections.explanation.$element.children().detach();
}
return self;
};
/**
* Checks to see if button is registered.
*
* @param {string} id
* @returns {boolean}
*/
self.hasButton = function (id) {
return (buttons[id] !== undefined);
};
/**
* @typedef {Object} ConfirmationDialog
* @property {boolean} [enable] Must be true to show confirmation dialog
* @property {Object} [instance] Instance that uses confirmation dialog
* @property {jQuery} [$parentElement] Append to this element.
* @property {Object} [l10n] Translatable fields
* @property {string} [l10n.header] Header text
* @property {string} [l10n.body] Body text
* @property {string} [l10n.cancelLabel]
* @property {string} [l10n.confirmLabel]
*/
/**
* Register buttons for the task.
*
* @param {string} id
* @param {string} text label
* @param {function} clicked
* @param {boolean} [visible=true]
* @param {Object} [options] Options for button
* @param {Object} [extras] Extra options
* @param {ConfirmationDialog} [extras.confirmationDialog] Confirmation dialog
* @param {Object} [extras.contentData] Content data
* @params {string} [extras.textIfSubmitting] Text to display if submitting
*/
self.addButton = function (id, text, clicked, visible, options, extras) {
if (buttons[id]) {
return self; // Already registered
}
if (sections.buttons === undefined) {
// We have buttons, register wrapper
register('buttons');
if (initialized) {
insert(self.order, 'buttons', sections, $wrapper);
}
}
extras = extras || {};
extras.confirmationDialog = extras.confirmationDialog || {};
options = options || {};
var confirmationDialog =
self.addConfirmationDialogToButton(extras.confirmationDialog, clicked);
/**
* Handle button clicks through both mouse and keyboard
* @private
*/
var handleButtonClick = function () {
if (extras.confirmationDialog.enable && confirmationDialog) {
// Show popups section if used
if (!extras.confirmationDialog.$parentElement) {
sections.popups.$element.removeClass('hidden');
}
confirmationDialog.show($e.position().top);
}
else {
clicked();
}
};
const isSubmitting = extras.contentData && extras.contentData.standalone
&& (extras.contentData.isScoringEnabled || extras.contentData.isReportingEnabled);
if (isSubmitting && extras.textIfSubmitting) {
text = extras.textIfSubmitting;
}
buttons[id] = {
isTruncated: false,
text: text,
isVisible: false,
ariaLabel: options['aria-label']
};
// The button might be <button> or <a>
// (dependent on options.href set or not)
var isAnchorTag = (options.href !== undefined);
var $e = buttons[id].$element = JoubelUI.createButton($.extend({
'class': 'h5p-question-' + id,
html: text,
on: {
click: function (event) {
handleButtonClick();
if (isAnchorTag) {
event.preventDefault();
}
}
}
}, options));
buttonOrder.push(id);
H5P.Tooltip($e.get(0), {tooltipSource: 'data-tooltip'});
// The button might be <button> or <a>. If <a>, the space key is not
// triggering the click event, must therefore handle this here:
if (isAnchorTag) {
$e.on('keypress', function (event) {
if (event.which === 32) { // Space
handleButtonClick();
event.preventDefault();
}
});
}
if (visible === undefined || visible) {
// Button should be visible
$e.appendTo(sections.buttons.$element);
buttons[id].isVisible = true;
showSection(sections.buttons);
}
return self;
};
var setButtonWidth = function (button) {
var $button = button.$element;
var $tmp = $button.clone()
.css({
'position': 'absolute',
'white-space': 'nowrap',
'max-width': 'none'
}).removeClass('truncated')
.html(button.text)
.appendTo($button.parent());
// Calculate max width (button including text)
button.width = {
max: Math.ceil($tmp.outerWidth() + parseFloat($tmp.css('margin-left')) + parseFloat($tmp.css('margin-right')))
};
// Calculate min width (truncated, icon only)
$tmp.html('').addClass('truncated');
button.width.min = Math.ceil($tmp.outerWidth() + parseFloat($tmp.css('margin-left')) + parseFloat($tmp.css('margin-right')));
$tmp.remove();
};
/**
* Add confirmation dialog to button
* @param {ConfirmationDialog} options
* A confirmation dialog that will be shown before click handler of button
* is triggered
* @param {function} clicked
* Click handler of button
* @return {H5P.ConfirmationDialog|undefined}
* Confirmation dialog if enabled
*/
self.addConfirmationDialogToButton = function (options, clicked) {
options = options || {};
if (!options.enable) {
return;
}
// Confirmation dialog
var confirmationDialog = new H5P.ConfirmationDialog({
instance: options.instance,
headerText: options.l10n.header,
dialogText: options.l10n.body,
cancelText: options.l10n.cancelLabel,
confirmText: options.l10n.confirmLabel
});
// Determine parent element
if (options.$parentElement) {
const parentElement = options.$parentElement.get(0);
let dialogParent;
// If using h5p-content, dialog will not appear on embedded fullscreen
if (parentElement.classList.contains('h5p-content')) {
dialogParent = parentElement.querySelector('.h5p-container');
}
confirmationDialog.appendTo(dialogParent ?? parentElement);
}
else {
// Create popup section and append to that
if (sections.popups === undefined) {
register('popups');
if (initialized) {
insert(self.order, 'popups', sections, $wrapper);
}
sections.popups.$element.addClass('hidden');
self.order.push('popups');
}
confirmationDialog.appendTo(sections.popups.$element.get(0));
}
// Add event listeners
confirmationDialog.on('confirmed', function () {
if (!options.$parentElement) {
sections.popups.$element.addClass('hidden');
}
clicked();
// Trigger to content type
self.trigger('confirmed');
});
confirmationDialog.on('canceled', function () {
if (!options.$parentElement) {
sections.popups.$element.addClass('hidden');
}
// Trigger to content type
self.trigger('canceled');
});
return confirmationDialog;
};
/**
* Show registered button with given identifier.
*
* @param {string} id
* @param {Number} [priority]
*/
self.showButton = function (id, priority) {
var aboutToBeHidden = existsInArray(id, 'id', buttonsToHide) !== -1;
if (buttons[id] === undefined || (buttons[id].isVisible === true && !aboutToBeHidden)) {
return self;
}
priority = priority || 0;
// Skip if already being shown
var indexToShow = existsInArray(id, 'id', buttonsToShow);
if (indexToShow !== -1) {
// Update priority
if (buttonsToShow[indexToShow].priority < priority) {
buttonsToShow[indexToShow].priority = priority;
}
return self;
}
// Check if button is going to be hidden on next tick
var exists = existsInArray(id, 'id', buttonsToHide);
if (exists !== -1) {
// Skip hiding if higher priority
if (buttonsToHide[exists].priority <= priority) {
buttonsToHide.splice(exists, 1);
buttonsToShow.push({id: id, priority: priority});
}
} // If button is not shown
else if (!buttons[id].$element.is(':visible')) {
// Show button on next tick
buttonsToShow.push({id: id, priority: priority});
}
if (!toggleButtonsTimer) {
toggleButtonsTimer = setTimeout(toggleButtons, 0);
}
return self;
};
/**
* Hide registered button with given identifier.
*
* @param {string} id
* @param {number} [priority]
*/
self.hideButton = function (id, priority) {
var aboutToBeShown = existsInArray(id, 'id', buttonsToShow) !== -1;
if (buttons[id] === undefined || (buttons[id].isVisible === false && !aboutToBeShown)) {
return self;
}
priority = priority || 0;
// Skip if already being hidden
var indexToHide = existsInArray(id, 'id', buttonsToHide);
if (indexToHide !== -1) {
// Update priority
if (buttonsToHide[indexToHide].priority < priority) {
buttonsToHide[indexToHide].priority = priority;
}
return self;
}
// Check if buttons is going to be shown on next tick
var exists = existsInArray(id, 'id', buttonsToShow);
if (exists !== -1) {
// Skip showing if higher priority
if (buttonsToShow[exists].priority <= priority) {
buttonsToShow.splice(exists, 1);
buttonsToHide.push({id: id, priority: priority});
}
}
else if (!buttons[id].$element.is(':visible')) {
// Make sure it is detached in case the container is hidden.
hideButton(id);
}
else {
// Hide button on next tick.
buttonsToHide.push({id: id, priority: priority});
}
if (!toggleButtonsTimer) {
toggleButtonsTimer = setTimeout(toggleButtons, 0);
}
return self;
};
/**
* Set focus to the given button. If no button is given the first visible
* button gets focused. This is useful if you lose focus.
*
* @param {string} [id]
*/
self.focusButton = function (id) {
if (id === undefined) {
// Find first button that is visible.
for (var i = 0; i < buttonOrder.length; i++) {
var button = buttons[buttonOrder[i]];
if (button && button.isVisible) {
// Give that button focus
button.$element.focus();
break;
}
}
}
else if (buttons[id] && buttons[id].$element.is(':visible')) {
// Set focus to requested button
buttons[id].$element.focus();
}
return self;
};
/**
* Toggle readspeaker functionality
* @param {boolean} [disable] True to disable, false to enable.
*/
self.toggleReadSpeaker = function (disable) {
behaviour.disableReadSpeaker = disable || !behaviour.disableReadSpeaker;
};
/**
* Set new element for section.
*
* @param {String} id
* @param {H5P.jQuery} $element
*/
self.insertSectionAtElement = function (id, $element) {
if (sections[id] === undefined) {
register(id);
}
sections[id].parent = $element;
// Insert section if question is not initialized
if (!initialized) {
insert([id], id, sections, $element);
}
return self;
};
/**
* Attach content to given container.
*
* @param {H5P.jQuery} $container
*/
self.attach = function ($container) {
if (self.isRoot()) {
self.setActivityStarted();
}
// The first time we attach we also create our DOM elements.
if ($wrapper === undefined) {
if (self.registerDomElements !== undefined &&
(self.registerDomElements instanceof Function ||
typeof self.registerDomElements === 'function')) {
// Give the question type a chance to register before attaching
self.registerDomElements();
}
// Create section for reading messages
$read = $('<div/>', {
'aria-live': 'polite',
'class': 'h5p-hidden-read'
});
register('read', $read);
self.trigger('registerDomElements');
}
// Prepare container
$wrapper = $container;
$container.html('')
.addClass('h5p-question h5p-' + type);
// Add sections in given order
var $sections = [];
for (var i = 0; i < self.order.length; i++) {
var section = self.order[i];
if (sections[section]) {
if (sections[section].parent) {
// Section has a different parent
sections[section].$element.appendTo(sections[section].parent);
}
else {
$sections.push(sections[section].$element);
}
sections[section].isVisible = true;
}
}
// Only append once to DOM for optimal performance
$container.append($sections);
// Let others react to dom changes
self.trigger('domChanged', {
'$target': $container,
'library': self.libraryInfo.machineName,
'contentId': self.contentId,
'key': 'newLibrary'
}, {'bubbles': true, 'external': true});
// ??
initialized = true;
return self;
};
/**
* Detach all sections from their parents
*/
self.detachSections = function () {
// Deinit Question
initialized = false;
// Detach sections
for (var section in sections) {
sections[section].$element.detach();
}
return self;
};
// Listen for resize
self.on('resize', function () {
// Allow elements to attach and set their height before resizing
if (!sectionsIsTransitioning && sections.feedback && showFeedback) {
// Resize feedback to fit
setElementHeight(sections.feedback.$element);
}
// Re-position feedback popup if in use
var $element = sections.feedback;
var $click = clickElement;
if ($element != null && $element.$element != null && $click != null && $click.$element != null) {
setTimeout(function () {
positionFeedbackPopup($element.$element, $click.$element);
}, 10);
}
resizeButtons();
});
}
// Inheritance
Question.prototype = Object.create(EventDispatcher.prototype);
Question.prototype.constructor = Question;
/**
* Determine the overall feedback to display for the question.
* Returns empty string if no matching range is found.
*
* @param {Object[]} feedbacks
* @param {number} scoreRatio
* @return {string}
*/
Question.determineOverallFeedback = function (feedbacks, scoreRatio) {
scoreRatio = Math.floor(scoreRatio * 100);
for (var i = 0; i < feedbacks.length; i++) {
var feedback = feedbacks[i];
var hasFeedback = (feedback.feedback !== undefined && feedback.feedback.trim().length !== 0);
if (feedback.from <= scoreRatio && feedback.to >= scoreRatio && hasFeedback) {
return feedback.feedback;
}
}
return '';
};
return Question;
})(H5P.jQuery, H5P.EventDispatcher, H5P.JoubelUI);
;
H5P.Question.Explainer = (function ($) {
/**
* Constructor
*
* @class
* @param {string} title
* @param {array} explanations
*/
function Explainer(title, explanations) {
var self = this;
/**
* Create the DOM structure
*/
var createHTML = function () {
self.$explanation = $('<div>', {
'class': 'h5p-question-explanation-container'
});
// Add title:
$('<div>', {
'class': 'h5p-question-explanation-title',
role: 'heading',
html: title,
appendTo: self.$explanation
});
var $explanationList = $('<ul>', {
'class': 'h5p-question-explanation-list',
appendTo: self.$explanation
});
for (var i = 0; i < explanations.length; i++) {
var feedback = explanations[i];
var $explanationItem = $('<li>', {
'class': 'h5p-question-explanation-item',
appendTo: $explanationList
});
var $content = $('<div>', {
'class': 'h5p-question-explanation-status'
});
if (feedback.correct) {
$('<span>', {
'class': 'h5p-question-explanation-correct',
html: feedback.correct,
appendTo: $content
});
}
if (feedback.wrong) {
$('<span>', {
'class': 'h5p-question-explanation-wrong',
html: feedback.wrong,
appendTo: $content
});
}
$content.appendTo($explanationItem);
if (feedback.text) {
$('<div>', {
'class': 'h5p-question-explanation-text',
html: feedback.text,
appendTo: $explanationItem
});
}
}
};
createHTML();
/**
* Return the container HTMLElement
*
* @return {HTMLElement}
*/
self.getElement = function () {
return self.$explanation;
};
}
return Explainer;
})(H5P.jQuery);
;
(function (Question) {
/**
* Makes it easy to add animated score points for your question type.
*
* @class H5P.Question.ScorePoints
*/
Question.ScorePoints = function () {
var self = this;
var elements = [];
var showElementsTimer;
/**
* Create the element that displays the score point element for questions.
*
* @param {boolean} isCorrect
* @return {HTMLElement}
*/
self.getElement = function (isCorrect) {
var element = document.createElement('div');
element.classList.add(isCorrect ? 'h5p-question-plus-one' : 'h5p-question-minus-one');
element.classList.add('h5p-question-hidden-one');
elements.push(element);
// Schedule display animation of all added elements
if (showElementsTimer) {
clearTimeout(showElementsTimer);
}
showElementsTimer = setTimeout(showElements, 0);
return element;
};
/**
* @private
*/
var showElements = function () {
// Determine delay between triggering animations
var delay = 0;
var increment = 150;
var maxTime = 1000;
if (elements.length && elements.length > Math.ceil(maxTime / increment)) {
// Animations will run for more than ~1 second, reduce it.
increment = maxTime / elements.length;
}
for (var i = 0; i < elements.length; i++) {
// Use timer to trigger show
setTimeout(showElement(elements[i]), delay);
// Increse delay for next element
delay += increment;
}
};
/**
* Trigger transition animation for the given element
*
* @private
* @param {HTMLElement} element
* @return {function}
*/
var showElement = function (element) {
return function () {
element.classList.remove('h5p-question-hidden-one');
};
};
};
})(H5P.Question);
;
/*global H5P*/
H5P.Blanks = (function ($, Question) {
/**
* @constant
* @default
*/
var STATE_ONGOING = 'ongoing';
var STATE_CHECKING = 'checking';
var STATE_SHOWING_SOLUTION = 'showing-solution';
var STATE_FINISHED = 'finished';
const XAPI_ALTERNATIVE_EXTENSION = 'https://h5p.org/x-api/alternatives';
const XAPI_CASE_SENSITIVITY = 'https://h5p.org/x-api/case-sensitivity';
const XAPI_REPORTING_VERSION_EXTENSION = 'https://h5p.org/x-api/h5p-reporting-version';
/**
* @typedef {Object} Params
* Parameters/configuration object for Blanks
*
* @property {Object} Params.behaviour
* @property {string} Params.behaviour.confirmRetryDialog
* @property {string} Params.behaviour.confirmCheckDialog
*
* @property {Object} Params.confirmRetry
* @property {string} Params.confirmRetry.header
* @property {string} Params.confirmRetry.body
* @property {string} Params.confirmRetry.cancelLabel
* @property {string} Params.confirmRetry.confirmLabel
*
* @property {Object} Params.confirmCheck
* @property {string} Params.confirmCheck.header
* @property {string} Params.confirmCheck.body
* @property {string} Params.confirmCheck.cancelLabel
* @property {string} Params.confirmCheck.confirmLabel
*/
/**
* Initialize module.
*
* @class H5P.Blanks
* @extends H5P.Question
* @param {Params} params
* @param {number} id Content identification
* @param {Object} contentData Task specific content data
*/
function Blanks(params, id, contentData) {
var self = this;
// Inheritance
Question.call(self, 'blanks');
// IDs
this.contentId = id;
this.contentData = contentData;
this.params = $.extend(true, {}, {
text: "Fill in",
questions: [
"<p>Oslo is the capital of *Norway*.</p>"
],
overallFeedback: [],
userAnswers: [], // TODO This isn't in semantics?
showSolutions: "Show solution",
tryAgain: "Try again",
checkAnswer: "Check",
changeAnswer: "Change answer",
notFilledOut: "Please fill in all blanks to view solution",
answerIsCorrect: "':ans' is correct",
answerIsWrong: "':ans' is wrong",
answeredCorrectly: "Answered correctly",
answeredIncorrectly: "Answered incorrectly",
solutionLabel: "Correct answer:",
inputLabel: "Blank input @num of @total",
inputHasTipLabel: "Tip available",
tipLabel: "Tip",
scoreBarLabel: 'You got :num out of :total points',
behaviour: {
enableRetry: true,
enableSolutionsButton: true,
enableCheckButton: true,
caseSensitive: true,
showSolutionsRequiresInput: true,
autoCheck: false,
separateLines: false
},
a11yCheck: 'Check the answers. The responses will be marked as correct, incorrect, or unanswered.',
a11yShowSolution: 'Show the solution. The task will be marked with its correct solution.',
a11yRetry: 'Retry the task. Reset all responses and start the task over again.',
a11yHeader: 'Checking mode',
submitAnswer: 'Submit',
}, params);
// Delete empty questions
for (var i = this.params.questions.length - 1; i >= 0; i--) {
if (!this.params.questions[i]) {
this.params.questions.splice(i, 1);
}
}
// Previous state
this.contentData = contentData;
if (this.contentData !== undefined && this.contentData.previousState !== undefined) {
this.previousState = this.contentData.previousState;
}
// Clozes
this.clozes = [];
// Keep track tabbing forward or backwards
this.shiftPressed = false;
H5P.$body.keydown(function (event) {
if (event.keyCode === 16) {
self.shiftPressed = true;
}
}).keyup(function (event) {
if (event.keyCode === 16) {
self.shiftPressed = false;
}
});
// Using instructions as label for our text groups
this.labelId = 'h5p-blanks-instructions-' + Blanks.idCounter + '-' + H5P.createUUID();
this.content = self.createQuestions();
// Check for task media
var media = self.params.media;
if (media && media.type && media.type.library) {
media = media.type;
var type = media.library.split(' ')[0];
if (type === 'H5P.Image') {
if (media.params.file) {
// Register task image
self.setImage(media.params.file.path, {
disableImageZooming: self.params.media.disableImageZooming || false,
alt: media.params.alt,
title: media.params.title,
expandImage: media.params.expandImage,
minimizeImage: media.params.minimizeImage
});
}
}
else if (type === 'H5P.Video') {
if (media.params.sources) {
// Register task video
self.setVideo(media);
}
}
else if (type === 'H5P.Audio') {
if (media.params.files) {
// Register task audio
self.setAudio(media);
}
}
}
// Register task introduction text
self.setIntroduction('<div id="' + this.labelId + '">' + self.params.text + '</div>');
// Register task content area
self.setContent(self.content, {
'class': self.params.behaviour.separateLines ? 'h5p-separate-lines' : ''
});
// ... and buttons
self.registerButtons();
// Restore previous state
self.setH5PUserState();
}
// Inheritance
Blanks.prototype = Object.create(Question.prototype);
Blanks.prototype.constructor = Blanks;
/**
* Create all the buttons for the task
*/
Blanks.prototype.registerButtons = function () {
var self = this;
var $content = $('[data-content-id="' + self.contentId + '"].h5p-content');
var $containerParents = $content.parents('.h5p-container');
// select find container to attach dialogs to
var $container;
if ($containerParents.length !== 0) {
// use parent highest up if any
$container = $containerParents.last();
}
else if ($content.length !== 0) {
$container = $content;
}
else {
$container = $(document.body);
}
if (!self.params.behaviour.autoCheck && this.params.behaviour.enableCheckButton) {
// Check answer button
self.addButton('check-answer', self.params.checkAnswer, function () {
// Move focus to top of content
self.a11yHeader.innerHTML = self.params.a11yHeader;
self.a11yHeader.focus();
self.toggleButtonVisibility(STATE_CHECKING);
self.markResults();
self.showEvaluation();
self.triggerAnswered();
}, true, {
'aria-label': self.params.a11yCheck,
}, {
confirmationDialog: {
enable: self.params.behaviour.confirmCheckDialog,
l10n: self.params.confirmCheck,
instance: self,
$parentElement: $container
},
textIfSubmitting: self.params.submitAnswer,
contentData: self.contentData,
});
}
// Show solution button
self.addButton('show-solution', self.params.showSolutions, function () {
self.showCorrectAnswers(false);
}, self.params.behaviour.enableSolutionsButton, {
'aria-label': self.params.a11yShowSolution,
});
// Try again button
if (self.params.behaviour.enableRetry === true) {
self.addButton('try-again', self.params.tryAgain, function () {
self.a11yHeader.innerHTML = '';
self.resetTask();
self.$questions.filter(':first').find('input:first').focus();
}, true, {
'aria-label': self.params.a11yRetry,
}, {
confirmationDialog: {
enable: self.params.behaviour.confirmRetryDialog,
l10n: self.params.confirmRetry,
instance: self,
$parentElement: $container
}
});
}
self.toggleButtonVisibility(STATE_ONGOING);
};
/**
* Find blanks in a string and run a handler on those blanks
*
* @param {string} question
* Question text containing blanks enclosed in asterisks.
* @param {function} handler
* Replaces the blanks text with an input field.
* @returns {string}
* The question with blanks replaced by the given handler.
*/
Blanks.prototype.handleBlanks = function (question, handler) {
// Go through the text and run handler on all asterisk
var clozeEnd, clozeStart = question.indexOf('*');
var self = this;
while (clozeStart !== -1 && clozeEnd !== -1) {
clozeStart++;
clozeEnd = question.indexOf('*', clozeStart);
if (clozeEnd === -1) {
continue; // No end
}
var clozeContent = question.substring(clozeStart, clozeEnd).replaceAll(/<\/?[a-z]*\d?>/ig, '');
var replacer = '';
if (clozeContent.length) {
replacer = handler(self.parseSolution(clozeContent));
clozeEnd++;
}
else {
clozeStart += 1;
}
question = question.slice(0, clozeStart - 1) + replacer + question.slice(clozeEnd);
clozeEnd -= clozeEnd - clozeStart - replacer.length;
// Find the next cloze
clozeStart = question.indexOf('*', clozeEnd);
}
return question;
};
/**
* Create questitons html for DOM
*/
Blanks.prototype.createQuestions = function () {
var self = this;
var html = '';
var clozeNumber = 0;
for (var i = 0; i < self.params.questions.length; i++) {
var question = self.params.questions[i];
// Go through the question text and replace all the asterisks with input fields
question = self.handleBlanks(question, function (solution) {
// Create new cloze
clozeNumber += 1;
var defaultUserAnswer = (self.params.userAnswers.length > self.clozes.length ? self.params.userAnswers[self.clozes.length] : null);
var cloze = new Blanks.Cloze(solution, self.params.behaviour, defaultUserAnswer, {
answeredCorrectly: self.params.answeredCorrectly,
answeredIncorrectly: self.params.answeredIncorrectly,
solutionLabel: self.params.solutionLabel,
inputLabel: self.params.inputLabel,
inputHasTipLabel: self.params.inputHasTipLabel,
tipLabel: self.params.tipLabel
});
self.clozes.push(cloze);
return cloze;
});
html += '<div role="group" aria-labelledby="' + self.labelId + '">' + question + '</div>';
}
self.hasClozes = clozeNumber > 0;
this.$questions = $(html);
self.a11yHeader = document.createElement('div');
self.a11yHeader.classList.add('hidden-but-read');
self.a11yHeader.tabIndex = -1;
self.$questions[0].insertBefore(self.a11yHeader, this.$questions[0].childNodes[0] || null);
// Set input fields.
this.$questions.find('input').each(function (i) {
/**
* Observe resizing of input field, so that we can resize
* the H5P to fit all content when the input field grows in size
*/
let resizeTimer;
new ResizeObserver(function () {
// To avoid triggering resize too often, we wait a second after the last
// resize event has been received
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
self.trigger('resize');
}, 1000);
}).observe(this);
var afterCheck;
if (self.params.behaviour.autoCheck) {
afterCheck = function () {
var answer = $("<div>").text(this.getUserAnswer()).html();
self.read((this.correct() ? self.params.answerIsCorrect : self.params.answerIsWrong).replace(':ans', answer));
if (self.done || self.allBlanksFilledOut()) {
// All answers has been given. Show solutions button.
self.toggleButtonVisibility(STATE_CHECKING);
self.showEvaluation();
self.triggerAnswered();
self.done = true;
}
};
}
self.clozes[i].setInput($(this), afterCheck, function () {
self.toggleButtonVisibility(STATE_ONGOING);
if (!self.params.behaviour.autoCheck) {
self.hideEvaluation();
}
}, i, self.clozes.length);
}).keydown(function (event) {
var $this = $(this);
// Adjust width of text input field to match value
self.autoGrowTextField($this);
var $inputs, isLastInput;
var enterPressed = (event.keyCode === 13);
var tabPressedAutoCheck = (event.keyCode === 9 && self.params.behaviour.autoCheck);
if (enterPressed || tabPressedAutoCheck) {
// Figure out which inputs are left to answer
$inputs = self.$questions.find('.h5p-input-wrapper:not(.h5p-correct) .h5p-text-input');
// Figure out if this is the last input
isLastInput = $this.is($inputs[$inputs.length - 1]);
}
if ((tabPressedAutoCheck && isLastInput && !self.shiftPressed) ||
(enterPressed && isLastInput)) {
// Focus first button on next tick
setTimeout(function () {
self.focusButton();
}, 10);
}
if (enterPressed) {
if (isLastInput) {
// Check answers
$this.trigger('blur');
}
else {
// Find next input to focus
$inputs.eq($inputs.index($this) + 1).focus();
}
return false; // Prevent form submission on enter key
}
}).on('change', function () {
self.answered = true;
self.triggerXAPI('interacted');
});
self.on('resize', function () {
self.resetGrowTextField();
});
return this.$questions;
};
/**
*
*/
Blanks.prototype.autoGrowTextField = function ($input) {
// Do not set text field size when separate lines is enabled
if (this.params.behaviour.separateLines) {
return;
}
var self = this;
var fontSize = parseInt($input.css('font-size'), 10);
var minEm = 3;
var minPx = fontSize * minEm;
var rightPadEm = 3.25;
var rightPadPx = fontSize * rightPadEm;
var static_min_pad = 0.5 * fontSize;
setTimeout(function () {
var tmp = $('<div>', {
'text': $input.val()
});
tmp.css({
'position': 'absolute',
'white-space': 'nowrap',
'font-size': $input.css('font-size'),
'font-family': $input.css('font-family'),
'padding': $input.css('padding'),
'width': 'initial'
});
$input.parent().append(tmp);
var width = tmp.width();
var parentWidth = self.$questions.width();
tmp.remove();
if (width <= minPx) {
// Apply min width
$input.width(minPx + static_min_pad);
}
else if (width + rightPadPx >= parentWidth) {
// Apply max width of parent
$input.width(parentWidth - rightPadPx);
}
else {
// Apply width that wraps input
$input.width(width + static_min_pad);
}
}, 1);
};
/**
* Resize all text field growth to current size.
*/
Blanks.prototype.resetGrowTextField = function () {
var self = this;
this.$questions.find('input').each(function () {
self.autoGrowTextField($(this));
});
};
/**
* Toggle buttons dependent of state.
*
* Using CSS-rules to conditionally show/hide using the data-attribute [data-state]
*/
Blanks.prototype.toggleButtonVisibility = function (state) {
// The show solutions button is hidden if all answers are correct
var allCorrect = (this.getScore() === this.getMaxScore());
if (this.params.behaviour.autoCheck && allCorrect) {
// We are viewing the solutions
state = STATE_FINISHED;
}
if (this.params.behaviour.enableSolutionsButton) {
if (state === STATE_CHECKING && !allCorrect) {
this.showButton('show-solution');
}
else {
this.hideButton('show-solution');
}
}
if (this.params.behaviour.enableRetry) {
if ((state === STATE_CHECKING && !allCorrect) || state === STATE_SHOWING_SOLUTION) {
this.showButton('try-again');
}
else {
this.hideButton('try-again');
}
}
if (state === STATE_ONGOING) {
this.showButton('check-answer');
}
else {
this.hideButton('check-answer');
}
this.trigger('resize');
};
/**
* Check if solution is allowed. Warn user if not
*/
Blanks.prototype.allowSolution = function () {
if (this.params.behaviour.showSolutionsRequiresInput === true) {
if (!this.allBlanksFilledOut()) {
this.updateFeedbackContent(this.params.notFilledOut);
this.read(this.params.notFilledOut);
return false;
}
}
return true;
};
/**
* Check if all blanks are filled out
*
* @method allBlanksFilledOut
* @return {boolean} Returns true if all blanks are filled out.
*/
Blanks.prototype.allBlanksFilledOut = function () {
return !this.clozes.some(function (cloze) {
return !cloze.filledOut();
});
};
/**
* Mark which answers are correct and which are wrong and disable fields if retry is off.
*/
Blanks.prototype.markResults = function () {
var self = this;
for (var i = 0; i < self.clozes.length; i++) {
self.clozes[i].checkAnswer();
if (!self.params.behaviour.enableRetry) {
self.clozes[i].disableInput();
}
}
this.trigger('resize');
};
/**
* Removed marked results
*/
Blanks.prototype.removeMarkedResults = function () {
this.$questions.find('.h5p-input-wrapper').removeClass('h5p-correct h5p-wrong');
this.$questions.find('.h5p-input-wrapper > input').attr('disabled', false);
this.trigger('resize');
};
/**
* Displays the correct answers
* @param {boolean} [alwaysShowSolution]
* Will always show solution if true
*/
Blanks.prototype.showCorrectAnswers = function (alwaysShowSolution) {
if (!alwaysShowSolution && !this.allowSolution()) {
return;
}
this.toggleButtonVisibility(STATE_SHOWING_SOLUTION);
this.hideSolutions();
for (var i = 0; i < this.clozes.length; i++) {
this.clozes[i].showSolution();
}
this.trigger('resize');
};
/**
* Toggle input allowed for all input fields
*
* @method function
* @param {boolean} enabled True if fields should allow input, otherwise false
*/
Blanks.prototype.toggleAllInputs = function (enabled) {
for (var i = 0; i < this.clozes.length; i++) {
this.clozes[i].toggleInput(enabled);
}
};
/**
* Display the correct solution for the input boxes.
*
* This is invoked from CP and QS - be carefull!
*/
Blanks.prototype.showSolutions = function () {
this.params.behaviour.enableSolutionsButton = true;
this.toggleButtonVisibility(STATE_FINISHED);
this.markResults();
this.showEvaluation();
this.showCorrectAnswers(true);
this.toggleAllInputs(false);
//Hides all buttons in "show solution" mode.
this.hideButtons();
};
/**
* Resets the complete task.
* Used in contracts.
* @public
*/
Blanks.prototype.resetTask = function () {
this.answered = false;
this.hideEvaluation();
this.hideSolutions();
this.clearAnswers();
this.removeMarkedResults();
this.toggleButtonVisibility(STATE_ONGOING);
this.resetGrowTextField();
this.toggleAllInputs(true);
this.done = false;
};
/**
* Hides all buttons.
* @public
*/
Blanks.prototype.hideButtons = function () {
this.toggleButtonVisibility(STATE_FINISHED);
};
/**
* Trigger xAPI answered event
*/
Blanks.prototype.triggerAnswered = function () {
this.answered = true;
var xAPIEvent = this.createXAPIEventTemplate('answered');
this.addQuestionToXAPI(xAPIEvent);
this.addResponseToXAPI(xAPIEvent);
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}
*/
Blanks.prototype.getXAPIData = function () {
var xAPIEvent = this.createXAPIEventTemplate('answered');
this.addQuestionToXAPI(xAPIEvent);
this.addResponseToXAPI(xAPIEvent);
return {
statement: xAPIEvent.data.statement
};
};
/**
* Generate xAPI object definition used in xAPI statements.
* @return {Object}
*/
Blanks.prototype.getxAPIDefinition = function () {
var definition = {};
// The below replaceAll makes sure we don't get any unwanted XAPI_PLACEHOLDERs in the description
definition.description = {
'en-US': this.params.text.replaceAll(/_{10,}/gi, '_________')
};
definition.type = 'http://adlnet.gov/expapi/activities/cmi.interaction';
definition.interactionType = 'fill-in';
const clozeSolutions = [];
let crp = '';
// xAPI forces us to create solution patterns for all possible solution combinations
for (var i = 0; i < this.params.questions.length; i++) {
// The below replaceAll makes sure we don't get any unwanted XAPI_PLACEHOLDERs in the questions
let question = this.params.questions[i].replaceAll(/_{10,}/gi, '_________');
question = this.handleBlanks(question, function (solution) {
// Collect all solution combinations for the H5P Alternative extension
clozeSolutions.push(solution.solutions);
// Create a basic response pattern out of the first alternative for each blanks field
crp += (!crp ? '' : '[,]') + solution.solutions[0];
// We replace the solutions in the question with a "blank"
return '__________';
});
definition.description['en-US'] += question;
}
// Set the basic response pattern (not supporting multiple alternatives for blanks)
definition.correctResponsesPattern = [
'{case_matters=' + this.params.behaviour.caseSensitive + '}' + crp,
];
// Add the H5P Alternative extension which provides all the combinations of different answers
// Reporting software will need to support this extension for alternatives to work.
definition.extensions = definition.extensions || {};
definition.extensions[XAPI_CASE_SENSITIVITY] = this.params.behaviour.caseSensitive;
definition.extensions[XAPI_ALTERNATIVE_EXTENSION] = clozeSolutions;
return definition;
};
/**
* Add the question itselt to the definition part of an xAPIEvent
*/
Blanks.prototype.addQuestionToXAPI = function (xAPIEvent) {
var definition = xAPIEvent.getVerifiedStatementValue(['object', 'definition']);
$.extend(true, definition, this.getxAPIDefinition());
// Set reporting module version if alternative extension is used
if (this.hasAlternatives) {
const context = xAPIEvent.getVerifiedStatementValue(['context']);
context.extensions = context.extensions || {};
context.extensions[XAPI_REPORTING_VERSION_EXTENSION] = '1.1.0';
}
};
/**
* Parse the solution text (text between the asterisks)
*
* @param {string} solutionText
* @returns {object} with the following properties
* - tip: the tip text for this solution, undefined if no tip
* - solutions: array of solution words
*/
Blanks.prototype.parseSolution = function (solutionText) {
var tip, solution;
var tipStart = solutionText.indexOf(':');
if (tipStart !== -1) {
// Found tip, now extract
tip = solutionText.slice(tipStart + 1);
solution = solutionText.slice(0, tipStart);
}
else {
solution = solutionText;
}
// Split up alternatives
var solutions = solution.split('/');
this.hasAlternatives = this.hasAlternatives || solutions.length > 1;
// Trim solutions
for (var i = 0; i < solutions.length; i++) {
solutions[i] = H5P.trim(solutions[i]);
//decodes html entities
var elem = document.createElement('textarea');
elem.innerHTML = solutions[i];
solutions[i] = elem.value;
}
return {
tip: tip,
solutions: solutions
};
};
/**
* Add the response part to an xAPI event
*
* @param {H5P.XAPIEvent} xAPIEvent
* The xAPI event we will add a response to
*/
Blanks.prototype.addResponseToXAPI = function (xAPIEvent) {
xAPIEvent.setScoredResult(this.getScore(), this.getMaxScore(), this);
xAPIEvent.data.statement.result.response = this.getxAPIResponse();
};
/**
* Generate xAPI user response, used in xAPI statements.
* @return {string} User answers separated by the "[,]" pattern
*/
Blanks.prototype.getxAPIResponse = function () {
var usersAnswers = this.getCurrentState();
return usersAnswers.join('[,]');
};
/**
* Show evaluation widget, i.e: 'You got x of y blanks correct'
*/
Blanks.prototype.showEvaluation = function () {
var maxScore = this.getMaxScore();
var score = this.getScore();
var scoreText = H5P.Question.determineOverallFeedback(this.params.overallFeedback, score / maxScore).replace('@score', score).replace('@total', maxScore);
this.setFeedback(scoreText, score, maxScore, this.params.scoreBarLabel);
if (score === maxScore) {
this.toggleButtonVisibility(STATE_FINISHED);
}
};
/**
* Hide the evaluation widget
*/
Blanks.prototype.hideEvaluation = function () {
// Clear evaluation section.
this.removeFeedback();
};
/**
* Hide solutions. (/try again)
*/
Blanks.prototype.hideSolutions = function () {
// Clean solution from quiz
this.$questions.find('.h5p-correct-answer').remove();
};
/**
* Get maximum number of correct answers.
*
* @returns {Number} Max points
*/
Blanks.prototype.getMaxScore = function () {
var self = this;
return self.clozes.length;
};
/**
* Count the number of correct answers.
*
* @returns {Number} Points
*/
Blanks.prototype.getScore = function () {
var self = this;
var correct = 0;
for (var i = 0; i < self.clozes.length; i++) {
if (self.clozes[i].correct()) {
correct++;
}
self.params.userAnswers[i] = self.clozes[i].getUserAnswer();
}
return correct;
};
Blanks.prototype.getTitle = function () {
return H5P.createTitle((this.contentData.metadata && this.contentData.metadata.title) ? this.contentData.metadata.title : 'Fill In');
};
/**
* Clear the user's answers
*/
Blanks.prototype.clearAnswers = function () {
this.clozes.forEach(function (cloze) {
cloze.setUserInput('');
cloze.resetAriaLabel();
});
};
/**
* Checks if all has been answered.
*
* @returns {Boolean}
*/
Blanks.prototype.getAnswerGiven = function () {
return this.answered || !this.hasClozes;
};
/**
* Helps set focus the given input field.
* @param {jQuery} $input
*/
Blanks.setFocus = function ($input) {
setTimeout(function () {
$input.focus();
}, 1);
};
/**
* Returns an object containing content of each cloze
*
* @returns {object} object containing content for each cloze
*/
Blanks.prototype.getCurrentState = function () {
var clozesContent = [];
// Get user input for every cloze
this.clozes.forEach(function (cloze) {
clozesContent.push(cloze.getUserAnswer());
});
return clozesContent;
};
/**
* Sets answers to current user state
*/
Blanks.prototype.setH5PUserState = function () {
var self = this;
var isValidState = (this.previousState !== undefined &&
this.previousState.length &&
this.previousState.length === this.clozes.length);
// Check that stored user state is valid
if (!isValidState) {
return;
}
// Set input from user state
var hasAllClozesFilled = true;
this.previousState.forEach(function (clozeContent, ccIndex) {
// Register that an answer has been given
if (clozeContent.length) {
self.answered = true;
}
var cloze = self.clozes[ccIndex];
cloze.setUserInput(clozeContent);
// Handle instant feedback
if (self.params.behaviour.autoCheck) {
if (cloze.filledOut()) {
cloze.checkAnswer();
}
else {
hasAllClozesFilled = false;
}
}
});
if (self.params.behaviour.autoCheck && hasAllClozesFilled) {
self.showEvaluation();
self.toggleButtonVisibility(STATE_CHECKING);
}
};
/**
* Disables any active input. Useful for freezing the task and dis-allowing
* modification of wrong answers.
*/
Blanks.prototype.disableInput = function () {
this.$questions.find('input').attr('disabled', true);
};
Blanks.idCounter = 0;
return Blanks;
})(H5P.jQuery, H5P.Question);
/**
* Static utility method for parsing H5P.Blanks qestion into a format useful
* for creating reports.
*
* Example question: 'H5P content may be edited using a *browser/web-browser:something you use every day*.'
*
* Produces the following result:
* [
* {
* type: 'text',
* content: 'H5P content may be edited using a '
* },
* {
* type: 'answer',
* correct: ['browser', 'web-browser']
* },
* {
* type: 'text',
* content: '.'
* }
* ]
*
* @param {string} question
*/
H5P.Blanks.parseText = function (question) {
var blank = new H5P.Blanks({ question: question });
/**
* Parses a text into an array where words starting and ending
* with an asterisk are separated from other text.
* e.g ["this", "*is*", " an ", "*example*"]
*
* @param {string} text
*
* @return {string[]}
*/
function tokenizeQuestionText(text) {
return text.split(/(\*.*?\*)/).filter(function (str) {
return str.length > 0; }
);
}
function startsAndEndsWithAnAsterisk(str) {
return str.substr(0,1) === '*' && str.substr(-1) === '*';
}
function replaceHtmlTags(str, value) {
return str.replace(/<[^>]*>/g, value);
}
return tokenizeQuestionText(replaceHtmlTags(question, '')).map(function (part) {
return startsAndEndsWithAnAsterisk(part) ?
({
type: 'answer',
correct: blank.parseSolution(part.slice(1, -1)).solutions
}) :
({
type: 'text',
content: part
});
});
};
;
(function ($, Blanks) {
/**
* Simple private class for keeping track of clozes.
*
* @class H5P.Blanks.Cloze
* @param {string} answer
* @param {Object} behaviour Behavioral settings for the task from semantics
* @param {boolean} behaviour.acceptSpellingErrors - If true, answers will also count correct if they contain small spelling errors.
* @param {string} defaultUserAnswer
* @param {Object} l10n Localized texts
* @param {string} l10n.solutionLabel Assistive technology label for cloze solution
* @param {string} l10n.inputLabel Assistive technology label for cloze input
* @param {string} l10n.inputHasTipLabel Assistive technology label for input with tip
* @param {string} l10n.tipLabel Label for tip icon
*/
Blanks.Cloze = function (solution, behaviour, defaultUserAnswer, l10n) {
var self = this;
var $input, $wrapper;
var answers = solution.solutions;
var answer = answers.join('/');
var tip = solution.tip;
var checkedAnswer = null;
var inputLabel = l10n.inputLabel;
if (behaviour.caseSensitive !== true) {
// Convert possible solutions into lowercase
for (var i = 0; i < answers.length; i++) {
answers[i] = answers[i].toLowerCase();
}
}
/**
* Check if the answer is correct.
*
* @private
* @param {string} answered
*/
var correct = function (answered) {
if (behaviour.caseSensitive !== true) {
answered = answered.toLowerCase();
}
for (var i = 0; i < answers.length; i++) {
// Damerau-Levenshtein comparison
if (behaviour.acceptSpellingErrors === true) {
var levenshtein = H5P.TextUtilities.computeLevenshteinDistance(answered, H5P.trim(answers[i]), true);
/*
* The correctness is temporarily computed by word length and number of number of operations
* required to change one word into the other (Damerau-Levenshtein). It's subject to
* change, cmp. https://github.com/otacke/udacity-machine-learning-engineer/blob/master/submissions/capstone_proposals/h5p_fuzzy_blanks.md
*/
if ((answers[i].length > 9) && (levenshtein <= 2)) {
return true;
} else if ((answers[i].length > 3) && (levenshtein <= 1)) {
return true;
}
}
// regular comparison
if (answered === H5P.trim(answers[i])) {
return true;
}
}
return false;
};
/**
* Check if filled out.
*
* @param {boolean}
*/
this.filledOut = function () {
var answered = this.getUserAnswer();
// Blank can be correct and is interpreted as filled out.
return (answered !== '' || correct(answered));
};
/**
* Check the cloze and mark it as wrong or correct.
*/
this.checkAnswer = function () {
checkedAnswer = this.getUserAnswer();
var isCorrect = correct(checkedAnswer);
if (isCorrect) {
$wrapper.addClass('h5p-correct');
$input.attr('disabled', true)
.attr('aria-label', inputLabel + '. ' + l10n.answeredCorrectly);
}
else {
$wrapper.addClass('h5p-wrong');
$input.attr('aria-label', inputLabel + '. ' + l10n.answeredIncorrectly);
}
};
/**
* Disables input.
* @method disableInput
*/
this.disableInput = function () {
this.toggleInput(false);
};
/**
* Enables input.
* @method enableInput
*/
this.enableInput = function () {
this.toggleInput(true);
};
/**
* Toggles input enable/disable
* @method toggleInput
* @param {boolean} enabled True if input should be enabled, otherwise false
*/
this.toggleInput = function (enabled) {
$input.attr('disabled', !enabled);
};
/**
* Show the correct solution.
*/
this.showSolution = function () {
if (correct(this.getUserAnswer())) {
return; // Only for the wrong ones
}
$('<span>', {
'aria-hidden': true,
'class': 'h5p-correct-answer',
text: H5P.trim(answer.replace(/\s*\/\s*/g, '/')),
insertAfter: $wrapper
});
$input.attr('disabled', true);
var ariaLabel = inputLabel + '. ' +
l10n.solutionLabel + ' ' + answer + '. ' +
l10n.answeredIncorrectly;
$input.attr('aria-label', ariaLabel);
};
/**
* @returns {boolean}
*/
this.correct = function () {
return correct(this.getUserAnswer());
};
/**
* Set input element.
*
* @param {H5P.jQuery} $element
* @param {function} afterCheck
* @param {function} afterFocus
* @param {number} clozeIndex Index of cloze
* @param {number} totalCloze Total amount of clozes in blanks
*/
this.setInput = function ($element, afterCheck, afterFocus, clozeIndex, totalCloze) {
$input = $element;
$wrapper = $element.parent();
inputLabel = inputLabel.replace('@num', (clozeIndex + 1))
.replace('@total', totalCloze);
// Add tip if tip is set
if(tip !== undefined && tip.trim().length > 0) {
$wrapper.addClass('has-tip')
.append(H5P.JoubelUI.createTip(tip, {
tipLabel: l10n.tipLabel
}));
inputLabel += '. ' + l10n.inputHasTipLabel;
}
$input.attr('aria-label', inputLabel);
if (afterCheck !== undefined) {
$input.blur(function () {
if (self.filledOut()) {
// Check answers
if (!behaviour.enableRetry) {
self.disableInput();
}
self.checkAnswer();
afterCheck.apply(self);
}
});
}
$input.keyup(function () {
if (checkedAnswer !== null && checkedAnswer !== self.getUserAnswer()) {
// The Answer has changed since last check
checkedAnswer = null;
$wrapper.removeClass('h5p-wrong');
$input.attr('aria-label', inputLabel);
if (afterFocus !== undefined) {
afterFocus();
}
}
});
};
/**
* @returns {string} Cloze html
*/
this.toString = function () {
var extra = defaultUserAnswer ? ' value="' + defaultUserAnswer + '"' : '';
var result = '<span class="h5p-input-wrapper"><input type="text" class="h5p-text-input" autocomplete="off" autocapitalize="off" spellcheck="false"' + extra + '></span>';
self.length = result.length;
return result;
};
/**
* @returns {string} Trimmed answer
*/
this.getUserAnswer = function () {
const trimmedAnswer = H5P.trim($input.val().replace(/\ /g, ' '));
// Set trimmed answer
$input.val(trimmedAnswer);
if (behaviour.formulaEditor) {
// If fomula editor is enabled set trimmed text
$input.parent().find('.wiris-h5p-input').html(trimmedAnswer);
}
return trimmedAnswer;
};
/**
* @param {string} text New input text
*/
this.setUserInput = function (text) {
$input.val(text);
};
/**
* Resets aria label of input field
*/
this.resetAriaLabel = function () {
$input.attr('aria-label', inputLabel);
};
};
})(H5P.jQuery, H5P.Blanks);
;
// Will render a Question with multiple choices for answers.
// Options format:
// {
// title: "Optional title for question box",
// question: "Question text",
// answers: [{text: "Answer text", correct: false}, ...],
// singleAnswer: true, // or false, will change rendered output slightly.
// singlePoint: true, // True if question give a single point score only
// // if all are correct, false to give 1 point per
// // correct answer. (Only for singleAnswer=false)
// randomAnswers: false // Whether to randomize the order of answers.
// }
//
// Events provided:
// - h5pQuestionAnswered: Triggered when a question has been answered.
var H5P = H5P || {};
/**
* @typedef {Object} Options
* Options for multiple choice
*
* @property {Object} behaviour
* @property {boolean} behaviour.confirmCheckDialog
* @property {boolean} behaviour.confirmRetryDialog
*
* @property {Object} UI
* @property {string} UI.tipsLabel
*
* @property {Object} [confirmRetry]
* @property {string} [confirmRetry.header]
* @property {string} [confirmRetry.body]
* @property {string} [confirmRetry.cancelLabel]
* @property {string} [confirmRetry.confirmLabel]
*
* @property {Object} [confirmCheck]
* @property {string} [confirmCheck.header]
* @property {string} [confirmCheck.body]
* @property {string} [confirmCheck.cancelLabel]
* @property {string} [confirmCheck.confirmLabel]
*/
/**
* Module for creating a multiple choice question
*
* @param {Options} options
* @param {number} contentId
* @param {Object} contentData
* @returns {H5P.MultiChoice}
* @constructor
*/
H5P.MultiChoice = function (options, contentId, contentData) {
if (!(this instanceof H5P.MultiChoice))
return new H5P.MultiChoice(options, contentId, contentData);
var self = this;
this.contentId = contentId;
this.contentData = contentData;
H5P.Question.call(self, 'multichoice');
var $ = H5P.jQuery;
var defaults = {
image: null,
question: "No question text provided",
answers: [
{
tipsAndFeedback: {
tip: '',
chosenFeedback: '',
notChosenFeedback: ''
},
text: "Answer 1",
correct: true
}
],
overallFeedback: [],
weight: 1,
userAnswers: [],
UI: {
checkAnswerButton: 'Check',
submitAnswerButton: 'Submit',
showSolutionButton: 'Show solution',
tryAgainButton: 'Try again',
scoreBarLabel: 'You got :num out of :total points',
tipAvailable: "Tip available",
feedbackAvailable: "Feedback available",
readFeedback: 'Read feedback',
shouldCheck: "Should have been checked",
shouldNotCheck: "Should not have been checked",
noInput: 'Input is required before viewing the solution',
a11yCheck: 'Check the answers. The responses will be marked as correct, incorrect, or unanswered.',
a11yShowSolution: 'Show the solution. The task will be marked with its correct solution.',
a11yRetry: 'Retry the task. Reset all responses and start the task over again.',
},
behaviour: {
enableRetry: true,
enableSolutionsButton: true,
enableCheckButton: true,
type: 'auto',
singlePoint: true,
randomAnswers: false,
showSolutionsRequiresInput: true,
autoCheck: false,
passPercentage: 100,
showScorePoints: true
}
};
var params = $.extend(true, defaults, options);
// Keep track of number of correct choices
var numCorrect = 0;
// Loop through choices
for (var i = 0; i < params.answers.length; i++) {
var answer = params.answers[i];
// Make sure tips and feedback exists
answer.tipsAndFeedback = answer.tipsAndFeedback || {};
if (params.answers[i].correct) {
// Update number of correct choices
numCorrect++;
}
}
// Determine if no choices is the correct
var blankIsCorrect = (numCorrect === 0);
// Determine task type
if (params.behaviour.type === 'auto') {
// Use single choice if only one choice is correct
params.behaviour.singleAnswer = (numCorrect === 1);
}
else {
params.behaviour.singleAnswer = (params.behaviour.type === 'single');
}
var getCheckboxOrRadioIcon = function (radio, selected) {
var icon;
if (radio) {
icon = selected ? '' : '';
}
else {
icon = selected ? '' : '';
}
return icon;
};
// Initialize buttons and elements.
var $myDom;
var $feedbackDialog;
/**
* Remove all feedback dialogs
*/
var removeFeedbackDialog = function () {
// Remove the open feedback dialogs.
$myDom.unbind('click', removeFeedbackDialog);
$myDom.find('.h5p-feedback-button, .h5p-feedback-dialog').remove();
$myDom.find('.h5p-has-feedback').removeClass('h5p-has-feedback');
if ($feedbackDialog) {
$feedbackDialog.remove();
}
};
var score = 0;
var solutionsVisible = false;
/**
* Add feedback to element
* @param {jQuery} $element Element that feedback will be added to
* @param {string} feedback Feedback string
*/
var addFeedback = function ($element, feedback) {
$feedbackDialog = $('' +
'<div class="h5p-feedback-dialog">' +
'<div class="h5p-feedback-inner">' +
'<div class="h5p-feedback-text">' + feedback + '</div>' +
'</div>' +
'</div>');
//make sure feedback is only added once
if (!$element.find($('.h5p-feedback-dialog')).length) {
$feedbackDialog.appendTo($element.addClass('h5p-has-feedback'));
}
};
/**
* Register the different parts of the task with the H5P.Question structure.
*/
self.registerDomElements = function () {
var media = params.media;
if (media && media.type && media.type.library) {
media = media.type;
var type = media.library.split(' ')[0];
if (type === 'H5P.Image') {
if (media.params.file) {
// Register task image
self.setImage(media.params.file.path, {
disableImageZooming: params.media.disableImageZooming || false,
alt: media.params.alt,
title: media.params.title,
expandImage: media.params.expandImage,
minimizeImage: media.params.minimizeImage
});
}
}
else if (type === 'H5P.Video') {
if (media.params.sources) {
// Register task video
self.setVideo(media);
}
}
else if (type === 'H5P.Audio') {
if (media.params.files) {
// Register task audio
self.setAudio(media);
}
}
}
// Determine if we're using checkboxes or radio buttons
for (var i = 0; i < params.answers.length; i++) {
params.answers[i].checkboxOrRadioIcon = getCheckboxOrRadioIcon(params.behaviour.singleAnswer, params.userAnswers.indexOf(i) > -1);
}
// Register Introduction
self.setIntroduction('<div id="' + params.labelId + '">' + params.question + '</div>');
// Register task content area
$myDom = $('<ul>', {
'class': 'h5p-answers',
role: params.role,
'aria-labelledby': params.labelId
});
for (let i = 0; i < params.answers.length; i++) {
const answer = params.answers[i];
answer.text = answer.text ?? '<div></div>';
$('<li>', {
'class': 'h5p-answer',
role: answer.role,
tabindex: answer.tabindex,
'aria-checked': answer.checked,
'data-id': i,
html: '<div class="h5p-alternative-container"><span class="h5p-alternative-inner">' + answer.text + '</span></div>',
appendTo: $myDom
});
}
self.setContent($myDom, {
'class': params.behaviour.singleAnswer ? 'h5p-radio' : 'h5p-check'
});
// Create tips:
var $answers = $('.h5p-answer', $myDom).each(function (i) {
var tip = params.answers[i].tipsAndFeedback.tip;
if (tip === undefined) {
return; // No tip
}
tip = tip.trim();
var tipContent = tip
.replace(/ /g, '')
.replace(/<p>/g, '')
.replace(/<\/p>/g, '')
.trim();
if (!tipContent.length) {
return; // Empty tip
}
else {
$(this).addClass('h5p-has-tip');
}
// Add tip
var $wrap = $('<div/>', {
'class': 'h5p-multichoice-tipwrap',
'aria-label': params.UI.tipAvailable + '.'
});
var $multichoiceTip = $('<div>', {
'role': 'button',
'tabindex': 0,
'title': params.UI.tipsLabel,
'aria-label': params.UI.tipsLabel,
'aria-expanded': false,
'class': 'multichoice-tip',
appendTo: $wrap
});
var tipIconHtml = '<span class="joubel-icon-tip-normal">' +
'<span class="h5p-icon-shadow"></span>' +
'<span class="h5p-icon-speech-bubble"></span>' +
'<span class="h5p-icon-info"></span>' +
'</span>';
$multichoiceTip.append(tipIconHtml);
$multichoiceTip.click(function () {
var $tipContainer = $multichoiceTip.parents('.h5p-answer');
var openFeedback = !$tipContainer.children('.h5p-feedback-dialog').is($feedbackDialog);
removeFeedbackDialog();
// Do not open feedback if it was open
if (openFeedback) {
$multichoiceTip.attr('aria-expanded', true);
// Add tip dialog
addFeedback($tipContainer, tip);
$feedbackDialog.addClass('h5p-has-tip');
// Tip for readspeaker
self.read(tip);
}
else {
$multichoiceTip.attr('aria-expanded', false);
}
self.trigger('resize');
// Remove tip dialog on dom click
setTimeout(function () {
$myDom.click(removeFeedbackDialog);
}, 100);
// Do not propagate
return false;
}).keydown(function (e) {
if (e.which === 32) {
$(this).click();
return false;
}
});
$('.h5p-alternative-container', this).append($wrap);
});
// Set event listeners.
var toggleCheck = function ($ans) {
if ($ans.attr('aria-disabled') === 'true') {
return;
}
self.answered = true;
var num = parseInt($ans.data('id'));
if (params.behaviour.singleAnswer) {
// Store answer
params.userAnswers = [num];
// Calculate score
score = (params.answers[num].correct ? 1 : 0);
// De-select previous answer
$answers.not($ans).removeClass('h5p-selected').attr('tabindex', '-1').attr('aria-checked', 'false');
// Select new answer
$ans.addClass('h5p-selected').attr('tabindex', '0').attr('aria-checked', 'true');
}
else {
if ($ans.attr('aria-checked') === 'true') {
const pos = params.userAnswers.indexOf(num);
if (pos !== -1) {
params.userAnswers.splice(pos, 1);
}
// Do not allow un-checking when retry disabled and auto check
if (params.behaviour.autoCheck && !params.behaviour.enableRetry) {
return;
}
// Remove check
$ans.removeClass('h5p-selected').attr('aria-checked', 'false');
}
else {
params.userAnswers.push(num);
$ans.addClass('h5p-selected').attr('aria-checked', 'true');
}
// Calculate score
calcScore();
}
self.triggerXAPI('interacted');
hideSolution($ans);
if (params.userAnswers.length) {
self.showButton('check-answer');
self.hideButton('try-again');
self.hideButton('show-solution');
if (params.behaviour.autoCheck) {
if (params.behaviour.singleAnswer) {
// Only a single answer allowed
checkAnswer();
}
else {
// Show feedback for selected alternatives
self.showCheckSolution(true);
// Always finish task if it was completed successfully
if (score === self.getMaxScore()) {
checkAnswer();
}
}
}
}
};
$answers.click(function () {
toggleCheck($(this));
}).keydown(function (e) {
if (e.keyCode === 32) { // Space bar
// Select current item
toggleCheck($(this));
return false;
}
if (params.behaviour.singleAnswer) {
switch (e.keyCode) {
case 38: // Up
case 37: { // Left
// Try to select previous item
var $prev = $(this).prev();
if ($prev.length) {
toggleCheck($prev.focus());
}
return false;
}
case 40: // Down
case 39: { // Right
// Try to select next item
var $next = $(this).next();
if ($next.length) {
toggleCheck($next.focus());
}
return false;
}
}
}
});
if (params.behaviour.singleAnswer) {
// Special focus handler for radio buttons
$answers.focus(function () {
if ($(this).attr('aria-disabled') !== 'true') {
$answers.not(this).attr('tabindex', '-1');
}
}).blur(function () {
if (!$answers.filter('.h5p-selected').length) {
$answers.first().add($answers.last()).attr('tabindex', '0');
}
});
}
// Adds check and retry button
addButtons();
if (!params.behaviour.singleAnswer) {
calcScore();
}
else {
if (params.userAnswers.length && params.answers[params.userAnswers[0]].correct) {
score = 1;
}
else {
score = 0;
}
}
// Has answered through auto-check in a previous session
if (hasCheckedAnswer && params.behaviour.autoCheck) {
// Check answers if answer has been given or max score reached
if (params.behaviour.singleAnswer || score === self.getMaxScore()) {
checkAnswer();
}
else {
// Show feedback for checked checkboxes
self.showCheckSolution(true);
}
}
};
this.showAllSolutions = function () {
if (solutionsVisible) {
return;
}
solutionsVisible = true;
$myDom.find('.h5p-answer').each(function (i, e) {
var $e = $(e);
var a = params.answers[i];
const className = 'h5p-solution-icon-' + (params.behaviour.singleAnswer ? 'radio' : 'checkbox');
if (a.correct) {
$e.addClass('h5p-should').append($('<span/>', {
'class': className,
html: params.UI.shouldCheck + '.'
}));
}
else {
$e.addClass('h5p-should-not').append($('<span/>', {
'class': className,
html: params.UI.shouldNotCheck + '.'
}));
}
}).find('.h5p-question-plus-one, .h5p-question-minus-one').remove();
// Make sure input is disabled in solution mode
disableInput();
// Move focus back to the first alternative so that the user becomes
// aware that the solution is being shown.
$myDom.find('.h5p-answer:first-child').focus();
//Hide buttons and retry depending on settings.
self.hideButton('check-answer');
self.hideButton('show-solution');
if (params.behaviour.enableRetry) {
self.showButton('try-again');
}
self.trigger('resize');
};
/**
* Used in contracts.
* Shows the solution for the task and hides all buttons.
*/
this.showSolutions = function () {
removeFeedbackDialog();
self.showCheckSolution();
self.showAllSolutions();
disableInput();
self.hideButton('try-again');
};
/**
* Hide solution for the given answer(s)
*
* @private
* @param {H5P.jQuery} $answer
*/
var hideSolution = function ($answer) {
$answer
.removeClass('h5p-correct')
.removeClass('h5p-wrong')
.removeClass('h5p-should')
.removeClass('h5p-should-not')
.removeClass('h5p-has-feedback')
.find('.h5p-question-plus-one, ' +
'.h5p-question-minus-one, ' +
'.h5p-answer-icon, ' +
'.h5p-solution-icon-radio, ' +
'.h5p-solution-icon-checkbox, ' +
'.h5p-feedback-dialog')
.remove();
};
/**
*
*/
this.hideSolutions = function () {
solutionsVisible = false;
hideSolution($('.h5p-answer', $myDom));
this.removeFeedback(); // Reset feedback
self.trigger('resize');
};
/**
* Resets the whole task.
* Used in contracts with integrated content.
* @private
* @param {boolean} moveFocus True to move the focus to first option
* This prevents loss of focus if reset from within content
*/
this.resetTask = function (moveFocus = false) {
for (let i = 0; i < params.answers.length; i++) {
if (params.answers[i].checked) {
delete params.answers[i].checked;
}
}
self.answered = false;
self.hideSolutions();
params.userAnswers = [];
removeSelections(moveFocus);
self.showButton('check-answer');
self.hideButton('try-again');
self.hideButton('show-solution');
enableInput();
$myDom?.find('.h5p-feedback-available').remove();
};
var calculateMaxScore = function () {
if (blankIsCorrect) {
return params.weight;
}
var maxScore = 0;
for (var i = 0; i < params.answers.length; i++) {
var choice = params.answers[i];
if (choice.correct) {
maxScore += (choice.weight !== undefined ? choice.weight : 1);
}
}
return maxScore;
};
this.getMaxScore = function () {
return (!params.behaviour.singleAnswer && !params.behaviour.singlePoint ? calculateMaxScore() : params.weight);
};
/**
* Check answer
*/
var checkAnswer = function () {
// Unbind removal of feedback dialogs on click
$myDom.unbind('click', removeFeedbackDialog);
// Remove all tip dialogs
removeFeedbackDialog();
if (params.behaviour.enableSolutionsButton) {
self.showButton('show-solution');
}
if (params.behaviour.enableRetry) {
self.showButton('try-again');
}
self.hideButton('check-answer');
self.showCheckSolution();
disableInput();
var xAPIEvent = self.createXAPIEventTemplate('answered');
addQuestionToXAPI(xAPIEvent);
addResponseToXAPI(xAPIEvent);
self.trigger(xAPIEvent);
};
/**
* Adds the ui buttons.
* @private
*/
var addButtons = function () {
var $content = $('[data-content-id="' + self.contentId + '"].h5p-content');
var $containerParents = $content.parents('.h5p-container');
// select find container to attach dialogs to
var $container;
if($containerParents.length !== 0) {
// use parent highest up if any
$container = $containerParents.last();
}
else if($content.length !== 0){
$container = $content;
}
else {
$container = $(document.body);
}
// Show solution button
self.addButton('show-solution', params.UI.showSolutionButton, function () {
if (params.behaviour.showSolutionsRequiresInput && !self.getAnswerGiven(true)) {
// Require answer before solution can be viewed
self.updateFeedbackContent(params.UI.noInput);
self.read(params.UI.noInput);
}
else {
calcScore();
self.showAllSolutions();
}
}, false, {
'aria-label': params.UI.a11yShowSolution,
});
// Check button
if (params.behaviour.enableCheckButton && (!params.behaviour.autoCheck || !params.behaviour.singleAnswer)) {
self.addButton('check-answer', params.UI.checkAnswerButton,
function () {
self.answered = true;
checkAnswer();
$myDom.find('.h5p-answer:first-child').focus();
},
true,
{
'aria-label': params.UI.a11yCheck,
},
{
confirmationDialog: {
enable: params.behaviour.confirmCheckDialog,
l10n: params.confirmCheck,
instance: self,
$parentElement: $container
},
contentData: self.contentData,
textIfSubmitting: params.UI.submitAnswerButton,
}
);
}
// Try Again button
self.addButton('try-again', params.UI.tryAgainButton, function () {
self.resetTask(true);
if (params.behaviour.randomAnswers) {
// reshuffle answers
var oldIdMap = idMap;
idMap = getShuffleMap();
var answersDisplayed = $myDom.find('.h5p-answer');
// remember tips
var tip = [];
for (i = 0; i < answersDisplayed.length; i++) {
tip[i] = $(answersDisplayed[i]).find('.h5p-multichoice-tipwrap');
}
// Those two loops cannot be merged or you'll screw up your tips
for (i = 0; i < answersDisplayed.length; i++) {
// move tips and answers on display
$(answersDisplayed[i]).find('.h5p-alternative-inner').html(params.answers[i].text);
$(tip[i]).detach().appendTo($(answersDisplayed[idMap.indexOf(oldIdMap[i])]).find('.h5p-alternative-container'));
}
}
}, false, {
'aria-label': params.UI.a11yRetry,
}, {
confirmationDialog: {
enable: params.behaviour.confirmRetryDialog,
l10n: params.confirmRetry,
instance: self,
$parentElement: $container
}
});
};
/**
* Determine which feedback text to display
*
* @param {number} score
* @param {number} max
* @return {string}
*/
var getFeedbackText = function (score, max) {
var ratio = (score / max);
var feedback = H5P.Question.determineOverallFeedback(params.overallFeedback, ratio);
return feedback.replace('@score', score).replace('@total', max);
};
/**
* Shows feedback on the selected fields.
* @public
* @param {boolean} [skipFeedback] Skip showing feedback if true
*/
this.showCheckSolution = function (skipFeedback) {
var scorePoints;
if (!(params.behaviour.singleAnswer || params.behaviour.singlePoint || !params.behaviour.showScorePoints)) {
scorePoints = new H5P.Question.ScorePoints();
}
$myDom.find('.h5p-answer').each(function (i, e) {
var $e = $(e);
var a = params.answers[i];
var chosen = ($e.attr('aria-checked') === 'true');
if (chosen) {
if (a.correct) {
// May already have been applied by instant feedback
if (!$e.hasClass('h5p-correct')) {
$e.addClass('h5p-correct').append($('<span/>', {
'class': 'h5p-answer-icon',
html: params.UI.correctAnswer + '.'
}));
}
}
else {
if (!$e.hasClass('h5p-wrong')) {
$e.addClass('h5p-wrong').append($('<span/>', {
'class': 'h5p-answer-icon',
html: params.UI.wrongAnswer + '.'
}));
}
}
if (scorePoints) {
var alternativeContainer = $e[0].querySelector('.h5p-alternative-container');
if (!params.behaviour.autoCheck || alternativeContainer.querySelector('.h5p-question-plus-one, .h5p-question-minus-one') === null) {
alternativeContainer.appendChild(scorePoints.getElement(a.correct));
}
}
}
if (!skipFeedback) {
if (chosen && a.tipsAndFeedback.chosenFeedback !== undefined && a.tipsAndFeedback.chosenFeedback !== '') {
addFeedback($e, a.tipsAndFeedback.chosenFeedback);
}
else if (!chosen && a.tipsAndFeedback.notChosenFeedback !== undefined && a.tipsAndFeedback.notChosenFeedback !== '') {
addFeedback($e, a.tipsAndFeedback.notChosenFeedback);
}
}
});
// Determine feedback
var max = self.getMaxScore();
// Disable task if maxscore is achieved
var fullScore = (score === max);
if (fullScore) {
self.hideButton('check-answer');
self.hideButton('try-again');
self.hideButton('show-solution');
}
// Show feedback
if (!skipFeedback) {
this.setFeedback(getFeedbackText(score, max), score, max, params.UI.scoreBarLabel);
}
self.trigger('resize');
};
/**
* Disables choosing new input.
*/
var disableInput = function () {
$('.h5p-answer', $myDom).attr({
'aria-disabled': 'true',
'tabindex': '-1'
}).removeAttr('role')
.removeAttr('aria-checked');
$('.h5p-answers').removeAttr('role');
};
/**
* Enables new input.
*/
var enableInput = function () {
$('.h5p-answer', $myDom)
.attr({
'aria-disabled': 'false',
'role': params.behaviour.singleAnswer ? 'radio' : 'checkbox',
});
$('.h5p-answers').attr('role', params.role);
};
var calcScore = function () {
score = 0;
for (const answer of params.userAnswers) {
const choice = params.answers[answer];
const weight = (choice.weight !== undefined ? choice.weight : 1);
if (choice.correct) {
score += weight;
}
else {
score -= weight;
}
}
if (score < 0) {
score = 0;
}
if (!params.userAnswers.length && blankIsCorrect) {
score = params.weight;
}
if (params.behaviour.singlePoint) {
score = (100 * score / calculateMaxScore()) >= params.behaviour.passPercentage ? params.weight : 0;
}
};
/**
* Removes selections from task.
*/
var removeSelections = function (moveFocus) {
var $answers = $('.h5p-answer', $myDom)
.removeClass('h5p-selected')
.attr('aria-checked', 'false');
if (!params.behaviour.singleAnswer) {
$answers.attr('tabindex', '0');
}
else {
$answers.first().attr('tabindex', '0');
}
// Set focus to first option
if (moveFocus || self.isRoot()) {
$answers.first().focus();
}
calcScore();
};
/**
* Get xAPI data.
* Contract used by report rendering engine.
*
* @see contract at {@link https://h5p.org/documentation/developers/contracts#guides-header-6}
*/
this.getXAPIData = function(){
var xAPIEvent = this.createXAPIEventTemplate('answered');
addQuestionToXAPI(xAPIEvent);
addResponseToXAPI(xAPIEvent);
return {
statement: xAPIEvent.data.statement
};
};
/**
* Add the question itself to the definition part of an xAPIEvent
*/
var addQuestionToXAPI = function (xAPIEvent) {
var definition = xAPIEvent.getVerifiedStatementValue(['object', 'definition']);
definition.description = {
'en-US': params.question,
};
definition.type = 'http://adlnet.gov/expapi/activities/cmi.interaction';
definition.interactionType = 'choice';
definition.correctResponsesPattern = [];
definition.choices = [];
for (var i = 0; i < params.answers.length; i++) {
definition.choices[i] = {
'id': params.answers[i].originalOrder + '',
'description': {
// Remove tags, must wrap in div tag because jQuery 1.9 will crash if the string isn't wrapped in a tag.
'en-US': $('<div>' + params.answers[i].text + '</div>').text()
}
};
if (params.answers[i].correct) {
if (!params.singleAnswer) {
if (definition.correctResponsesPattern.length) {
definition.correctResponsesPattern[0] += '[,]';
// This looks insane, but it's how you separate multiple answers
// that must all be chosen to achieve perfect score...
}
else {
definition.correctResponsesPattern.push('');
}
definition.correctResponsesPattern[0] += params.answers[i].originalOrder;
}
else {
definition.correctResponsesPattern.push('' + params.answers[i].originalOrder);
}
}
}
};
/**
* Add the response part to an xAPI event
*
* @param {H5P.XAPIEvent} xAPIEvent
* The xAPI event we will add a response to
*/
var addResponseToXAPI = function (xAPIEvent) {
var maxScore = self.getMaxScore();
var success = (100 * score / maxScore) >= params.behaviour.passPercentage;
xAPIEvent.setScoredResult(score, maxScore, self, true, success);
if (params.userAnswers === undefined) {
calcScore();
}
// Add the response
var response = '';
for (var i = 0; i < params.userAnswers.length; i++) {
if (response !== '') {
response += '[,]';
}
response += idMap === undefined ? params.userAnswers[i] : idMap[params.userAnswers[i]];
}
xAPIEvent.data.statement.result.response = response;
};
/**
* Create a map pointing from original answers to shuffled answers
*
* @return {number[]} map pointing from original answers to shuffled answers
*/
var getShuffleMap = function() {
params.answers = H5P.shuffleArray(params.answers);
// Create a map from the new id to the old one
var idMap = [];
for (i = 0; i < params.answers.length; i++) {
idMap[i] = params.answers[i].originalOrder;
}
return idMap;
};
// Initialization code
// Randomize order, if requested
var idMap;
// Store original order in answers
for (i = 0; i < params.answers.length; i++) {
params.answers[i].originalOrder = i;
}
if (params.behaviour.randomAnswers) {
idMap = getShuffleMap();
}
// Start with an empty set of user answers.
params.userAnswers = [];
// Restore previous state
if (contentData && contentData.previousState !== undefined) {
// Restore answers
if (contentData.previousState.answers) {
if (!idMap) {
params.userAnswers = contentData.previousState.answers;
}
else {
// The answers have been shuffled, and we must use the id mapping.
for (i = 0; i < contentData.previousState.answers.length; i++) {
for (var k = 0; k < idMap.length; k++) {
if (idMap[k] === contentData.previousState.answers[i]) {
params.userAnswers.push(k);
}
}
}
}
calcScore();
}
}
var hasCheckedAnswer = false;
// Loop through choices
for (var j = 0; j < params.answers.length; j++) {
var ans = params.answers[j];
if (!params.behaviour.singleAnswer) {
// Set role
ans.role = 'checkbox';
ans.tabindex = '0';
if (params.userAnswers.indexOf(j) !== -1) {
ans.checked = 'true';
hasCheckedAnswer = true;
}
}
else {
// Set role
ans.role = 'radio';
// Determine tabindex, checked and extra classes
if (params.userAnswers.length === 0) {
// No correct answers
if (i === 0 || i === params.answers.length) {
ans.tabindex = '0';
}
}
else if (params.userAnswers.indexOf(j) !== -1) {
// This is the correct choice
ans.tabindex = '0';
ans.checked = 'true';
hasCheckedAnswer = true;
}
}
// Set default
if (ans.tabindex === undefined) {
ans.tabindex = '-1';
}
if (ans.checked === undefined) {
ans.checked = 'false';
}
}
H5P.MultiChoice.counter = (H5P.MultiChoice.counter === undefined ? 0 : H5P.MultiChoice.counter + 1);
params.role = (params.behaviour.singleAnswer ? 'radiogroup' : 'group');
params.labelId = 'h5p-mcq' + H5P.MultiChoice.counter;
/**
* Pack the current state of the interactivity into a object that can be
* serialized.
*
* @public
*/
this.getCurrentState = function () {
var state = {};
if (!idMap) {
state.answers = params.userAnswers;
}
else {
// The answers have been shuffled and must be mapped back to their
// original ID.
state.answers = [];
for (var i = 0; i < params.userAnswers.length; i++) {
state.answers.push(idMap[params.userAnswers[i]]);
}
}
return state;
};
/**
* Check if user has given an answer.
*
* @param {boolean} [ignoreCheck] Ignore returning true from pressing "check-answer" button.
* @return {boolean} True if answer is given
*/
this.getAnswerGiven = function (ignoreCheck) {
var answered = ignoreCheck ? false : this.answered;
return answered || params.userAnswers.length > 0 || blankIsCorrect;
};
this.getScore = function () {
return score;
};
this.getTitle = function () {
return H5P.createTitle((this.contentData && this.contentData.metadata && this.contentData.metadata.title) ? this.contentData.metadata.title : 'Multiple Choice');
};
};
H5P.MultiChoice.prototype = Object.create(H5P.Question.prototype);
H5P.MultiChoice.prototype.constructor = H5P.MultiChoice;
;
H5P.TrueFalse = (function ($, Question) {
'use strict';
// Maximum score for True False
var MAX_SCORE = 1;
/**
* Enum containing the different states this content type can exist in
*
* @enum
*/
var State = Object.freeze({
ONGOING: 1,
FINISHED_WRONG: 2,
FINISHED_CORRECT: 3,
INTERNAL_SOLUTION: 4,
EXTERNAL_SOLUTION: 5
});
/**
* Button IDs
*/
var Button = Object.freeze({
CHECK: 'check-answer',
TRYAGAIN: 'try-again',
SHOW_SOLUTION: 'show-solution'
});
/**
* Initialize module.
*
* @class H5P.TrueFalse
* @extends H5P.Question
* @param {Object} options
* @param {number} id Content identification
* @param {Object} contentData Task specific content data
*/
function TrueFalse(options, id, contentData) {
var self = this;
// Inheritance
Question.call(self, 'true-false');
var params = $.extend(true, {
question: 'No question text provided',
correct: 'true',
l10n: {
trueText: 'True',
falseText: 'False',
score: 'You got @score of @total points',
checkAnswer: 'Check',
submitAnswer: 'Submit',
showSolutionButton: 'Show solution',
tryAgain: 'Retry',
wrongAnswerMessage: 'Wrong answer',
correctAnswerMessage: 'Correct answer',
scoreBarLabel: 'You got :num out of :total points',
a11yCheck: 'Check the answers. The responses will be marked as correct, incorrect, or unanswered.',
a11yShowSolution: 'Show the solution. The task will be marked with its correct solution.',
a11yRetry: 'Retry the task. Reset all responses and start the task over again.',
},
behaviour: {
enableRetry: true,
enableSolutionsButton: true,
enableCheckButton: true,
confirmCheckDialog: false,
confirmRetryDialog: false,
autoCheck: false
}
}, options);
// Counter used to create unique id for this question
TrueFalse.counter = (TrueFalse.counter === undefined ? 0 : TrueFalse.counter + 1);
// A unique ID is needed for aria label
var domId = 'h5p-tfq' + H5P.TrueFalse.counter;
// saves the content id
this.contentId = id;
this.contentData = contentData;
// The radio group
var answerGroup = new H5P.TrueFalse.AnswerGroup(domId, params.correct, params.l10n);
if (contentData.previousState !== undefined && contentData.previousState.answer !== undefined) {
answerGroup.check(contentData.previousState.answer);
}
answerGroup.on('selected', function () {
self.triggerXAPI('interacted');
if (params.behaviour.autoCheck) {
checkAnswer();
triggerXAPIAnswered();
}
});
/**
* Create the answers
*
* @method createAnswers
* @private
* @return {H5P.jQuery}
*/
var createAnswers = function () {
return answerGroup.getDomElement();
};
/**
* Register buttons
*
* @method registerButtons
* @private
*/
var registerButtons = function () {
var $content = $('[data-content-id="' + self.contentId + '"].h5p-content');
var $containerParents = $content.parents('.h5p-container');
// select find container to attach dialogs to
var $container;
if($containerParents.length !== 0) {
// use parent highest up if any
$container = $containerParents.last();
}
else if($content.length !== 0){
$container = $content;
}
else {
$container = $(document.body);
}
// Show solution button
if (params.behaviour.enableSolutionsButton === true) {
self.addButton(Button.SHOW_SOLUTION, params.l10n.showSolutionButton, function () {
self.showSolutions(true);
}, false, {
'aria-label': params.l10n.a11yShowSolution,
});
}
// Check button
if (!params.behaviour.autoCheck && params.behaviour.enableCheckButton) {
self.addButton(Button.CHECK, params.l10n.checkAnswer, function () {
checkAnswer();
triggerXAPIAnswered();
}, true, {
'aria-label': params.l10n.a11yCheck
}, {
confirmationDialog: {
enable: params.behaviour.confirmCheckDialog,
l10n: params.confirmCheck,
instance: self,
$parentElement: $container
},
contentData: self.contentData,
textIfSubmitting: params.l10n.submitAnswer,
});
}
// Try again button
if (params.behaviour.enableRetry === true) {
self.addButton(Button.TRYAGAIN, params.l10n.tryAgain, function () {
self.resetTask();
}, true, {
'aria-label': params.l10n.a11yRetry,
}, {
confirmationDialog: {
enable: params.behaviour.confirmRetryDialog,
l10n: params.confirmRetry,
instance: self,
$parentElement: $container
}
});
}
toggleButtonState(State.ONGOING);
};
/**
* Creates and triggers the xAPI answered event
*
* @method triggerXAPIAnswered
* @private
* @fires xAPIEvent
*/
var triggerXAPIAnswered = function () {
var xAPIEvent = self.createXAPIEventTemplate('answered');
addQuestionToXAPI(xAPIEvent);
addResponseToXAPI(xAPIEvent);
self.trigger(xAPIEvent);
};
/**
* Add the question itself to the definition part of an xAPIEvent
*
* @method addQuestionToXAPI
* @param {XAPIEvent} xAPIEvent
* @private
*/
var addQuestionToXAPI = function(xAPIEvent) {
var definition = xAPIEvent.getVerifiedStatementValue(['object', 'definition']);
definition.description = {
// Remove tags, must wrap in div tag because jQuery 1.9 will crash if the string isn't wrapped in a tag.
'en-US': $('<div>' + params.question + '</div>').text()
};
definition.type = 'http://adlnet.gov/expapi/activities/cmi.interaction';
definition.interactionType = 'true-false';
definition.correctResponsesPattern = [getCorrectAnswer()];
};
/**
* Returns the correct answer
*
* @method getCorrectAnswer
* @private
* @return {String}
*/
var getCorrectAnswer = function () {
return (params.correct === 'true' ? 'true' : 'false');
};
/**
* Returns the wrong answer
*
* @method getWrongAnswer
* @private
* @return {String}
*/
var getWrongAnswer = function () {
return (params.correct === 'false' ? 'true' : 'false');
};
/**
* Add the response part to an xAPI event
*
* @method addResponseToXAPI
* @private
* @param {H5P.XAPIEvent} xAPIEvent
* The xAPI event we will add a response to
*/
var addResponseToXAPI = function(xAPIEvent) {
var isCorrect = answerGroup.isCorrect();
xAPIEvent.setScoredResult(isCorrect ? MAX_SCORE : 0, MAX_SCORE, self, true, isCorrect);
xAPIEvent.data.statement.result.response = (isCorrect ? getCorrectAnswer() : getWrongAnswer());
};
/**
* Toggles btton visibility dependent of current state
*
* @method toggleButtonVisibility
* @private
* @param {String} buttonId
* @param {Boolean} visible
*/
var toggleButtonVisibility = function (buttonId, visible) {
if (visible === true) {
self.showButton(buttonId);
}
else {
self.hideButton(buttonId);
}
};
/**
* Toggles buttons state
*
* @method toggleButtonState
* @private
* @param {String} state
*/
var toggleButtonState = function (state) {
toggleButtonVisibility(Button.SHOW_SOLUTION, state === State.FINISHED_WRONG);
toggleButtonVisibility(Button.CHECK, state === State.ONGOING);
toggleButtonVisibility(Button.TRYAGAIN, state === State.FINISHED_WRONG || state === State.INTERNAL_SOLUTION);
};
/**
* Check if answer is correct or wrong, and update visuals accordingly
*
* @method checkAnswer
* @private
*/
var checkAnswer = function () {
// Create feedback widget
var score = self.getScore();
var scoreText;
toggleButtonState(score === MAX_SCORE ? State.FINISHED_CORRECT : State.FINISHED_WRONG);
if (score === MAX_SCORE && params.behaviour.feedbackOnCorrect) {
scoreText = params.behaviour.feedbackOnCorrect;
}
else if (score === 0 && params.behaviour.feedbackOnWrong) {
scoreText = params.behaviour.feedbackOnWrong;
}
else {
scoreText = params.l10n.score;
}
// Replace relevant variables:
scoreText = scoreText.replace('@score', score).replace('@total', MAX_SCORE);
self.setFeedback(scoreText, score, MAX_SCORE, params.l10n.scoreBarLabel);
answerGroup.reveal();
};
/**
* Registers this question type's DOM elements before they are attached.
* Called from H5P.Question.
*
* @method registerDomElements
* @private
*/
self.registerDomElements = function () {
var self = this;
// Check for task media
var media = params.media;
if (media && media.type && media.type.library) {
media = media.type;
var type = media.library.split(' ')[0];
if (type === 'H5P.Image') {
if (media.params.file) {
// Register task image
self.setImage(media.params.file.path, {
disableImageZooming: params.media.disableImageZooming || false,
alt: media.params.alt,
title: media.params.title,
expandImage: media.params.expandImage,
minimizeImage: media.params.minimizeImage
});
}
}
else if (type === 'H5P.Video') {
if (media.params.sources) {
// Register task video
self.setVideo(media);
}
}
else if (type === 'H5P.Audio') {
if (media.params.files) {
// Register task audio
self.setAudio(media);
}
}
}
// Add task question text
self.setIntroduction('<div id="' + domId + '">' + params.question + '</div>');
// Register task content area
self.$content = createAnswers();
self.setContent(self.$content);
// ... and buttons
registerButtons();
};
/**
* Implements resume (save content state)
*
* @method getCurrentState
* @public
* @returns {object} object containing answer
*/
self.getCurrentState = function () {
return {answer: answerGroup.getAnswer()};
};
/**
* Used for contracts.
* Checks if the parent program can proceed. Always true.
*
* @method getAnswerGiven
* @public
* @returns {Boolean} true
*/
self.getAnswerGiven = function () {
return answerGroup.hasAnswered();
};
/**
* Used for contracts.
* Checks the current score for this task.
*
* @method getScore
* @public
* @returns {Number} The current score.
*/
self.getScore = function () {
return answerGroup.isCorrect() ? MAX_SCORE : 0;
};
/**
* Used for contracts.
* Checks the maximum score for this task.
*
* @method getMaxScore
* @public
* @returns {Number} The maximum score.
*/
self.getMaxScore = function () {
return MAX_SCORE;
};
/**
* Get title of task
*
* @method getTitle
* @public
* @returns {string} title
*/
self.getTitle = function () {
return H5P.createTitle((self.contentData && self.contentData.metadata && self.contentData.metadata.title) ? self.contentData.metadata.title : 'True-False');
};
/**
* Used for contracts.
* Show the solution.
*
* @method showSolutions
* @public
*/
self.showSolutions = function (internal) {
checkAnswer();
answerGroup.showSolution();
toggleButtonState(internal ? State.INTERNAL_SOLUTION : State.EXTERNAL_SOLUTION);
};
/**
* Used for contracts.
* Resets the complete task back to its' initial state.
*
* @method resetTask
* @public
*/
self.resetTask = function () {
answerGroup.reset();
self.removeFeedback();
toggleButtonState(State.ONGOING);
};
/**
* Get xAPI data.
* Contract used by report rendering engine.
*
* @see contract at {@link https://h5p.org/documentation/developers/contracts#guides-header-6}
*/
self.getXAPIData = function(){
var xAPIEvent = this.createXAPIEventTemplate('answered');
this.addQuestionToXAPI(xAPIEvent);
this.addResponseToXAPI(xAPIEvent);
return {
statement: xAPIEvent.data.statement
};
};
/**
* Add the question itself to the definition part of an xAPIEvent
*/
self.addQuestionToXAPI = function(xAPIEvent) {
var definition = xAPIEvent.getVerifiedStatementValue(['object', 'definition']);
$.extend(definition, this.getxAPIDefinition());
};
/**
* Generate xAPI object definition used in xAPI statements.
* @return {Object}
*/
self.getxAPIDefinition = function () {
var definition = {};
definition.interactionType = 'true-false';
definition.type = 'http://adlnet.gov/expapi/activities/cmi.interaction';
definition.description = {
'en-US': $('<div>' + params.question + '</div>').text()
};
definition.correctResponsesPattern = [getCorrectAnswer()];
return definition;
};
/**
* Add the response part to an xAPI event
*
* @param {H5P.XAPIEvent} xAPIEvent
* The xAPI event we will add a response to
*/
self.addResponseToXAPI = function (xAPIEvent) {
var isCorrect = answerGroup.isCorrect();
var rawUserScore = isCorrect ? MAX_SCORE : 0;
var currentResponse = '';
xAPIEvent.setScoredResult(rawUserScore, MAX_SCORE, self, true, isCorrect);
if(self.getCurrentState().answer !== undefined) {
currentResponse += answerGroup.isCorrect() ? getCorrectAnswer() : getWrongAnswer();
}
xAPIEvent.data.statement.result.response = currentResponse;
};
}
// Inheritance
TrueFalse.prototype = Object.create(Question.prototype);
TrueFalse.prototype.constructor = TrueFalse;
return TrueFalse;
})(H5P.jQuery, H5P.Question);
;
H5P.TrueFalse.AnswerGroup = (function ($, EventDispatcher) {
'use strict';
/**
* Initialize module.
*
* @class H5P.TrueFalse.AnswerGroup
* @extends H5P.EventDispatcher
* @param {String} domId Id for label
* @param {String} correctOption Correct option ('true' or 'false')
* @param {Object} l10n Object containing all interface translations
*/
function AnswerGroup(domId, correctOption, l10n) {
var self = this;
EventDispatcher.call(self);
var $answers = $('<div>', {
'class': 'h5p-true-false-answers',
role: 'radiogroup',
'aria-labelledby': domId
});
var answer;
var trueAnswer = new H5P.TrueFalse.Answer(l10n.trueText, l10n.correctAnswerMessage, l10n.wrongAnswerMessage);
var falseAnswer = new H5P.TrueFalse.Answer(l10n.falseText, l10n.correctAnswerMessage, l10n.wrongAnswerMessage);
var correctAnswer = (correctOption === 'true' ? trueAnswer : falseAnswer);
var wrongAnswer = (correctOption === 'false' ? trueAnswer : falseAnswer);
// Handle checked
var handleChecked = function (newAnswer, other) {
return function () {
answer = newAnswer;
other.uncheck();
self.trigger('selected');
};
};
trueAnswer.on('checked', handleChecked(true, falseAnswer));
falseAnswer.on('checked', handleChecked(false, trueAnswer));
// Handle switches (using arrow keys)
var handleInvert = function (newAnswer, other) {
return function () {
answer = newAnswer;
other.check();
self.trigger('selected');
};
};
trueAnswer.on('invert', handleInvert(false, falseAnswer));
falseAnswer.on('invert', handleInvert(true, trueAnswer));
// Handle tabbing
var handleTabable = function(other, tabable) {
return function () {
// If one of them are checked, that one should get tabfocus
if (!tabable || !self.hasAnswered() || other.isChecked()) {
other.tabable(tabable);
}
};
};
// Need to remove tabIndex on the other alternative on focus
trueAnswer.on('focus', handleTabable(falseAnswer, false));
falseAnswer.on('focus', handleTabable(trueAnswer, false));
// Need to make both alternatives tabable on blur:
trueAnswer.on('blur', handleTabable(falseAnswer, true));
falseAnswer.on('blur', handleTabable(trueAnswer, true));
$answers.append(trueAnswer.getDomElement());
$answers.append(falseAnswer.getDomElement());
/**
* Get hold of the DOM element representing this thingy
* @method getDomElement
* @return {jQuery}
*/
self.getDomElement = function () {
return $answers;
};
/**
* Programatic check
* @method check
* @param {[type]} answer [description]
*/
self.check = function (answer) {
if (answer) {
trueAnswer.check();
}
else {
falseAnswer.check();
}
};
/**
* Return current answer
* @method getAnswer
* @return {Boolean} undefined if no answer if given
*/
self.getAnswer = function () {
return answer;
};
/**
* Check if user has answered question yet
* @method hasAnswered
* @return {Boolean}
*/
self.hasAnswered = function () {
return answer !== undefined;
};
/**
* Is answer correct?
* @method isCorrect
* @return {Boolean}
*/
self.isCorrect = function () {
return correctAnswer.isChecked();
};
/**
* Enable user input
*
* @method enable
*/
self.enable = function () {
trueAnswer.enable().tabable(true);
falseAnswer.enable();
};
/**
* Disable user input
*
* @method disable
*/
self.disable = function () {
trueAnswer.disable();
falseAnswer.disable();
};
/**
* Reveal correct/wrong answer
*
* @method reveal
*/
self.reveal = function () {
if (self.hasAnswered()) {
if (self.isCorrect()) {
correctAnswer.markCorrect();
}
else {
wrongAnswer.markWrong();
}
}
self.disable();
};
/**
* Reset task
* @method reset
*/
self.reset = function () {
trueAnswer.reset();
falseAnswer.reset();
self.enable();
answer = undefined;
};
/**
* Show the solution
* @method showSolution
* @return {[type]}
*/
self.showSolution = function () {
correctAnswer.markCorrect();
wrongAnswer.unmark();
};
}
// Inheritance
AnswerGroup.prototype = Object.create(EventDispatcher.prototype);
AnswerGroup.prototype.constructor = AnswerGroup;
return AnswerGroup;
})(H5P.jQuery, H5P.EventDispatcher);
;
H5P.TrueFalse.Answer = (function ($, EventDispatcher) {
'use strict';
var Keys = {
ENTER: 13,
SPACE: 32,
LEFT_ARROW: 37,
UP_ARROW: 38,
RIGHT_ARROW: 39,
DOWN_ARROW: 40
};
/**
* Initialize module.
*
* @class H5P.TrueFalse.Answer
* @extends H5P.EventDispatcher
* @param {String} text Label
* @param {String} correctMessage Message read by readspeaker when correct alternative is chosen
* @param {String} wrongMessage Message read by readspeaker when wrong alternative is chosen
*/
function Answer (text, correctMessage, wrongMessage) {
var self = this;
EventDispatcher.call(self);
var checked = false;
var enabled = true;
var $answer = $('<div>', {
'class': 'h5p-true-false-answer',
role: 'radio',
'aria-checked': false,
html: text + '<span class="aria-label"></span>',
tabindex: 0, // Tabable by default
click: function (event) {
// Handle left mouse (or tap on touch devices)
if (event.which === 1) {
self.check();
}
},
keydown: function (event) {
if (!enabled) {
return;
}
if ([Keys.SPACE, Keys.ENTER].indexOf(event.keyCode) !== -1) {
event.preventDefault();
self.check();
}
else if ([Keys.LEFT_ARROW, Keys.UP_ARROW, Keys.RIGHT_ARROW, Keys.DOWN_ARROW].indexOf(event.keyCode) !== -1) {
event.preventDefault();
self.uncheck();
self.trigger('invert');
}
},
focus: function () {
self.trigger('focus');
},
blur: function () {
self.trigger('blur');
}
});
var $ariaLabel = $answer.find('.aria-label');
// A bug in Chrome 54 makes the :after icons (V and X) not beeing rendered.
// Doing this in a timeout solves this
// Might be removed when Chrome 56 is out
var chromeBugFixer = function (callback) {
setTimeout(function () {
callback();
}, 0);
};
/**
* Return the dom element representing the alternative
*
* @public
* @method getDomElement
* @return {H5P.jQuery}
*/
self.getDomElement = function () {
return $answer;
};
/**
* Unchecks the alternative
*
* @public
* @method uncheck
* @return {H5P.TrueFalse.Answer}
*/
self.uncheck = function () {
if (enabled) {
$answer.blur();
checked = false;
chromeBugFixer(function () {
$answer.attr('aria-checked', checked);
});
}
return self;
};
/**
* Set tabable or not
* @method tabable
* @param {Boolean} enabled
* @return {H5P.TrueFalse.Answer}
*/
self.tabable = function (enabled) {
$answer.attr('tabIndex', enabled ? 0 : null);
return self;
};
/**
* Checks the alternative
*
* @method check
* @return {H5P.TrueFalse.Answer}
*/
self.check = function () {
if (enabled) {
checked = true;
chromeBugFixer(function () {
$answer.attr('aria-checked', checked);
});
self.trigger('checked');
$answer.focus();
}
return self;
};
/**
* Is this alternative checked?
*
* @method isChecked
* @return {boolean}
*/
self.isChecked = function () {
return checked;
};
/**
* Enable alternative
*
* @method enable
* @return {H5P.TrueFalse.Answer}
*/
self.enable = function () {
$answer.attr({
'aria-disabled': '',
tabIndex: 0
});
enabled = true;
return self;
};
/**
* Disables alternative
*
* @method disable
* @return {H5P.TrueFalse.Answer}
*/
self.disable = function () {
$answer.attr({
'aria-disabled': true,
tabIndex: null
});
enabled = false;
return self;
};
/**
* Reset alternative
*
* @method reset
* @return {H5P.TrueFalse.Answer}
*/
self.reset = function () {
self.enable();
self.uncheck();
self.unmark();
$ariaLabel.html('');
return self;
};
/**
* Marks this alternative as the wrong one
*
* @method markWrong
* @return {H5P.TrueFalse.Answer}
*/
self.markWrong = function () {
chromeBugFixer(function () {
$answer.addClass('wrong');
});
$ariaLabel.html('.' + wrongMessage);
return self;
};
/**
* Marks this alternative as the wrong one
*
* @method markCorrect
* @return {H5P.TrueFalse.Answer}
*/
self.markCorrect = function () {
chromeBugFixer(function () {
$answer.addClass('correct');
});
$ariaLabel.html('.' + correctMessage);
return self;
};
self.unmark = function () {
chromeBugFixer(function () {
$answer.removeClass('wrong correct');
});
return self;
};
}
// Inheritance
Answer.prototype = Object.create(EventDispatcher.prototype);
Answer.prototype.constructor = Answer;
return Answer;
})(H5P.jQuery, H5P.EventDispatcher);
;
/**
* @class
* @classdesc Keyboard navigation for accessibility support
* @extends H5P.EventDispatcher
*/
H5P.KeyboardNav = (function (EventDispatcher) {
/**
* Construct a new KeyboardNav
* @constructor
*/
function KeyboardNav() {
EventDispatcher.call(this);
/** @member {boolean} */
this.selectability = true;
/** @member {HTMLElement[]|EventTarget[]} */
this.elements = [];
}
KeyboardNav.prototype = Object.create(EventDispatcher.prototype);
KeyboardNav.prototype.constructor = KeyboardNav;
/**
* Adds a new element to navigation
*
* @param {HTMLElement} el The element
* @public
*/
KeyboardNav.prototype.addElement = function(el){
const keyDown = this.handleKeyDown.bind(this);
const onClick = this.onClick.bind(this);
el.addEventListener('keydown', keyDown);
el.addEventListener('click', onClick);
// add to array to navigate over
this.elements.push({
el: el,
keyDown: keyDown,
onClick: onClick,
});
if(this.elements.length === 1){ // if first
this.setTabbableAt(0);
}
};
/**
* Select the previous element in the list. Select the last element,
* if the current element is the first element in the list.
*
* @param {Number} index The index of currently selected element
* @public
* @fires KeyboardNav#previousOption
*/
KeyboardNav.prototype.previousOption = function (index) {
var isFirstElement = index === 0;
if (isFirstElement) {
return;
}
this.focusOnElementAt(isFirstElement ? (this.elements.length - 1) : (index - 1));
/**
* Previous option event
*
* @event KeyboardNav#previousOption
* @type KeyboardNavigationEventData
*/
this.trigger('previousOption', this.createEventPayload(index));
};
/**
* Select the next element in the list. Select the first element,
* if the current element is the first element in the list.
*
* @param {Number} index The index of the currently selected element
* @public
* @fires KeyboardNav#previousOption
*/
KeyboardNav.prototype.nextOption = function (index) {
var isLastElement = index === this.elements.length - 1;
if (isLastElement) {
return;
}
this.focusOnElementAt(isLastElement ? 0 : (index + 1));
/**
* Previous option event
*
* @event KeyboardNav#nextOption
* @type KeyboardNavigationEventData
*/
this.trigger('nextOption', this.createEventPayload(index));
};
/**
* Focus on an element by index
*
* @param {Number} index The index of the element to focus on
* @public
*/
KeyboardNav.prototype.focusOnElementAt = function (index) {
this.setTabbableAt(index);
this.getElements()[index].focus();
};
/**
* Disable possibility to select a word trough click and space or enter
*
* @public
*/
KeyboardNav.prototype.disableSelectability = function () {
this.elements.forEach(function (el) {
el.el.removeEventListener('keydown', el.keyDown);
el.el.removeEventListener('click', el.onClick);
}.bind(this));
this.selectability = false;
};
/**
* Enable possibility to select a word trough click and space or enter
*
* @public
*/
KeyboardNav.prototype.enableSelectability = function () {
this.elements.forEach(function (el) {
el.el.addEventListener('keydown', el.keyDown);
el.el.addEventListener('click', el.onClick);
}.bind(this));
this.selectability = true;
};
/**
* Sets tabbable on a single element in the list, by index
* Also removes tabbable from all other elements in the list
*
* @param {Number} index The index of the element to set tabbale on
* @public
*/
KeyboardNav.prototype.setTabbableAt = function (index) {
this.removeAllTabbable();
this.getElements()[index].setAttribute('tabindex', '0');
};
/**
* Remove tabbable from all entries
*
* @public
*/
KeyboardNav.prototype.removeAllTabbable = function () {
this.elements.forEach(function(el){
el.el.removeAttribute('tabindex');
});
};
/**
* Toggles 'aria-selected' on an element, if selectability == true
*
* @param {EventTarget|HTMLElement} el The element to select/unselect
* @private
* @fires KeyboardNav#select
*/
KeyboardNav.prototype.toggleSelect = function(el){
if(this.selectability) {
// toggle selection
el.setAttribute('aria-selected', !isElementSelected(el));
// focus current
el.setAttribute('tabindex', '0');
el.focus();
var index = this.getElements().indexOf(el);
/**
* Previous option event
*
* @event KeyboardNav#select
* @type KeyboardNavigationEventData
*/
this.trigger('select', this.createEventPayload(index));
}
};
/**
* Handles key down
*
* @param {KeyboardEvent} event Keyboard event
* @private
*/
KeyboardNav.prototype.handleKeyDown = function(event){
var index;
switch (event.which) {
case 13: // Enter
case 32: // Space
// Select
this.toggleSelect(event.target);
event.preventDefault();
break;
case 37: // Left Arrow
case 38: // Up Arrow
// Go to previous Option
index = this.getElements().indexOf(event.currentTarget);
this.previousOption(index);
event.preventDefault();
break;
case 39: // Right Arrow
case 40: // Down Arrow
// Go to next Option
index = this.getElements().indexOf(event.currentTarget);
this.nextOption(index);
event.preventDefault();
break;
}
};
/**
* Get only elements from elements array
* @returns {Array}
*/
KeyboardNav.prototype.getElements = function () {
return this.elements.map(function (el) {
return el.el;
});
};
/**
* Handles element click. Toggles 'aria-selected' on element
*
* @param {MouseEvent} event Mouse click event
* @private
*/
KeyboardNav.prototype.onClick = function(event){
this.toggleSelect(event.currentTarget);
};
/**
* Creates a paylod for event that is fired
*
* @param {Number} index
* @return {KeyboardNavigationEventData}
*/
KeyboardNav.prototype.createEventPayload = function(index){
/**
* Data that is passed along as the event parameter
*
* @typedef {Object} KeyboardNavigationEventData
* @property {HTMLElement} element
* @property {number} index
* @property {boolean} selected
*/
return {
element: this.getElements()[index],
index: index,
selected: isElementSelected(this.getElements()[index])
};
};
/**
* Sets aria-selected="true" on an element
*
* @param {HTMLElement} el The element to set selected
* @return {boolean}
*/
var isElementSelected = function(el){
return el.getAttribute('aria-selected') === 'true';
};
return KeyboardNav;
})(H5P.EventDispatcher);
;
H5P.MarkTheWords = H5P.MarkTheWords || {};
/**
* Mark the words XapiGenerator
*/
H5P.MarkTheWords.XapiGenerator = (function ($) {
/**
* Xapi statements Generator
* @param {H5P.MarkTheWords} markTheWords
* @constructor
*/
function XapiGenerator(markTheWords) {
/**
* Generate answered event
* @return {H5P.XAPIEvent}
*/
this.generateAnsweredEvent = function () {
var xAPIEvent = markTheWords.createXAPIEventTemplate('answered');
// Extend definition
var objectDefinition = createDefinition(markTheWords);
$.extend(true, xAPIEvent.getVerifiedStatementValue(['object', 'definition']), objectDefinition);
// Set score
xAPIEvent.setScoredResult(markTheWords.getScore(),
markTheWords.getMaxScore(),
markTheWords,
true,
markTheWords.getScore() === markTheWords.getMaxScore()
);
// Extend user result
var userResult = {
response: getUserSelections(markTheWords)
};
$.extend(xAPIEvent.getVerifiedStatementValue(['result']), userResult);
return xAPIEvent;
};
}
/**
* Create object definition for question
*
* @param {H5P.MarkTheWords} markTheWords
* @return {Object} Object definition
*/
function createDefinition(markTheWords) {
var definition = {};
definition.description = {
'en-US': markTheWords.params.taskDescription,
};
definition.type = 'http://adlnet.gov/expapi/activities/cmi.interaction';
definition.interactionType = 'choice';
definition.correctResponsesPattern = [getCorrectResponsesPattern(markTheWords)];
definition.choices = getChoices(markTheWords);
definition.extensions = {
'https://h5p.org/x-api/line-breaks': markTheWords.getIndexesOfLineBreaks()
};
return definition;
}
/**
* Get all choices that it is possible to choose between
*
* @param {H5P.MarkTheWords} markTheWords
* @return {Array}
*/
function getChoices(markTheWords) {
return markTheWords.selectableWords.map(function (word, index) {
var text = word.getText();
if (text.charAt(0) === '*' && text.charAt(text.length - 1) === '*') {
text = text.substr(1, text.length - 2);
}
return {
id: index.toString(),
description: {
'en-US': $('<div>' + text + '</div>').text()
}
};
});
}
/**
* Get selected words as a user response pattern
*
* @param {H5P.MarkTheWords} markTheWords
* @return {string}
*/
function getUserSelections(markTheWords) {
return markTheWords.selectableWords
.reduce(function (prev, word, index) {
if (word.isSelected()) {
prev.push(index);
}
return prev;
}, []).join('[,]');
}
/**
* Get correct response pattern from correct words
*
* @param {H5P.MarkTheWords} markTheWords
* @return {string}
*/
function getCorrectResponsesPattern(markTheWords) {
return markTheWords.selectableWords
.reduce(function (prev, word, index) {
if (word.isAnswer()) {
prev.push(index);
}
return prev;
}, []).join('[,]');
}
return XapiGenerator;
})(H5P.jQuery);
;
H5P.MarkTheWords = H5P.MarkTheWords || {};
H5P.MarkTheWords.Word = (function () {
/**
* @constant
*
* @type {string}
*/
Word.ID_MARK_MISSED = "h5p-description-missed";
/**
* @constant
*
* @type {string}
*/
Word.ID_MARK_CORRECT = "h5p-description-correct";
/**
* @constant
*
* @type {string}
*/
Word.ID_MARK_INCORRECT = "h5p-description-incorrect";
/**
* Class for keeping track of selectable words.
*
* @class
* @param {jQuery} $word
*/
function Word($word, params) {
var self = this;
self.params = params;
H5P.EventDispatcher.call(self);
var input = $word.text();
var handledInput = input;
// Check if word is an answer
var isAnswer = checkForAnswer();
// Remove single asterisk and escape double asterisks.
handleAsterisks();
if (isAnswer) {
$word.text(handledInput);
}
const ariaText = document.createElement('span');
ariaText.classList.add('hidden-but-read');
$word[0].appendChild(ariaText);
/**
* Checks if the word is an answer by checking the first, second to last and last character of the word.
*
* @private
* @return {Boolean} Returns true if the word is an answer.
*/
function checkForAnswer() {
// Check last and next to last character, in case of punctuations.
var wordString = removeDoubleAsterisks(input);
if (wordString.charAt(0) === ('*') && wordString.length > 2) {
if (wordString.charAt(wordString.length - 1) === ('*')) {
handledInput = input.slice(1, input.length - 1);
return true;
}
// If punctuation, add the punctuation to the end of the word.
else if(wordString.charAt(wordString.length - 2) === ('*')) {
handledInput = input.slice(1, input.length - 2);
return true;
}
return false;
}
return false;
}
/**
* Removes double asterisks from string, used to handle input.
*
* @private
* @param {String} wordString The string which will be handled.
* @return {String} Returns a string without double asterisks.
*/
function removeDoubleAsterisks(wordString) {
var asteriskIndex = wordString.indexOf('*');
var slicedWord = wordString;
while (asteriskIndex !== -1) {
if (wordString.indexOf('*', asteriskIndex + 1) === asteriskIndex + 1) {
slicedWord = wordString.slice(0, asteriskIndex) + wordString.slice(asteriskIndex + 2, input.length);
}
asteriskIndex = wordString.indexOf('*', asteriskIndex + 1);
}
return slicedWord;
}
/**
* Escape double asterisks ** = *, and remove single asterisk.
*
* @private
*/
function handleAsterisks() {
var asteriskIndex = handledInput.indexOf('*');
while (asteriskIndex !== -1) {
handledInput = handledInput.slice(0, asteriskIndex) + handledInput.slice(asteriskIndex + 1, handledInput.length);
asteriskIndex = handledInput.indexOf('*', asteriskIndex + 1);
}
}
/**
* Removes any score points added to the marked word.
*/
self.clearScorePoint = function () {
const scorePoint = $word[0].querySelector('div');
if (scorePoint) {
scorePoint.parentNode.removeChild(scorePoint);
}
};
/**
* Get Word as a string
*
* @return {string} Word as text
*/
this.getText = function () {
return input;
};
/**
* Clears all marks from the word.
*
* @public
*/
this.markClear = function () {
$word
.attr('aria-selected', false)
.removeAttr('aria-describedby');
ariaText.innerHTML = '';
this.clearScorePoint();
};
/**
* Check if the word is correctly marked and style it accordingly.
* Reveal result
*
* @public
* @param {H5P.Question.ScorePoints} scorePoints
*/
this.markCheck = function (scorePoints) {
if (this.isSelected()) {
$word.attr('aria-describedby', isAnswer ? Word.ID_MARK_CORRECT : Word.ID_MARK_INCORRECT);
ariaText.innerHTML = isAnswer
? self.params.correctAnswer
: self.params.incorrectAnswer;
if (scorePoints) {
$word[0].appendChild(scorePoints.getElement(isAnswer));
}
}
else if (isAnswer) {
$word.attr('aria-describedby', Word.ID_MARK_MISSED);
ariaText.innerHTML = self.params.missedAnswer;
}
};
/**
* Checks if the word is marked correctly.
*
* @public
* @returns {Boolean} True if the marking is correct.
*/
this.isCorrect = function () {
return (isAnswer && this.isSelected());
};
/**
* Checks if the word is marked wrong.
*
* @public
* @returns {Boolean} True if the marking is wrong.
*/
this.isWrong = function () {
return (!isAnswer && this.isSelected());
};
/**
* Checks if the word is correct, but has not been marked.
*
* @public
* @returns {Boolean} True if the marking is missed.
*/
this.isMissed = function () {
return (isAnswer && !this.isSelected());
};
/**
* Checks if the word is an answer.
*
* @public
* @returns {Boolean} True if the word is an answer.
*/
this.isAnswer = function () {
return isAnswer;
};
/**
* Checks if the word is selected.
*
* @public
* @returns {Boolean} True if the word is selected.
*/
this.isSelected = function () {
return $word.attr('aria-selected') === 'true';
};
/**
* Sets that the Word is selected
*
* @public
*/
this.setSelected = function () {
$word.attr('aria-selected', 'true');
};
}
Word.prototype = Object.create(H5P.EventDispatcher.prototype);
Word.prototype.constructor = Word;
return Word;
})();
;
/*global H5P*/
/**
* Mark The Words module
* @external {jQuery} $ H5P.jQuery
*/
H5P.MarkTheWords = (function ($, Question, Word, KeyboardNav, XapiGenerator) {
/**
* Initialize module.
*
* @class H5P.MarkTheWords
* @extends H5P.Question
* @param {Object} params Behavior settings
* @param {Number} contentId Content identification
* @param {Object} contentData Object containing task specific content data
*
* @returns {Object} MarkTheWords Mark the words instance
*/
function MarkTheWords(params, contentId, contentData) {
this.contentId = contentId;
this.contentData = contentData;
this.introductionId = 'mark-the-words-introduction-' + contentId;
Question.call(this, 'mark-the-words');
// Set default behavior.
this.params = $.extend(true, {
media: {},
taskDescription: "",
textField: "This is a *nice*, *flexible* content type.",
overallFeedback: [],
behaviour: {
enableRetry: true,
enableSolutionsButton: true,
enableCheckButton: true,
showScorePoints: true
},
checkAnswerButton: "Check",
submitAnswerButton: "Submit",
tryAgainButton: "Retry",
showSolutionButton: "Show solution",
correctAnswer: "Correct!",
incorrectAnswer: "Incorrect!",
missedAnswer: "Answer not found!",
displaySolutionDescription: "Task is updated to contain the solution.",
scoreBarLabel: 'You got :num out of :total points',
a11yFullTextLabel: 'Full readable text',
a11yClickableTextLabel: 'Full text where words can be marked',
a11ySolutionModeHeader: 'Solution mode',
a11yCheckingHeader: 'Checking mode',
a11yCheck: 'Check the answers. The responses will be marked as correct, incorrect, or unanswered.',
a11yShowSolution: 'Show the solution. The task will be marked with its correct solution.',
a11yRetry: 'Retry the task. Reset all responses and start the task over again.',
}, params);
this.contentData = contentData;
if (this.contentData !== undefined && this.contentData.previousState !== undefined) {
this.previousState = this.contentData.previousState;
}
this.keyboardNavigators = [];
this.initMarkTheWords();
this.XapiGenerator = new XapiGenerator(this);
}
MarkTheWords.prototype = Object.create(H5P.EventDispatcher.prototype);
MarkTheWords.prototype.constructor = MarkTheWords;
/**
* Initialize Mark The Words task
*/
MarkTheWords.prototype.initMarkTheWords = function () {
this.$inner = $('<div class="h5p-word-inner"></div>');
this.addTaskTo(this.$inner);
// Set user state
this.setH5PUserState();
};
/**
* Recursive function that creates html for the words
* @method createHtmlForWords
* @param {Array} nodes Array of dom nodes
* @return {string}
*/
MarkTheWords.prototype.createHtmlForWords = function (nodes) {
var self = this;
var html = '';
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node instanceof Text) {
var text = $(node).text();
var selectableStrings = text.replace(/( |\r\n|\n|\r)/g, ' ')
.match(/ \*[^\* ]+\* |[^\s]+/g);
if (selectableStrings) {
selectableStrings.forEach(function (entry) {
entry = entry.trim();
// Words
if (html) {
// Add space before
html += ' ';
}
// Remove prefix punctuations from word
var prefix = entry.match(/^[\[\({⟨¿¡“"«„]+/);
var start = 0;
if (prefix !== null) {
start = prefix[0].length;
html += prefix;
}
// Remove suffix punctuations from word
var suffix = entry.match(/[",….:;?!\]\)}⟩»”]+$/);
var end = entry.length - start;
if (suffix !== null) {
end -= suffix[0].length;
}
// Word
entry = entry.substr(start, end);
if (entry.length) {
html += '<span role="option" aria-selected="false">' + self.escapeHTML(entry) + '</span>';
}
if (suffix !== null) {
html += suffix;
}
});
}
else if ((selectableStrings !== null) && text.length) {
html += '<span role="option" aria-selected="false">' + this.escapeHTML(text) + '</span>';
}
}
else {
if (node.nodeName === 'BR') {
html += '<br/>';
}
else {
var attributes = ' ';
for (var j = 0; j < node.attributes.length; j++) {
attributes +=node.attributes[j].name + '="' + node.attributes[j].nodeValue + '" ';
}
html += '<' + node.nodeName + attributes + '>';
html += self.createHtmlForWords(node.childNodes);
html += '</' + node.nodeName + '>';
}
}
}
return html;
};
/**
* Escapes HTML
*
* @param html
* @returns {jQuery}
*/
MarkTheWords.prototype.escapeHTML = function (html) {
return $('<div>').text(html).html();
};
/**
* Search for the last children in every paragraph and
* return their indexes in an array
*
* @returns {Array}
*/
MarkTheWords.prototype.getIndexesOfLineBreaks = function () {
var indexes = [];
var selectables = this.$wordContainer.find('span.h5p-word-selectable');
selectables.each(function (index, selectable) {
if ($(selectable).next().is('br')) {
indexes.push(index);
}
if ($(selectable).parent('p') && !$(selectable).parent().is(':last-child') && $(selectable).is(':last-child')) {
indexes.push(index);
}
});
return indexes;
};
/**
* Handle task and add it to container.
* @param {jQuery} $container The object which our task will attach to.
*/
MarkTheWords.prototype.addTaskTo = function ($container) {
var self = this;
self.selectableWords = [];
self.answers = 0;
// Wrapper
var $wordContainer = $('<div/>', {
'class': 'h5p-word-selectable-words',
'aria-labelledby': self.introductionId,
'aria-multiselectable': 'true',
'role': 'listbox',
html: self.createHtmlForWords($.parseHTML(self.params.textField))
});
let isNewParagraph = true;
$wordContainer.find('[role="option"], br').each(function () {
if ($(this).is('br')) {
isNewParagraph = true;
return;
}
if (isNewParagraph) {
// Add keyboard navigation helper
self.currentKeyboardNavigator = new KeyboardNav();
// on word clicked
self.currentKeyboardNavigator.on('select', function () {
self.isAnswered = true;
self.triggerXAPI('interacted');
});
self.keyboardNavigators.push(self.currentKeyboardNavigator);
isNewParagraph = false;
}
self.currentKeyboardNavigator.addElement(this);
// Add keyboard navigation to this element
var selectableWord = new Word($(this), self.params);
if (selectableWord.isAnswer()) {
self.answers += 1;
}
self.selectableWords.push(selectableWord);
});
self.blankIsCorrect = (self.answers === 0);
if (self.blankIsCorrect) {
self.answers = 1;
}
// A11y full readable text
const $ariaTextWrapper = $('<div>', {
'class': 'hidden-but-read',
}).appendTo($container);
$('<div>', {
html: self.params.a11yFullTextLabel,
}).appendTo($ariaTextWrapper);
// Add space after each paragraph to read the sentences better
const ariaText = $('<div>', {
'html': $wordContainer.html().replace('</p>', ' </p>'),
}).text();
$('<div>', {
text: ariaText,
}).appendTo($ariaTextWrapper);
// A11y clickable list label
this.$a11yClickableTextLabel = $('<div>', {
'class': 'hidden-but-read',
html: self.params.a11yClickableTextLabel,
tabIndex: '-1',
}).appendTo($container);
$wordContainer.appendTo($container);
self.$wordContainer = $wordContainer;
};
/**
* Add check solution and retry buttons.
*/
MarkTheWords.prototype.addButtons = function () {
var self = this;
self.$buttonContainer = $('<div/>', {
'class': 'h5p-button-bar'
});
if (this.params.behaviour.enableCheckButton) {
this.addButton('check-answer', this.params.checkAnswerButton, function () {
self.isAnswered = true;
var answers = self.calculateScore();
self.feedbackSelectedWords();
if (!self.showEvaluation(answers)) {
// Only show if a correct answer was not found.
if (self.params.behaviour.enableSolutionsButton && (answers.correct < self.answers)) {
self.showButton('show-solution');
}
if (self.params.behaviour.enableRetry) {
self.showButton('try-again');
}
}
// Set focus to start of text
self.$a11yClickableTextLabel.html(self.params.a11yCheckingHeader + ' - ' + self.params.a11yClickableTextLabel);
self.$a11yClickableTextLabel.focus();
self.hideButton('check-answer');
self.trigger(self.XapiGenerator.generateAnsweredEvent());
self.toggleSelectable(true);
}, true, {
'aria-label': this.params.a11yCheck,
}, {
contentData: this.contentData,
textIfSubmitting: this.params.submitAnswerButton,
});
}
this.addButton('try-again', this.params.tryAgainButton, this.resetTask.bind(this), false, {
'aria-label': this.params.a11yRetry,
});
this.addButton('show-solution', this.params.showSolutionButton, function () {
self.setAllMarks();
self.$a11yClickableTextLabel.html(self.params.a11ySolutionModeHeader + ' - ' + self.params.a11yClickableTextLabel);
self.$a11yClickableTextLabel.focus();
if (self.params.behaviour.enableRetry) {
self.showButton('try-again');
}
self.hideButton('check-answer');
self.hideButton('show-solution');
self.read(self.params.displaySolutionDescription);
self.toggleSelectable(true);
}, false, {
'aria-label': this.params.a11yShowSolution,
});
};
/**
* Toggle whether words can be selected
* @param {Boolean} disable
*/
MarkTheWords.prototype.toggleSelectable = function (disable) {
this.keyboardNavigators.forEach(function (navigator) {
if (disable) {
navigator.disableSelectability();
navigator.removeAllTabbable();
}
else {
navigator.enableSelectability();
navigator.setTabbableAt((0));
}
});
if (disable) {
this.$wordContainer.removeAttr('aria-multiselectable').removeAttr('role');
}
else {
this.$wordContainer.attr('aria-multiselectable', 'true')
.attr('role', 'listbox');
}
};
/**
* Get Xapi Data.
*
* @see used in contracts {@link https://h5p.org/documentation/developers/contracts#guides-header-6}
* @return {Object}
*/
MarkTheWords.prototype.getXAPIData = function () {
return {
statement: this.XapiGenerator.generateAnsweredEvent().data.statement
};
};
/**
* Mark the words as correct, wrong or missed.
*
* @fires MarkTheWords#resize
*/
MarkTheWords.prototype.setAllMarks = function () {
this.selectableWords.forEach(function (entry) {
entry.markCheck();
entry.clearScorePoint();
});
/**
* Resize event
*
* @event MarkTheWords#resize
*/
this.trigger('resize');
};
/**
* Mark the selected words as correct or wrong.
*
* @fires MarkTheWords#resize
*/
MarkTheWords.prototype.feedbackSelectedWords = function () {
var self = this;
var scorePoints;
if (self.params.behaviour.showScorePoints) {
scorePoints = new H5P.Question.ScorePoints();
}
this.selectableWords.forEach(function (entry) {
if (entry.isSelected()) {
entry.markCheck(scorePoints);
}
});
this.$wordContainer.addClass('h5p-disable-hover');
this.trigger('resize');
};
/**
* Evaluate task and display score text for word markings.
*
* @fires MarkTheWords#resize
* @return {Boolean} Returns true if maxScore was achieved.
*/
MarkTheWords.prototype.showEvaluation = function (answers) {
this.hideEvaluation();
var score = answers.score;
//replace editor variables with values, uses regexp to replace all instances.
var scoreText = H5P.Question.determineOverallFeedback(this.params.overallFeedback, score / this.answers).replace(/@score/g, score.toString())
.replace(/@total/g, this.answers.toString())
.replace(/@correct/g, answers.correct.toString())
.replace(/@wrong/g, answers.wrong.toString())
.replace(/@missed/g, answers.missed.toString());
this.setFeedback(scoreText, score, this.answers, this.params.scoreBarLabel);
this.trigger('resize');
return score === this.answers;
};
/**
* Clear the evaluation text.
*
* @fires MarkTheWords#resize
*/
MarkTheWords.prototype.hideEvaluation = function () {
this.removeFeedback();
this.trigger('resize');
};
/**
* Calculate the score.
*
* @return {Answers}
*/
MarkTheWords.prototype.calculateScore = function () {
var self = this;
/**
* @typedef {Object} Answers
* @property {number} correct The number of correct answers
* @property {number} wrong The number of wrong answers
* @property {number} missed The number of answers the user missed
* @property {number} score The calculated score
*/
var initial = {
correct: 0,
wrong: 0,
missed: 0,
score: 0
};
// iterate over words, and calculate score
var answers = self.selectableWords.reduce(function (result, word) {
if (word.isCorrect()) {
result.correct++;
}
else if (word.isWrong()) {
result.wrong++;
}
else if (word.isMissed()) {
result.missed++;
}
return result;
}, initial);
// if no wrong answers, and black is correct
if (answers.wrong === 0 && self.blankIsCorrect) {
answers.correct = 1;
}
// no negative score
answers.score = Math.max(answers.correct - answers.wrong, 0);
return answers;
};
/**
* Clear styling on marked words.
*
* @fires MarkTheWords#resize
*/
MarkTheWords.prototype.clearAllMarks = function () {
this.selectableWords.forEach(function (entry) {
entry.markClear();
});
this.$wordContainer.removeClass('h5p-disable-hover');
this.trigger('resize');
};
/**
* Returns true if task is checked or a word has been clicked
*
* @see {@link https://h5p.org/documentation/developers/contracts|Needed for contracts.}
* @returns {Boolean} Always returns true.
*/
MarkTheWords.prototype.getAnswerGiven = function () {
return this.blankIsCorrect ? true : this.isAnswered;
};
/**
* Counts the score, which is correct answers subtracted by wrong answers.
*
* @see {@link https://h5p.org/documentation/developers/contracts|Needed for contracts.}
* @returns {Number} score The amount of points achieved.
*/
MarkTheWords.prototype.getScore = function () {
return this.calculateScore().score;
};
/**
* Gets max score for this task.
*
* @see {@link https://h5p.org/documentation/developers/contracts|Needed for contracts.}
* @returns {Number} maxScore The maximum amount of points achievable.
*/
MarkTheWords.prototype.getMaxScore = function () {
return this.answers;
};
/**
* Get title
* @returns {string}
*/
MarkTheWords.prototype.getTitle = function () {
return H5P.createTitle((this.contentData && this.contentData.metadata && this.contentData.metadata.title) ? this.contentData.metadata.title : 'Mark the Words');
};
/**
* Display the evaluation of the task, with proper markings.
*
* @fires MarkTheWords#resize
* @see {@link https://h5p.org/documentation/developers/contracts|Needed for contracts.}
*/
MarkTheWords.prototype.showSolutions = function () {
var answers = this.calculateScore();
this.showEvaluation(answers);
this.setAllMarks();
this.read(this.params.displaySolutionDescription);
this.hideButton('try-again');
this.hideButton('show-solution');
this.hideButton('check-answer');
this.$a11yClickableTextLabel.html(this.params.a11ySolutionModeHeader + ' - ' + this.params.a11yClickableTextLabel);
this.toggleSelectable(true);
this.trigger('resize');
};
/**
* Resets the task back to its' initial state.
*
* @fires MarkTheWords#resize
* @see {@link https://h5p.org/documentation/developers/contracts|Needed for contracts.}
*/
MarkTheWords.prototype.resetTask = function () {
this.isAnswered = false;
this.clearAllMarks();
this.hideEvaluation();
this.hideButton('try-again');
this.hideButton('show-solution');
this.showButton('check-answer');
this.$a11yClickableTextLabel.html(this.params.a11yClickableTextLabel);
this.toggleSelectable(false);
this.trigger('resize');
};
/**
* Returns an object containing the selected words
*
* @public
* @returns {object} containing indexes of selected words
*/
MarkTheWords.prototype.getCurrentState = function () {
var selectedWordsIndexes = [];
if (this.selectableWords === undefined) {
return undefined;
}
this.selectableWords.forEach(function (selectableWord, swIndex) {
if (selectableWord.isSelected()) {
selectedWordsIndexes.push(swIndex);
}
});
return selectedWordsIndexes;
};
/**
* Sets answers to current user state
*/
MarkTheWords.prototype.setH5PUserState = function () {
var self = this;
// Do nothing if user state is undefined
if (this.previousState === undefined || this.previousState.length === undefined) {
return;
}
// Select words from user state
this.previousState.forEach(function (answeredWordIndex) {
if (isNaN(answeredWordIndex) || answeredWordIndex >= self.selectableWords.length || answeredWordIndex < 0) {
throw new Error('Stored user state is invalid');
}
self.isAnswered = true;
self.selectableWords[answeredWordIndex].setSelected();
});
};
/**
* Register dom elements
*
* @see {@link https://github.com/h5p/h5p-question/blob/1558b6144333a431dd71e61c7021d0126b18e252/scripts/question.js#L1236|Called from H5P.Question}
*/
MarkTheWords.prototype.registerDomElements = function () {
// Register optional media
let media = this.params.media;
if (media && media.type && media.type.library) {
media = media.type;
const type = media.library.split(' ')[0];
if (type === 'H5P.Image') {
if (media.params.file) {
// Register task image
this.setImage(media.params.file.path, {
disableImageZooming: this.params.media.disableImageZooming || false,
alt: media.params.alt,
title: media.params.title,
expandImage: media.params.expandImage,
minimizeImage: media.params.minimizeImage
});
}
}
else if (type === 'H5P.Video') {
if (media.params.sources) {
// Register task video
this.setVideo(media);
}
}
else if (type === 'H5P.Audio') {
if (media.params.files) {
// Register task audio
this.setAudio(media);
}
}
}
// wrap introduction in div with id
var introduction = '<div id="' + this.introductionId + '">' + this.params.taskDescription + '</div>';
// Register description
this.setIntroduction(introduction);
// creates aria descriptions for correct/incorrect/missed
this.createDescriptionsDom().appendTo(this.$inner);
// Register content
this.setContent(this.$inner, {
'class': 'h5p-word'
});
// Register buttons
this.addButtons();
};
/**
* Creates dom with description to be used with aria-describedby
* @return {jQuery}
*/
MarkTheWords.prototype.createDescriptionsDom = function () {
var self = this;
var $el = $('<div class="h5p-mark-the-words-descriptions"></div>');
$('<div id="' + Word.ID_MARK_CORRECT + '">' + self.params.correctAnswer + '</div>').appendTo($el);
$('<div id="' + Word.ID_MARK_INCORRECT + '">' + self.params.incorrectAnswer + '</div>').appendTo($el);
$('<div id="' + Word.ID_MARK_MISSED + '">' + self.params.missedAnswer + '</div>').appendTo($el);
return $el;
};
return MarkTheWords;
}(H5P.jQuery, H5P.Question, H5P.MarkTheWords.Word, H5P.KeyboardNav, H5P.MarkTheWords.XapiGenerator));
/**
* Static utility method for parsing H5P.MarkTheWords content item questions
* into format useful for generating reports.
*
* Example input: "<p lang=\"en\">I like *pizza* and *burgers*.</p>"
*
* Produces the following:
* [
* {
* type: 'text',
* content: 'I like '
* },
* {
* type: 'answer',
* correct: 'pizza',
* },
* {
* type: 'text',
* content: ' and ',
* },
* {
* type: 'answer',
* correct: 'burgers'
* },
* {
* type: 'text',
* content: '.'
* }
* ]
*
* @param {string} question MarkTheWords textField (html)
*/
H5P.MarkTheWords.parseText = function (question) {
/**
* Separate all words surrounded by a space and an asterisk and any other
* sequence of non-whitespace characters from str into an array.
*
* @param {string} str
* @returns {string[]} array of all words in the given string
*/
function getWords(str) {
return str.match(/ \*[^\*]+\* |[^\s]+/g);
}
/**
* Replace each HTML tag in str with the provided value and return the resulting string
*
* Regexp expression explained:
* < - first character is '<'
* [^>]* - followed by zero or more occurences of any character except '>'
* > - last character is '>'
**/
function replaceHtmlTags(str, value) {
return str.replace(/<[^>]*>/g, value);
}
function startsAndEndsWith(char, str) {
return str.startsWith(char) && str.endsWith(char);
}
function removeLeadingPunctuation(str) {
return str.replace(/^[\[\({⟨¿¡“"«„]+/, '');
}
function removeTrailingPunctuation(str) {
return str.replace(/[",….:;?!\]\)}⟩»”]+$/, '');
}
/**
* Escape double asterisks ** = *, and remove single asterisk.
* @param {string} str
*/
function handleAsterisks(str) {
var asteriskIndex = str.indexOf('*');
while (asteriskIndex !== -1) {
str = str.slice(0, asteriskIndex) + str.slice(asteriskIndex + 1, str.length);
asteriskIndex = str.indexOf('*', asteriskIndex + 1);
}
return str;
}
/**
* Decode HTML entities (e.g. ) from the given string using the DOM API
* @param {string} str
*/
function decodeHtmlEntities(str) {
const el = document.createElement('textarea');
el.innerHTML = str;
return el.value;
}
const wordsWithAsterisksNotRemovedYet = getWords(replaceHtmlTags(decodeHtmlEntities(question), ' '))
.map(function (w) {
return w.trim();
})
.map(function (w) {
return removeLeadingPunctuation(w);
})
.map(function (w) {
return removeTrailingPunctuation(w);
});
const allSelectableWords = wordsWithAsterisksNotRemovedYet.map(function (w) {
return handleAsterisks(w);
});
const correctWordIndexes = [];
const correctWords = wordsWithAsterisksNotRemovedYet
.filter(function (w, i) {
if (startsAndEndsWith('*', w)) {
correctWordIndexes.push(i);
return true;
}
return false;
})
.map(function (w) {
return handleAsterisks(w);
});
const printableQuestion = replaceHtmlTags(decodeHtmlEntities(question), ' ')
.replace('\xa0', '\x20');
return {
alternatives: allSelectableWords,
correctWords: correctWords,
correctWordIndexes: correctWordIndexes,
textWithPlaceholders: printableQuestion.match(/[^\s]+/g)
.reduce(function (textWithPlaceholders, word, index) {
word = removeTrailingPunctuation(
removeLeadingPunctuation(word));
return textWithPlaceholders.replace(word, '%' + index);
}, printableQuestion)
};
};
;
/** @namespace H5P */
H5P.VideoVimeo = (function ($) {
let numInstances = 0;
/**
* Vimeo video player for H5P.
*
* @class
* @param {Array} sources Video files to use
* @param {Object} options Settings for the player
* @param {Object} l10n Localization strings
*/
function VimeoPlayer(sources, options, l10n) {
const self = this;
let player;
// Since all the methods of the Vimeo Player SDK are promise-based, we keep
// track of all relevant state variables so that we can implement the
// H5P.Video API where all methods return synchronously.
let buffered = 0;
let currentQuality;
let currentTextTrack;
let currentTime = 0;
let duration = 0;
let isMuted = 0;
let volume = 0;
let playbackRate = 1;
let qualities = [];
let loadingFailedTimeout;
let failedLoading = false;
let ratio = 9/16;
let isLoaded = false;
const LOADING_TIMEOUT_IN_SECONDS = 8;
const id = `h5p-vimeo-${++numInstances}`;
const $wrapper = $('<div/>');
const $placeholder = $('<div/>', {
id: id,
html: `<div class="h5p-video-loading" style="height: 100%; min-height: 200px; display: block; z-index: 100;" aria-label="${l10n.loading}"></div>`
}).appendTo($wrapper);
/**
* Create a new player with the Vimeo Player SDK.
*
* @private
*/
const createVimeoPlayer = async () => {
if (!$placeholder.is(':visible') || player !== undefined) {
return;
}
// Since the SDK is loaded asynchronously below, explicitly set player to
// null (unlike undefined) which indicates that creation has begun. This
// allows the guard statement above to be hit if this function is called
// more than once.
player = null;
const Vimeo = await loadVimeoPlayerSDK();
const MIN_WIDTH = 200;
const width = Math.max($wrapper.width(), MIN_WIDTH);
const canHasControls = options.controls || self.pressToPlay;
const embedOptions = {
url: sources[0].path,
controls: canHasControls,
responsive: true,
dnt: true,
// Hardcoded autoplay to false to avoid playing videos on init
autoplay: false,
loop: options.loop ? true : false,
playsinline: true,
quality: 'auto',
width: width,
muted: false,
keyboard: canHasControls,
};
// Create a new player
player = new Vimeo.Player(id, embedOptions);
registerVimeoPlayerEventListeneners(player);
// Failsafe timeout to handle failed loading of videos.
// This seems to happen for private videos even though the SDK docs
// suggests to catch PrivacyError when attempting play()
loadingFailedTimeout = setTimeout(() => {
failedLoading = true;
removeLoadingIndicator();
$wrapper.html(`<p class="vimeo-failed-loading">${l10n.vimeoLoadingError}</p>`);
$wrapper.css({
width: null,
height: null
});
self.trigger('resize');
self.trigger('error', l10n.vimeoLoadingError);
}, LOADING_TIMEOUT_IN_SECONDS * 1000);
}
const removeLoadingIndicator = () => {
$placeholder.find('div.h5p-video-loading').remove();
};
/**
* Register event listeners on the given Vimeo player.
*
* @private
* @param {Vimeo.Player} player
*/
const registerVimeoPlayerEventListeneners = (player) => {
let isFirstPlay, tracks;
player.on('loaded', async () => {
isFirstPlay = true;
isLoaded = true;
clearTimeout(loadingFailedTimeout);
const videoDetails = await getVimeoVideoMetadata(player);
tracks = videoDetails.tracks.options;
currentTextTrack = tracks.current;
duration = videoDetails.duration;
qualities = videoDetails.qualities;
currentQuality = 'auto';
try {
ratio = videoDetails.dimensions.height / videoDetails.dimensions.width;
}
catch (e) { /* Intentionally ignore this, and fallback on the default ratio */ }
removeLoadingIndicator();
if (options.startAt) {
// Vimeo.Player doesn't have an option for setting start time upon
// instantiation, so we instead perform an initial seek here.
currentTime = await self.seek(options.startAt);
}
self.trigger('ready');
self.trigger('loaded');
self.trigger('qualityChange', currentQuality);
self.trigger('resize');
});
player.on('play', () => {
if (isFirstPlay) {
isFirstPlay = false;
if (tracks.length) {
self.trigger('captions', tracks);
}
}
});
// Handle playback state changes.
player.on('playing', () => self.trigger('stateChange', H5P.Video.PLAYING));
player.on('pause', () => self.trigger('stateChange', H5P.Video.PAUSED));
player.on('ended', () => self.trigger('stateChange', H5P.Video.ENDED));
// Track the percentage of video that has finished loading (buffered).
player.on('progress', (data) => {
buffered = data.percent * 100;
});
// Track the current time. The update frequency may be browser-dependent,
// according to the official docs:
// https://developer.vimeo.com/player/sdk/reference#timeupdate
player.on('timeupdate', (time) => {
currentTime = time.seconds;
});
};
/**
* Get metadata about the video loaded in the given Vimeo player.
*
* Example resolved value:
*
* ```
* {
* "duration": 39,
* "qualities": [
* {
* "name": "auto",
* "label": "Auto"
* },
* {
* "name": "1080p",
* "label": "1080p"
* },
* {
* "name": "720p",
* "label": "720p"
* }
* ],
* "dimensions": {
* "width": 1920,
* "height": 1080
* },
* "tracks": {
* "current": {
* "label": "English",
* "value": "en"
* },
* "options": [
* {
* "label": "English",
* "value": "en"
* },
* {
* "label": "Norsk bokmål",
* "value": "nb"
* }
* ]
* }
* }
* ```
*
* @private
* @param {Vimeo.Player} player
* @returns {Promise}
*/
const getVimeoVideoMetadata = (player) => {
// Create an object for easy lookup of relevant metadata
const massageVideoMetadata = (data) => {
const duration = data[0];
const qualities = data[1].map(q => ({
name: q.id,
label: q.label
}));
const tracks = data[2].reduce((tracks, current) => {
const h5pVideoTrack = new H5P.Video.LabelValue(current.label, current.language);
tracks.options.push(h5pVideoTrack);
if (current.mode === 'showing') {
tracks.current = h5pVideoTrack;
}
return tracks;
}, { current: undefined, options: [] });
const dimensions = { width: data[3], height: data[4] };
return {
duration,
qualities,
tracks,
dimensions
};
};
return Promise.all([
player.getDuration(),
player.getQualities(),
player.getTextTracks(),
player.getVideoWidth(),
player.getVideoHeight(),
]).then(data => massageVideoMetadata(data));
}
try {
if (document.featurePolicy.allowsFeature('autoplay') === false) {
self.pressToPlay = true;
}
}
catch (err) {}
/**
* Appends the video player to the DOM.
*
* @public
* @param {jQuery} $container
*/
self.appendTo = ($container) => {
$container.addClass('h5p-vimeo').append($wrapper);
createVimeoPlayer();
};
/**
* Get list of available qualities.
*
* @public
* @returns {Array}
*/
self.getQualities = () => {
return qualities;
};
/**
* Get the current quality.
*
* @returns {String} Current quality identifier
*/
self.getQuality = () => {
return currentQuality;
};
/**
* Set the playback quality.
*
* @public
* @param {String} quality
*/
self.setQuality = async (quality) => {
currentQuality = await player.setQuality(quality);
self.trigger('qualityChange', currentQuality);
};
/**
* Start the video.
*
* @public
*/
self.play = async () => {
if (!player) {
self.on('ready', self.play);
return;
}
try {
await player.play();
}
catch (error) {
switch (error.name) {
case 'PasswordError': // The video is password-protected
self.trigger('error', l10n.vimeoPasswordError);
break;
case 'PrivacyError': // The video is private
self.trigger('error', l10n.vimeoPrivacyError);
break;
default:
self.trigger('error', l10n.unknownError);
break;
}
}
};
/**
* Pause the video.
*
* @public
*/
self.pause = () => {
if (player) {
player.pause();
}
};
/**
* Seek video to given time.
*
* @public
* @param {Number} time
*/
self.seek = async (time) => {
if (!player) {
return;
}
currentTime = time;
await player.setCurrentTime(time);
};
/**
* @public
* @returns {Number} Seconds elapsed since beginning of video
*/
self.getCurrentTime = () => {
return currentTime;
};
/**
* @public
* @returns {Number} Video duration in seconds
*/
self.getDuration = () => {
return duration;
};
/**
* Get percentage of video that is buffered.
*
* @public
* @returns {Number} Between 0 and 100
*/
self.getBuffered = () => {
return buffered;
};
/**
* Mute the video.
*
* @public
*/
self.mute = async () => {
isMuted = await player.setMuted(true);
};
/**
* Unmute the video.
*
* @public
*/
self.unMute = async () => {
isMuted = await player.setMuted(false);
};
/**
* Whether the video is muted.
*
* @public
* @returns {Boolean} True if the video is muted, false otherwise
*/
self.isMuted = () => {
return isMuted;
};
/**
* Whether the video is loaded.
*
* @public
* @returns {Boolean} True if the video is muted, false otherwise
*/
self.isLoaded = () => {
return isLoaded;
};
/**
* Get the video player's current sound volume.
*
* @public
* @returns {Number} Between 0 and 100.
*/
self.getVolume = () => {
return volume;
};
/**
* Set the video player's sound volume.
*
* @public
* @param {Number} level
*/
self.setVolume = async (level) => {
volume = await player.setVolume(level);
};
/**
* Get list of available playback rates.
*
* @public
* @returns {Array} Available playback rates
*/
self.getPlaybackRates = () => {
return [0.5, 1, 1.5, 2];
};
/**
* Get the current playback rate.
*
* @public
* @returns {Number} e.g. 0.5, 1, 1.5 or 2
*/
self.getPlaybackRate = () => {
return playbackRate;
};
/**
* Set the current playback rate.
*
* @public
* @param {Number} rate Must be one of available rates from getPlaybackRates
*/
self.setPlaybackRate = async (rate) => {
playbackRate = await player.setPlaybackRate(rate);
self.trigger('playbackRateChange', rate);
};
/**
* Set current captions track.
*
* @public
* @param {H5P.Video.LabelValue} track Captions to display
*/
self.setCaptionsTrack = (track) => {
if (!track) {
return player.disableTextTrack().then(() => {
currentTextTrack = null;
});
}
player.enableTextTrack(track.value).then(() => {
currentTextTrack = track;
});
};
/**
* Get current captions track.
*
* @public
* @returns {H5P.Video.LabelValue}
*/
self.getCaptionsTrack = () => {
return currentTextTrack;
};
self.on('resize', () => {
if (failedLoading || !$wrapper.is(':visible')) {
return;
}
if (player === undefined) {
// Player isn't created yet. Try again.
createVimeoPlayer();
return;
}
// Use as much space as possible
$wrapper.css({
width: '100%',
height: 'auto'
});
const width = $wrapper[0].clientWidth;
const height = options.fit ? $wrapper[0].clientHeight : (width * (ratio));
// Validate height before setting
if (height > 0) {
// Set size
$wrapper.css({
width: width + 'px',
height: height + 'px'
});
}
});
}
/**
* Check to see if we can play any of the given sources.
*
* @public
* @static
* @param {Array} sources
* @returns {Boolean}
*/
VimeoPlayer.canPlay = (sources) => {
return getId(sources[0].path);
};
/**
* Find id of Vimeo video from given URL.
*
* @private
* @param {String} url
* @returns {String} Vimeo video ID
*/
const getId = (url) => {
// https://stackoverflow.com/a/11660798
const matches = url.match(/^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/);
if (matches && matches[5]) {
return matches[5];
}
};
/**
* Load the Vimeo Player SDK asynchronously.
*
* @private
* @returns {Promise} Vimeo Player SDK object
*/
const loadVimeoPlayerSDK = async () => {
if (window.Vimeo) {
return await Promise.resolve(window.Vimeo);
}
return await new Promise((resolve, reject) => {
const tag = document.createElement('script');
tag.src = 'https://player.vimeo.com/api/player.js';
tag.onload = () => resolve(window.Vimeo);
tag.onerror = reject;
document.querySelector('script').before(tag);
});
};
return VimeoPlayer;
})(H5P.jQuery);
// Register video handler
H5P.videoHandlers = H5P.videoHandlers || [];
H5P.videoHandlers.push(H5P.VideoVimeo);
;
/** @namespace H5P */
H5P.VideoYouTube = (function ($) {
/**
* YouTube video player for H5P.
*
* @class
* @param {Array} sources Video files to use
* @param {Object} options Settings for the player
* @param {Object} l10n Localization strings
*/
function YouTube(sources, options, l10n) {
var self = this;
var player;
var playbackRate = 1;
var id = 'h5p-youtube-' + numInstances;
numInstances++;
var ratio = 9/16;
var $wrapper = $('<div/>');
var $placeholder = $('<div />', {
text: l10n.loading,
html: `<div style="position: relative; padding: ${ratio*100}% 0 0 0;"><div id="${id}"></div></div>`
}).appendTo($wrapper);
// Optional placeholder
// var $placeholder = $('<iframe id="' + id + '" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/' + getId(sources[0].path) + '?enablejsapi=1&origin=' + encodeURIComponent(ORIGIN) + '&autoplay=' + (options.autoplay ? 1 : 0) + '&controls=' + (options.controls ? 1 : 0) + '&disabledkb=' + (options.controls ? 0 : 1) + '&fs=0&loop=' + (options.loop ? 1 : 0) + '&rel=0&showinfo=0&iv_load_policy=3" frameborder="0"></iframe>').appendTo($wrapper);
/**
* Use the YouTube API to create a new player
*
* @private
*/
var create = function () {
if (!$placeholder.is(':visible') || player !== undefined) {
return;
}
if (window.YT === undefined) {
// Load API first
loadAPI(create);
return;
}
if (YT.Player === undefined) {
return;
}
var width = $wrapper.width();
if (width < 200) {
width = 200;
}
var loadCaptionsModule = true;
var videoId = getId(sources[0].path);
player = new YT.Player(id, {
width: width,
height: width * (9/16),
videoId: videoId,
playerVars: {
origin: ORIGIN,
// Hardcoded autoplay to false to avoid playing videos on init
autoplay: 0,
controls: options.controls ? 1 : 0,
disablekb: options.controls ? 0 : 1,
fs: 0,
loop: options.loop ? 1 : 0,
playlist: options.loop ? videoId : undefined,
rel: 0,
showinfo: 0,
iv_load_policy: 3,
wmode: "opaque",
start: Math.floor(options.startAt),
playsinline: 1
},
events: {
onReady: function () {
self.trigger('ready');
self.trigger('loaded');
if (!options.autoplay) {
self.toPause = true;
}
if (options.deactivateSound) {
self.mute();
}
},
onApiChange: function () {
if (loadCaptionsModule) {
loadCaptionsModule = false;
// Always load captions
player.loadModule('captions');
}
var trackList;
try {
// Grab tracklist from player
trackList = player.getOption('captions', 'tracklist');
}
catch (err) {}
if (trackList && trackList.length) {
// Format track list into valid track options
var trackOptions = [];
for (var i = 0; i < trackList.length; i++) {
trackOptions.push(new H5P.Video.LabelValue(trackList[i].displayName, trackList[i].languageCode));
}
// Captions are ready for loading
self.trigger('captions', trackOptions);
}
},
onStateChange: function (state) {
if (state.data > -1 && state.data < 4) {
if (self.toPause) {
// if video buffering, was likely paused already - skip
if (state.data === H5P.Video.BUFFERING) {
delete self.toPause;
}
else {
self.pause();
}
}
// Fix for keeping playback rate in IE11
if (H5P.Video.IE11_PLAYBACK_RATE_FIX && state.data === H5P.Video.PLAYING && playbackRate !== 1) {
// YT doesn't know that IE11 changed the rate so it must be reset before it's set to the correct value
player.setPlaybackRate(1);
player.setPlaybackRate(playbackRate);
}
// End IE11 fix
self.trigger('stateChange', state.data);
}
},
onPlaybackQualityChange: function (quality) {
self.trigger('qualityChange', quality.data);
},
onPlaybackRateChange: function (playbackRate) {
self.trigger('playbackRateChange', playbackRate.data);
},
onError: function (error) {
var message;
switch (error.data) {
case 2:
message = l10n.invalidYtId;
break;
case 100:
message = l10n.unknownYtId;
break;
case 101:
case 150:
message = l10n.restrictedYt;
break;
default:
message = l10n.unknownError + ' ' + error.data;
break;
}
self.trigger('error', message);
}
}
});
player.g.style = "position:absolute;top:0;left:0;width:100%;height:100%;";
};
/**
* Indicates if the video must be clicked for it to start playing.
* For instance YouTube videos on iPad must be pressed to start playing.
*
* @public
*/
if (navigator.userAgent.match(/iPad/i)) {
self.pressToPlay = true;
}
else {
try {
if (document.featurePolicy.allowsFeature('autoplay') === false) {
self.pressToPlay = true;
}
}
catch (err) {}
}
/**
* Appends the video player to the DOM.
*
* @public
* @param {jQuery} $container
*/
self.appendTo = function ($container) {
$container.addClass('h5p-youtube').append($wrapper);
create();
};
/**
* Get list of available qualities. Not available until after play.
*
* @public
* @returns {Array}
*/
self.getQualities = function () {
if (!player || !player.getAvailableQualityLevels) {
return;
}
var qualities = player.getAvailableQualityLevels();
if (!qualities.length) {
return; // No qualities
}
// Add labels
for (var i = 0; i < qualities.length; i++) {
var quality = qualities[i];
var label = (LABELS[quality] !== undefined ? LABELS[quality] : 'Unknown'); // TODO: l10n
qualities[i] = {
name: quality,
label: LABELS[quality]
};
}
return qualities;
};
/**
* Get current playback quality. Not available until after play.
*
* @public
* @returns {String}
*/
self.getQuality = function () {
if (!player || !player.getPlaybackQuality) {
return;
}
var quality = player.getPlaybackQuality();
return quality === 'unknown' ? undefined : quality;
};
/**
* Set current playback quality. Not available until after play.
* Listen to event "qualityChange" to check if successful.
*
* @public
* @params {String} [quality]
*/
self.setQuality = function (quality) {
if (!player || !player.setPlaybackQuality) {
return;
}
player.setPlaybackQuality(quality);
};
/**
* Start the video.
*
* @public
*/
self.play = function () {
if (!player || !player.playVideo) {
self.on('ready', self.play);
return;
}
player.playVideo();
};
/**
* Pause the video.
*
* @public
*/
self.pause = function () {
delete self.toPause;
self.off('ready', self.play);
if (!player || !player.pauseVideo) {
return;
}
player.pauseVideo();
};
/**
* Seek video to given time.
*
* @public
* @param {Number} time
*/
self.seek = function (time) {
if (!player || !player.seekTo) {
return;
}
player.seekTo(time, true);
};
/**
* Recreate player with initial time
*
* @public
* @param {Number} time
*/
self.resetPlayback = function (time) {
options.startAt = time;
if (player) {
if (player.getPlayerState() === H5P.Video.PLAYING) {
player.pauseVideo();
self.trigger('stateChange', H5P.Video.PAUSED);
}
player.destroy();
player = undefined;
}
create();
}
/**
* Get elapsed time since video beginning.
*
* @public
* @returns {Number}
*/
self.getCurrentTime = function () {
if (!player || !player.getCurrentTime) {
return;
}
return player.getCurrentTime();
};
/**
* Get total video duration time.
*
* @public
* @returns {Number}
*/
self.getDuration = function () {
if (!player || !player.getDuration) {
return;
}
return player.getDuration();
};
/**
* Get percentage of video that is buffered.
*
* @public
* @returns {Number} Between 0 and 100
*/
self.getBuffered = function () {
if (!player || !player.getVideoLoadedFraction) {
return;
}
return player.getVideoLoadedFraction() * 100;
};
/**
* Turn off video sound.
*
* @public
*/
self.mute = function () {
if (!player || !player.mute) {
return;
}
player.mute();
};
/**
* Turn on video sound.
*
* @public
*/
self.unMute = function () {
if (!player || !player.unMute) {
return;
}
player.unMute();
};
/**
* Check if video sound is turned on or off.
*
* @public
* @returns {Boolean}
*/
self.isMuted = function () {
if (!player || !player.isMuted) {
return;
}
return player.isMuted();
};
/**
* Check if video is loaded and ready to play.
*
* @public
* @returns {Boolean}
*/
self.isLoaded = function () {
if (!player || !player.getPlayerState) {
return;
}
return player.getPlayerState() === 5;
};
/**
* Return the video sound level.
*
* @public
* @returns {Number} Between 0 and 100.
*/
self.getVolume = function () {
if (!player || !player.getVolume) {
return;
}
return player.getVolume();
};
/**
* Set video sound level.
*
* @public
* @param {Number} level Between 0 and 100.
*/
self.setVolume = function (level) {
if (!player || !player.setVolume) {
return;
}
player.setVolume(level);
};
/**
* Get list of available playback rates.
*
* @public
* @returns {Array} available playback rates
*/
self.getPlaybackRates = function () {
if (!player || !player.getAvailablePlaybackRates) {
return;
}
var playbackRates = player.getAvailablePlaybackRates();
if (!playbackRates.length) {
return; // No rates, but the array should contain at least 1
}
return playbackRates;
};
/**
* Get current playback rate.
*
* @public
* @returns {Number} such as 0.25, 0.5, 1, 1.25, 1.5 and 2
*/
self.getPlaybackRate = function () {
if (!player || !player.getPlaybackRate) {
return;
}
return player.getPlaybackRate();
};
/**
* Set current playback rate.
* Listen to event "playbackRateChange" to check if successful.
*
* @public
* @params {Number} suggested rate that may be rounded to supported values
*/
self.setPlaybackRate = function (newPlaybackRate) {
if (!player || !player.setPlaybackRate) {
return;
}
playbackRate = Number(newPlaybackRate);
player.setPlaybackRate(playbackRate);
};
/**
* Set current captions track.
*
* @param {H5P.Video.LabelValue} Captions track to show during playback
*/
self.setCaptionsTrack = function (track) {
player.setOption('captions', 'track', track ? {languageCode: track.value} : {});
};
/**
* Figure out which captions track is currently used.
*
* @return {H5P.Video.LabelValue} Captions track
*/
self.getCaptionsTrack = function () {
var track = player.getOption('captions', 'track');
return (track.languageCode ? new H5P.Video.LabelValue(track.displayName, track.languageCode) : null);
};
// Respond to resize events by setting the YT player size.
self.on('resize', function () {
if (!$wrapper.is(':visible')) {
return;
}
if (!player) {
// Player isn't created yet. Try again.
create();
return;
}
// Use as much space as possible
$wrapper.css({
width: '100%',
height: 'auto'
});
var width = $wrapper[0].clientWidth;
var height = options.fit ? $wrapper[0].clientHeight : (width * (9/16));
// Validate height before setting
if (height > 0) {
// Set size
$wrapper.css({
width: width + 'px',
height: height + 'px'
});
player.setSize(width, height);
}
});
}
/**
* Check to see if we can play any of the given sources.
*
* @public
* @static
* @param {Array} sources
* @returns {Boolean}
*/
YouTube.canPlay = function (sources) {
return getId(sources[0].path);
};
/**
* Find id of YouTube video from given URL.
*
* @private
* @param {String} url
* @returns {String} YouTube video identifier
*/
var getId = function (url) {
// Has some false positives, but should cover all regular URLs that people can find
var matches = url.match(/(?:(?:youtube.com\/(?:attribution_link\?(?:\S+))?(?:v\/|embed\/|watch\/|(?:user\/(?:\S+)\/)?watch(?:\S+)v\=))|(?:youtu.be\/|y2u.be\/))([A-Za-z0-9_-]{11})/i);
if (matches && matches[1]) {
return matches[1];
}
};
/**
* Load the IFrame Player API asynchronously.
*/
var loadAPI = function (loaded) {
if (window.onYouTubeIframeAPIReady !== undefined) {
// Someone else is loading, hook in
var original = window.onYouTubeIframeAPIReady;
window.onYouTubeIframeAPIReady = function (id) {
loaded(id);
original(id);
};
}
else {
// Load the API our self
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.onYouTubeIframeAPIReady = loaded;
}
};
/** @constant {Object} */
var LABELS = {
highres: '2160p', // Old API support
hd2160: '2160p', // (New API)
hd1440: '1440p',
hd1080: '1080p',
hd720: '720p',
large: '480p',
medium: '360p',
small: '240p',
tiny: '144p',
auto: 'Auto'
};
/** @private */
var numInstances = 0;
// Extract the current origin (used for security)
var ORIGIN = window.location.href.match(/http[s]?:\/\/[^\/]+/);
ORIGIN = !ORIGIN || ORIGIN[0] === undefined ? undefined : ORIGIN[0];
// ORIGIN = undefined is needed to support fetching file from device local storage
return YouTube;
})(H5P.jQuery);
// Register video handler
H5P.videoHandlers = H5P.videoHandlers || [];
H5P.videoHandlers.push(H5P.VideoYouTube);
;
/** @namespace H5P */
H5P.VideoPanopto = (function ($) {
/**
* Panopto video player for H5P.
*
* @class
* @param {Array} sources Video files to use
* @param {Object} options Settings for the player
* @param {Object} l10n Localization strings
*/
function Panopto(sources, options, l10n) {
var self = this;
self.volume = 100;
self.toSeek = undefined;
var player;
var playbackRate = 1;
let canHasAutoplay;
var id = 'h5p-panopto-' + numInstances;
numInstances++;
let isLoaded = false;
let isPlayerReady = false;
var $wrapper = $('<div/>');
var $placeholder = $('<div/>', {
id: id,
html: '<div>' + l10n.loading + '</div>'
}).appendTo($wrapper);
// Determine autoplay/play.
try {
if (document.featurePolicy.allowsFeature('autoplay') !== false) {
canHasAutoplay = true;
}
}
catch (err) {}
/**
* Use the Panopto API to create a new player
*
* @private
*/
var create = function () {
if (!$placeholder.is(':visible') || player !== undefined) {
return;
}
if (window.EmbedApi === undefined) {
// Load API first
loadAPI(create);
return;
}
var width = $wrapper.width();
if (width < 200) {
width = 200;
}
const videoId = getId(sources[0].path);
player = new EmbedApi(id, {
width: width,
height: width * (9/16),
serverName: videoId[0],
sessionId: videoId[1],
videoParams: { // Optional
interactivity: 'none',
showtitle: false,
autohide: true,
offerviewer: false,
autoplay: false,
showbrand: false,
start: 0,
hideoverlay: !options.controls,
},
events: {
onIframeReady: function () {
isPlayerReady = true;
$placeholder.children(0).text('');
if (options.autoplay && canHasAutoplay) {
player.loadVideo();
isLoaded = true;
}
self.trigger('containerLoaded');
self.trigger('resize'); // Avoid black iframe if loading is slow
},
onReady: function () {
self.videoLoaded = true;
self.trigger('loaded');
if (typeof self.oldTime === 'number') {
self.seek(self.oldTime);
}
else if (typeof self.startAt === 'number' && self.startAt > 0) {
self.seek(self.startAt);
}
if (player.hasCaptions()) {
const captions = [];
const captionTracks = player.getCaptionTracks();
for (trackIndex in captionTracks) {
captions.push(new H5P.Video.LabelValue(captionTracks[trackIndex], trackIndex));
}
// Select active track
currentTrack = player.getSelectedCaptionTrack();
currentTrack = captions[currentTrack] ? captions[currentTrack] : null;
self.trigger('captions', captions);
}
},
onStateChange: function (state) {
if ([H5P.Video.PLAYING, H5P.Video.PAUSED].includes(state) && typeof self.seekToTime === 'number') {
player.seekTo(self.seekToTime);
delete self.seekToTime;
}
// since panopto has different load sequence in IV, need additional condition here
if (self.WAS_RESET) {
self.WAS_RESET = false;
}
// TODO: Playback rate fix for IE11?
if (state > -1 && state < 4) {
self.trigger('stateChange', state);
}
},
onPlaybackRateChange: function () {
self.trigger('playbackRateChange', self.getPlaybackRate());
},
onError: function (error) {
if (error === ApiError.PlayWithSoundNotAllowed) {
// pause and allow user to handle playing
self.pause();
self.unMute(); // because player is automuted on this error
}
else {
self.trigger('error', l10n.unknownError);
}
},
onLoginShown: function () {
$placeholder.children().first().remove(); // Remove loading message
self.trigger('loaded'); // Resize parent
}
}
});
};
/**
* Indicates if the video must be clicked for it to start playing.
* This is always true for Panopto since all videos auto play.
*
* @public
*/
self.pressToPlay = true;
/**
* Appends the video player to the DOM.
*
* @public
* @param {jQuery} $container
*/
self.appendTo = function ($container) {
$container.addClass('h5p-panopto').append($wrapper);
create();
};
/**
* Get list of available qualities. Not available until after play.
*
* @public
* @returns {Array}
*/
self.getQualities = function () {
// Not available for Panopto
};
/**
* Get current playback quality. Not available until after play.
*
* @public
* @returns {String}
*/
self.getQuality = function () {
// Not available for Panopto
};
/**
* Set current playback quality. Not available until after play.
* Listen to event "qualityChange" to check if successful.
*
* @public
* @params {String} [quality]
*/
self.setQuality = function (quality) {
// Not available for Panopto
};
/**
* Start the video.
*
* @public
*/
self.play = function () {
if (!player || !player.playVideo || !isPlayerReady) {
return;
}
if (isLoaded || self.videoLoaded) {
player.playVideo();
}
else {
player.loadVideo(); // Loads and starts playing
isLoaded = true;
}
};
/**
* Pause the video.
*
* @public
*/
self.pause = function () {
if (!player || !player.pauseVideo) {
return;
}
try {
player.pauseVideo();
}
catch (err) {
// Swallow Panopto throwing an error. This has been seen in the authoring
// tool if Panopto has been used inside Iv inside CP
}
};
/**
* Seek video to given time.
*
* @public
* @param {Number} time
*/
self.seek = function (time) {
if (!player || !player.seekTo || !self.videoLoaded) {
return;
}
if (!player.isReady) {
self.seekToTime = time;
return;
}
player.seekTo(time);
if (self.WAS_RESET) {
// need to check just to be sure, since state === 1 is unusable
delete self.seekToTime;
self.WAS_RESET = false;
}
};
/**
* Recreate player with initial time
*
* @public
* @param {Number} time
*/
self.resetPlayback = function (time) {
if (player && player.isReady && self.videoLoaded) {
self.seek(time);
self.pause();
}
else {
self.seekToTime = time;
}
}
/**
* Get elapsed time since video beginning.
*
* @public
* @returns {Number}
*/
self.getCurrentTime = function () {
if (!player || !player.getCurrentTime) {
return;
}
return player.getCurrentTime();
};
/**
* Get total video duration time.
*
* @public
* @returns {Number}
*/
self.getDuration = function () {
if (!player || !player.getDuration) {
return;
}
return player.getDuration();
};
/**
* Get percentage of video that is buffered.
*
* @public
* @returns {Number} Between 0 and 100
*/
self.getBuffered = function () {
// Not available for Panopto
};
/**
* Turn off video sound.
*
* @public
*/
self.mute = function () {
if (!player || !player.muteVideo) {
return;
}
player.muteVideo();
};
/**
* Turn on video sound.
*
* @public
*/
self.unMute = function () {
if (!player || !player.unmuteVideo) {
return;
}
player.unmuteVideo();
// The volume is set to 0 when the browser prevents autoplay,
// causing there to be no sound despite unmuting
self.setVolume(self.volume);
};
/**
* Check if video sound is turned on or off.
*
* @public
* @returns {Boolean}
*/
self.isMuted = function () {
if (!player || !player.isMuted) {
return;
}
return player.isMuted();
};
/**
* Check video is loaded and ready to play
*
* @public
* @returns {Boolean}
*/
self.isLoaded = function () {
return isPlayerReady;
};
/**
* Return the video sound level.
*
* @public
* @returns {Number} Between 0 and 100.
*/
self.getVolume = function () {
if (!player || !player.getVolume) {
return;
}
return player.getVolume() * 100;
};
/**
* Set video sound level.
*
* @public
* @param {Number} level Between 0 and 100.
*/
self.setVolume = function (level) {
if (!player || !player.setVolume) {
return;
}
player.setVolume(level/100);
self.volume = level;
};
/**
* Get list of available playback rates.
*
* @public
* @returns {Array} available playback rates
*/
self.getPlaybackRates = function () {
return [0.25, 0.5, 1, 1.25, 1.5, 2];
};
/**
* Get current playback rate.
*
* @public
* @returns {Number} such as 0.25, 0.5, 1, 1.25, 1.5 and 2
*/
self.getPlaybackRate = function () {
if (!player || !player.getPlaybackRate) {
return;
}
return player.getPlaybackRate();
};
/**
* Set current playback rate.
* Listen to event "playbackRateChange" to check if successful.
*
* @public
* @params {Number} suggested rate that may be rounded to supported values
*/
self.setPlaybackRate = function (newPlaybackRate) {
if (!player || !player.setPlaybackRate) {
return;
}
player.setPlaybackRate(newPlaybackRate);
};
/**
* Set current captions track.
*
* @param {H5P.Video.LabelValue} Captions track to show during playback
*/
self.setCaptionsTrack = function (track) {
if (!track) {
player.disableCaptions();
currentTrack = null;
}
else {
player.enableCaptions(track.value + '');
currentTrack = track;
}
};
/**
* Figure out which captions track is currently used.
*
* @return {H5P.Video.LabelValue} Captions track
*/
self.getCaptionsTrack = function () {
return currentTrack; // No function for getting active caption track?
};
// Respond to resize events by setting the player size.
self.on('resize', function () {
if (!$wrapper.is(':visible')) {
return;
}
if (!player) {
// Player isn't created yet. Try again.
create();
return;
}
// Use as much space as possible
$wrapper.css({
width: '100%',
height: '100%'
});
var width = $wrapper[0].clientWidth;
var height = options.fit ? $wrapper[0].clientHeight : (width * (9/16));
// Set size
$wrapper.css({
width: width + 'px',
height: height + 'px'
});
const $iframe = $placeholder.children('iframe');
if ($iframe.length) {
$iframe.attr('width', width);
$iframe.attr('height', height);
}
});
let currentTrack;
}
/**
* Check to see if we can play any of the given sources.
*
* @public
* @static
* @param {Array} sources
* @returns {Boolean}
*/
Panopto.canPlay = function (sources) {
return getId(sources[0].path);
};
/**
* Find id of YouTube video from given URL.
*
* @private
* @param {String} url
* @returns {String} Panopto video identifier
*/
var getId = function (url) {
const matches = url.match(/^[^\/]+:\/\/([^\/]*panopto\.[^\/]+)\/Panopto\/.+\?id=(.+)$/);
if (matches && matches.length === 3) {
return [matches[1], matches[2]];
}
};
/**
* Load the IFrame Player API asynchronously.
*/
var loadAPI = function (loaded) {
if (window.onPanoptoEmbedApiReady !== undefined) {
// Someone else is loading, hook in
var original = window.onPanoptoEmbedApiReady;
window.onPanoptoEmbedApiReady = function (id) {
loaded(id);
original(id);
};
}
else {
// Load the API our self
var tag = document.createElement('script');
tag.src = 'https://developers.panopto.com/scripts/embedapi.min.js';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.onPanoptoEmbedApiReady = loaded;
}
};
/** @private */
var numInstances = 0;
return Panopto;
})(H5P.jQuery);
// Register video handler
H5P.videoHandlers = H5P.videoHandlers || [];
H5P.videoHandlers.push(H5P.VideoPanopto);
;
/** @namespace Echo */
H5P.VideoEchoVideo = (() => {
let numInstances = 0;
const CONTROLS_HEIGHT = 100;
/**
* EchoVideo video player for H5P.
*
* @class
* @param {Array} sources Video files to use
* @param {Object} options Settings for the player
* @param {Object} l10n Localization strings
*/
function EchoPlayer(sources, options, l10n) {
// State variables for the Player.
let player = undefined;
let buffered = 0;
let currentQuality;
let trackOptions = [];
let currentTime = 0;
let duration = 0;
let isMuted = false;
let loadingComplete = false;
let volume = 1;
let playbackRate = 1;
let qualities = [];
let loadingFailedTimeout;
let failedLoading = false;
let ratio = 9 / 16;
let currentState = H5P.Video.VIDEO_CUED;
// Echo360 server doesn't sync seek time with regular play time fast enough
let timelineUpdatesToSkip = 0;
let timeUpdateTimeout;
/*
* Echo360 player does send time updates ~ 0.25 seconds by default and
* ends playing the video without sending a final time update or an
* Video Ended event. We take care of determining reaching the video end
* ourselves.
*/
const echoMinUncertaintyCompensationS = 0.3;
const timelineUpdateDeltaSlackMS = 50;
let echoUncertaintyCompensationS = echoMinUncertaintyCompensationS;
let previousTickMS;
// Player specific immutable variables.
const LOADING_TIMEOUT_IN_SECONDS = 30;
const id = `h5p-echo-${++numInstances}`;
const instanceId = H5P.createUUID();
const wrapperElement = document.createElement('div');
const placeholderElement = document.createElement('div');
placeholderElement.classList.add('h5p-video-loading');
placeholderElement.setAttribute('style', 'height: 100%; min-height: 200px; display: block; z-index: 100; border: none;');
placeholderElement.setAttribute('aria-label', l10n.loading);
wrapperElement.setAttribute('id', id);
wrapperElement.append(placeholderElement);
/**
* Remove all elements from the placeholder dom element.
*
* @private
*/
const removeLoadingIndicator = () => {
placeholderElement.replaceChildren();
};
/**
* Generate an array of objects for use in a dropdown from the list of resolutions.
* @private
* @param {Array} qualityLevels - list of objects with supported qualities for the media
* @returns {Array} list of objects with label and name properties
*/
const mapQualityLevels = (qualityLevels) => {
const qualities = qualityLevels.map((quality) => {
return { label: quality.label.toLowerCase(), name: quality.value };
});
return qualities;
};
/**
* Register event listeners on the given Echo player.
*
* @private
* @param {HTMLElement} player
*/
const registerEchoPlayerEventListeneners = (player) => {
player.resolveLoading = null;
player.loadingPromise = new Promise((resolve) => {
player.resolveLoading = resolve;
});
player.onload = async () => {
clearTimeout(loadingFailedTimeout);
player.loadingPromise.then(async () => {
this.trigger('ready');
this.trigger('loaded');
this.loadingComplete = true;
this.trigger('resize');
if (trackOptions.length) {
this.trigger('captions', trackOptions);
}
const autoplayIsAllowed = !window.H5PEditor &&
await H5P.Video.isAutoplayAllowed();
if (options.autoplay && autoplayIsAllowed) {
this.play();
}
return true;
});
};
window.addEventListener('message', (event) => {
let message = '';
try {
message = JSON.parse(event.data);
}
catch (e) {
return;
}
if (
message.context !== 'Echo360' || message.instanceId !== instanceId
) {
return;
}
if (message.event === 'init') {
// Set ratio if width and height is received from Echo360
if (message.data.width && message.data.height) {
// If controls are displayed we have to add a magic height to make it visible :(
ratio = ((message.data.height + (options.controls ? CONTROLS_HEIGHT : 0)) / message.data.width);
}
duration = message.data.duration;
this.setCurrentTime(message.data.currentTime ?? 0);
textTracks = message.data.textTracks ?? [];
if (message.data.captions) {
trackOptions = textTracks.map((track) =>
new H5P.Video.LabelValue(track.label, track.value)
);
}
player.resolveLoading();
// Player sends `init` event after rebuffering, unfortunately.
if (!this.wasInitialized) {
qualities = mapQualityLevels(message.data.qualityOptions);
currentQuality = qualities[0].name;
this.trigger('qualityChange', currentQuality);
}
this.trigger('resize');
if (message.data.playing) {
changeState(H5P.Video.PLAYING);
}
this.wasInitialized = true;
}
else if (message.event === 'timeline') {
updateUncertaintyCompensation();
duration = message.data.duration ?? this.getDuration();
if (timelineUpdatesToSkip === 0) {
this.setCurrentTime(message.data.currentTime ?? 0);
}
else {
timelineUpdatesToSkip--;
}
/*
* Should work, but it was better if the player itself clearly sent
* the state (playing, paused, ended) instead of us having to infer.
*/
const compensatedTime = this.getCurrentTime() +
echoUncertaintyCompensationS * this.getPlaybackRate()
if (
currentState === H5P.Video.PLAYING &&
Math.ceil(compensatedTime) >= duration
) {
changeState(H5P.Video.ENDED);
if (options.loop) {
this.seek(0);
this.play();
}
return;
}
if (message.data.playing) {
timeUpdate(currentTime);
changeState(H5P.Video.PLAYING);
}
else if (currentState === H5P.Video.PLAYING) {
// Condition prevents video to be paused on startup
changeState(H5P.Video.PAUSED);
window.clearTimeout(timeUpdateTimeout);
}
}
});
};
/**
* Update the uncertainty compensation value.
* Computes the delta time between the last two timeline events sent by the
* Echo360 player and updates the compensation value.
*/
const updateUncertaintyCompensation = () => {
if (currentState === H5P.Video.PLAYING) {
const time = Date.now();
if (previousTickMS) {
echoUncertaintyCompensationS = Math.max(
echoMinUncertaintyCompensationS,
(time - previousTickMS + timelineUpdateDeltaSlackMS) /
1000
)
} else {
echoUncertaintyCompensationS = echoMinUncertaintyCompensationS;
}
previousTickMS = time;
}
else {
delete previousTickMS;
}
}
/**
* Change state of the player.
* @param {number} state State id (H5P.Video[statename]).
*/
const changeState = (state) => {
if (state !== currentState) {
currentState = state;
this.trigger('stateChange', state);
}
};
/**
* Determine if the element is visible by computing the styles.
*
* @private
* @param {HTMLElement} node - the element to check.
* @returns {Boolean} true if it is visible.
*/
const isNodeVisible = (node) => {
let style = window.getComputedStyle(node);
if (node.offsetWidth === 0) {
return false;
}
return ((style.display !== 'none') && (style.visibility !== 'hidden'));
};
const timeUpdate = (time) => {
window.clearTimeout(timeUpdateTimeout);
this.lastTimeUpdate = Date.now();
timeUpdateTimeout = window.setTimeout(() => {
if (currentState !== H5P.Video.PLAYING) {
return;
}
const delta = (Date.now() - this.lastTimeUpdate) * this.getPlaybackRate();
this.setCurrentTime(currentTime + delta / 1000);
timeUpdate(currentTime);
}, 40); // 25 fps
}
/**
* Create a new player by embedding an iframe.
*
* @private
* @returns {Promise}
*/
const createEchoPlayer = async () => {
if (!isNodeVisible(placeholderElement) || player !== undefined) {
return;
}
// Since the SDK is loaded asynchronously below, explicitly set player to
// null (unlike undefined) which indicates that creation has begun. This
// allows the guard statement above to be hit if this function is called
// more than once.
player = null;
let queryString = '?';
queryString += `instanceId=${instanceId}&`;
if (options.controls) {
queryString += 'controls=true&';
}
if (options.disableFullscreen) {
queryString += 'disableFullscreen=true&';
}
if (options.deactivateSound) {
queryString += 'deactivateSound=true&';
}
if (options.startAt) {
queryString += `startTimeMillis=${Math.round(options.startAt * 1000)}&`;
}
wrapperElement.innerHTML = `<iframe src="${sources[0].path}${queryString}" style="display: inline-block; width: 100%; height: 100%;" allow="autoplay; fullscreen" frameborder="0" scrolling="no"></iframe>`;
player = wrapperElement.firstChild;
// Create a new player
registerEchoPlayerEventListeneners(player);
loadingFailedTimeout = setTimeout(() => {
failedLoading = true;
removeLoadingIndicator();
wrapperElement.innerHTML = `<p class="echo-failed-loading">${l10n.unknownError}</p>`;
wrapperElement.style.cssText = 'width: null; height: null;';
this.trigger('resize');
this.trigger('error', l10n.unknownError);
}, LOADING_TIMEOUT_IN_SECONDS * 1000);
};
/**
* Appends the video player to the DOM.
*
* @public
* @param {jQuery} $container
*/
this.appendTo = ($container) => {
$container.addClass('h5p-echo').append(wrapperElement);
createEchoPlayer();
};
/**
* Determine if the video has loaded.
*
* @public
* @returns {Boolean}
*/
this.isLoaded = () => {
return loadingComplete;
};
/**
* Get list of available qualities.
*
* @public
* @returns {Array}
*/
this.getQualities = () => {
return qualities;
};
/**
* Get the current quality.
*
* @public
* @returns {String} Current quality identifier
*/
this.getQuality = () => {
return currentQuality;
};
/**
* Set the playback quality.
*
* @public
* @param {String} quality
*/
this.setQuality = async (quality) => {
this.post('quality', quality);
currentQuality = quality;
this.trigger('qualityChange', currentQuality);
};
/**
* Start the video.
*
* @public
*/
this.play = () => {
if (!player) {
this.on('ready', this.play);
return;
}
this.post('play', 0);
};
/**
* Pause the video.
*
* @public
*/
this.pause = () => {
// Compensate for Echo360's delayed time updates
timelineUpdatesToSkip = 1;
this.post('pause', 0);
};
/**
* Seek video to given time.
*
* @public
* @param {Number} time
*/
this.seek = (time) => {
this.post('seek', time);
this.setCurrentTime(time);
// Compensate for Echo360's delayed time updates
timelineUpdatesToSkip = 1;
};
/**
* Post a window message to the iframe.
*
* @public
* @param event
* @param data
*/
this.post = (event, data) => {
player?.contentWindow?.postMessage(
JSON.stringify({
event: event,
context: 'Echo360',
instanceId: instanceId,
data: data
}),
'*'
);
};
/**
* Return the current play position.
*
* @public
* @returns {Number} Seconds elapsed since beginning of video
*/
this.getCurrentTime = () => {
return currentTime;
};
/**
* Set current time.
* @param {number} timeS Time in seconds.
*/
this.setCurrentTime = (timeS) => {
currentTime = timeS;
}
/**
* Return the video duration.
*
* @public
* @returns {?Number} Video duration in seconds
*/
this.getDuration = () => {
if (duration > 0) {
return duration;
}
return null;
};
/**
* Get percentage of video that is buffered.
*
* @public
* @returns {Number} Between 0 and 100
*/
this.getBuffered = () => {
return buffered;
};
/**
* Mute the video.
*
* @public
*/
this.mute = () => {
this.post('mute', 0);
isMuted = true;
};
/**
* Unmute the video.
*
* @public
*/
this.unMute = () => {
this.post('unmute', 0);
isMuted = false;
};
/**
* Whether the video is muted.
*
* @public
* @returns {Boolean} True if the video is muted, false otherwise
*/
this.isMuted = () => {
return isMuted;
};
/**
* Get the video player's current sound volume.
*
* @public
* @returns {Number} Between 0 and 100.
*/
this.getVolume = () => {
return volume;
};
/**
* Set the video player's sound volume.
*
* @public
* @param {Number} level
*/
this.setVolume = (level) => {
this.post('volume', level);
volume = level;
};
/**
* Get list of available playback rates.
*
* @public
* @returns {Array} Available playback rates
*/
this.getPlaybackRates = () => {
return [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
};
/**
* Get the current playback rate.
*
* @public
* @returns {Number} e.g. 0.5, 1, 1.5 or 2
*/
this.getPlaybackRate = () => {
return playbackRate;
};
/**
* Set the current playback rate.
*
* @public
* @param {Number} rate Must be one of available rates from getPlaybackRates
*/
this.setPlaybackRate = async (rate) => {
const echoRate = parseFloat(rate);
this.post('playbackrate', echoRate);
playbackRate = rate;
this.trigger('playbackRateChange', rate);
};
/**
* Set current captions track.
*
* @public
* @param {H5P.Video.LabelValue} track Captions to display
*/
this.setCaptionsTrack = (track) => {
const echoCaption = trackOptions.find(
(trackItem) => track?.value === trackItem.value
);
trackOptions.forEach(trackItem => {
trackItem.mode = (trackItem === echoCaption) ? 'showing' : 'disabled';
});
this.post('captions', echoCaption ? echoCaption.value : 'off');
};
/**
* Get current captions track.
*
* @public
* @returns {H5P.Video.LabelValue|null} Current captions track.
*/
this.getCaptionsTrack = () => {
return trackOptions.find(
(trackItem) => trackItem.mode === 'showing'
) ?? null;
};
this.on('resize', () => {
if (failedLoading || !isNodeVisible(wrapperElement)) {
return;
}
if (player === undefined) {
// Player isn't created yet. Try again.
createEchoPlayer();
return;
}
// Use as much space as possible
wrapperElement.style.cssText = 'width: 100%; height: 100%;';
const width = wrapperElement.clientWidth;
const height = options.fit ? wrapperElement.clientHeight : (width * (ratio));
// Validate height before setting
if (height > 0) {
// Set size
wrapperElement.style.cssText = 'width: ' + width + 'px; height: ' + height + 'px;';
}
});
}
/**
* Find id of video from given URL.
*
* @private
* @param {String} url
* @returns {String} Echo video identifier
*/
const getId = (url) => {
const matches = url.match(/^[^/]+:\/\/(echo360[^/]+)\/media\/([^/]+)\/h5p.*$/i);
if (matches && matches.length === 3) {
return [matches[2], matches[2]];
}
};
/**
* Check to see if we can play any of the given sources.
*
* @public
* @static
* @param {Array} sources
* @returns {Boolean}
*/
EchoPlayer.canPlay = (sources) => {
return getId(sources[0].path);
};
return EchoPlayer;
})(H5P.jQuery);
// Register video handler
H5P.videoHandlers = H5P.videoHandlers || [];
H5P.videoHandlers.push(H5P.VideoEchoVideo);
;
/** @namespace H5P */
H5P.VideoHtml5 = (function ($) {
/**
* HTML5 video player for H5P.
*
* @class
* @param {Array} sources Video files to use
* @param {Object} options Settings for the player
* @param {Object} l10n Localization strings
*/
function Html5(sources, options, l10n) {
var self = this;
/**
* Small helper to ensure all video sources get the same cache buster.
*
* @private
* @param {Object} source
* @return {string}
*/
const getCrossOriginPath = function (source) {
let path = H5P.getPath(source.path, self.contentId);
if (video.crossOrigin !== null && H5P.addQueryParameter && H5PIntegration.crossoriginCacheBuster) {
path = H5P.addQueryParameter(path, H5PIntegration.crossoriginCacheBuster);
}
return path
};
/**
* Register track to video
*
* @param {Object} trackData Track object
* @param {string} trackData.kind Kind of track
* @param {Object} trackData.track Source path
* @param {string} [trackData.label] Label of track
* @param {string} [trackData.srcLang] Language code
*/
const addTrack = function (trackData) {
// Skip invalid tracks
if (!trackData.kind || !trackData.track.path) {
return;
}
var track = document.createElement('track');
track.kind = trackData.kind;
track.src = getCrossOriginPath(trackData.track); // Uses same crossOrigin as parent. You cannot mix.
if (trackData.label) {
track.label = trackData.label;
}
if (trackData.srcLang) {
track.srcLang = trackData.srcLang;
}
return track;
};
/**
* Small helper to set the inital video source.
* Useful if some of the loading happens asynchronously.
* NOTE: Setting the crossOrigin must happen before any of the
* sources(poster, tracks etc.) are loaded
*
* @private
*/
const setInitialSource = function () {
if (qualities[currentQuality] === undefined) {
return;
}
if (H5P.setSource !== undefined) {
H5P.setSource(video, qualities[currentQuality].source, self.contentId)
}
else {
// Backwards compatibility (H5P < v1.22)
const srcPath = H5P.getPath(qualities[currentQuality].source.path, self.contentId);
if (H5P.getCrossOrigin !== undefined) {
var crossOrigin = H5P.getCrossOrigin(srcPath);
video.setAttribute('crossorigin', crossOrigin !== null ? crossOrigin : 'anonymous');
}
video.src = srcPath;
}
// Add poster if provided
if (options.poster) {
video.poster = getCrossOriginPath(options.poster); // Uses same crossOrigin as parent. You cannot mix.
}
// Register tracks
options.tracks.forEach(function (track, i) {
var trackElement = addTrack(track);
if (i === 0) {
trackElement.default = true;
}
if (trackElement) {
video.appendChild(trackElement);
}
});
};
/**
* Displayed when the video is buffering
* @private
*/
var $throbber = $('<div/>', {
'class': 'h5p-video-loading'
});
/**
* Used to display error messages
* @private
*/
var $error = $('<div/>', {
'class': 'h5p-video-error'
});
/**
* Keep track of current state when changing quality.
* @private
*/
var stateBeforeChangingQuality;
var currentTimeBeforeChangingQuality;
/**
* Avoids firing the same event twice.
* @private
*/
var lastState;
/**
* Keeps track whether or not the video has been loaded.
* @private
*/
var isLoaded = false;
/**
*
* @private
*/
var playbackRate = 1;
var skipRateChange = false;
// Create player
var video = document.createElement('video');
// Sort sources into qualities
var qualities = getQualities(sources, video);
var currentQuality;
numQualities = 0;
for (let quality in qualities) {
numQualities++;
}
if (numQualities > 1 && H5P.VideoHtml5.getExternalQuality !== undefined) {
H5P.VideoHtml5.getExternalQuality(sources, function (chosenQuality) {
if (qualities[chosenQuality] !== undefined) {
currentQuality = chosenQuality;
}
setInitialSource();
});
}
else {
// Select quality and source
currentQuality = getPreferredQuality();
if (currentQuality === undefined || qualities[currentQuality] === undefined) {
// No preferred quality, pick the first.
for (currentQuality in qualities) {
if (qualities.hasOwnProperty(currentQuality)) {
break;
}
}
}
setInitialSource();
}
// Setting webkit-playsinline, which makes iOS 10 beeing able to play video
// inside browser.
video.setAttribute('webkit-playsinline', '');
video.setAttribute('playsinline', '');
video.setAttribute('preload', 'metadata');
// Remove buttons in Chrome's video player:
let controlsList = 'nodownload';
if (options.disableFullscreen) {
controlsList += ' nofullscreen';
}
if (options.disableRemotePlayback) {
controlsList += ' noremoteplayback';
}
video.setAttribute('controlsList', controlsList);
// Remove picture in picture as it interfers with other video players
video.disablePictureInPicture = true;
// Set options
video.disableRemotePlayback = (options.disableRemotePlayback ? true : false);
video.controls = (options.controls ? true : false);
// Hardcoded autoplay to false to avoid playing videos on init
video.autoplay = false;
video.loop = (options.loop ? true : false);
video.className = 'h5p-video';
video.style.display = 'block';
if (options.fit) {
// Style is used since attributes with relative sizes aren't supported by IE9.
video.style.width = '100%';
video.style.height = '100%';
}
/**
* Helps registering events.
*
* @private
* @param {String} native Event name
* @param {String} h5p Event name
* @param {String} [arg] Optional argument
*/
var mapEvent = function (native, h5p, arg) {
video.addEventListener(native, function () {
switch (h5p) {
case 'loaded':
isLoaded = true;
if (stateBeforeChangingQuality !== undefined) {
return; // Avoid loaded event when changing quality.
}
// Remove any errors
if ($error.is(':visible')) {
$error.remove();
}
if (OLD_ANDROID_FIX) {
var andLoaded = function () {
video.removeEventListener('durationchange', andLoaded, false);
// On Android seeking isn't ready until after play.
self.trigger(h5p);
};
video.addEventListener('durationchange', andLoaded, false);
return;
}
if (video.poster) {
$(video).one('play', function () {
self.seek(self.getCurrentTime() || options.startAt);
});
}
else {
self.seek(options.startAt);
}
break;
case 'error':
// Handle error and get message.
arg = error(arguments[0], arguments[1]);
break;
case 'playbackRateChange':
// Fix for keeping playback rate in IE11
if (skipRateChange) {
skipRateChange = false;
return; // Avoid firing event when changing back
}
if (H5P.Video.IE11_PLAYBACK_RATE_FIX && playbackRate != video.playbackRate) { // Intentional
// Prevent change in playback rate not triggered by the user
video.playbackRate = playbackRate;
skipRateChange = true;
return;
}
// End IE11 fix
arg = self.getPlaybackRate();
break;
}
self.trigger(h5p, arg);
}, false);
};
/**
* Handle errors from the video player.
*
* @private
* @param {Object} code Error
* @param {String} [message]
* @returns {String} Human readable error message.
*/
var error = function (code, message) {
if (code instanceof Event) {
// No error code
if (!code.target.error) {
return '';
}
switch (code.target.error.code) {
case MediaError.MEDIA_ERR_ABORTED:
message = l10n.aborted;
break;
case MediaError.MEDIA_ERR_NETWORK:
message = l10n.networkFailure;
break;
case MediaError.MEDIA_ERR_DECODE:
message = l10n.cannotDecode;
break;
case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
message = l10n.formatNotSupported;
break;
case MediaError.MEDIA_ERR_ENCRYPTED:
message = l10n.mediaEncrypted;
break;
}
}
if (!message) {
message = l10n.unknownError;
}
// Hide throbber
$throbber.remove();
// Display error message to user
$error.text(message).insertAfter(video);
// Pass message to our error event
return message;
};
/**
* Appends the video player to the DOM.
*
* @public
* @param {jQuery} $container
*/
self.appendTo = function ($container) {
$container.append(video);
};
/**
* Get list of available qualities. Not available until after play.
*
* @public
* @returns {Array}
*/
self.getQualities = function () {
// Create reverse list
var options = [];
for (var q in qualities) {
if (qualities.hasOwnProperty(q)) {
options.splice(0, 0, {
name: q,
label: qualities[q].label
});
}
}
if (options.length < 2) {
// Do not return if only one quality.
return;
}
return options;
};
/**
* Get current playback quality. Not available until after play.
*
* @public
* @returns {String}
*/
self.getQuality = function () {
return currentQuality;
};
/**
* Set current playback quality. Not available until after play.
* Listen to event "qualityChange" to check if successful.
*
* @public
* @params {String} [quality]
*/
self.setQuality = function (quality) {
if (qualities[quality] === undefined || quality === currentQuality) {
return; // Invalid quality
}
// Keep track of last choice
setPreferredQuality(quality);
// Avoid multiple loaded events if changing quality multiple times.
if (!stateBeforeChangingQuality) {
// Keep track of last state
stateBeforeChangingQuality = lastState;
// Keep track of current time
currentTimeBeforeChangingQuality = video.currentTime;
// Seek and start video again after loading.
var loaded = function () {
video.removeEventListener('loadedmetadata', loaded, false);
if (OLD_ANDROID_FIX) {
var andLoaded = function () {
video.removeEventListener('durationchange', andLoaded, false);
// On Android seeking isn't ready until after play.
self.seek(currentTimeBeforeChangingQuality);
};
video.addEventListener('durationchange', andLoaded, false);
}
else {
// Seek to current time.
self.seek(currentTimeBeforeChangingQuality);
}
// Always play to get image.
video.play();
if (stateBeforeChangingQuality !== H5P.Video.PLAYING) {
// Do not resume playing
video.pause();
}
// Done changing quality
stateBeforeChangingQuality = undefined;
// Remove any errors
if ($error.is(':visible')) {
$error.remove();
}
};
video.addEventListener('loadedmetadata', loaded, false);
}
// Keep track of current quality
currentQuality = quality;
self.trigger('qualityChange', currentQuality);
// Display throbber
self.trigger('stateChange', H5P.Video.BUFFERING);
// Change source
video.src = getCrossOriginPath(qualities[quality].source); // (iPad does not support #t=).
// Note: Optional tracks use same crossOrigin as the original. You cannot mix.
// Remove poster so it will not show during quality change
video.removeAttribute('poster');
};
/**
* Starts the video.
*
* @public
* @return {Promise|undefined} May return a Promise that resolves when
* play has been processed.
*/
self.play = function () {
if ($error.is(':visible')) {
return;
}
if (!isLoaded) {
// Make sure video is loaded before playing
video.load();
video.addEventListener('loadeddata', function() {
video.play();
}, false);
}
else {
return video.play();
}
};
/**
* Pauses the video.
*
* @public
*/
self.pause = function () {
video.pause();
};
/**
* Seek video to given time.
*
* @public
* @param {Number} time
*/
self.seek = function (time) {
video.currentTime = time;
// Use canplaythrough for IOs devices
// Use loadedmetadata for all other devices.
const eventName = navigator.userAgent.match(/iPad|iPod|iPhone/i) ? "canplaythrough" : "loadedmetadata";
function seekTo() {
video.currentTime = time;
video.removeEventListener(eventName, seekTo);
};
if (video.readyState === 4) {
seekTo();
}
else {
video.addEventListener(eventName, seekTo);
}
};
/**
* Get elapsed time since video beginning.
*
* @public
* @returns {Number}
*/
self.getCurrentTime = function () {
return video.currentTime;
};
/**
* Get total video duration time.
*
* @public
* @returns {Number}
*/
self.getDuration = function () {
if (isNaN(video.duration)) {
return;
}
return video.duration;
};
/**
* Get percentage of video that is buffered.
*
* @public
* @returns {Number} Between 0 and 100
*/
self.getBuffered = function () {
// Find buffer currently playing from
var buffered = 0;
for (var i = 0; i < video.buffered.length; i++) {
var from = video.buffered.start(i);
var to = video.buffered.end(i);
if (video.currentTime > from && video.currentTime < to) {
buffered = to;
break;
}
}
// To percentage
return buffered ? (buffered / video.duration) * 100 : 0;
};
/**
* Turn off video sound.
*
* @public
*/
self.mute = function () {
video.muted = true;
};
/**
* Turn on video sound.
*
* @public
*/
self.unMute = function () {
video.muted = false;
};
/**
* Check if video sound is turned on or off.
*
* @public
* @returns {Boolean}
*/
self.isMuted = function () {
return video.muted;
};
/**
* Returns the video sound level.
*
* @public
* @returns {Number} Between 0 and 100.
*/
self.getVolume = function () {
return video.volume * 100;
};
/**
* Set video sound level.
*
* @public
* @param {Number} level Between 0 and 100.
*/
self.setVolume = function (level) {
video.volume = level / 100;
};
/**
* Get list of available playback rates.
*
* @public
* @returns {Array} available playback rates
*/
self.getPlaybackRates = function () {
/*
* not sure if there's a common rule about determining good speeds
* using Google's standard options via a constant for setting
*/
var playbackRates = PLAYBACK_RATES;
return playbackRates;
};
/**
* Get current playback rate.
*
* @public
* @returns {Number} such as 0.25, 0.5, 1, 1.25, 1.5 and 2
*/
self.getPlaybackRate = function () {
return video.playbackRate;
};
/**
* Set current playback rate.
* Listen to event "playbackRateChange" to check if successful.
*
* @public
* @params {Number} suggested rate that may be rounded to supported values
*/
self.setPlaybackRate = function (newPlaybackRate) {
playbackRate = newPlaybackRate;
video.playbackRate = newPlaybackRate;
};
/**
* Set current captions track.
*
* @param {H5P.Video.LabelValue} Captions track to show during playback
*/
self.setCaptionsTrack = function (track) {
for (var i = 0; i < video.textTracks.length; i++) {
video.textTracks[i].mode = (track && track.value === i ? 'showing' : 'disabled');
}
};
/**
* Figure out which captions track is currently used.
*
* @return {H5P.Video.LabelValue} Captions track
*/
self.getCaptionsTrack = function () {
for (var i = 0; i < video.textTracks.length; i++) {
if (video.textTracks[i].mode === 'showing') {
return new H5P.Video.LabelValue(video.textTracks[i].label, i);
}
}
return null;
};
// Register event listeners
mapEvent('ended', 'stateChange', H5P.Video.ENDED);
mapEvent('playing', 'stateChange', H5P.Video.PLAYING);
mapEvent('pause', 'stateChange', H5P.Video.PAUSED);
mapEvent('waiting', 'stateChange', H5P.Video.BUFFERING);
mapEvent('loadedmetadata', 'loaded');
mapEvent('canplay', 'canplay');
mapEvent('error', 'error');
mapEvent('ratechange', 'playbackRateChange');
if (!video.controls) {
// Disable context menu(right click) to prevent controls.
video.addEventListener('contextmenu', function (event) {
event.preventDefault();
}, false);
}
// Display throbber when buffering/loading video.
self.on('stateChange', function (event) {
var state = event.data;
lastState = state;
if (state === H5P.Video.BUFFERING) {
$throbber.insertAfter(video);
}
else {
$throbber.remove();
}
});
// Load captions after the video is loaded
self.on('loaded', function () {
nextTick(function () {
var textTracks = [];
for (var i = 0; i < video.textTracks.length; i++) {
textTracks.push(new H5P.Video.LabelValue(video.textTracks[i].label, i));
}
if (textTracks.length) {
self.trigger('captions', textTracks);
}
});
});
// Alternative to 'canplay' event
/*self.on('resize', function () {
if (video.offsetParent === null) {
return;
}
video.style.width = '100%';
video.style.height = '100%';
var width = video.clientWidth;
var height = options.fit ? video.clientHeight : (width * (video.videoHeight / video.videoWidth));
video.style.width = width + 'px';
video.style.height = height + 'px';
});*/
// Video controls are ready
nextTick(function () {
self.trigger('ready');
});
/**
* Check video is loaded and ready play.
*
* @public
* @param {Boolean}
*/
self.isLoaded = function () {
return isLoaded;
};
}
/**
* Check to see if we can play any of the given sources.
*
* @public
* @static
* @param {Array} sources
* @returns {Boolean}
*/
Html5.canPlay = function (sources) {
var video = document.createElement('video');
if (video.canPlayType === undefined) {
return false; // Not supported
}
// Cycle through sources
for (var i = 0; i < sources.length; i++) {
var type = getType(sources[i]);
if (type && video.canPlayType(type) !== '') {
// We should be able to play this
return true;
}
}
return false;
};
/**
* Find source type.
*
* @private
* @param {Object} source
* @returns {String}
*/
var getType = function (source) {
var type = source.mime;
if (!type) {
// Try to get type from URL
var matches = source.path.match(/\.(\w+)$/);
if (matches && matches[1]) {
type = 'video/' + matches[1];
}
}
if (type && source.codecs) {
// Add codecs
type += '; codecs="' + source.codecs + '"';
}
return type;
};
/**
* Sort sources into qualities.
*
* @private
* @static
* @param {Array} sources
* @param {Object} video
* @returns {Object} Quality mapping
*/
var getQualities = function (sources, video) {
var qualities = {};
var qualityIndex = 1;
var lastQuality;
// Cycle through sources
for (var i = 0; i < sources.length; i++) {
var source = sources[i];
// Find and update type.
var type = source.type = getType(source);
// Check if we support this type
var isPlayable = type && (type === 'video/unknown' || video.canPlayType(type) !== '');
if (!isPlayable) {
continue; // We cannot play this source
}
if (source.quality === undefined) {
/**
* No quality metadata. Create a quality tag to separate multiple sources of the same type,
* e.g. if two mp4 files with different quality has been uploaded
*/
if (lastQuality === undefined || qualities[lastQuality].source.type === type) {
// Create a new quality tag
source.quality = {
name: 'q' + qualityIndex,
label: (source.metadata && source.metadata.qualityName) ? source.metadata.qualityName : 'Quality ' + qualityIndex // TODO: l10n
};
qualityIndex++;
}
else {
/**
* Assumes quality already exists in a different format.
* Uses existing label for this quality.
*/
source.quality = qualities[lastQuality].source.quality;
}
}
// Log last quality
lastQuality = source.quality.name;
// Look to see if quality exists
var quality = qualities[lastQuality];
if (quality) {
// We have a source with this quality. Check if we have a better format.
if (source.mime.split('/')[1] === PREFERRED_FORMAT) {
quality.source = source;
}
}
else {
// Add new source with quality.
qualities[source.quality.name] = {
label: source.quality.label,
source: source
};
}
}
return qualities;
};
/**
* Set preferred video quality.
*
* @private
* @static
* @param {String} quality Index of preferred quality
*/
var setPreferredQuality = function (quality) {
try {
localStorage.setItem('h5pVideoQuality', quality);
}
catch (err) {
console.warn('Unable to set preferred video quality, localStorage is not available.');
}
};
/**
* Get preferred video quality.
*
* @private
* @static
* @returns {String} Index of preferred quality
*/
var getPreferredQuality = function () {
// First check localStorage
let quality;
try {
quality = localStorage.getItem('h5pVideoQuality');
}
catch (err) {
console.warn('Unable to retrieve preferred video quality from localStorage.');
}
if (!quality) {
try {
// The fallback to old cookie solution
var settings = document.cookie.split(';');
for (var i = 0; i < settings.length; i++) {
var setting = settings[i].split('=');
if (setting[0] === 'H5PVideoQuality') {
quality = setting[1];
break;
}
}
}
catch (err) {
console.warn('Unable to retrieve preferred video quality from cookie.');
}
}
return quality;
};
/**
* Helps schedule a task for the next tick.
* @param {function} task
*/
var nextTick = function (task) {
setTimeout(task, 0);
};
/** @constant {Boolean} */
var OLD_ANDROID_FIX = false;
/** @constant {Boolean} */
var PREFERRED_FORMAT = 'mp4';
/** @constant {Object} */
var PLAYBACK_RATES = [0.25, 0.5, 1, 1.25, 1.5, 2];
if (navigator.userAgent.indexOf('Android') !== -1) {
// We have Android, check version.
var version = navigator.userAgent.match(/AppleWebKit\/(\d+\.?\d*)/);
if (version && version[1] && Number(version[1]) <= 534.30) {
// Include fix for devices running the native Android browser.
// (We don't know when video was fixed, so the number is just the lastest
// native android browser we found.)
OLD_ANDROID_FIX = true;
}
}
else {
if (navigator.userAgent.indexOf('Chrome') !== -1) {
// If we're using chrome on a device that isn't Android, prefer the webm
// format. This is because Chrome has trouble with some mp4 codecs.
PREFERRED_FORMAT = 'webm';
}
}
return Html5;
})(H5P.jQuery);
// Register video handler
H5P.videoHandlers = H5P.videoHandlers || [];
H5P.videoHandlers.push(H5P.VideoHtml5);
;
/** @namespace H5P */
H5P.Video = (function ($, ContentCopyrights, MediaCopyright, handlers) {
/**
* The ultimate H5P video player!
*
* @class
* @param {Object} parameters Options for this library.
* @param {Object} parameters.visuals Visual options
* @param {Object} parameters.playback Playback options
* @param {Object} parameters.a11y Accessibility options
* @param {Boolean} [parameters.startAt] Start time of video
* @param {Number} id Content identifier
* @param {Object} [extras] Extra parameters.
*/
function Video(parameters, id, extras = {}) {
var self = this;
self.oldTime = extras.previousState?.time;
self.contentId = id;
self.WAS_RESET = false;
self.startAt = parameters.startAt || 0;
// Ref youtube.js - ipad & youtube - issue
self.pressToPlay = false;
// Reference to the handler
var handlerName = '';
// Initialize event inheritance
H5P.EventDispatcher.call(self);
// Default language localization
parameters = $.extend(true, parameters, {
l10n: {
name: 'Video',
loading: 'Video player loading...',
noPlayers: 'Found no video players that supports the given video format.',
noSources: 'Video source is missing.',
aborted: 'Media playback has been aborted.',
networkFailure: 'Network failure.',
cannotDecode: 'Unable to decode media.',
formatNotSupported: 'Video format not supported.',
mediaEncrypted: 'Media encrypted.',
unknownError: 'Unknown error.',
vimeoPasswordError: 'Password-protected Vimeo videos are not supported.',
vimeoPrivacyError: 'The Vimeo video cannot be used due to its privacy settings.',
vimeoLoadingError: 'The Vimeo video could not be loaded.',
invalidYtId: 'Invalid YouTube ID.',
unknownYtId: 'Unable to find video with the given YouTube ID.',
restrictedYt: 'The owner of this video does not allow it to be embedded.'
}
});
parameters.a11y = parameters.a11y || [];
parameters.playback = parameters.playback || {};
parameters.visuals = $.extend(
true, { disableFullscreen: false }, parameters.visuals
);
/** @private */
var sources = [];
if (parameters.sources) {
for (var i = 0; i < parameters.sources.length; i++) {
// Clone to avoid changing of parameters.
var source = $.extend(true, {}, parameters.sources[i]);
// Create working URL without html entities.
source.path = $cleaner.html(source.path).text();
sources.push(source);
}
}
/** @private */
var tracks = [];
parameters.a11y.forEach(function (track) {
// Clone to avoid changing of parameters.
var clone = $.extend(true, {}, track);
// Create working URL without html entities
if (clone.track && clone.track.path) {
clone.track.path = $cleaner.html(clone.track.path).text();
tracks.push(clone);
}
});
/**
* Handle autoplay. If autoplay is disabled, it will still autopause when
* video is not visible.
*
* @param {*} $container
*/
const handleAutoPlayPause = function ($container) {
// Keep the current state
let state;
self.on('stateChange', function(event) {
state = event.data;
});
// Keep record of autopauses.
// I.e: we don't wanna autoplay if the user has excplicitly paused.
self.autoPaused = !self.pressToPlay;
new IntersectionObserver(function (entries) {
const entry = entries[0];
// This video element became visible
if (entry.isIntersecting) {
// Autoplay if autoplay is enabled and it was not explicitly
// paused by a user
if (parameters.playback.autoplay && self.autoPaused) {
self.autoPaused = false;
self.play();
}
}
else if (state !== Video.PAUSED && state !== Video.ENDED) {
self.autoPaused = true;
self.pause();
}
}, {
root: null,
threshold: [0, 1] // Get events when it is shown and hidden
}).observe($container.get(0));
};
/**
* Attaches the video handler to the given container.
* Inserts text if no handler is found.
*
* @public
* @param {jQuery} $container
*/
self.attach = function ($container) {
$container.addClass('h5p-video').html('');
if (self.appendTo !== undefined) {
self.appendTo($container);
// Avoid autoplaying in authoring tool
if (window.H5PEditor === undefined) {
handleAutoPlayPause($container);
}
}
else if (sources.length) {
$container.text(parameters.l10n.noPlayers);
}
else {
$container.text(parameters.l10n.noSources);
}
};
/**
* Get name of the video handler
*
* @public
* @returns {string}
*/
self.getHandlerName = function() {
return handlerName;
};
/**
* @public
* Get current state for resume support.
*
* @returns {object} Current state.
*/
self.getCurrentState = function () {
if (self.getCurrentTime) {
return {
time: self.getCurrentTime() || self.oldTime,
};
}
};
/**
* The two functions below needs to be defined in this base class,
* since it is used in this class even if no handler was found.
*/
self.seek = () => {};
self.pause = () => {};
/**
* @public
* Reset current state (time).
*
*/
self.resetTask = function () {
delete self.oldTime;
self.resetPlayback(parameters.startAt || 0);
};
/**
* Default implementation of resetPlayback. May be overridden by sub classes.
*
* @param {*} startAt
*/
self.resetPlayback = startAt => {
self.seek(startAt);
self.pause();
self.WAS_RESET = true;
};
// Resize the video when we know its aspect ratio
self.on('loaded', function () {
self.trigger('resize');
// reset time if wasn't done immediately
if (self.WAS_RESET) {
self.seek(parameters.startAt || 0);
if (!parameters.playback.autoplay) {
self.pause();
}
self.WAS_RESET = false;
}
});
// Find player for video sources
if (sources.length) {
const options = {
controls: parameters.visuals.controls,
autoplay: parameters.playback.autoplay,
loop: parameters.playback.loop,
fit: parameters.visuals.fit,
poster: parameters.visuals.poster === undefined ? undefined : parameters.visuals.poster,
tracks: tracks,
disableRemotePlayback: parameters.visuals.disableRemotePlayback === true,
disableFullscreen: parameters.visuals.disableFullscreen === true,
deactivateSound: parameters.playback.deactivateSound,
}
if (!self.WAS_RESET) {
options.startAt = self.oldTime !== undefined ? self.oldTime : (parameters.startAt || 0);
}
var html5Handler;
for (var i = 0; i < handlers.length; i++) {
var handler = handlers[i];
if (handler.canPlay !== undefined && handler.canPlay(sources)) {
handler.call(self, sources, options, parameters.l10n);
handlerName = handler.name;
return;
}
if (handler === H5P.VideoHtml5) {
html5Handler = handler;
handlerName = handler.name;
}
}
// Fallback to trying HTML5 player
if (html5Handler) {
html5Handler.call(self, sources, options, parameters.l10n);
}
}
}
// Extends the event dispatcher
Video.prototype = Object.create(H5P.EventDispatcher.prototype);
Video.prototype.constructor = Video;
// Player states
/** @constant {Number} */
Video.ENDED = 0;
/** @constant {Number} */
Video.PLAYING = 1;
/** @constant {Number} */
Video.PAUSED = 2;
/** @constant {Number} */
Video.BUFFERING = 3;
/**
* When video is queued to start
* @constant {Number}
*/
Video.VIDEO_CUED = 5;
// Used to convert between html and text, since URLs have html entities.
var $cleaner = H5P.jQuery('<div/>');
/**
* Help keep track of key value pairs used by the UI.
*
* @class
* @param {string} label
* @param {string} value
*/
Video.LabelValue = function (label, value) {
this.label = label;
this.value = value;
};
/**
* Determine whether video can be autoplayed.
* @returns {Promise<boolean>} Whether autoplay is allowed.
*/
Video.isAutoplayAllowed = async () => {
if (document.featurePolicy?.allowsFeature('autoplay')) {
return true; // Browser supports `featurePolicy` and can tell directly
}
const video = document.createElement('video');
/*
* Without a video source, the play Promise will be rejected with an error
* if it cannot be autoplayed, but not resolve at all if it can be
* autoplayed. Using a timeout to detect the latter case here.
*/
const timeoutMs = 50; // If play promise rejects, then within few ms
const timeoutPromise = new Promise((resolve) => {
window.setTimeout(() => {
resolve(true); // Timeout reached, autoplay is allowed
}, timeoutMs);
});
let result;
try {
result = (await Promise.race([video.play(), timeoutPromise])) ?? true;
} catch (error) {
result = false;
}
return result;
};
/** @constant {Boolean} */
Video.IE11_PLAYBACK_RATE_FIX = (navigator.userAgent.match(/Trident.*rv[ :]*11\./) ? true : false);
return Video;
})(H5P.jQuery, H5P.ContentCopyrights, H5P.MediaCopyright, H5P.videoHandlers || []);
;
H5P = H5P || {};
/**
* Will render a Question with multiple choices for answers.
*
* Events provided:
* - h5pQuestionSetFinished: Triggered when a question is finished. (User presses Finish-button)
*
* @param {Array} options
* @param {int} contentId
* @param {Object} contentData
* @returns {H5P.QuestionSet} Instance
*/
H5P.QuestionSet = function (options, contentId, contentData) {
if (!(this instanceof H5P.QuestionSet)) {
return new H5P.QuestionSet(options, contentId, contentData);
}
H5P.EventDispatcher.call(this);
var $ = H5P.jQuery;
var self = this;
this.contentId = contentId;
var defaults = {
initialQuestion: 0,
progressType: 'dots',
passPercentage: 50,
questions: [],
introPage: {
showIntroPage: false,
title: '',
introduction: '',
startButtonText: 'Start'
},
texts: {
prevButton: 'Previous question',
nextButton: 'Next question',
finishButton: 'Finish',
submitButton: 'Submit',
textualProgress: 'Question: @current of @total questions',
jumpToQuestion: 'Question %d of %total',
questionLabel: 'Question',
readSpeakerProgress: 'Question @current of @total',
unansweredText: 'Unanswered',
answeredText: 'Answered',
currentQuestionText: 'Current question',
navigationLabel: 'Questions'
},
endGame: {
showResultPage: true,
noResultMessage: 'Finished',
message: 'Your result:',
scoreBarLabel: 'You got @finals out of @totals points',
oldFeedback: {
successGreeting: '',
successComment: '',
failGreeting: '',
failComment: ''
},
overallFeedback: [],
finishButtonText: 'Finish',
submitButtonText: 'Submit',
solutionButtonText: 'Show solution',
retryButtonText: 'Retry',
showAnimations: false,
skipButtonText: 'Skip video',
showSolutionButton: true,
showRetryButton: true
},
override: {},
disableBackwardsNavigation: false
};
this.isSubmitting = contentData
&& (contentData.isScoringEnabled || contentData.isReportingEnabled);
var params = $.extend(true, {}, defaults, options);
var initialParams = $.extend(true, {}, defaults, options);
var poolOrder; // Order of questions in a pool
var currentQuestion = 0;
var questionInstances = [];
var questionOrder; //Stores order of questions to allow resuming of question set
var $myDom;
var scoreBar;
var up;
var renderSolutions = false;
var showingSolutions = false;
contentData = contentData || {};
// Need to check with isEmpty, as {} == true
this.hasPrevState = !H5P.isEmpty(contentData.previousState);
// Bring question set up to date when resuming
if (self.hasPrevState) {
if (contentData.previousState.progress !== undefined) {
currentQuestion = contentData.previousState.progress;
}
questionOrder = contentData.previousState.order;
}
/**
* Randomizes questions in an array and updates an array containing their order
* @param {array} questions
* @return {Object.<array, array>} questionOrdering
*/
var randomizeQuestionOrdering = function (questions) {
// Use a previous order if it exists
if (self.hasPrevState && contentData.previousState.order) {
questions = questions.slice(0, questionOrder.length);
return {
questions: questions,
questionOrder: questionOrder,
}
}
// Save the original order of the questions in a multidimensional array [[question0,0],[question1,1]...
var questionOrdering = questions.map(function (questionInstance, index) {
return [questionInstance, index];
});
// Shuffle the multidimensional array
questionOrdering = H5P.shuffleArray(questionOrdering);
// Retrieve question objects from the first index
questions = [];
for (var i = 0; i < questionOrdering.length; i++) {
questions[i] = questionOrdering[i][0];
}
// Retrieve the new shuffled order from the second index
var newOrder = [];
for (var j = 0; j < questionOrdering.length; j++) {
newOrder[j] = questionOrdering[j][1];
}
// Return the questions in their new order *with* their new indexes
return {
questions: questions,
questionOrder: newOrder
};
};
// Create a pool (a subset) of questions if necessary
if (params.poolSize > 0) {
// If a previous pool exists, recreate it
if (self.hasPrevState && contentData.previousState.poolOrder) {
poolOrder = contentData.previousState.poolOrder;
// Recreate the pool from the saved data
var pool = [];
for (var i = 0; i < poolOrder.length; i++) {
pool[i] = params.questions[poolOrder[i]];
}
// Replace original questions with just the ones in the pool
params.questions = pool;
}
else { // Otherwise create a new pool
// Randomize and get the results
var poolResult = randomizeQuestionOrdering(params.questions);
var poolQuestions = poolResult.questions;
poolOrder = poolResult.questionOrder;
// Discard extra questions
poolQuestions = poolQuestions.slice(0, params.poolSize);
poolOrder = poolOrder.slice(0, params.poolSize);
// Replace original questions with just the ones in the pool
params.questions = poolQuestions;
}
}
// Set overrides for questions
var override;
if (params.override.showSolutionButton || params.override.retryButton || params.override.checkButton === false) {
override = {};
if (params.override.showSolutionButton) {
// Force "Show solution" button to be on or off for all interactions
override.enableSolutionsButton =
(params.override.showSolutionButton === 'on' ? true : false);
}
if (params.override.retryButton) {
// Force "Retry" button to be on or off for all interactions
override.enableRetry =
(params.override.retryButton === 'on' ? true : false);
}
if (params.override.checkButton === false) {
// Force "Check" button to be on or off for all interactions
override.enableCheckButton = params.override.checkButton;
}
}
/**
* Generates question instances from H5P objects
*
* @param {object} questions H5P content types to be created as instances
* @return {array} Array of questions instances
*/
var createQuestionInstancesFromQuestions = function (questions) {
var result = [];
// Create question instances from questions
// Instantiate question instances
for (var i = 0; i < questions.length; i++) {
var question;
// If a previous order exists, use it
if (questionOrder !== undefined) {
question = questions[questionOrder[i]];
}
else {
// Use a generic order when initialzing for the first time
question = questions[i];
}
if (override) {
// Extend subcontent with the overrided settings.
$.extend(question.params.behaviour, override);
}
question.params = question.params || {};
var hasAnswers = self.hasPrevState && contentData.previousState.answers;
var questionInstance = H5P.newRunnable(question, contentId, undefined, undefined,
{
previousState: hasAnswers ? contentData.previousState.answers[i] : undefined,
parent: self
});
questionInstance.on('resize', function () {
up = true;
self.trigger('resize');
});
result.push(questionInstance);
}
return result;
};
// Create question instances from questions given by params
questionInstances = createQuestionInstancesFromQuestions(params.questions);
params.noOfQuestionAnswered = 0;
if (self.hasPrevState) {
// get numbers of questions answered by user
if (contentData.previousState.answers) {
for (var i = 0; i < questionInstances.length; i++) {
let answered = questionInstances[i].getAnswerGiven();
if (answered){
params.noOfQuestionAnswered++;
}
}
}
}
// Create html for intro page layout
self.$introPage = '';
if (params.introPage.showIntroPage && params.noOfQuestionAnswered === 0) {
self.$introPage = $('<div>', {
class: 'intro-page'
});
if (params.introPage.title) {
$('<div>', {
class: 'title',
html: '<h1>' +
params.introPage.title +
'</h1>',
appendTo: self.$introPage
});
}
if (params.introPage.introduction) {
$('<div>', {
class: 'introduction',
html: params.introPage.introduction,
appendTo: self.$introPage
});
}
self.$introButtonsContainer = $('<div>', {
class: 'buttons',
appendTo: self.$introPage
});
$('<button>', {
class: 'qs-startbutton h5p-joubelui-button h5p-button',
html: params.introPage.startButtonText,
appendTo: self.$introButtonsContainer
});
}
// Create html for progress announcer
self.$progressAnnouncer = $('<div>', {
class: 'qs-progress-announcer',
'aria-live': 'polite',
});
// Create html for questionset
self.$questionsContainer = $('<div>', {
class: 'questionset ' +
((params.introPage.showIntroPage && params.noOfQuestionAnswered === 0) ? 'hidden' : ''),
});
for (let i=0; i<params.questions.length; i++) {
$('<div>', {
class: 'question-container',
appendTo: self.$questionsContainer
});
}
self.$footer = $('<div>', {
class: 'qs-footer',
appendTo: self.$questionsContainer
});
self.$progressBar = $('<div>', {
class: 'qs-progress',
role: 'navigation',
'aria-label': params.texts.navigationLabel,
appendTo: self.$footer
});
if (params.progressType == "dots") {
self.$dotsContainer = $('<ul>', {
class: 'dots-container',
appendTo: self.$progressBar
});
for (let i=0; i<params.questions.length; i++) {
$('<li>', {
class: 'progress-item',
html: '<a href="#" class= "progress-dot unanswered ' +
(params.disableBackwardsNavigation ? 'disabled' : '') +
'" ' +
'aria-label=' +
'"' +
params.texts.jumpToQuestion.replace("%d", i + 1).replace("%total", params.questions.length) +
', ' +
params.texts.unansweredText +
'" ' +
'tabindex="-1" ' +
(params.disableBackwardsNavigation ? 'aria-disabled="true"' : '') +
'></a>',
appendTo: self.$dotsContainer
})
}
}
else if (params.progressType == "textual") {
$('<span>', {
class: 'progress-text',
appendTo: self.$progressBar
})
}
// Randomize questions only on instantiation
if (params.randomQuestions && !self.hasPrevState) {
var result = randomizeQuestionOrdering(questionInstances);
questionInstances = result.questions;
questionOrder = result.questionOrder;
}
// Resize all interactions on resize
self.on('resize', function () {
if (up) {
// Prevent resizing the question again.
up = false;
return;
}
for (var i = 0; i < questionInstances.length; i++) {
questionInstances[i].trigger('resize');
}
});
// Update button state.
var _updateButtons = function () {
// Verify that current question is answered when backward nav is disabled
if (params.disableBackwardsNavigation) {
if (questionInstances[currentQuestion].getAnswerGiven() &&
questionInstances.length-1 !== currentQuestion) {
questionInstances[currentQuestion].showButton('next');
}
else {
questionInstances[currentQuestion].hideButton('next');
}
}
var answered = true;
for (var i = questionInstances.length - 1; i >= 0; i--) {
answered = answered && (questionInstances[i]).getAnswerGiven();
}
if (currentQuestion === (params.questions.length - 1) &&
questionInstances[currentQuestion]) {
if (answered) {
questionInstances[currentQuestion].showButton('finish');
}
else {
questionInstances[currentQuestion].hideButton('finish');
}
}
};
var _showQuestion = function (questionNumber, preventAnnouncement) {
// Sanitize input.
if (questionNumber < 0) {
questionNumber = 0;
}
if (questionNumber >= params.questions.length) {
questionNumber = params.questions.length - 1;
}
currentQuestion = questionNumber;
// Hide all questions
$('.question-container', $myDom).hide().eq(questionNumber).show();
if (questionInstances[questionNumber]) {
// Trigger resize on question in case the size of the QS has changed.
var instance = questionInstances[questionNumber];
instance.setActivityStarted();
if (instance.$ !== undefined) {
instance.trigger('resize');
}
}
// Update progress indicator
// Test if current has been answered.
if (params.progressType === 'textual') {
$('.progress-text', $myDom).text(params.texts.textualProgress.replace("@current", questionNumber+1).replace("@total", params.questions.length));
}
else {
// Set currentNess
var previousQuestion = $('.progress-dot.current', $myDom).parent().index();
if (previousQuestion >= 0) {
toggleCurrentDot(previousQuestion, false);
toggleAnsweredDot(previousQuestion, questionInstances[previousQuestion].getAnswerGiven());
}
toggleCurrentDot(questionNumber, true);
}
if (!preventAnnouncement) {
// Announce question number of total, must use timeout because of buttons logic
setTimeout(function () {
var humanizedProgress = params.texts.readSpeakerProgress
.replace('@current', (currentQuestion + 1).toString())
.replace('@total', questionInstances.length.toString());
self.$progressAnnouncer.html(humanizedProgress);
if (instance && instance.readFeedback) {
instance.readFeedback();
}
}, 0);
}
// Remember where we are
_updateButtons();
self.trigger('resize');
return currentQuestion;
};
/**
* Show solutions for subcontent, and hide subcontent buttons.
* Used for contracts with integrated content.
* @public
*/
var showSolutions = function () {
showingSolutions = true;
for (var i = 0; i < questionInstances.length; i++) {
// Enable back and forth navigation in solution mode
toggleDotsNavigation(true);
if (i < questionInstances.length - 1) {
questionInstances[i].showButton('next');
}
if (i > 0) {
questionInstances[i].showButton('prev');
}
try {
// Do not read answers
questionInstances[i].toggleReadSpeaker(true);
questionInstances[i].showSolutions();
questionInstances[i].toggleReadSpeaker(false);
}
catch (error) {
H5P.error("subcontent does not contain a valid showSolutions function");
H5P.error(error);
}
}
};
/**
* Toggles whether dots are enabled for navigation
*/
var toggleDotsNavigation = function (enable) {
$('.progress-dot', $myDom).each(function () {
$(this).toggleClass('disabled', !enable);
$(this).attr('aria-disabled', enable ? 'false' : 'true');
// Remove tabindex
if (!enable) {
$(this).attr('tabindex', '-1');
}
});
};
/**
* Resets the task and every subcontent task.
* Used for contracts with integrated content.
* @public
* @param {boolean} moveFocus True to move the focus to first option
* This prevents loss of focus if reset from within content
*/
this.resetTask = function (moveFocus = false) {
// Clear previous state to ensure questions are created cleanly
contentData.previousState = {};
self.hasPrevState = false;
questionOrder = undefined;
showingSolutions = false;
for (var i = 0; i < questionInstances.length; i++) {
try {
questionInstances[i].resetTask();
// Hide back and forth navigation in normal mode
if (params.disableBackwardsNavigation) {
toggleDotsNavigation(false);
// Check if first question is answered by default
if (i === 0 && questionInstances[i].getAnswerGiven()) {
questionInstances[i].showButton('next');
}
else {
questionInstances[i].hideButton('next');
}
questionInstances[i].hideButton('prev');
}
}
catch (error) {
H5P.error("subcontent does not contain a valid resetTask function");
H5P.error(error);
}
}
// Hide finish button
questionInstances[questionInstances.length - 1].hideButton('finish');
// Mark all tasks as unanswered:
$('.progress-dot').each(function (idx) {
toggleAnsweredDot(idx, false);
});
//Force the last page to be reRendered
rendered = false;
if (params.poolSize > 0) {
// Make new pool from params.questions
// Randomize and get the results
var poolResult = randomizeQuestionOrdering(initialParams.questions);
var poolQuestions = poolResult.questions;
poolOrder = poolResult.questionOrder;
// Discard extra questions
poolQuestions = poolQuestions.slice(0, params.poolSize);
poolOrder = poolOrder.slice(0, params.poolSize);
// Replace original questions with just the ones in the pool
params.questions = poolQuestions;
// Recreate the question instances
questionInstances = createQuestionInstancesFromQuestions(params.questions);
// Update buttons
initializeQuestion();
}
else if (params.randomQuestions) {
randomizeQuestions();
}
// Reset currentQuestion
currentQuestion = 0;
$myDom.children().hide();
var $intro = $('.intro-page', $myDom);
if ($intro.length) {
// Show intro
$('.intro-page', $myDom).show();
if (moveFocus) {
$('.qs-startbutton', $myDom).focus();
}
}
else {
// Show first question
$('.questionset', $myDom).show();
_showQuestion(params.initialQuestion);
if (moveFocus) {
// Focus first tabbable element
$myDom[0].querySelectorAll(
'audio, button, input, select, textarea, video, [contenteditable], [href], [tabindex="0"]'
)[0].focus();
}
}
};
var rendered = false;
this.reRender = function () {
rendered = false;
};
/**
* Randomizes question instances
*/
var randomizeQuestions = function () {
// Recreate questioninstances in original order
questionInstances = createQuestionInstancesFromQuestions(params.questions);
// Scramble them
var result = randomizeQuestionOrdering(questionInstances);
questionInstances = result.questions;
questionOrder = result.questionOrder;
// Update buttons
initializeQuestion();
};
var moveQuestion = function (direction) {
if (params.disableBackwardsNavigation && !questionInstances[currentQuestion].getAnswerGiven()) {
questionInstances[currentQuestion].hideButton('next');
questionInstances[currentQuestion].hideButton('finish');
return;
}
if (currentQuestion + direction >= questionInstances.length) {
_displayEndGame();
}
else {
// Allow movement if backward navigation enabled or answer given
_showQuestion(currentQuestion + direction);
}
// Trigger xAPI
self.triggerXAPIProgressed();
};
/**
* Toggle answered state of dot at given index
* @param {number} dotIndex Index of dot
* @param {boolean} isAnswered True if is answered, False if not answered
*/
var toggleAnsweredDot = function (dotIndex, isAnswered) {
var $el = $('.progress-dot:eq(' + dotIndex +')', $myDom);
// Skip current button
if ($el.hasClass('current')) {
return;
}
// Ensure boolean
isAnswered = !!isAnswered;
var label = params.texts.jumpToQuestion
.replace('%d', (dotIndex + 1).toString())
.replace('%total', $('.progress-dot', $myDom).length) +
', ' +
(isAnswered ? params.texts.answeredText : params.texts.unansweredText);
$el.toggleClass('unanswered', !isAnswered)
.toggleClass('answered', isAnswered)
.attr('aria-label', label);
};
/**
* Toggle current state of dot at given index
* @param dotIndex
* @param isCurrent
*/
var toggleCurrentDot = function (dotIndex, isCurrent) {
var $el = $('.progress-dot:eq(' + dotIndex +')', $myDom);
var texts = params.texts;
var label = texts.jumpToQuestion
.replace('%d', (dotIndex + 1).toString())
.replace('%total', $('.progress-dot', $myDom).length);
if (!isCurrent) {
var isAnswered = $el.hasClass('answered');
label += ', ' + (isAnswered ? texts.answeredText : texts.unansweredText);
}
else {
label += ', ' + texts.currentQuestionText;
}
var disabledTabindex = params.disableBackwardsNavigation && !showingSolutions;
$el.toggleClass('current', isCurrent)
.attr('aria-label', label)
.attr('tabindex', isCurrent && !disabledTabindex ? 0 : -1);
};
var _displayEndGame = function () {
$('.progress-dot.current', $myDom).removeClass('current');
if (rendered) {
$myDom.children().hide().filter('.questionset-results').show();
self.trigger('resize');
return;
}
//Remove old score screen.
$myDom.children().hide().filter('.questionset-results').remove();
rendered = true;
// Get total score.
var finals = self.getScore();
var totals = self.getMaxScore();
var scoreString = H5P.Question.determineOverallFeedback(params.endGame.overallFeedback, finals / totals).replace('@score', finals).replace('@total', totals);
var success = ((100 * finals / totals) >= params.passPercentage);
/**
* Makes our buttons behave like other buttons.
*
* @private
* @param {string} classSelector
* @param {function} handler
*/
var hookUpButton = function (classSelector, handler) {
$(classSelector, $myDom).click(handler).keypress(function (e) {
if (e.which === 32) {
handler();
e.preventDefault();
}
});
};
var displayResults = function () {
self.triggerXAPICompleted(self.getScore(), self.getMaxScore(), success);
var eparams = {
message: params.endGame.showResultPage ? params.endGame.message : params.endGame.noResultMessage,
comment: params.endGame.showResultPage ? (success ? params.endGame.oldFeedback.successGreeting : params.endGame.oldFeedback.failGreeting) : undefined,
resulttext: params.endGame.showResultPage ? (success ? params.endGame.oldFeedback.successComment : params.endGame.oldFeedback.failComment) : undefined,
finishButtonText: (self.isSubmitting) ? params.endGame.submitButtonText : params.endGame.finishButtonText,
solutionButtonText: params.endGame.solutionButtonText,
retryButtonText: params.endGame.retryButtonText
};
// Create html for end screen
self.$resultPage = $('<div>', {
'class': 'questionset-results'
});
$('<div>', {
class: 'greeting',
html: eparams.message,
appendTo: self.$resultPage
});
$('<div>', {
class: 'feedback-section',
html: '<div class="feedback-scorebar"></div>' +
'<div class="feedback-text"></div>',
appendTo: self.$resultPage
});
if (params.comment) {
$('<div>', {
'class': 'result-header',
html: eparams.comment,
appendTo: self.$resultPage
});
}
if (params.resulttext) {
$('<div>', {
class: 'result-text',
html: eparams.resulttext,
appendTo: self.$resultPage
});
}
self.$buttonsContainer = $('<div>', {
class: 'buttons',
appendTo: self.$resultPage
});
if (params.endGame.showSolutionButton) {
$('<button>', {
class: 'h5p-joubelui-button h5p-button qs-solutionbutton',
type: 'button',
html: eparams.solutionButtonText,
appendTo: self.$buttonsContainer
});
}
if (params.endGame.showRetryButton) {
$('<button>', {
class: 'h5p-joubelui-button h5p-button qs-retrybutton',
type: 'button',
html: eparams.retryButtonText,
appendTo: self.$buttonsContainer
})
}
// Show result page.
$myDom.children().hide();
$myDom.append(self.$resultPage);
if (params.endGame.showResultPage) {
hookUpButton('.qs-solutionbutton', function () {
showSolutions();
$myDom.children().hide().filter('.questionset').show();
_showQuestion(params.initialQuestion);
});
hookUpButton('.qs-retrybutton', function () {
self.resetTask(true);
});
if (scoreBar === undefined) {
scoreBar = H5P.JoubelUI.createScoreBar(totals);
}
scoreBar.appendTo($('.feedback-scorebar', $myDom));
$('.feedback-text', $myDom).html(scoreString);
// Announce that the question set is complete
setTimeout(function () {
self.$progressAnnouncer
.html(eparams.message +
scoreString + '.' +
(params.endGame.scoreBarLabel).replace('@finals', finals).replace('@totals', totals) + '.' +
eparams.comment + '.' +
eparams.resulttext);
scoreBar.setMaxScore(totals);
scoreBar.setScore(finals);
}, 0);
}
else {
// Remove buttons and feedback section
$('.qs-solutionbutton, .qs-retrybutton, .feedback-section', $myDom).remove();
}
self.trigger('resize');
};
if (params.endGame.showAnimations) {
var videoData = success ? params.endGame.successVideo : params.endGame.failVideo;
if (videoData) {
$myDom.children().hide();
var $videoContainer = $('<div class="video-container"></div>').appendTo($myDom);
var video = new H5P.Video({
sources: videoData,
fitToWrapper: true,
controls: false,
autoplay: false
}, contentId);
video.on('stateChange', function (event) {
if (event.data === H5P.Video.ENDED) {
displayResults();
$videoContainer.hide();
}
});
video.attach($videoContainer);
// Resize on video loaded
video.on('loaded', function () {
self.trigger('resize');
});
video.play();
if (params.endGame.skippable) {
$('<a class="h5p-joubelui-button h5p-button skip">' + params.endGame.skipButtonText + '</a>').click(function () {
video.pause();
$videoContainer.hide();
displayResults();
}).appendTo($videoContainer);
}
return;
}
}
// Trigger finished event.
displayResults();
self.trigger('resize');
};
var registerImageLoadedListener = function (question) {
H5P.on(question, 'imageLoaded', function () {
self.trigger('resize');
});
};
/**
* Initialize a question and attach it to the DOM
*
*/
function initializeQuestion() {
// Attach questions
for (var i = 0; i < questionInstances.length; i++) {
var question = questionInstances[i];
// Make sure styles are not being added twice
$('.question-container:eq(' + i + ')', $myDom).attr('class', 'question-container');
question.attach($('.question-container:eq(' + i + ')', $myDom));
// Listen for image resize
registerImageLoadedListener(question);
// Add finish button
const finishButtonText = (self.isSubmitting) ? params.texts.submitButton : params.texts.finishButton
question.addButton('finish', finishButtonText,
moveQuestion.bind(this, 1), false);
// Add next button
question.addButton('next', '', moveQuestion.bind(this, 1),
!params.disableBackwardsNavigation || !!question.getAnswerGiven(), {
href: '#', // Use href since this is a navigation button
'aria-label': params.texts.nextButton
});
// Add previous button
question.addButton('prev', '', moveQuestion.bind(this, -1),
!(questionInstances[0] === question || params.disableBackwardsNavigation), {
href: '#', // Use href since this is a navigation buttonq
'aria-label': params.texts.prevButton
});
// Hide next button if it is the last question
if (questionInstances[questionInstances.length -1] === question) {
question.hideButton('next');
}
question.on('xAPI', function (event) {
var shortVerb = event.getVerb();
if (shortVerb === 'interacted' ||
shortVerb === 'answered' ||
shortVerb === 'attempted') {
toggleAnsweredDot(currentQuestion,
questionInstances[currentQuestion].getAnswerGiven());
_updateButtons();
}
if (shortVerb === 'completed') {
// An activity within this activity is not allowed to send completed events
event.setVerb('answered');
}
if (event.data.statement.context.extensions === undefined) {
event.data.statement.context.extensions = {};
}
event.data.statement.context.extensions['http://id.tincanapi.com/extension/ending-point'] = currentQuestion + 1;
});
// Mark question if answered
toggleAnsweredDot(i, question.getAnswerGiven());
}
}
this.attach = function (target) {
if (this.isRoot()) {
this.setActivityStarted();
}
if (typeof(target) === "string") {
$myDom = $('#' + target);
}
else {
$myDom = $(target);
}
// Render own DOM into target.
$myDom.children().remove();
$myDom.append(self.$introPage, self.$questionsContainer);
$myDom.parent().append(self.$progressAnnouncer);
if (params.backgroundImage !== undefined) {
$myDom.css({
overflow: 'hidden',
background: '#fff url("' + H5P.getPath(params.backgroundImage.path, contentId) + '") no-repeat 50% 50%',
backgroundSize: '100% auto'
});
}
if (params.introPage.backgroundImage !== undefined) {
var $intro = $myDom.find('.intro-page');
if ($intro.length) {
var bgImg = params.introPage.backgroundImage;
var bgImgRatio = (bgImg.height / bgImg.width);
$intro.css({
background: '#fff url("' + H5P.getPath(bgImg.path, contentId) + '") no-repeat 50% 50%',
backgroundSize: 'auto 100%',
minHeight: bgImgRatio * +window.getComputedStyle($intro[0]).width.replace('px','')
});
}
}
initializeQuestion();
// Allow other libraries to add transitions after the questions have been inited
$('.questionset', $myDom).addClass('started');
$('.qs-startbutton', $myDom)
.click(function () {
$(this).parents('.intro-page').hide();
$('.questionset', $myDom).show();
_showQuestion(params.initialQuestion);
event.preventDefault();
})
.keydown(function (event) {
switch (event.which) {
case 13: // Enter
case 32: // Space
$(this).parents('.intro-page').hide();
$('.questionset', $myDom).show();
_showQuestion(params.initialQuestion);
event.preventDefault();
}
});
/**
* Triggers changing the current question.
*
* @private
* @param {Object} [event]
*/
var handleProgressDotClick = function (event) {
// Disable dots when backward nav disabled
event.preventDefault();
if (params.disableBackwardsNavigation && !showingSolutions) {
return;
}
_showQuestion($(this).parent().index());
// Trigger xAPI
self.triggerXAPIProgressed();
};
// Set event listeners.
$('.progress-dot', $myDom).click(handleProgressDotClick).keydown(function (event) {
var $this = $(this);
switch (event.which) {
case 13: // Enter
case 32: // Space
handleProgressDotClick.call(this, event);
break;
case 37: // Left Arrow
case 38: // Up Arrow
// Go to previous dot
var $prev = $this.parent().prev();
if ($prev.length) {
$prev.children('a').attr('tabindex', '0').focus();
$this.attr('tabindex', '-1');
}
break;
case 39: // Right Arrow
case 40: // Down Arrow
// Go to next dot
var $next = $this.parent().next();
if ($next.length) {
$next.children('a').attr('tabindex', '0').focus();
$this.attr('tabindex', '-1');
}
break;
}
});
// Hide all but current question
_showQuestion(currentQuestion, true);
if (renderSolutions) {
showSolutions();
}
// Update buttons in case they have changed (restored user state)
_updateButtons();
this.trigger('resize');
return this;
};
// Get current score for questionset.
this.getScore = function () {
var score = 0;
for (var i = questionInstances.length - 1; i >= 0; i--) {
score += questionInstances[i].getScore();
}
return score;
};
// Get total score possible for questionset.
this.getMaxScore = function () {
var score = 0;
for (var i = questionInstances.length - 1; i >= 0; i--) {
score += questionInstances[i].getMaxScore();
}
return score;
};
/**
* @deprecated since version 1.9.2
* @returns {number}
*/
this.totalScore = function () {
return this.getMaxScore();
};
/**
* Gather copyright information for the current content.
*
* @returns {H5P.ContentCopyrights}
*/
this.getCopyrights = function () {
var info = new H5P.ContentCopyrights();
// IntroPage Background
if (params.introPage !== undefined && params.introPage.backgroundImage !== undefined && params.introPage.backgroundImage.copyright !== undefined) {
var introBackground = new H5P.MediaCopyright(params.introPage.backgroundImage.copyright);
introBackground.setThumbnail(new H5P.Thumbnail(H5P.getPath(params.introPage.backgroundImage.path, contentId), params.introPage.backgroundImage.width, params.introPage.backgroundImage.height));
info.addMedia(introBackground);
}
// Background
if (params.backgroundImage !== undefined && params.backgroundImage.copyright !== undefined) {
var background = new H5P.MediaCopyright(params.backgroundImage.copyright);
background.setThumbnail(new H5P.Thumbnail(H5P.getPath(params.backgroundImage.path, contentId), params.backgroundImage.width, params.backgroundImage.height));
info.addMedia(background);
}
// Questions
var questionCopyrights;
for (var i = 0; i < questionInstances.length; i++) {
var instance = questionInstances[i];
var instanceParams = params.questions[i].params;
questionCopyrights = undefined;
if (instance.getCopyrights !== undefined) {
// Use the instance's own copyright generator
questionCopyrights = instance.getCopyrights();
}
if (questionCopyrights === undefined) {
// Create a generic flat copyright list
questionCopyrights = new H5P.ContentCopyrights();
H5P.findCopyrights(questionCopyrights, instanceParams.params, contentId,{
metadata: instanceParams.metadata,
machineName: instanceParams.library.split(' ')[0]
});
}
// Determine label
var label = (params.texts.questionLabel + ' ' + (i + 1));
if (instanceParams.params.contentName !== undefined) {
label += ': ' + instanceParams.params.contentName;
}
else if (instance.getTitle !== undefined) {
label += ': ' + instance.getTitle();
}
questionCopyrights.setLabel(label);
// Add info
info.addContent(questionCopyrights);
}
// Success video
var video;
if (params.endGame.successVideo !== undefined && params.endGame.successVideo.length > 0) {
video = params.endGame.successVideo[0];
if (video.copyright !== undefined) {
info.addMedia(new H5P.MediaCopyright(video.copyright));
}
}
// Fail video
if (params.endGame.failVideo !== undefined && params.endGame.failVideo.length > 0) {
video = params.endGame.failVideo[0];
if (video.copyright !== undefined) {
info.addMedia(new H5P.MediaCopyright(video.copyright));
}
}
return info;
};
this.getQuestions = function () {
return questionInstances;
};
this.showSolutions = function () {
renderSolutions = true;
};
/**
* Returns the complete state of question set and sub-content
*
* @returns {Object} current state
*/
this.getCurrentState = function () {
const progress = showingSolutions ? questionInstances.length - 1 : currentQuestion;
const answers = questionInstances.map(function (qi) {
return qi.getCurrentState();
});
// If the user has moved past the first question, if the content has been resumed,
// or if at least one of the answers to the questions are considered not empty.
if (progress || self.hasPrevState || answers.some(answer => !H5P.isEmpty(answer))) {
return {
progress: progress,
answers: answers,
order: questionOrder,
poolOrder: poolOrder,
};
}
return {};
};
/**
* Trigger the xAPI progressed event
*/
this.triggerXAPIProgressed = function () {
const progressedEvent = this.createXAPIEventTemplate('progressed');
if (progressedEvent.data.statement.context.extensions === undefined) {
progressedEvent.data.statement.context.extensions = {};
}
progressedEvent.data.statement.context.extensions['http://id.tincanapi.com/extension/ending-point'] = currentQuestion + 1;
this.trigger(progressedEvent);
}
/**
* Generate xAPI object definition used in xAPI statements.
* @return {Object}
*/
var getxAPIDefinition = function () {
var definition = {};
definition.interactionType = 'compound';
definition.type = 'http://adlnet.gov/expapi/activities/cmi.interaction';
definition.description = {
'en-US': ''
};
return definition;
};
/**
* Add the question itself to the definition part of an xAPIEvent
*/
var addQuestionToXAPI = function (xAPIEvent) {
var definition = xAPIEvent.getVerifiedStatementValue(['object', 'definition']);
$.extend(definition, getxAPIDefinition());
};
/**
* Get xAPI data from sub content types
*
* @param {Object} metaContentType
* @returns {array}
*/
var getXAPIDataFromChildren = function (metaContentType) {
return metaContentType.getQuestions().map(function (question) {
return question.getXAPIData();
});
};
/**
* Get xAPI data.
* Contract used by report rendering engine.
*
* @see contract at {@link https://h5p.org/documentation/developers/contracts#guides-header-6}
*/
this.getXAPIData = function () {
var xAPIEvent = this.createXAPIEventTemplate('answered');
addQuestionToXAPI(xAPIEvent);
xAPIEvent.setScoredResult(this.getScore(),
this.getMaxScore(),
this,
true,
this.getScore() === this.getMaxScore()
);
return {
statement: xAPIEvent.data.statement,
children: getXAPIDataFromChildren(this)
};
};
/**
* Get context data.
* Contract used for confusion report.
*/
this.getContext = function () {
// Get question index and add 1, count starts from 0
let contextObject = {
type: 'question',
value: (currentQuestion + 1)
};
// Send actual index of the question if questions are randomized
if (params.randomQuestions) {
contextObject.actual = questionOrder[currentQuestion] + 1;
}
return contextObject;
};
};
H5P.QuestionSet.prototype = Object.create(H5P.EventDispatcher.prototype);
H5P.QuestionSet.prototype.constructor = H5P.QuestionSet;
;