Flash version "+n.version+" or greater is required
"+(k[0]>0?"Your version is "+k:"You have no flash plugin installed")+"
"+(f.tagName=="A"?"Click here to download latest version
":"Download latest version from here
");if(f.tagName=="A"||f.tagName=="DIV"){f.onclick=function(){location.href=j}}}if(n.onFail){var l=n.onFail.call(this);if(typeof l=="string"){f.innerHTML=l}}}}if(h){window[n.id]=document.getElementById(n.id)}i(this,{getRoot:function(){return f},getOptions:function(){return n},getConf:function(){return m},getApi:function(){return f.firstChild}})}if(c){jQuery.tools=jQuery.tools||{version:"3.2.12"};jQuery.tools.flashembed={conf:b};jQuery.fn.flashembed=function(l,f){return this.each(function(){$(this).data("flashembed",flashembed(this,l,f))})}}}();; /** @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 $wrapper = $(''); var $placeholder = $('', { id: id, text: l10n.loading }).appendTo($wrapper); // Optional placeholder // var $placeholder = $('').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, autoplay: options.autoplay ? 1 : 0, controls: options.controls ? 1 : 0, disablekb: options.controls ? 0 : 1, fs: 0, playlist: options.loop ? videoId : undefined, rel: 0, showinfo: 0, iv_load_policy: 3, wmode: "opaque", start: options.startAt, playsinline: 1 }, events: { onReady: function () { self.trigger('ready'); self.trigger('loaded'); }, 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) { // 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); } } }); }; /** * 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 */ self.pressToPlay = navigator.userAgent.match(/iPad/i) ? true : false; /** * 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 () { 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); }; /** * 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(); }; /** * 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; } var playbackRate = player.getPlaybackRate(); return 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) { if (!player || !player.setPlaybackRate) { return; } playbackRate = newPlaybackRate; player.setPlaybackRate(newPlaybackRate); }; /** * 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: '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' }); 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', 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]?:\/\/[^\/]+/)[0]; return YouTube; })(H5P.jQuery); // Register video handler H5P.videoHandlers = H5P.videoHandlers || []; H5P.videoHandlers.push(H5P.VideoYouTube); ; /** @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; /** * Displayed when the video is buffering * @private */ var $throbber = $('', { 'class': 'h5p-video-loading' }); /** * Used to display error messages * @private */ var $error = $('', { '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); // Select quality and source var currentQuality = getPreferredQuality(); if (currentQuality === undefined || qualities[currentQuality] === undefined) { // No preferred quality, pick the first. for (currentQuality in qualities) { if (qualities.hasOwnProperty(currentQuality)) { break; } } } video.src = qualities[currentQuality].source.path; // 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'); // Set options video.disableRemotePlayback = (options.disableRemotePlayback ? true : false); video.controls = (options.controls ? true : false); video.autoplay = (options.autoplay ? true : 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%'; } // Add poster if provided if (options.poster) { video.poster = options.poster; } /** * 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 */ var addTrack = function (trackData) { // Skip invalid tracks if (!trackData.kind || !trackData.track.path) { return; } var track = document.createElement('track'); track.kind = trackData.kind; track.src = trackData.track.path; if (trackData.label) { track.label = trackData.label; } if (trackData.srcLang) { track.srcLang = trackData.srcLang; } return track; }; // Register tracks options.tracks.forEach(function (track, i) { var trackElement = addTrack(track); if (i === 0) { trackElement.default = true; } if (trackElement) { video.appendChild(trackElement); } }); /** * 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 'stateChange': if (lastState === arg) { return; // Avoid firing event twice. } var validStartTime = options.startAt && options.startAt > 0; if (arg === H5P.Video.PLAYING && validStartTime) { video.currentTime = options.startAt; delete options.startAt; } break; 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; } 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 = qualities[quality].source.path; // (iPad does not support #t=). // 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(); } 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) { if (lastState === undefined) { // Make sure we always play before we seek to get an image. // If not iOS devices will reset currentTime when pressing play. video.play(); video.pause(); } video.currentTime = time; }; /** * 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('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); } }); }); // Video controls are ready nextTick(function () { self.trigger('ready'); }); } /** * 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) { var settings = document.cookie.split(';'); for (var i = 0; i < settings.length; i++) { var setting = settings[i].split('='); if (setting[0] === 'H5PVideoQuality') { setting[1] = quality; settings[i] = setting.join('='); document.cookie = settings.join(';'); return; } } document.cookie = 'H5PVideoQuality=' + quality + '; ' + document.cookie; }; /** * Get preferred video quality. * * @private * @static * @returns {String} Index of preferred quality */ var getPreferredQuality = function () { var quality, 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; } } 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.VideoFlash = (function ($) { /** * Flash video player for H5P. * * @class * @param {Array} sources Video files to use * @param {Object} options Settings for the player */ function Flash(sources, options) { var self = this; // Player wrapper var $wrapper = $('', { 'class': 'h5p-video-flash', css: { width: '100%', height: '100%' } }); /** * Used to display error messages * @private */ var $error = $('', { 'class': 'h5p-video-error' }); /** * Keep track of current state when changing quality. * @private */ var stateBeforeChangingQuality; var currentTimeBeforeChangingQuality; // Sort sources into qualities //var qualities = getQualities(sources); var currentQuality; // Create player options var playerOptions = { buffering: true, clip: { url: sources[0].path, // getPreferredQuality(), autoPlay: options.autoplay, autoBuffering: true, scaling: 'fit', onSeek: function () { if (stateBeforeChangingQuality) { // ???? } }, onMetaData: function () { setTimeout(function () { if (stateBeforeChangingQuality !== undefined) { fp.seek(currentTimeBeforeChangingQuality); if (stateBeforeChangingQuality === H5P.Video.PLAYING) { // Resume play fp.play(); } // Done changing quality stateBeforeChangingQuality = undefined; // Remove any errors if ($error.is(':visible')) { $error.remove(); } } else { self.trigger('ready'); self.trigger('loaded'); } }, 0); // Run on next tick }, onBegin: function () { self.trigger('stateChange', H5P.Video.PLAYING); }, onResume: function () { self.trigger('stateChange', H5P.Video.PLAYING); }, onPause: function () { self.trigger('stateChange', H5P.Video.PAUSED); }, onFinish: function () { self.trigger('stateChange', H5P.Video.ENDED); }, onError: function (code, message) { console.log('ERROR', code, message); // TODO self.trigger('error', message); } }, plugins: { controls: null }, play: null, // Disable overlay controls onPlaylistReplace: function () { that.playlistReplaced(); } }; if (options.controls) { playerOptions.plugins.controls = {}; delete playerOptions.play; } var fp = flowplayer($wrapper[0], { src: "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", wmode: "opaque" }, playerOptions); /** * Appends the video player to the DOM. * * @public * @param {jQuery} $container */ self.appendTo = function ($container) { $wrapper.appendTo($container); }; /** * Get list of available qualities. Not available until after play. * * @public * @returns {Array} */ self.getQualities = function () { return; }; /** * 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; } // Keep track of current quality currentQuality = quality; self.trigger('qualityChange', currentQuality); // Display throbber self.trigger('stateChange', H5P.Video.BUFFERING); // Change source fp.setClip(qualities[quality].source.path); fp.startBuffering(); }; /** * Starts the video. * * @public */ self.play = function () { if ($error.is(':visible')) { return; } fp.play(); }; /** * Pauses the video. * * @public */ self.pause = function () { fp.pause(); }; /** * Seek video to given time. * * @public * @param {Number} time */ self.seek = function (time) { fp.seek(time); }; /** * Get elapsed time since video beginning. * * @public * @returns {Number} */ self.getCurrentTime = function () { return fp.getTime(); }; /** * Get total video duration time. * * @public * @returns {Number} */ self.getDuration = function () { return fp.getClip().metaData.duration; }; /** * Get percentage of video that is buffered. * * @public * @returns {Number} Between 0 and 100 */ self.getBuffered = function () { return fp.getClip().buffer; }; /** * Turn off video sound. * * @public */ self.mute = function () { fp.mute(); }; /** * Turn on video sound. * * @public */ self.unMute = function () { fp.unmute(); }; /** * Check if video sound is turned on or off. * * @public * @returns {Boolean} */ self.isMuted = function () { return fp.muted; }; /** * Returns the video sound level. * * @public * @returns {Number} Between 0 and 100. */ self.getVolume = function () { return fp.volumeLevel * 100; }; /** * Set video sound level. * * @public * @param {Number} volume Between 0 and 100. */ self.setVolume = function (level) { fp.volume(level / 100); }; // Handle resize events self.on('resize', function () { var $object = H5P.jQuery(fp.getParent()).children('object'); var clip = fp.getClip(); if (clip !== undefined) { $object.css('height', $object.width() * (clip.metaData.height / clip.metaData.width)); } }); } /** * Check to see if we can play any of the given sources. * * @public * @static * @param {Array} sources * @returns {Boolean} */ Flash.canPlay = function (sources) { // Cycle through sources for (var i = 0; i < sources.length; i++) { if (sources[i].mime === 'video/mp4' || /\.mp4$/.test(sources[i].mime)) { return true; // We only play mp4 } } }; return Flash; })(H5P.jQuery); // Register video handler H5P.videoHandlers = H5P.videoHandlers || []; H5P.videoHandlers.push(H5P.VideoFlash); ; /** @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 */ function Video(parameters, id) { var self = this; // Ref youtube.js - ipad & youtube - issue self.pressToPlay = false; // 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 is missing sources.', 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.', 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 = 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 = H5P.getPath($cleaner.html(source.path).text(), id); 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 = H5P.getPath($cleaner.html(clone.track.path).text(), id); tracks.push(clone); } }); /** * 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); } else { if (sources.length) { $container.text(parameters.l10n.noPlayers); } else { $container.text(parameters.l10n.noSources); } } }; /** * Gather copyright information for the current video. * * @public * @returns {ContentCopyrights} */ self.getCopyrights = function () { if (!sources[0] || !sources[0].copyright) { return; } // Use copyright information from H5P media field var info = new ContentCopyrights(); info.addMedia(new MediaCopyright(sources[0].copyright)); return info; }; // Resize the video when we know its aspect ratio self.on('loaded', function () { self.trigger('resize'); }); // Find player for video sources if (sources.length) { 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, { controls: parameters.visuals.controls, autoplay: parameters.playback.autoplay, loop: parameters.playback.loop, fit: parameters.visuals.fit, poster: parameters.visuals.poster === undefined ? undefined : H5P.getPath(parameters.visuals.poster.path, id), startAt: parameters.startAt || 0, tracks: tracks, disableRemotePlayback: (parameters.visuals.disableRemotePlayback || false) }, parameters.l10n); return; } if (handler === H5P.VideoHtml5) { html5Handler = handler; } } // Fallback to trying HTML5 player if (html5Handler) { html5Handler.call(self, sources, { controls: parameters.visuals.controls, autoplay: parameters.playback.autoplay, loop: parameters.playback.loop, fit: parameters.visuals.fit, poster: parameters.visuals.poster === undefined ? undefined : H5P.getPath(parameters.visuals.poster.path, id), startAt: parameters.startAt || 0, tracks: tracks, disableRemotePlayback: (parameters.visuals.disableRemotePlayback || false) }, 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(''); /** * 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; }; /** @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 || []); ; (function(){var rsplit=function(string,regex){var result=regex.exec(string),retArr=new Array(),first_idx,last_idx,first_bit;while(result!=null){first_idx=result.index;last_idx=regex.lastIndex;if((first_idx)!=0){first_bit=string.substring(0,first_idx);retArr.push(string.substring(0,first_idx));string=string.slice(first_idx)}retArr.push(result[0]);string=string.slice(result[0].length);result=regex.exec(string)}if(!string==""){retArr.push(string)}return retArr},chop=function(string){return string.substr(0,string.length-1)},extend=function(d,s){for(var n in s){if(s.hasOwnProperty(n)){d[n]=s[n]}}};EJS=function(options){options=typeof options=="string"?{view:options}:options;this.set_options(options);if(options.precompiled){this.template={};this.template.process=options.precompiled;EJS.update(this.name,this);return }if(options.element){if(typeof options.element=="string"){var name=options.element;options.element=document.getElementById(options.element);if(options.element==null){throw name+"does not exist!"}}if(options.element.value){this.text=options.element.value}else{this.text=options.element.innerHTML}this.name=options.element.id;this.type="["}else{if(options.url){options.url=EJS.endExt(options.url,this.extMatch);this.name=this.name?this.name:options.url;var url=options.url;var template=EJS.get(this.name,this.cache);if(template){return template}if(template==EJS.INVALID_PATH){return null}try{this.text=EJS.request(url+(this.cache?"":"?"+Math.random()))}catch(e){}if(this.text==null){throw ({type:"EJS",message:"There is no template at "+url})}}}var template=new EJS.Compiler(this.text,this.type);template.compile(options,this.name);EJS.update(this.name,this);this.template=template};EJS.prototype={render:function(object,extra_helpers){object=object||{};this._extra_helpers=extra_helpers;var v=new EJS.Helpers(object,extra_helpers||{});return this.template.process.call(object,object,v)},update:function(element,options){if(typeof element=="string"){element=document.getElementById(element)}if(options==null){_template=this;return function(object){EJS.prototype.update.call(_template,element,object)}}if(typeof options=="string"){params={};params.url=options;_template=this;params.onComplete=function(request){var object=eval(request.responseText);EJS.prototype.update.call(_template,element,object)};EJS.ajax_request(params)}else{element.innerHTML=this.render(options)}},out:function(){return this.template.out},set_options:function(options){this.type=options.type||EJS.type;this.cache=options.cache!=null?options.cache:EJS.cache;this.text=options.text||null;this.name=options.name||null;this.ext=options.ext||EJS.ext;this.extMatch=new RegExp(this.ext.replace(/\./,"."))}};EJS.endExt=function(path,match){if(!path){return null}match.lastIndex=0;return path+(match.test(path)?"":this.ext)};EJS.Scanner=function(source,left,right){extend(this,{left_delimiter:left+"%",right_delimiter:"%"+right,double_left:left+"%%",double_right:"%%"+right,left_equal:left+"%=",left_comment:left+"%#"});this.SplitRegexp=left=="["?/(\[%%)|(%%\])|(\[%=)|(\[%#)|(\[%)|(%\]\n)|(%\])|(\n)/:new RegExp("("+this.double_left+")|(%%"+this.double_right+")|("+this.left_equal+")|("+this.left_comment+")|("+this.left_delimiter+")|("+this.right_delimiter+"\n)|("+this.right_delimiter+")|(\n)");this.source=source;this.stag=null;this.lines=0};EJS.Scanner.to_text=function(input){if(input==null||input===undefined){return""}if(input instanceof Date){return input.toDateString()}if(input.toString){return input.toString()}return""};EJS.Scanner.prototype={scan:function(block){scanline=this.scanline;regex=this.SplitRegexp;if(!this.source==""){var source_split=rsplit(this.source,/\n/);for(var i=0;i', {
'class': 'joubel-help-text-dialog-background'
}).appendTo($helpTextDialogBox);
var $helpTextDialogContainer = $('
', {
'class': 'joubel-help-text-dialog-container'
}).appendTo($helpTextDialogBox);
$('
', {
'class': 'joubel-help-text-header',
'id': headerId,
'role': 'header',
'html': header
}).appendTo($helpTextDialogContainer);
$('
', {
'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 = $('
', {
'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 = $('', {
'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 = $('', {
'class': "joubel-progress-circle-wrapper"
});
//Active border indicates progress
var $activeBorder = $('', {
'class': "joubel-progress-circle-active-border"
}).appendTo($wrapper);
//Background circle
var $backgroundCircle = $('', {
'class': "joubel-progress-circle-circle"
}).appendTo($activeBorder);
//Progress text/number
$('', {
'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 = $('
', {
'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();
}
});
$('', {
'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 = $('');
$innerTail = $('');
var $innerBubble = $(
'
' +
'
'
).prepend($innerTail);
$currentSpeechBubble = $(
'' + text + '
' +
''
).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 = $('', {
'class': 'h5p-throbber'
});
return $throbber;
}
return JoubelThrobber;
}(H5P.jQuery));
;
H5P.JoubelTip = (function ($) {
var $conv = $('');
/**
* 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 = $('', {
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: ''
// IMPORTANT: All of the markup elements must have 'pointer-events: none;'
});
const $tipAnnouncer = $('
', {
'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 = $('
', $.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 = '';
/**
* @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 = $('
', {
'class': 'h5p-joubelui-score-bar',
});
var $visuals = $('
', {
'class': 'h5p-joubelui-score-bar-visuals',
appendTo: self.$scoreBar
});
// The progress bar wrapper
self.$progressWrapper = $('
', {
'class': 'h5p-joubelui-score-bar-progress-wrapper',
appendTo: $visuals
});
self.$progress = $('
', {
'class': 'h5p-joubelui-score-bar-progress',
'html': createLabel(self.score),
appendTo: self.$progressWrapper
});
// The star
$('
', {
'class': 'h5p-joubelui-score-bar-star',
html: self.STAR_MARKUP
}).appendTo($visuals);
// The score container
var $numerics = $('
', {
'class': 'h5p-joubelui-score-numeric',
appendTo: self.$scoreBar,
'aria-hidden': true
});
// The current score
self.$scoreCounter = $('', {
'class': 'h5p-joubelui-score-number h5p-joubelui-score-number-counter',
text: 0,
appendTo: $numerics
});
// The separator
$('', {
'class': 'h5p-joubelui-score-number-separator',
text: '/',
appendTo: $numerics
});
// Max score
self.$maxScore = $('', {
'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 = $('
', {
'class': 'h5p-joubelui-progressbar'
});
this.$background = $('
', {
'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 = $('
', {
'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);
;
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', 'introduction', 'content', 'explanation', 'feedback', '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 = $('', {
'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 $click = (clickElement != null ? clickElement.$element : null);
$element
.appendTo(sections.content.$element)
.addClass('h5p-question-popup');
$element.parent()
.addClass('h5p-has-question-popup');
// Draw the tail
var $tail = $('', {
'class': 'h5p-question-feedback-tail'
}).hide()
.appendTo($element.parent());
// Draw the close button
var $close = $('', {
'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
sections.buttons.$element.addClass('h5p-question-visible');
// Resize buttons after resizing button section
setTimeout(function () {
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 () {
// 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 (sections.buttons && numToHide === sections.buttons.$element.children().length) {
// All buttons are going to be hidden. Hide container using transition.
sections.buttons.$element.removeClass('h5p-question-visible');
sections.buttons.$element.css('max-height', '');
sectionsIsTransitioning = true;
// Wait for animations before detaching buttons
toggleButtonsTransitionTimer = setTimeout(function () {
hideButtons(relocateFocus);
sectionsIsTransitioning = false;
}, animationTimer);
}
else {
hideButtons(relocateFocus);
// Show button section
if (!sections.buttons.$element.is(':empty')) {
sections.buttons.$element.addClass('h5p-question-visible');
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;
}
// Clear button truncation timer if within a button truncation function
if (buttonTruncationTimer) {
clearTimeout(buttonTruncationTimer);
}
// Allow button section to attach before getting width
buttonTruncationTimer = setTimeout(function () {
// A static margin is added as buffer for smoother transitions
var buttonsWidth = 0;
for (var i in buttons) {
var $element = buttons[i].$element;
if (buttons[i].isVisible) {
//Calculate exact button width
var buttonInstanceWidth = $element.get(0).offsetWidth +
parseFloat($element.css('margin-left')) +
parseFloat($element.css('margin-right'));
buttonsWidth += Math.ceil(buttonInstanceWidth) + 1;
}
}
// Button section reduced by 1 pixel for cross-broswer consistency.
var buttonSectionWidth = Math.floor($(sections.buttons.$element).width()) - 1;
// Remove button labels if width of buttons are too wide
if (buttonsWidth >= buttonSectionWidth) {
removeButtonLabels(buttonsWidth, buttonSectionWidth);
}
else {
restoreButtonLabels(buttonsWidth, buttonSectionWidth);
}
buttonTruncationTimer = undefined;
}, 0);
};
/**
* 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];
if (!buttons[buttonId].isTruncated && buttons[buttonId].isVisible) {
var $button = buttons[buttonId].$element;
var $tmp = $button.clone()
.css({
'position': 'absolute',
'white-space': 'nowrap',
'max-width': 'none'
})
.addClass('truncated')
.html('')
.appendTo($button.parent());
// Calculate new total width of buttons
buttonsWidth = buttonsWidth - $button.outerWidth(true) + $tmp.outerWidth(true);
// Remove label
$button.attr('aria-label', $button.text());
$button.html('');
$button.addClass('truncated');
buttons[buttonId].isTruncated = true;
$tmp.remove();
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];
if (buttons[buttonId].isTruncated && buttons[buttonId].isVisible) {
// Check if adding label exceeds allowed width
var $button = buttons[buttonId].$element;
var $tmp = $button.clone()
.css({
'position': 'absolute',
'white-space': 'nowrap',
'max-width': 'none'
}).removeClass('truncated')
.html(buttons[buttonId].text)
.appendTo($button.parent());
// Make sure clone was successfull
if(!$button.length || !$tmp.length) {
return;
}
var oldButtonSize = Math.floor($button.get(0).offsetWidth) - 1;
var newButtonSize = Math.ceil($tmp.get(0).offsetWidth) + 1;
// Calculate new total width of buttons with a static pixel for consistency cross-browser
buttonsWidth = buttonsWidth - Math.floor(oldButtonSize) + Math.ceil(newButtonSize) + 1;
$tmp.remove();
if (buttonsWidth >= maxButtonsWidth) {
return;
}
// Restore label
$button.html(buttons[buttonId].text);
$button.removeClass('truncated');
buttons[buttonId].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;
};
/**
* 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: $('', {
'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;
};
/**
* Will stop any playback going on in the task.
*/
self.pause = function () {
if (sections.video && sections.video.isVisible) {
sections.video.instance.pause();
}
};
/**
* Start playback of video
*/
self.play = function () {
if (sections.video && sections.video.isVisible) {
sections.video.instance.play();
}
};
/**
* Disable auto play, useful in editors.
*/
self.disableAutoPlay = function () {
disableAutoPlay = true;
};
/**
* Add task image.
*
* @param {string} path Relative
* @param {Object} [options] Options object
* @param {string} [options.alt] Text representation
* @param {Boolean} [options.disableImageZooming] Set as true to disable image zooming
*/
self.setImage = function (path, options) {
options = options ? options : {};
sections.image = {};
// Image container
sections.image.$element = $('', {
'class': 'h5p-question-image h5p-question-image-fill-width'
});
// Inner wrap
var $imgWrap = $('', {
'class': 'h5p-question-image-wrap',
appendTo: sections.image.$element
});
// Image element
var $img = $('![]()
', {
src: H5P.getPath(path, self.contentId),
alt: (options.alt === undefined ? '' : options.alt),
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.load(function () {
determineImgWidth();
});
}
// Skip adding zoom functionality
return;
}
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
}
}).on('keypress', function (event) {
if (event.which === 32) {
scaleImage.apply(this); // Space bar pressed
}
});
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 section
sections.feedback.$element.removeClass('h5p-question-visible');
sections.feedback.$element.css('max-height', '');
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();
// 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;
}
clickElement = (popupSettings != null && popupSettings.click != null ? popupSettings.click : null);
clearTimeout(feedbackTransitionTimer);
var $feedback = $('
', {
'class': 'h5p-question-feedback-container'
});
var $feedbackContent = $('
', {
'class': 'h5p-question-feedback-content'
}).appendTo($feedback);
// Feedback text
$('
', {
'class': 'h5p-question-feedback-content-text',
'html': content
}).appendTo($feedbackContent);
if (scoreBar === undefined) {
scoreBar = JoubelUI.createScoreBar(maxScore, scoreBarLabel, helpText, scoreExplanationButtonLabel);
}
scoreBar.appendTo($feedback);
$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);
}
else {
// Create section
register('feedback', $feedback);
if (initialized && $wrapper) {
insert(self.order, 'feedback', sections, $wrapper);
}
}
sections.feedback.$element.addClass('h5p-question-visible');
if (popupSettings != null && popupSettings.showAsPopup == true) {
makeFeedbackPopup(popupSettings.closeText);
scoreBar.setScore(score);
}
else {
// Show feedback section
feedbackTransitionTimer = setTimeout(function () {
setElementHeight(sections.feedback.$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);
}
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
*/
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();
}
};
buttons[id] = {
isTruncated: false,
text: text
};
var $e = buttons[id].$element = JoubelUI.createButton($.extend({
'class': 'h5p-question-' + id,
html: text,
on: {
click: function (event) {
handleButtonClick();
if (options.href !== undefined) {
event.preventDefault();
}
},
keydown: function (event) {
switch (event.which) {
case 13: // Enter
case 32: // Space
handleButtonClick();
event.preventDefault();
}
}
}
}, options));
buttonOrder.push(id);
if (visible === undefined || visible) {
// Button should be visible
$e.appendTo(sections.buttons.$element);
buttons[id].isVisible = true;
sections.buttons.$element.addClass('h5p-question-visible');
}
return self;
};
/**
* 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) {
confirmationDialog.appendTo(options.$parentElement.get(0));
}
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) {
if (buttons[id] === undefined) {
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) {
if (buttons[id] === undefined) {
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 = $('', {
'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 = $('
', {
'class': 'h5p-question-explanation-container'
});
// Add title:
$('
', {
'class': 'h5p-question-explanation-title',
role: 'heading',
html: title,
appendTo: self.$explanation
});
var $explanationList = $('
- ', {
'class': 'h5p-question-explanation-list',
appendTo: self.$explanation
});
for (var i = 0; i < explanations.length; i++) {
var feedback = explanations[i];
var $explanationItem = $('
- ', {
'class': 'h5p-question-explanation-item',
appendTo: $explanationList
});
var $content = $('', { 'class': 'h5p-question-explanation-status' }); if (feedback.correct) { $('', { 'class': 'h5p-question-explanation-correct', html: feedback.correct, appendTo: $content }); } if (feedback.wrong) { $('', { 'class': 'h5p-question-explanation-wrong', html: feedback.wrong, appendTo: $content }); } $content.appendTo($explanationItem); if (feedback.text) { $('', { '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 EJS*/ // 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; H5P.Question.call(self, 'multichoice'); var $ = H5P.jQuery; // checkbox or radiobutton var texttemplate = '
- ' +
' <% for (var i=0; i < answers.length; i++) { %>' +
'
- ' +
' ' + ' <%= answers[i].text %>.' + '' + ' ' + ' ' +
' <% } %>' +
'
' + ''); //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 () { if (params.media && params.media.library) { var type = params.media.library.split(' ')[0]; if (type === 'H5P.Image') { if (params.media.params.file) { // Register task image self.setImage(params.media.params.file.path, { disableImageZooming: params.behaviour.disableImageZooming, alt: params.media.params.alt }); } } else if (type === 'H5P.Video') { if (params.media.params.sources) { // Register task video self.setVideo(params.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('' + '' + '' + '' + params.question + ''); // Register task content area $myDom = $(template.render(params)); 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(//g, '') .replace(/<\/p>/g, '') .trim(); if (!tipContent.length) { return; // Empty tip } else { $(this).addClass('h5p-has-tip'); } // Add tip var $wrap = $('
', { 'class': 'h5p-multichoice-tipwrap', 'aria-label': params.UI.tipAvailable + '.' }); var $multichoiceTip = $('', { 'role': 'button', 'tabindex': 0, 'title': params.UI.tipsLabel, 'aria-label': params.UI.tipsLabel, 'aria-expanded': false, 'class': 'multichoice-tip', appendTo: $wrap }); var tipIconHtml = ''; $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[0] = 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') { // 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 { $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]; if (a.correct) { $e.addClass('h5p-should').append($('', { 'class': 'h5p-solution-icon', html: params.UI.shouldCheck + '.' })); } else { $e.addClass('h5p-should-not').append($('', { 'class': 'h5p-solution-icon', html: params.UI.shouldNotCheck + '.' })); } }).find('.h5p-question-plus-one, .h5p-question-minus-one').remove(); // Make sure input is disabled in solution mode disableInput(); //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, .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 */ this.resetTask = function () { self.answered = false; self.hideSolutions(); params.userAnswers = []; removeSelections(); 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(); self.hideButton('check-answer'); if (params.behaviour.enableSolutionsButton) { self.showButton('show-solution'); } if (params.behaviour.enableRetry) { self.showButton('try-again'); } self.showCheckSolution(); disableInput(); var xAPIEvent = self.createXAPIEventTemplate('answered'); addQuestionToXAPI(xAPIEvent); addResponseToXAPI(xAPIEvent); self.trigger(xAPIEvent); self.trigger('resize'); }; /** * Determine if any of the radios or checkboxes have been checked. * * @return {boolean} */ var isAnswerSelected = function () { return !!$('.h5p-answer[aria-checked="true"]', $myDom).length; }; /** * 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 && !isAnswerSelected()) { // Require answer before solution can be viewed self.updateFeedbackContent(params.UI.noInput); self.read(params.UI.noInput); } else { calcScore(); self.showAllSolutions(); } }, false); // Check solution button if (params.behaviour.enableCheckButton && (!params.behaviour.autoCheck || !params.behaviour.singleAnswer)) { self.addButton('check-answer', params.UI.checkAnswerButton, function () { self.answered = true; checkAnswer(); }, true, {}, { confirmationDialog: { enable: params.behaviour.confirmCheckDialog, l10n: params.confirmCheck, instance: self, $parentElement: $container } } ); } // Try Again button self.addButton('try-again', params.UI.tryAgainButton, function () { self.showButton('check-answer'); self.hideButton('try-again'); self.hideButton('show-solution'); self.hideSolutions(); removeSelections(); enableInput(); $myDom.find('.h5p-feedback-available').remove(); self.answered = false; 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, {}, { confirmationDialog: { enable: params.behaviour.confirmRetryDialog, l10n: params.confirmRetry, instance: self, $parentElement: $container } }); }; /** * @private */ var insertFeedback = function ($e, feedback) { // Add visuals addFeedback($e, feedback); // Add button for readspeakers var $wrap = $('', { 'class': 'h5p-hidden-read h5p-feedback-available', 'aria-label': params.UI.feedbackAvailable + '.' }); $('', { 'role': 'button', 'tabindex': 0, 'aria-label': params.UI.readFeedback + '.', appendTo: $wrap, on: { keydown: function (e) { if (e.which === 32) { // Space self.read(feedback); return false; } } } }); $wrap.appendTo($e); }; /** * 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) { $e.addClass('h5p-correct').append($('', { 'class': 'h5p-answer-icon', html: params.UI.correctAnswer + '.' })); } else { $e.addClass('h5p-wrong').append($('', { '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 !== '') { insertFeedback($e, a.tipsAndFeedback.chosenFeedback); } else if (!chosen && a.tipsAndFeedback.notChosenFeedback !== undefined && a.tipsAndFeedback.notChosenFeedback !== '') { insertFeedback($e, a.tipsAndFeedback.notChosenFeedback); } } }); // Determine feedback var max = self.getMaxScore(); // Show feedback if (!skipFeedback) { this.setFeedback(getFeedbackText(score, max), score, max, params.UI.scoreBarLabel); } // Disable task if maxscore is achieved var fullScore = (score === max); if (fullScore) { finishedTask(); } self.trigger('resize'); }; /** * Method to use when the task is correctly answered, removes all buttons and disables input. */ var finishedTask = function () { self.hideButton('check-answer'); self.hideButton('try-again'); self.hideButton('show-solution'); self.trigger('resize'); }; /** * Disables choosing new input. */ var disableInput = function () { $('.h5p-answer', $myDom).attr({ 'aria-disabled': 'true', 'tabindex': '-1' }); }; /** * Enables new input. */ var enableInput = function () { $('.h5p-answer', $myDom).attr('aria-disabled', 'false'); }; var calcScore = function () { score = 0; params.userAnswers = []; $('.h5p-answer', $myDom).each(function (idx, el) { var $el = $(el); if ($el.attr('aria-checked') === 'true') { var choice = params.answers[idx]; var weight = (choice.weight !== undefined ? choice.weight : 1); if (choice.correct) { score += weight; } else { score -= weight; } var num = parseInt($(el).data('id')); params.userAnswers.push(num); } }); 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 () { 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 $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 = { // Remove tags, must wrap in div tag because jQuery 1.9 will crash if the string isn't wrapped in a tag. 'en-US': $(''; var solutionButtonTemplate = params.endGame.showSolutionButton ? ' ': ''; var resulttemplate = '' + params.question + '').text() }; 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': $('' + params.answers[i].text + '').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); } } } } } } 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.label = '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(params.question); }; }; H5P.MultiChoice.prototype = Object.create(H5P.Question.prototype); H5P.MultiChoice.prototype.constructor = H5P.MultiChoice; ; 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', 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' }, endGame: { showResultPage: true, noResultMessage: 'Finished', message: 'Your result:', oldFeedback: { successGreeting: '', successComment: '', failGreeting: '', failComment: '' }, overallFeedback: [], finishButtonText: 'Finish', solutionButtonText: 'Show solution', retryButtonText: 'Retry', showAnimations: false, skipButtonText: 'Skip video', showSolutionButton: true }, override: {}, disableBackwardsNavigation: false }; var params = $.extend(true, {}, defaults, options); var texttemplate = '<% if (introPage.showIntroPage) { %>' + '' + ' <% if (introPage.title) { %>' + '' + '<% } %>' + '' + '' + '<%= introPage.title %>' + ' <% } %>' + ' <% if (introPage.introduction) { %>' + '<%= introPage.introduction %>' + ' <% } %>' + ' ' + '' + ''; var template = new EJS({text: texttemplate}); var endTemplate = new EJS({text: resulttemplate}); 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 || {}; // Bring question set up to date when resuming if (contentData.previousState) { if (contentData.previousState.progress) { 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.<%= message %>' + '' + ' ' + ' ' + '' + ' <% if (comment) { %>' + '<%= comment %>' + ' <% } %>' + ' <% if (resulttext) { %>' + '<%= resulttext %>' + ' <% } %>' + ' ' + ' - ' +
'