var H5P = H5P || {};

/**
 * Constructor.
 *
 * @param {Object} params Options for this library.
 * @param {Number} id Content identifier
 * @returns {undefined}
 */
(function ($) {
  H5P.Image = function (params, id, extras) {
    H5P.EventDispatcher.call(this);
    this.extras = extras;

    if (params.file === undefined || !(params.file instanceof Object)) {
      this.placeholder = true;
    }
    else {
      this.source = H5P.getPath(params.file.path, id);
      this.width = params.file.width;
      this.height = params.file.height;
    }

    this.alt = (!params.decorative && params.alt !== undefined) ?
      this.stripHTML(this.htmlDecode(params.alt)) :
      '';

    if (params.title !== undefined) {
      this.title = this.stripHTML(this.htmlDecode(params.title));
    }
  };

  H5P.Image.prototype = Object.create(H5P.EventDispatcher.prototype);
  H5P.Image.prototype.constructor = H5P.Image;

  /**
   * Wipe out the content of the wrapper and put our HTML in it.
   *
   * @param {jQuery} $wrapper
   * @returns {undefined}
   */
  H5P.Image.prototype.attach = function ($wrapper) {
    var self = this;
    var source = this.source;

    if (self.$img === undefined) {
      if(self.placeholder) {
        self.$img = $('<div>', {
          width: '100%',
          height: '100%',
          class: 'h5p-placeholder',
          title: this.title === undefined ? '' : this.title,
          on: {
            load: function () {
              self.trigger('loaded');
            }
          }
        });
      } else {
        self.$img = $('<img>', {
          width: '100%',
          height: '100%',
          src: source,
          alt: this.alt,
          title: this.title === undefined ? '' : this.title,
          on: {
            load: function () {
              self.trigger('loaded');
            }
          }
        });
      }
    }

    $wrapper.addClass('h5p-image').html(self.$img);
  };

  /**
   * Retrieve decoded HTML encoded string.
   *
   * @param {string} input HTML encoded string.
   * @returns {string} Decoded string.
   */
  H5P.Image.prototype.htmlDecode = function (input) {
    const dparser = new DOMParser().parseFromString(input, 'text/html');
    return dparser.documentElement.textContent;
  };

  /**
   * Retrieve string without HTML tags.
   *
   * @param {string} input Input string.
   * @returns {string} Output string.
   */
  H5P.Image.prototype.stripHTML = function (html) {
    const div = document.createElement('div');
    div.innerHTML = html;
    return div.textContent || div.innerText || '';
  };

  return H5P.Image;
}(H5P.jQuery));
;H5P.Column = (function (EventDispatcher) {

  /**
   * Column Constructor
   *
   * @class
   * @param {Object} params Describes task behavior
   * @param {number} id Content identifier
   * @param {Object} data User specific data to adapt behavior
   */
  function Column(params, id, data) {
    /** @alias H5P.Column# */
    var self = this;

    // We support events by extending this class
    EventDispatcher.call(self);

    // Add defaults
    params = params || {};
    if (params.useSeparators === undefined) {
      params.useSeparators = true;
    }

    // Fallback if column is empty
    if (params.content === undefined) {
      params.content = [];
    }

    this.contentData = data;

    // Column wrapper element
    var wrapper;

    // H5P content in the column
    var instances = [];
    var instanceContainers = [];

    // Number of tasks among instances
    var numTasks = 0;

    // Number of tasks that has been completed
    var numTasksCompleted = 0;

    // Keep track of result for each task
    var tasksResultEvent = [];

    // Keep track of last content's margin state
    var previousHasMargin;

    /**
     * Calculate score and trigger completed event.
     *
     * @private
     */
    var completed = function () {
      // Sum all scores
      var raw = 0;
      var max = 0;

      for (var i = 0; i < tasksResultEvent.length; i++) {
        var event = tasksResultEvent[i];
        raw += event.getScore();
        max += event.getMaxScore();
      }

      self.triggerXAPIScored(raw, max, 'completed');
    };

    /**
     * Generates an event handler for the given task index.
     *
     * @private
     * @param {number} taskIndex
     * @return {function} xAPI event handler
     */
    var trackScoring = function (taskIndex) {
      return function (event) {
        if (event.getScore() === null) {
          return; // Skip, not relevant
        }

        if (tasksResultEvent[taskIndex] === undefined) {
          // Update number of completed tasks
          numTasksCompleted++;
        }

        // Keep track of latest event with result
        tasksResultEvent[taskIndex] = event;

        // Track progress
        var progressed = self.createXAPIEventTemplate('progressed');
        progressed.data.statement.object.definition.extensions['http://id.tincanapi.com/extension/ending-point'] = taskIndex + 1;
        self.trigger(progressed);

        // Check to see if we're done
        if (numTasksCompleted === numTasks) {
          // Run this after the current event is sent
          setTimeout(function () {
            completed(); // Done
          }, 0);
        }
      };
    };

    /**
     * Creates a new ontent instance from the given content parameters and
     * then attaches it the wrapper. Sets up event listeners.
     *
     * @private
     * @param {Object} content Parameters
     * @param {Object} [contentData] Content Data
     */
    var addRunnable = function (content, contentData) {
      // Create container for content
      var container = document.createElement('div');
      container.classList.add('h5p-column-content');

      // Content overrides
      var library = content.library.split(' ')[0];
      if (library === 'H5P.Video') {
        // Prevent video from growing endlessly since height is unlimited.
        content.params.visuals.fit = false;
      }

      // Create content instance
      var instance = H5P.newRunnable(content, id, undefined, true, contentData);

      // Bubble resize events
      bubbleUp(instance, 'resize', self);

      // Keep track of all instances that are tasks
      const taskInstances = [];

      // Check if instance is a task
      if (Column.isTask(instance)) {
        // Tasks requires completion
        taskInstances.push(instance);
      }

      // For H5P.Row, we'll retrieve the actual task instances
      if (library === 'H5P.Row') {
        const rowColumns = instance.getInstances();

        // A row can have several columns
        for (const rowColumn of rowColumns) {

          // And each row column can have several content types,
          // some of which might be tasks
          const rowColumnInstances = rowColumn.getInstances();
          for (const rowColumnInstance of rowColumnInstances) {
            if (Column.isTask(rowColumnInstance)) {
              taskInstances.push(rowColumnInstance);
            }
          }
        }
      }

      for (const task of taskInstances) {
        task.on('xAPI', trackScoring(numTasks));
        numTasks++;
      }

      if (library === 'H5P.Image') {
        // Resize when images are loaded

        instance.on('loaded', function () {
          self.trigger('resize');
        });
      }

      // Keep track of all instances
      instances.push(instance);
      instanceContainers.push({
        hasAttached: false,
        container: container,
        instanceIndex: instances.length - 1,
      });

      // Add to DOM wrapper
      wrapper.appendChild(container);
    };

    /**
     * Help get data for content at given index
     *
     * @private
     * @param {number} index
     * @returns {Object} Data object with previous state
     */
    var grabContentData = function (index) {
      var contentData = {
        parent: self
      };

      if (data.previousState && data.previousState.instances && data.previousState.instances[index]) {
        contentData.previousState = data.previousState.instances[index];
      }

      return contentData;
    };

    /**
     * Adds separator before the next content.
     *
     * @private
     * @param {string} libraryName Name of the next content type
     * @param {string} useSeparator
     */
    var addSeparator = function (libraryName, useSeparator, content) {
      // Determine separator spacing
      var thisHasMargin = (hasMargins.indexOf(libraryName) !== -1);

      if (libraryName === 'H5P.Row') {
        let lastContent = null;
        let contentCount = content.params?.columns?.reduce((count, column) => {
          const contents = column.content?.params?.content;
          count += contents?.length ?? 0;
          if (contents?.length > 0) {
            lastContent = column.content.params.content[contents.length-1];
          }
          return count;
        }, 0);

        // To avoid messy margin computation, separator setting should be disabled when there is more
        // than a single content inside a row. We also don't want a separator if we don't have any content
        if (useSeparator === 'auto' && (contentCount > 1 || contentCount === 0)) {
          useSeparator = 'disabled';
        } else if (contentCount > 0) {
          // If we only have one content, we want to follow the same procedure as if that content was
          // not wrapped on Row and RowColumn. 
          addSeparator(lastContent.library.split(' ')[0], useSeparator ?? 'auto');
          return;
        } else {
          // No separator.
          return;
        }
      }

      // Only add if previous content exists
      if (previousHasMargin !== undefined) {

        // Create separator element
        let separator = document.createElement('div');

        // If no margins, check for top margin only
        if (!thisHasMargin && (hasTopMargins.indexOf(libraryName) === -1)) {
          if (!previousHasMargin) {
            // None of them have margin

            // Only add separator if forced
            if (useSeparator === 'enabled') {
              // Add ruler
              separator.classList.add('h5p-column-ruler');

              // Add space both before and after the ruler
              separator.classList.add('h5p-column-space-before-n-after');
            }
            else {
              // Default is to separte using a single space, no ruler
              separator.classList.add('h5p-column-space-before');
            }
          }
          else {
            // We don't have any margin but the previous content does

            // Only add separator if forced
            if (useSeparator === 'enabled') {
              // Add ruler
              separator.classList.add('h5p-column-ruler');

              // Add space after the ruler
              separator.classList.add('h5p-column-space-after');
            }
          }
        }
        else if (!previousHasMargin) {
          // We have margin but not the previous content doesn't

          // Only add separator if forced
          if (useSeparator === 'enabled') {
            // Add ruler
            separator.classList.add('h5p-column-ruler');

            // Add space after the ruler
            separator.classList.add('h5p-column-space-before');
          }
        }
        else {
          // Both already have margin

          if (useSeparator !== 'disabled') {
            // Default is to add ruler unless its disabled
            separator.classList.add('h5p-column-ruler');
          }
        }

        // Insert into DOM
        wrapper.appendChild(separator);
      }

      // Keep track of spacing for next separator
      previousHasMargin = thisHasMargin || (hasBottomMargins.indexOf(libraryName) !== -1);
    };

    /**
     * Creates a wrapper and the column content the first time the column
     * is attached to the DOM.
     *
     * @private
     */
    var createHTML = function () {
      // Create wrapper
      wrapper = document.createElement('div');

      // Go though all contents
      for (var i = 0; i < params.content.length; i++) {
        var content = params.content[i];

        // In case the author has created an element without selecting any
        // library
        if (content.content === undefined) {
          continue;
        }

        if (params.useSeparators) { // (check for global override)

          // Add separator between contents
          addSeparator(content.content.library.split(' ')[0], content.useSeparator, content.content);
        }

        // Add content
        addRunnable(content.content, grabContentData(i));
      }
    };

    /**
     * Attach the column to the given container
     *
     * @param {H5P.jQuery} $container
     */
    self.attach = function ($container) {
      if (wrapper === undefined) {
        // Create wrapper and content
        createHTML();
      }

      // Attach instances that have not been attached
      instanceContainers.filter(function (container) { return !container.hasAttached })
        .forEach(function (container) {
          instances[container.instanceIndex]
            .attach(H5P.jQuery(container.container));

          // Remove any fullscreen buttons
          disableFullscreen(instances[container.instanceIndex]);
        });


      // Add to DOM
      $container.addClass('h5p-column').html('').append(wrapper);
    };

    /**
     * Create object containing information about the current state
     * of this content.
     *
     * @return {Object}
     */
    self.getCurrentState = function () {
      // Get previous state object or create new state object
      var state = (data.previousState ? data.previousState : {});
      if (!state.instances) {
        state.instances = [];
      }

      // Grab the current state for each instance
      for (var i = 0; i < instances.length; i++) {
        var instance = instances[i];

        if (instance.getCurrentState instanceof Function ||
            typeof instance.getCurrentState === 'function') {

          state.instances[i] = instance.getCurrentState();
        }
      }

      // Done
      return state;
    };

    /**
     * Get xAPI data.
     * Contract used by report rendering engine.
     *
     * @see contract at {@link https://h5p.org/documentation/developers/contracts#guides-header-6}
     */
    self.getXAPIData = function () {
      var xAPIEvent = self.createXAPIEventTemplate('answered');
      addQuestionToXAPI(xAPIEvent);
      xAPIEvent.setScoredResult(self.getScore(),
        self.getMaxScore(),
        self,
        true,
        self.getScore() === self.getMaxScore()
      );
      return {
        statement: xAPIEvent.data.statement,
        children: getXAPIDataFromChildren(instances)
      };
    };

    /**
     * Get score for all children
     * Contract used for getting the complete score of task.
     *
     * @return {number} Score for questions
     */
    self.getScore = function () {
      return instances.reduce(function (prev, instance) {
        return prev + (instance.getScore ? instance.getScore() : 0);
      }, 0);
    };

    /**
     * Get maximum score possible for all children instances
     * Contract.
     *
     * @return {number} Maximum score for questions
     */
    self.getMaxScore = function () {
      return instances.reduce(function (prev, instance) {
        return prev + (instance.getMaxScore ? instance.getMaxScore() : 0);
      }, 0);
    };

    /**
     * Get answer given
     * Contract.
     *
     * @return {boolean} True, if all answers have been given.
     */
    self.getAnswerGiven = function () {
      return instances.reduce(function (prev, instance) {
        return prev && (instance.getAnswerGiven ? instance.getAnswerGiven() : prev);
      }, true);
    };

    /**
     * Show solutions.
     * Contract.
     */
    self.showSolutions = function () {
      instances.forEach(function (instance) {
        if (instance.toggleReadSpeaker) {
          instance.toggleReadSpeaker(true);
        }
        if (instance.showSolutions) {
          instance.showSolutions();
        }
        if (instance.toggleReadSpeaker) {
          instance.toggleReadSpeaker(false);
        }
      });
    };

    /**
     * Reset task.
     * Contract.
     */
    self.resetTask = function () {
      instances.forEach(function (instance) {
        if (instance.resetTask) {
          instance.resetTask();
        }
      });
    };

    /**
     * Get instances for all children
     * TODO: This is not a good interface, we should provide handling needed
     * handling of the tasks instead of repeating them for each parent...
     *
     * @return {Object[]} array of instances
     */
    self.getInstances = function () {
      return instances;
    };

    /**
     * Get title, e.g. for xAPI when Column is subcontent.
     *
     * @return {string} Title.
     */
    self.getTitle = function () {
      return H5P.createTitle((self.contentData && self.contentData.metadata && self.contentData.metadata.title) ? self.contentData.metadata.title : 'Column');
    };

    /**
     * Add the question itself to the definition part of an xAPIEvent
     */
    var addQuestionToXAPI = function (xAPIEvent) {
      var definition = xAPIEvent.getVerifiedStatementValue(['object', 'definition']);
      H5P.jQuery.extend(definition, getxAPIDefinition());
    };

    /**
     * Generate xAPI object definition used in xAPI statements.
     * @return {Object}
     */
    var getxAPIDefinition = function () {
      var definition = {};

      definition.interactionType = 'compound';
      definition.type = 'http://adlnet.gov/expapi/activities/cmi.interaction';
      definition.description = {
        'en-US': ''
      };

      return definition;
    };

    /**
     * Get xAPI data from sub content types
     *
     * @param {Array} of H5P instances
     * @returns {Array} of xAPI data objects used to build a report
     */
    var getXAPIDataFromChildren = function (children) {
      let childData = [];

      children.forEach(child => {
        if (child.libraryInfo.machineName === 'H5P.Row') {
          childData.push(...child.getXAPIDataFromChildren());
        }
        else if (typeof child.getXAPIData == 'function') {
          childData.push(child.getXAPIData());
        }
      });

      return childData.filter(function (data) {
        return !!data;
      });
    };

    // Resize children to fit inside parent
    bubbleDown(self, 'resize', instances);

    if (wrapper === undefined) {
      // Create wrapper and content
      createHTML();
    }

    self.setActivityStarted();
  }

  Column.prototype = Object.create(EventDispatcher.prototype);
  Column.prototype.constructor = Column;

  /**
   * Makes it easy to bubble events from parent to children
   *
   * @private
   * @param {Object} origin Origin of the Event
   * @param {string} eventName Name of the Event
   * @param {Array} targets Targets to trigger event on
   */
  function bubbleDown(origin, eventName, targets) {
    origin.on(eventName, function (event) {
      if (origin.bubblingUpwards) {
        return; // Prevent send event back down.
      }

      for (var i = 0; i < targets.length; i++) {
        targets[i].trigger(eventName, event);
      }
    });
  }

  /**
   * Makes it easy to bubble events from child to parent
   *
   * @private
   * @param {Object} origin Origin of the Event
   * @param {string} eventName Name of the Event
   * @param {Object} target Target to trigger event on
   */
  function bubbleUp(origin, eventName, target) {
    origin.on(eventName, function (event) {
      // Prevent target from sending event back down
      target.bubblingUpwards = true;

      // Trigger event
      target.trigger(eventName, event);

      // Reset
      target.bubblingUpwards = false;
    });
  }

  /**
   * Definition of which content types are tasks
   */
  var isTasks = [
    'H5P.ImageHotspotQuestion',
    'H5P.Blanks',
    'H5P.Essay',
    'H5P.SingleChoiceSet',
    'H5P.MultiChoice',
    'H5P.TrueFalse',
    'H5P.DragQuestion',
    'H5P.Summary',
    'H5P.DragText',
    'H5P.MarkTheWords',
    'H5P.MemoryGame',
    'H5P.QuestionSet',
    'H5P.InteractiveVideo',
    'H5P.CoursePresentation',
    'H5P.DocumentationTool',
    'H5P.MultiMediaChoice'
  ];

  /**
   * Check if the given content instance is a task (will give a score)
   *
   * @param {Object} instance
   * @return {boolean}
   */
  Column.isTask = function (instance) {
    if (instance.isTask !== undefined) {
      return instance.isTask; // Content will determine self if it's a task
    }

    // Go through the valid task names
    for (var i = 0; i < isTasks.length; i++) {
      // Check against library info. (instanceof is broken in H5P.newRunnable)
      if (instance.libraryInfo.machineName === isTasks[i]) {
        return true;
      }
    }

    return false;
  }

  /**
   * Definition of which content type have margins
   */
  var hasMargins = [
    'H5P.AdvancedText',
    'H5P.AudioRecorder',
    'H5P.Essay',
    'H5P.Link',
    'H5P.Accordion',
    'H5P.Table',
    'H5P.GuessTheAnswer',
    'H5P.Blanks',
    'H5P.MultiChoice',
    'H5P.TrueFalse',
    'H5P.DragQuestion',
    'H5P.Summary',
    'H5P.DragText',
    'H5P.MarkTheWords',
    'H5P.ImageHotspotQuestion',
    'H5P.MemoryGame',
    'H5P.Dialogcards',
    'H5P.QuestionSet',
    'H5P.DocumentationTool'
  ];

  /**
   * Definition of which content type have top margins
   */
  var hasTopMargins = [
    'H5P.SingleChoiceSet'
  ];

  /**
   * Definition of which content type have bottom margins
   */
  var hasBottomMargins = [
    'H5P.CoursePresentation',
    'H5P.Dialogcards',
    'H5P.GuessTheAnswer',
    'H5P.ImageSlider'
  ];

  /**
   * Remove custom fullscreen buttons from sub content.
   * (A bit of a hack, there should have been some sort of override…)
   *
   * @param {Object} instance
   */
  function disableFullscreen(instance) {
    switch (instance.libraryInfo.machineName) {
      case 'H5P.CoursePresentation':
        if (instance.$fullScreenButton) {
          instance.$fullScreenButton.remove();
        }
        break;

      case 'H5P.InteractiveVideo':
        instance.on('controls', function () {
          if (instance.controls.$fullscreen) {
            instance.controls.$fullscreen.remove();
          }
        });
        break;
    }
  }

  return Column;
})(H5P.EventDispatcher);
;var H5P = H5P || {};
/**
 * Transition contains helper function relevant for transitioning
 */
H5P.Transition = (function ($) {

  /**
   * @class
   * @namespace H5P
   */
  Transition = {};

  /**
   * @private
   */
  Transition.transitionEndEventNames = {
    'WebkitTransition': 'webkitTransitionEnd',
    'transition':       'transitionend',
    'MozTransition':    'transitionend',
    'OTransition':      'oTransitionEnd',
    'msTransition':     'MSTransitionEnd'
  };

  /**
   * @private
   */
  Transition.cache = [];

  /**
   * Get the vendor property name for an event
   *
   * @function H5P.Transition.getVendorPropertyName
   * @static
   * @private
   * @param  {string} prop Generic property name
   * @return {string}      Vendor specific property name
   */
  Transition.getVendorPropertyName = function (prop) {

    if (Transition.cache[prop] !== undefined) {
      return Transition.cache[prop];
    }

    var div = document.createElement('div');

    // Handle unprefixed versions (FF16+, for example)
    if (prop in div.style) {
      Transition.cache[prop] = prop;
    }
    else {
      var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
      var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1);

      if (prop in div.style) {
        Transition.cache[prop] = prop;
      }
      else {
        for (var i = 0; i < prefixes.length; ++i) {
          var vendorProp = prefixes[i] + prop_;
          if (vendorProp in div.style) {
            Transition.cache[prop] = vendorProp;
            break;
          }
        }
      }
    }

    return Transition.cache[prop];
  };

  /**
   * Get the name of the transition end event
   *
   * @static
   * @private
   * @return {string}  description
   */
  Transition.getTransitionEndEventName = function () {
    return Transition.transitionEndEventNames[Transition.getVendorPropertyName('transition')] || undefined;
  };

  /**
   * Helper function for listening on transition end events
   *
   * @function H5P.Transition.onTransitionEnd
   * @static
   * @param  {domElement} $element The element which is transitioned
   * @param  {function} callback The callback to be invoked when transition is finished
   * @param  {number} timeout  Timeout in milliseconds. Fallback if transition event is never fired
   */
  Transition.onTransitionEnd = function ($element, callback, timeout) {
    // Fallback on 1 second if transition event is not supported/triggered
    timeout = timeout || 1000;
    Transition.transitionEndEventName = Transition.transitionEndEventName || Transition.getTransitionEndEventName();
    var callbackCalled = false;

    var doCallback = function () {
      if (callbackCalled) {
        return;
      }
      $element.off(Transition.transitionEndEventName, callback);
      callbackCalled = true;
      clearTimeout(timer);
      callback();
    };

    var timer = setTimeout(function () {
      doCallback();
    }, timeout);

    $element.on(Transition.transitionEndEventName, function () {
      doCallback();
    });
  };

  /**
   * Wait for a transition - when finished, invokes next in line
   *
   * @private
   *
   * @param {Object[]}    transitions             Array of transitions
   * @param {H5P.jQuery}  transitions[].$element  Dom element transition is performed on
   * @param {number=}     transitions[].timeout   Timeout fallback if transition end never is triggered
   * @param {bool=}       transitions[].break     If true, sequence breaks after this transition
   * @param {number}      index                   The index for current transition
   */
  var runSequence = function (transitions, index) {
    if (index >= transitions.length) {
      return;
    }

    var transition = transitions[index];
    H5P.Transition.onTransitionEnd(transition.$element, function () {
      if (transition.end) {
        transition.end();
      }
      if (transition.break !== true) {
        runSequence(transitions, index+1);
      }
    }, transition.timeout || undefined);
  };

  /**
   * Run a sequence of transitions
   *
   * @function H5P.Transition.sequence
   * @static
   * @param {Object[]}    transitions             Array of transitions
   * @param {H5P.jQuery}  transitions[].$element  Dom element transition is performed on
   * @param {number=}     transitions[].timeout   Timeout fallback if transition end never is triggered
   * @param {bool=}       transitions[].break     If true, sequence breaks after this transition
   */
  Transition.sequence = function (transitions) {
    runSequence(transitions, 0);
  };

  return Transition;
})(H5P.jQuery);
;var H5P = H5P || {};

/**
 * Class responsible for creating a help text dialog
 */
H5P.JoubelHelpTextDialog = (function ($) {

  var numInstances = 0;
  /**
   * Display a pop-up containing a message.
   *
   * @param {H5P.jQuery}  $container  The container which message dialog will be appended to
   * @param {string}      message     The message
   * @param {string}      closeButtonTitle The title for the close button
   * @return {H5P.jQuery}
   */
  function JoubelHelpTextDialog(header, message, closeButtonTitle) {
    H5P.EventDispatcher.call(this);

    var self = this;

    numInstances++;
    var headerId = 'joubel-help-text-header-' + numInstances;
    var helpTextId = 'joubel-help-text-body-' + numInstances;

    var $helpTextDialogBox = $('<div>', {
      'class': 'joubel-help-text-dialog-box',
      'role': 'dialog',
      'aria-labelledby': headerId,
      'aria-describedby': helpTextId
    });

    $('<div>', {
      'class': 'joubel-help-text-dialog-background'
    }).appendTo($helpTextDialogBox);

    var $helpTextDialogContainer = $('<div>', {
      'class': 'joubel-help-text-dialog-container'
    }).appendTo($helpTextDialogBox);

    $('<div>', {
      'class': 'joubel-help-text-header',
      'id': headerId,
      'role': 'header',
      'html': header
    }).appendTo($helpTextDialogContainer);

    $('<div>', {
      'class': 'joubel-help-text-body',
      'id': helpTextId,
      'html': message,
      'role': 'document',
      'tabindex': 0
    }).appendTo($helpTextDialogContainer);

    var handleClose = function () {
      $helpTextDialogBox.remove();
      self.trigger('closed');
    };

    var $closeButton = $('<div>', {
      'class': 'joubel-help-text-remove',
      'role': 'button',
      'title': closeButtonTitle,
      'tabindex': 1,
      'click': handleClose,
      'keydown': function (event) {
        // 32 - space, 13 - enter
        if ([32, 13].indexOf(event.which) !== -1) {
          event.preventDefault();
          handleClose();
        }
      }
    }).appendTo($helpTextDialogContainer);

    /**
     * Get the DOM element
     * @return {HTMLElement}
     */
    self.getElement = function () {
      return $helpTextDialogBox;
    };

    self.focus = function () {
      $closeButton.focus();
    };
  }

  JoubelHelpTextDialog.prototype = Object.create(H5P.EventDispatcher.prototype);
  JoubelHelpTextDialog.prototype.constructor = JoubelHelpTextDialog;

  return JoubelHelpTextDialog;
}(H5P.jQuery));
;var H5P = H5P || {};

/**
 * Class responsible for creating auto-disappearing dialogs
 */
H5P.JoubelMessageDialog = (function ($) {

  /**
   * Display a pop-up containing a message.
   *
   * @param {H5P.jQuery} $container The container which message dialog will be appended to
   * @param {string} message The message
   * @return {H5P.jQuery}
   */
  function JoubelMessageDialog ($container, message) {
    var timeout;

    var removeDialog = function () {
      $warning.remove();
      clearTimeout(timeout);
      $container.off('click.messageDialog');
    };

    // Create warning popup:
    var $warning = $('<div/>', {
      'class': 'joubel-message-dialog',
      text: message
    }).appendTo($container);

    // Remove after 3 seconds or if user clicks anywhere in $container:
    timeout = setTimeout(removeDialog, 3000);
    $container.on('click.messageDialog', removeDialog);

    return $warning;
  }

  return JoubelMessageDialog;
})(H5P.jQuery);
;var H5P = H5P || {};

/**
 * Class responsible for creating a circular progress bar
 */

H5P.JoubelProgressCircle = (function ($) {

  /**
   * Constructor for the Progress Circle
   *
   * @param {Number} number The amount of progress to display
   * @param {string} progressColor Color for the progress meter
   * @param {string} backgroundColor Color behind the progress meter
   */
  function ProgressCircle(number, progressColor, fillColor, backgroundColor) {
    progressColor = progressColor || '#1a73d9';
    fillColor = fillColor || '#f0f0f0';
    backgroundColor = backgroundColor || '#ffffff';
    var progressColorRGB = this.hexToRgb(progressColor);

    //Verify number
    try {
      number = Number(number);
      if (number === '') {
        throw 'is empty';
      }
      if (isNaN(number)) {
        throw 'is not a number';
      }
    } catch (e) {
      number = 'err';
    }

    //Draw circle
    if (number > 100) {
      number = 100;
    }

    // We can not use rgba, since they will stack on top of each other.
    // Instead we create the equivalent of the rgba color
    // and applies this to the activeborder and background color.
    var progressColorString = 'rgb(' + parseInt(progressColorRGB.r, 10) +
      ',' + parseInt(progressColorRGB.g, 10) +
      ',' + parseInt(progressColorRGB.b, 10) + ')';

    // Circle wrapper
    var $wrapper = $('<div/>', {
      'class': "joubel-progress-circle-wrapper"
    });

    //Active border indicates progress
    var $activeBorder = $('<div/>', {
      'class': "joubel-progress-circle-active-border"
    }).appendTo($wrapper);

    //Background circle
    var $backgroundCircle = $('<div/>', {
      'class': "joubel-progress-circle-circle"
    }).appendTo($activeBorder);

    //Progress text/number
    $('<span/>', {
      'text': number + '%',
      'class': "joubel-progress-circle-percentage"
    }).appendTo($backgroundCircle);

    var deg = number * 3.6;
    if (deg <= 180) {
      $activeBorder.css('background-image',
        'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, ' + fillColor + ' 50%),' +
        'linear-gradient(90deg, ' + fillColor + ' 50%, transparent 50%)')
        .css('border', '2px solid' + backgroundColor)
        .css('background-color', progressColorString);
    } else {
      $activeBorder.css('background-image',
        'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, ' + progressColorString + ' 50%),' +
        'linear-gradient(90deg, ' + fillColor + ' 50%, transparent 50%)')
        .css('border', '2px solid' + backgroundColor)
        .css('background-color', progressColorString);
    }

    this.$activeBorder = $activeBorder;
    this.$backgroundCircle = $backgroundCircle;
    this.$wrapper = $wrapper;

    this.initResizeFunctionality();

    return $wrapper;
  }

  /**
   * Initializes resize functionality for the progress circle
   */
  ProgressCircle.prototype.initResizeFunctionality = function () {
    var self = this;

    $(window).resize(function () {
      // Queue resize
      setTimeout(function () {
        self.resize();
      });
    });

    // First resize
    setTimeout(function () {
      self.resize();
    }, 0);
  };

  /**
   * Resize function makes progress circle grow or shrink relative to parent container
   */
  ProgressCircle.prototype.resize = function () {
    var $parent = this.$wrapper.parent();

    if ($parent !== undefined && $parent) {

      // Measurements
      var fontSize = parseInt($parent.css('font-size'), 10);

      // Static sizes
      var fontSizeMultiplum = 3.75;
      var progressCircleWidthPx = parseInt((fontSize / 4.5), 10) % 2 === 0 ? parseInt((fontSize / 4.5), 10) + 4 : parseInt((fontSize / 4.5), 10) + 5;
      var progressCircleOffset = progressCircleWidthPx / 2;

      var width = fontSize * fontSizeMultiplum;
      var height = fontSize * fontSizeMultiplum;
      this.$activeBorder.css({
        'width': width,
        'height': height
      });

      this.$backgroundCircle.css({
        'width': width - progressCircleWidthPx,
        'height': height - progressCircleWidthPx,
        'top': progressCircleOffset,
        'left': progressCircleOffset
      });
    }
  };

  /**
   * Hex to RGB conversion
   * @param hex
   * @returns {{r: Number, g: Number, b: Number}}
   */
  ProgressCircle.prototype.hexToRgb = function (hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  };

  return ProgressCircle;

}(H5P.jQuery));
;var H5P = H5P || {};

H5P.SimpleRoundedButton = (function ($) {

  /**
   * Creates a new tip
   */
  function SimpleRoundedButton(text) {

    var $simpleRoundedButton = $('<div>', {
      'class': 'joubel-simple-rounded-button',
      'title': text,
      'role': 'button',
      'tabindex': '0'
    }).keydown(function (e) {
      // 32 - space, 13 - enter
      if ([32, 13].indexOf(e.which) !== -1) {
        $(this).click();
        e.preventDefault();
      }
    });

    $('<span>', {
      'class': 'joubel-simple-rounded-button-text',
      'html': text
    }).appendTo($simpleRoundedButton);

    return $simpleRoundedButton;
  }

  return SimpleRoundedButton;
}(H5P.jQuery));
;var H5P = H5P || {};

/**
 * Class responsible for creating speech bubbles
 */
H5P.JoubelSpeechBubble = (function ($) {

  var $currentSpeechBubble;
  var $currentContainer;  
  var $tail;
  var $innerTail;
  var removeSpeechBubbleTimeout;
  var currentMaxWidth;

  var DEFAULT_MAX_WIDTH = 400;

  var iDevice = navigator.userAgent.match(/iPod|iPhone|iPad/g) ? true : false;

  /**
   * Creates a new speech bubble
   *
   * @param {H5P.jQuery} $container The speaking object
   * @param {string} text The text to display
   * @param {number} maxWidth The maximum width of the bubble
   * @return {H5P.JoubelSpeechBubble}
   */
  function JoubelSpeechBubble($container, text, maxWidth) {
    maxWidth = maxWidth || DEFAULT_MAX_WIDTH;
    currentMaxWidth = maxWidth;
    $currentContainer = $container;

    this.isCurrent = function ($tip) {
      return $tip.is($currentContainer);
    };

    this.remove = function () {
      remove();
    };

    var fadeOutSpeechBubble = function ($speechBubble) {
      if (!$speechBubble) {
        return;
      }

      // Stop removing bubble
      clearTimeout(removeSpeechBubbleTimeout);

      $speechBubble.removeClass('show');
      setTimeout(function () {
        if ($speechBubble) {
          $speechBubble.remove();
          $speechBubble = undefined;
        }
      }, 500);
    };

    if ($currentSpeechBubble !== undefined) {
      remove();
    }

    var $h5pContainer = getH5PContainer($container);

    // Make sure we fade out old speech bubble
    fadeOutSpeechBubble($currentSpeechBubble);

    // Create bubble
    $tail = $('<div class="joubel-speech-bubble-tail"></div>');
    $innerTail = $('<div class="joubel-speech-bubble-inner-tail"></div>');
    var $innerBubble = $(
      '<div class="joubel-speech-bubble-inner">' +
      '<div class="joubel-speech-bubble-text">' + text + '</div>' +
      '</div>'
    ).prepend($innerTail);

    $currentSpeechBubble = $(
      '<div class="joubel-speech-bubble" aria-live="assertive">'
    ).append([$tail, $innerBubble])
      .appendTo($h5pContainer);

    // Show speech bubble with transition
    setTimeout(function () {
      $currentSpeechBubble.addClass('show');
    }, 0);

    position($currentSpeechBubble, $currentContainer, maxWidth, $tail, $innerTail);

    // Handle click to close
    H5P.$body.on('mousedown.speechBubble', handleOutsideClick);

    // Handle window resizing
    H5P.$window.on('resize', '', handleResize);

    // Handle clicks when inside IV which blocks bubbling.
    $container.parents('.h5p-dialog')
      .on('mousedown.speechBubble', handleOutsideClick);

    if (iDevice) {
      H5P.$body.css('cursor', 'pointer');
    }

    return this;
  }

  // Remove speechbubble if it belongs to a dom element that is about to be hidden
  H5P.externalDispatcher.on('domHidden', function (event) {
    if ($currentSpeechBubble !== undefined && event.data.$dom.find($currentContainer).length !== 0) {
      remove();
    }
  });

  /**
   * Returns the closest h5p container for the given DOM element.
   * 
   * @param {object} $container jquery element
   * @return {object} the h5p container (jquery element)
   */
  function getH5PContainer($container) {
    var $h5pContainer = $container.closest('.h5p-frame');

    // Check closest h5p frame first, then check for container in case there is no frame.
    if (!$h5pContainer.length) {
      $h5pContainer = $container.closest('.h5p-container');
    }

    return $h5pContainer;
  }

  /**
   * Event handler that is called when the window is resized.
   */
  function handleResize() {
    position($currentSpeechBubble, $currentContainer, currentMaxWidth, $tail, $innerTail);
  }

  /**
   * Repositions the speech bubble according to the position of the container.
   * 
   * @param {object} $currentSpeechbubble the speech bubble that should be positioned   
   * @param {object} $container the container to which the speech bubble should point 
   * @param {number} maxWidth the maximum width of the speech bubble
   * @param {object} $tail the tail (the triangle that points to the referenced container)
   * @param {object} $innerTail the inner tail (the triangle that points to the referenced container)
   */
  function position($currentSpeechBubble, $container, maxWidth, $tail, $innerTail) {
    var $h5pContainer = getH5PContainer($container);

    // Calculate offset between the button and the h5p frame
    var offset = getOffsetBetween($h5pContainer, $container);

    var direction = (offset.bottom > offset.top ? 'bottom' : 'top');
    var tipWidth = offset.outerWidth * 0.9; // Var needs to be renamed to make sense
    var bubbleWidth = tipWidth > maxWidth ? maxWidth : tipWidth;

    var bubblePosition = getBubblePosition(bubbleWidth, offset);
    var tailPosition = getTailPosition(bubbleWidth, bubblePosition, offset, $container.width());
    // Need to set font-size, since element is appended to body.
    // Using same font-size as parent. In that way it will grow accordingly
    // when resizing
    var fontSize = 16;//parseFloat($parent.css('font-size'));

    // Set width and position of speech bubble
    $currentSpeechBubble.css(bubbleCSS(
      direction,
      bubbleWidth,
      bubblePosition,
      fontSize
    ));

    var preparedTailCSS = tailCSS(direction, tailPosition);
    $tail.css(preparedTailCSS);
    $innerTail.css(preparedTailCSS);
  }

  /**
   * Static function for removing the speechbubble
   */
  var remove = function () {
    H5P.$body.off('mousedown.speechBubble');
    H5P.$window.off('resize', '', handleResize);
    $currentContainer.parents('.h5p-dialog').off('mousedown.speechBubble');
    if (iDevice) {
      H5P.$body.css('cursor', '');
    }
    if ($currentSpeechBubble !== undefined) {
      // Apply transition, then remove speech bubble
      $currentSpeechBubble.removeClass('show');

      // Make sure we remove any old timeout before reassignment
      clearTimeout(removeSpeechBubbleTimeout);
      removeSpeechBubbleTimeout = setTimeout(function () {
        $currentSpeechBubble.remove();
        $currentSpeechBubble = undefined;
      }, 500);
    }
    // Don't return false here. If the user e.g. clicks a button when the bubble is visible,
    // we want the bubble to disapear AND the button to receive the event
  };

  /**
   * Remove the speech bubble and container reference
   */
  function handleOutsideClick(event) {
    if (event.target === $currentContainer[0]) {
      return; // Button clicks are not outside clicks
    }

    remove();
    // There is no current container when a container isn't clicked
    $currentContainer = undefined;
  }

  /**
   * Calculate position for speech bubble
   *
   * @param {number} bubbleWidth The width of the speech bubble
   * @param {object} offset
   * @return {object} Return position for the speech bubble
   */
  function getBubblePosition(bubbleWidth, offset) {
    var bubblePosition = {};

    var tailOffset = 9;
    var widthOffset = bubbleWidth / 2;

    // Calculate top position
    bubblePosition.top = offset.top + offset.innerHeight;

    // Calculate bottom position
    bubblePosition.bottom = offset.bottom + offset.innerHeight + tailOffset;

    // Calculate left position
    if (offset.left < widthOffset) {
      bubblePosition.left = 3;
    }
    else if ((offset.left + widthOffset) > offset.outerWidth) {
      bubblePosition.left = offset.outerWidth - bubbleWidth - 3;
    }
    else {
      bubblePosition.left = offset.left - widthOffset + (offset.innerWidth / 2);
    }

    return bubblePosition;
  }

  /**
   * Calculate position for speech bubble tail
   *
   * @param {number} bubbleWidth The width of the speech bubble
   * @param {object} bubblePosition Speech bubble position
   * @param {object} offset
   * @param {number} iconWidth The width of the tip icon
   * @return {object} Return position for the tail
   */
  function getTailPosition(bubbleWidth, bubblePosition, offset, iconWidth) {
    var tailPosition = {};
    // Magic numbers. Tuned by hand so that the tail fits visually within
    // the bounds of the speech bubble.
    var leftBoundary = 9;
    var rightBoundary = bubbleWidth - 20;

    tailPosition.left = offset.left - bubblePosition.left + (iconWidth / 2) - 6;
    if (tailPosition.left < leftBoundary) {
      tailPosition.left = leftBoundary;
    }
    if (tailPosition.left > rightBoundary) {
      tailPosition.left = rightBoundary;
    }

    tailPosition.top = -6;
    tailPosition.bottom = -6;

    return tailPosition;
  }

  /**
   * Return bubble CSS for the desired growth direction
   *
   * @param {string} direction The direction the speech bubble will grow
   * @param {number} width The width of the speech bubble
   * @param {object} position Speech bubble position
   * @param {number} fontSize The size of the bubbles font
   * @return {object} Return CSS
   */
  function bubbleCSS(direction, width, position, fontSize) {
    if (direction === 'top') {
      return {
        width: width + 'px',
        bottom: position.bottom + 'px',
        left: position.left + 'px',
        fontSize: fontSize + 'px',
        top: ''
      };
    }
    else {
      return {
        width: width + 'px',
        top: position.top + 'px',
        left: position.left + 'px',
        fontSize: fontSize + 'px',
        bottom: ''
      };
    }
  }

  /**
   * Return tail CSS for the desired growth direction
   *
   * @param {string} direction The direction the speech bubble will grow
   * @param {object} position Tail position
   * @return {object} Return CSS
   */
  function tailCSS(direction, position) {
    if (direction === 'top') {
      return {
        bottom: position.bottom + 'px',
        left: position.left + 'px',
        top: ''
      };
    }
    else {
      return {
        top: position.top + 'px',
        left: position.left + 'px',
        bottom: ''
      };
    }
  }

  /**
   * Calculates the offset between an element inside a container and the
   * container. Only works if all the edges of the inner element are inside the
   * outer element.
   * Width/height of the elements is included as a convenience.
   *
   * @param {H5P.jQuery} $outer
   * @param {H5P.jQuery} $inner
   * @return {object} Position offset
   */
  function getOffsetBetween($outer, $inner) {
    var outer = $outer[0].getBoundingClientRect();
    var inner = $inner[0].getBoundingClientRect();

    return {
      top: inner.top - outer.top,
      right: outer.right - inner.right,
      bottom: outer.bottom - inner.bottom,
      left: inner.left - outer.left,
      innerWidth: inner.width,
      innerHeight: inner.height,
      outerWidth: outer.width,
      outerHeight: outer.height
    };
  }

  return JoubelSpeechBubble;
})(H5P.jQuery);
;var H5P = H5P || {};

H5P.JoubelThrobber = (function ($) {

  /**
   * Creates a new tip
   */
  function JoubelThrobber() {

    // h5p-throbber css is described in core
    var $throbber = $('<div/>', {
      'class': 'h5p-throbber'
    });

    return $throbber;
  }

  return JoubelThrobber;
}(H5P.jQuery));
;H5P.JoubelTip = (function ($) {
  var $conv = $('<div/>');

  /**
   * Creates a new tip element.
   *
   * NOTE that this may look like a class but it doesn't behave like one.
   * It returns a jQuery object.
   *
   * @param {string} tipHtml The text to display in the popup
   * @param {Object} [behaviour] Options
   * @param {string} [behaviour.tipLabel] Set to use a custom label for the tip button (you want this for good A11Y)
   * @param {boolean} [behaviour.helpIcon] Set to 'true' to Add help-icon classname to Tip button (changes the icon)
   * @param {boolean} [behaviour.showSpeechBubble] Set to 'false' to disable functionality (you may this in the editor)
   * @param {boolean} [behaviour.tabcontrol] Set to 'true' if you plan on controlling the tabindex in the parent (tabindex="-1")
   * @return {H5P.jQuery|undefined} Tip button jQuery element or 'undefined' if invalid tip
   */
  function JoubelTip(tipHtml, behaviour) {

    // Keep track of the popup that appears when you click the Tip button
    var speechBubble;

    // Parse tip html to determine text
    var tipText = $conv.html(tipHtml).text().trim();
    if (tipText === '') {
      return; // The tip has no textual content, i.e. it's invalid.
    }

    // Set default behaviour
    behaviour = $.extend({
      tipLabel: tipText,
      helpIcon: false,
      showSpeechBubble: true,
      tabcontrol: false
    }, behaviour);

    // Create Tip button
    var $tipButton = $('<div/>', {
      class: 'joubel-tip-container' + (behaviour.showSpeechBubble ? '' : ' be-quiet'),
      'aria-label': behaviour.tipLabel,
      'aria-expanded': false,
      role: 'button',
      tabindex: (behaviour.tabcontrol ? -1 : 0),
      click: function (event) {
        // Toggle show/hide popup
        toggleSpeechBubble();
        event.preventDefault();
      },
      keydown: function (event) {
        if (event.which === 32 || event.which === 13) { // Space & enter key
          // Toggle show/hide popup
          toggleSpeechBubble();
          event.stopPropagation();
          event.preventDefault();
        }
        else { // Any other key
          // Toggle hide popup
          toggleSpeechBubble(false);
        }
      },
      // Add markup to render icon
      html: '<span class="joubel-icon-tip-normal ' + (behaviour.helpIcon ? ' help-icon': '') + '">' +
              '<span class="h5p-icon-shadow"></span>' +
              '<span class="h5p-icon-speech-bubble"></span>' +
              '<span class="h5p-icon-info"></span>' +
            '</span>'
      // IMPORTANT: All of the markup elements must have 'pointer-events: none;'
    });

    const $tipAnnouncer = $('<div>', {
      'class': 'hidden-but-read',
      'aria-live': 'polite',
      appendTo: $tipButton,
    });

    /**
     * Tip button interaction handler.
     * Toggle show or hide the speech bubble popup when interacting with the
     * Tip button.
     *
     * @private
     * @param {boolean} [force] 'true' shows and 'false' hides.
     */
    var toggleSpeechBubble = function (force) {
      if (speechBubble !== undefined && speechBubble.isCurrent($tipButton)) {
        // Hide current popup
        speechBubble.remove();
        speechBubble = undefined;

        $tipButton.attr('aria-expanded', false);
        $tipAnnouncer.html('');
      }
      else if (force !== false && behaviour.showSpeechBubble) {
        // Create and show new popup
        speechBubble = H5P.JoubelSpeechBubble($tipButton, tipHtml);
        $tipButton.attr('aria-expanded', true);
        $tipAnnouncer.html(tipHtml);
      }
    };

    return $tipButton;
  }

  return JoubelTip;
})(H5P.jQuery);
;var H5P = H5P || {};

H5P.JoubelSlider = (function ($) {

  /**
   * Creates a new Slider
   *
   * @param {object} [params] Additional parameters
   */
  function JoubelSlider(params) {
    H5P.EventDispatcher.call(this);

    this.$slider = $('<div>', $.extend({
      'class': 'h5p-joubel-ui-slider'
    }, params));

    this.$slides = [];
    this.currentIndex = 0;
    this.numSlides = 0;
  }
  JoubelSlider.prototype = Object.create(H5P.EventDispatcher.prototype);
  JoubelSlider.prototype.constructor = JoubelSlider;

  JoubelSlider.prototype.addSlide = function ($content) {
    $content.addClass('h5p-joubel-ui-slide').css({
      'left': (this.numSlides*100) + '%'
    });
    this.$slider.append($content);
    this.$slides.push($content);

    this.numSlides++;

    if(this.numSlides === 1) {
      $content.addClass('current');
    }
  };

  JoubelSlider.prototype.attach = function ($container) {
    $container.append(this.$slider);
  };

  JoubelSlider.prototype.move = function (index) {
    var self = this;

    if(index === 0) {
      self.trigger('first-slide');
    }
    if(index+1 === self.numSlides) {
      self.trigger('last-slide');
    }
    self.trigger('move');

    var $previousSlide = self.$slides[this.currentIndex];
    H5P.Transition.onTransitionEnd(this.$slider, function () {
      $previousSlide.removeClass('current');
      self.trigger('moved');
    });
    this.$slides[index].addClass('current');

    var translateX = 'translateX(' + (-index*100) + '%)';
    this.$slider.css({
      '-webkit-transform': translateX,
      '-moz-transform': translateX,
      '-ms-transform': translateX,
      'transform': translateX
    });

    this.currentIndex = index;
  };

  JoubelSlider.prototype.remove = function () {
    this.$slider.remove();
  };

  JoubelSlider.prototype.next = function () {
    if(this.currentIndex+1 >= this.numSlides) {
      return;
    }

    this.move(this.currentIndex+1);
  };

  JoubelSlider.prototype.previous = function () {
    this.move(this.currentIndex-1);
  };

  JoubelSlider.prototype.first = function () {
    this.move(0);
  };

  JoubelSlider.prototype.last = function () {
    this.move(this.numSlides-1);
  };

  return JoubelSlider;
})(H5P.jQuery);
;var H5P = H5P || {};

/**
 * @module
 */
H5P.JoubelScoreBar = (function ($) {

  /* Need to use an id for the star SVG since that is the only way to reference
     SVG filters  */
  var idCounter = 0;

  /**
   * Creates a score bar
   * @class H5P.JoubelScoreBar
   * @param {number} maxScore  Maximum score
   * @param {string} [label] Makes it easier for readspeakers to identify the scorebar
   * @param {string} [helpText] Score explanation
   * @param {string} [scoreExplanationButtonLabel] Label for score explanation button
   */
  function JoubelScoreBar(maxScore, label, helpText, scoreExplanationButtonLabel) {
    var self = this;

    self.maxScore = maxScore;
    self.score = 0;
    idCounter++;

    /**
     * @const {string}
     */
    self.STAR_MARKUP = '<svg tabindex="-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.77 53.87" aria-hidden="true" focusable="false">' +
        '<title>star</title>' +
        '<filter tabindex="-1" id="h5p-joubelui-score-bar-star-inner-shadow-' + idCounter + '" x0="-50%" y0="-50%" width="200%" height="200%">' +
          '<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"></feGaussianBlur>' +
          '<feOffset dy="2" dx="4"></feOffset>' +
          '<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>' +
          '<feFlood flood-color="#ffe95c" flood-opacity="1"></feFlood>' +
          '<feComposite in2="shadowDiff" operator="in"></feComposite>' +
          '<feComposite in2="SourceGraphic" operator="over" result="firstfilter"></feComposite>' +
          '<feGaussianBlur in="firstfilter" stdDeviation="3" result="blur2"></feGaussianBlur>' +
          '<feOffset dy="-2" dx="-4"></feOffset>' +
          '<feComposite in2="firstfilter" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>' +
          '<feFlood flood-color="#ffe95c" flood-opacity="1"></feFlood>' +
          '<feComposite in2="shadowDiff" operator="in"></feComposite>' +
          '<feComposite in2="firstfilter" operator="over"></feComposite>' +
        '</filter>' +
        '<path tabindex="-1" class="h5p-joubelui-score-bar-star-shadow" d="M35.08,43.41V9.16H20.91v0L9.51,10.85,9,10.93C2.8,12.18,0,17,0,21.25a11.22,11.22,0,0,0,3,7.48l8.73,8.53-1.07,6.16Z"/>' +
        '<g tabindex="-1">' +
          '<path tabindex="-1" class="h5p-joubelui-score-bar-star-border" d="M61.36,22.8,49.72,34.11l2.78,16a2.6,2.6,0,0,1,.05.64c0,.85-.37,1.6-1.33,1.6A2.74,2.74,0,0,1,49.94,52L35.58,44.41,21.22,52a2.93,2.93,0,0,1-1.28.37c-.91,0-1.33-.75-1.33-1.6,0-.21.05-.43.05-.64l2.78-16L9.8,22.8A2.57,2.57,0,0,1,9,21.25c0-1,1-1.33,1.81-1.49l16.07-2.35L34.09,2.83c.27-.59.85-1.33,1.55-1.33s1.28.69,1.55,1.33l7.21,14.57,16.07,2.35c.75.11,1.81.53,1.81,1.49A3.07,3.07,0,0,1,61.36,22.8Z"/>' +
          '<path tabindex="-1" class="h5p-joubelui-score-bar-star-fill" d="M61.36,22.8,49.72,34.11l2.78,16a2.6,2.6,0,0,1,.05.64c0,.85-.37,1.6-1.33,1.6A2.74,2.74,0,0,1,49.94,52L35.58,44.41,21.22,52a2.93,2.93,0,0,1-1.28.37c-.91,0-1.33-.75-1.33-1.6,0-.21.05-.43.05-.64l2.78-16L9.8,22.8A2.57,2.57,0,0,1,9,21.25c0-1,1-1.33,1.81-1.49l16.07-2.35L34.09,2.83c.27-.59.85-1.33,1.55-1.33s1.28.69,1.55,1.33l7.21,14.57,16.07,2.35c.75.11,1.81.53,1.81,1.49A3.07,3.07,0,0,1,61.36,22.8Z"/>' +
          '<path tabindex="-1" filter="url(#h5p-joubelui-score-bar-star-inner-shadow-' + idCounter + ')" class="h5p-joubelui-score-bar-star-fill-full-score" d="M61.36,22.8,49.72,34.11l2.78,16a2.6,2.6,0,0,1,.05.64c0,.85-.37,1.6-1.33,1.6A2.74,2.74,0,0,1,49.94,52L35.58,44.41,21.22,52a2.93,2.93,0,0,1-1.28.37c-.91,0-1.33-.75-1.33-1.6,0-.21.05-.43.05-.64l2.78-16L9.8,22.8A2.57,2.57,0,0,1,9,21.25c0-1,1-1.33,1.81-1.49l16.07-2.35L34.09,2.83c.27-.59.85-1.33,1.55-1.33s1.28.69,1.55,1.33l7.21,14.57,16.07,2.35c.75.11,1.81.53,1.81,1.49A3.07,3.07,0,0,1,61.36,22.8Z"/>' +
        '</g>' +
      '</svg>';

    /**
     * @function appendTo
     * @memberOf H5P.JoubelScoreBar#
     * @param {H5P.jQuery}  $wrapper  Dom container
     */
    self.appendTo = function ($wrapper) {
      self.$scoreBar.appendTo($wrapper);
    };

    /**
     * Create the text representation of the scorebar .
     *
     * @private
     * @return {string}
     */
    var createLabel = function (score) {
      if (!label) {
        return '';
      }

      return label.replace(':num', score).replace(':total', self.maxScore);
    };

    /**
     * Creates the html for this widget
     *
     * @method createHtml
     * @private
     */
    var createHtml = function () {
      // Container div
      self.$scoreBar = $('<div>', {
        'class': 'h5p-joubelui-score-bar',
      });

      var $visuals = $('<div>', {
        'class': 'h5p-joubelui-score-bar-visuals',
        appendTo: self.$scoreBar
      });

      // The progress bar wrapper
      self.$progressWrapper = $('<div>', {
        'class': 'h5p-joubelui-score-bar-progress-wrapper',
        appendTo: $visuals
      });

      self.$progress = $('<div>', {
        'class': 'h5p-joubelui-score-bar-progress',
        'html': createLabel(self.score),
        appendTo: self.$progressWrapper
      });

      // The star
      $('<div>', {
        'class': 'h5p-joubelui-score-bar-star',
        html: self.STAR_MARKUP
      }).appendTo($visuals);

      // The score container
      var $numerics = $('<div>', {
        'class': 'h5p-joubelui-score-numeric',
        appendTo: self.$scoreBar,
        'aria-hidden': true
      });

      // The current score
      self.$scoreCounter = $('<span>', {
        'class': 'h5p-joubelui-score-number h5p-joubelui-score-number-counter',
        text: 0,
        appendTo: $numerics
      });

      // The separator
      $('<span>', {
        'class': 'h5p-joubelui-score-number-separator',
        text: '/',
        appendTo: $numerics
      });

      // Max score
      self.$maxScore = $('<span>', {
        'class': 'h5p-joubelui-score-number h5p-joubelui-score-max',
        text: self.maxScore,
        appendTo: $numerics
      });

      if (helpText) {
        H5P.JoubelUI.createTip(helpText, {
          tipLabel: scoreExplanationButtonLabel ? scoreExplanationButtonLabel : helpText,
          helpIcon: true
        }).appendTo(self.$scoreBar);
        self.$scoreBar.addClass('h5p-score-bar-has-help');
      }
    };

    /**
     * Set the current score
     * @method setScore
     * @memberOf H5P.JoubelScoreBar#
     * @param  {number} score
     */
    self.setScore = function (score) {
      // Do nothing if score hasn't changed
      if (score === self.score) {
        return;
      }
      self.score = score > self.maxScore ? self.maxScore : score;
      self.updateVisuals();
    };

    /**
     * Increment score
     * @method incrementScore
     * @memberOf H5P.JoubelScoreBar#
     * @param  {number=}        incrementBy Optional parameter, defaults to 1
     */
    self.incrementScore = function (incrementBy) {
      self.setScore(self.score + (incrementBy || 1));
    };

    /**
     * Set the max score
     * @method setMaxScore
     * @memberOf H5P.JoubelScoreBar#
     * @param  {number}    maxScore The max score
     */
    self.setMaxScore = function (maxScore) {
      self.maxScore = maxScore;
    };

    /**
     * Updates the progressbar visuals
     * @memberOf H5P.JoubelScoreBar#
     * @method updateVisuals
     */
    self.updateVisuals = function () {
      self.$progress.html(createLabel(self.score));
      self.$scoreCounter.text(self.score);
      self.$maxScore.text(self.maxScore);

      setTimeout(function () {
        // Start the progressbar animation
        self.$progress.css({
          width: ((self.score / self.maxScore) * 100) + '%'
        });

        H5P.Transition.onTransitionEnd(self.$progress, function () {
          // If fullscore fill the star and start the animation
          self.$scoreBar.toggleClass('h5p-joubelui-score-bar-full-score', self.score === self.maxScore);
          self.$scoreBar.toggleClass('h5p-joubelui-score-bar-animation-active', self.score === self.maxScore);

          // Only allow the star animation to run once
          self.$scoreBar.one("animationend", function() {
            self.$scoreBar.removeClass("h5p-joubelui-score-bar-animation-active");
          });
        }, 600);
      }, 300);
    };

    /**
     * Removes all classes
     * @method reset
     */
    self.reset = function () {
      self.$scoreBar.removeClass('h5p-joubelui-score-bar-full-score');
    };

    createHtml();
  }

  return JoubelScoreBar;
})(H5P.jQuery);
;var H5P = H5P || {};

H5P.JoubelProgressbar = (function ($) {

  /**
   * Joubel progressbar class
   * @method JoubelProgressbar
   * @constructor
   * @param  {number}          steps Number of steps
   * @param {Object} [options] Additional options
   * @param {boolean} [options.disableAria] Disable readspeaker assistance
   * @param {string} [options.progressText] A progress text for describing
   *  current progress out of total progress for readspeakers.
   *  e.g. "Slide :num of :total"
   */
  function JoubelProgressbar(steps, options) {
    H5P.EventDispatcher.call(this);
    var self = this;
    this.options = $.extend({
      progressText: 'Slide :num of :total'
    }, options);
    this.currentStep = 0;
    this.steps = steps;

    this.$progressbar = $('<div>', {
      'class': 'h5p-joubelui-progressbar'
    });
    this.$background = $('<div>', {
      'class': 'h5p-joubelui-progressbar-background'
    }).appendTo(this.$progressbar);
  }

  JoubelProgressbar.prototype = Object.create(H5P.EventDispatcher.prototype);
  JoubelProgressbar.prototype.constructor = JoubelProgressbar;

  JoubelProgressbar.prototype.updateAria = function () {
    var self = this;
    if (this.options.disableAria) {
      return;
    }

    if (!this.$currentStatus) {
      this.$currentStatus = $('<div>', {
        'class': 'h5p-joubelui-progressbar-slide-status-text',
        'aria-live': 'assertive'
      }).appendTo(this.$progressbar);
    }
    var interpolatedProgressText = self.options.progressText
      .replace(':num', self.currentStep)
      .replace(':total', self.steps);
    this.$currentStatus.html(interpolatedProgressText);
  };

  /**
   * Appends to a container
   * @method appendTo
   * @param  {H5P.jquery} $container
   */
  JoubelProgressbar.prototype.appendTo = function ($container) {
    this.$progressbar.appendTo($container);
  };

  /**
   * Update progress
   * @method setProgress
   * @param  {number}    step
   */
  JoubelProgressbar.prototype.setProgress = function (step) {
    // Check for valid value:
    if (step > this.steps || step < 0) {
      return;
    }
    this.currentStep = step;
    this.$background.css({
      width: ((this.currentStep/this.steps)*100) + '%'
    });

    this.updateAria();
  };

  /**
   * Increment progress with 1
   * @method next
   */
  JoubelProgressbar.prototype.next = function () {
    this.setProgress(this.currentStep+1);
  };

  /**
   * Reset progressbar
   * @method reset
   */
  JoubelProgressbar.prototype.reset = function () {
    this.setProgress(0);
  };

  /**
   * Check if last step is reached
   * @method isLastStep
   * @return {Boolean}
   */
  JoubelProgressbar.prototype.isLastStep = function () {
    return this.steps === this.currentStep;
  };

  return JoubelProgressbar;
})(H5P.jQuery);
;var H5P = H5P || {};

/**
 * H5P Joubel UI library.
 *
 * This is a utility library, which does not implement attach. I.e, it has to bee actively used by
 * other libraries
 * @module
 */
H5P.JoubelUI = (function ($) {

  /**
   * The internal object to return
   * @class H5P.JoubelUI
   * @static
   */
  function JoubelUI() {}

  /* Public static functions */

  /**
   * Create a tip icon
   * @method H5P.JoubelUI.createTip
   * @param  {string}  text   The textual tip
   * @param  {Object}  params Parameters
   * @return {H5P.JoubelTip}
   */
  JoubelUI.createTip = function (text, params) {
    return new H5P.JoubelTip(text, params);
  };

  /**
   * Create message dialog
   * @method H5P.JoubelUI.createMessageDialog
   * @param  {H5P.jQuery}               $container The dom container
   * @param  {string}                   message    The message
   * @return {H5P.JoubelMessageDialog}
   */
  JoubelUI.createMessageDialog = function ($container, message) {
    return new H5P.JoubelMessageDialog($container, message);
  };

  /**
   * Create help text dialog
   * @method H5P.JoubelUI.createHelpTextDialog
   * @param  {string}             header  The textual header
   * @param  {string}             message The textual message
   * @param  {string}             closeButtonTitle The title for the close button
   * @return {H5P.JoubelHelpTextDialog}
   */
  JoubelUI.createHelpTextDialog = function (header, message, closeButtonTitle) {
    return new H5P.JoubelHelpTextDialog(header, message, closeButtonTitle);
  };

  /**
   * Create progress circle
   * @method H5P.JoubelUI.createProgressCircle
   * @param  {number}             number          The progress (0 to 100)
   * @param  {string}             progressColor   The progress color in hex value
   * @param  {string}             fillColor       The fill color in hex value
   * @param  {string}             backgroundColor The background color in hex value
   * @return {H5P.JoubelProgressCircle}
   */
  JoubelUI.createProgressCircle = function (number, progressColor, fillColor, backgroundColor) {
    return new H5P.JoubelProgressCircle(number, progressColor, fillColor, backgroundColor);
  };

  /**
   * Create throbber for loading
   * @method H5P.JoubelUI.createThrobber
   * @return {H5P.JoubelThrobber}
   */
  JoubelUI.createThrobber = function () {
    return new H5P.JoubelThrobber();
  };

  /**
   * Create simple rounded button
   * @method H5P.JoubelUI.createSimpleRoundedButton
   * @param  {string}                  text The button label
   * @return {H5P.SimpleRoundedButton}
   */
  JoubelUI.createSimpleRoundedButton = function (text) {
    return new H5P.SimpleRoundedButton(text);
  };

  /**
   * Create Slider
   * @method H5P.JoubelUI.createSlider
   * @param  {Object} [params] Parameters
   * @return {H5P.JoubelSlider}
   */
  JoubelUI.createSlider = function (params) {
    return new H5P.JoubelSlider(params);
  };

  /**
   * Create Score Bar
   * @method H5P.JoubelUI.createScoreBar
   * @param  {number=}       maxScore The maximum score
   * @param {string} [label] Makes it easier for readspeakers to identify the scorebar
   * @return {H5P.JoubelScoreBar}
   */
  JoubelUI.createScoreBar = function (maxScore, label, helpText, scoreExplanationButtonLabel) {
    return new H5P.JoubelScoreBar(maxScore, label, helpText, scoreExplanationButtonLabel);
  };

  /**
   * Create Progressbar
   * @method H5P.JoubelUI.createProgressbar
   * @param  {number=}       numSteps The total numer of steps
   * @param {Object} [options] Additional options
   * @param {boolean} [options.disableAria] Disable readspeaker assistance
   * @param {string} [options.progressText] A progress text for describing
   *  current progress out of total progress for readspeakers.
   *  e.g. "Slide :num of :total"
   * @return {H5P.JoubelProgressbar}
   */
  JoubelUI.createProgressbar = function (numSteps, options) {
    return new H5P.JoubelProgressbar(numSteps, options);
  };

  /**
   * Create standard Joubel button
   *
   * @method H5P.JoubelUI.createButton
   * @param {object} params
   *  May hold any properties allowed by jQuery. If href is set, an A tag
   *  is used, if not a button tag is used.
   * @return {H5P.jQuery} The jquery element created
   */
  JoubelUI.createButton = function(params) {
    var type = 'button';
    if (params.href) {
      type = 'a';
    }
    else {
      params.type = 'button';
    }
    if (params.class) {
      params.class += ' h5p-joubelui-button';
    }
    else {
      params.class = 'h5p-joubelui-button';
    }
    return $('<' + type + '/>', params);
  };

  /**
   * Fix for iframe scoll bug in IOS. When focusing an element that doesn't have
   * focus support by default the iframe will scroll the parent frame so that
   * the focused element is out of view. This varies dependening on the elements
   * of the parent frame.
   */
  if (H5P.isFramed && !H5P.hasiOSiframeScrollFix &&
      /iPad|iPhone|iPod/.test(navigator.userAgent)) {
    H5P.hasiOSiframeScrollFix = true;

    // Keep track of original focus function
    var focus = HTMLElement.prototype.focus;

    // Override the original focus
    HTMLElement.prototype.focus = function () {
      // Only focus the element if it supports it natively
      if ( (this instanceof HTMLAnchorElement ||
            this instanceof HTMLInputElement ||
            this instanceof HTMLSelectElement ||
            this instanceof HTMLTextAreaElement ||
            this instanceof HTMLButtonElement ||
            this instanceof HTMLIFrameElement ||
            this instanceof HTMLAreaElement) && // HTMLAreaElement isn't supported by Safari yet.
          !this.getAttribute('role')) { // Focus breaks if a different role has been set
          // In theory this.isContentEditable should be able to recieve focus,
          // but it didn't work when tested.

        // Trigger the original focus with the proper context
        focus.call(this);
      }
    };
  }

  return JoubelUI;
})(H5P.jQuery);
;/*! For license information please see h5p-interactive-book.js.LICENSE.txt */
(()=>{var t={880:t=>{"use strict";t.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}},250:(t,e,s)=>{var a=s(880),r=s(852),i=Object.hasOwnProperty,n=Object.create(null);for(var o in a)i.call(a,o)&&(n[a[o]]=o);var c=t.exports={to:{},get:{}};function h(t,e,s){return Math.min(Math.max(e,t),s)}function l(t){var e=Math.round(t).toString(16).toUpperCase();return e.length<2?"0"+e:e}c.get=function(t){var e,s;switch(t.substring(0,3).toLowerCase()){case"hsl":e=c.get.hsl(t),s="hsl";break;case"hwb":e=c.get.hwb(t),s="hwb";break;default:e=c.get.rgb(t),s="rgb"}return e?{model:s,value:e}:null},c.get.rgb=function(t){if(!t)return null;var e,s,r,n=[0,0,0,1];if(e=t.match(/^#([a-f0-9]{6})([a-f0-9]{2})?$/i)){for(r=e[2],e=e[1],s=0;s<3;s++){var o=2*s;n[s]=parseInt(e.slice(o,o+2),16)}r&&(n[3]=parseInt(r,16)/255)}else if(e=t.match(/^#([a-f0-9]{3,4})$/i)){for(r=(e=e[1])[3],s=0;s<3;s++)n[s]=parseInt(e[s]+e[s],16);r&&(n[3]=parseInt(r+r,16)/255)}else if(e=t.match(/^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/)){for(s=0;s<3;s++)n[s]=parseInt(e[s+1],0);e[4]&&(e[5]?n[3]=.01*parseFloat(e[4]):n[3]=parseFloat(e[4]))}else{if(!(e=t.match(/^rgba?\(\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/)))return(e=t.match(/^(\w+)$/))?"transparent"===e[1]?[0,0,0,0]:i.call(a,e[1])?((n=a[e[1]])[3]=1,n):null:null;for(s=0;s<3;s++)n[s]=Math.round(2.55*parseFloat(e[s+1]));e[4]&&(e[5]?n[3]=.01*parseFloat(e[4]):n[3]=parseFloat(e[4]))}for(s=0;s<3;s++)n[s]=h(n[s],0,255);return n[3]=h(n[3],0,1),n},c.get.hsl=function(t){if(!t)return null;var e=t.match(/^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/);if(e){var s=parseFloat(e[4]);return[(parseFloat(e[1])%360+360)%360,h(parseFloat(e[2]),0,100),h(parseFloat(e[3]),0,100),h(isNaN(s)?1:s,0,1)]}return null},c.get.hwb=function(t){if(!t)return null;var e=t.match(/^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/);if(e){var s=parseFloat(e[4]);return[(parseFloat(e[1])%360+360)%360,h(parseFloat(e[2]),0,100),h(parseFloat(e[3]),0,100),h(isNaN(s)?1:s,0,1)]}return null},c.to.hex=function(){var t=r(arguments);return"#"+l(t[0])+l(t[1])+l(t[2])+(t[3]<1?l(Math.round(255*t[3])):"")},c.to.rgb=function(){var t=r(arguments);return t.length<4||1===t[3]?"rgb("+Math.round(t[0])+", "+Math.round(t[1])+", "+Math.round(t[2])+")":"rgba("+Math.round(t[0])+", "+Math.round(t[1])+", "+Math.round(t[2])+", "+t[3]+")"},c.to.rgb.percent=function(){var t=r(arguments),e=Math.round(t[0]/255*100),s=Math.round(t[1]/255*100),a=Math.round(t[2]/255*100);return t.length<4||1===t[3]?"rgb("+e+"%, "+s+"%, "+a+"%)":"rgba("+e+"%, "+s+"%, "+a+"%, "+t[3]+")"},c.to.hsl=function(){var t=r(arguments);return t.length<4||1===t[3]?"hsl("+t[0]+", "+t[1]+"%, "+t[2]+"%)":"hsla("+t[0]+", "+t[1]+"%, "+t[2]+"%, "+t[3]+")"},c.to.hwb=function(){var t=r(arguments),e="";return t.length>=4&&1!==t[3]&&(e=", "+t[3]),"hwb("+t[0]+", "+t[1]+"%, "+t[2]+"%"+e+")"},c.to.keyword=function(t){return n[t.slice(0,3)]}},308:(t,e,s)=>{const a=s(250),r=s(349),i=["keyword","gray","hex"],n={};for(const t of Object.keys(r))n[[...r[t].labels].sort().join("")]=t;const o={};function c(t,e){if(!(this instanceof c))return new c(t,e);if(e&&e in i&&(e=null),e&&!(e in r))throw new Error("Unknown model: "+e);let s,h;if(null==t)this.model="rgb",this.color=[0,0,0],this.valpha=1;else if(t instanceof c)this.model=t.model,this.color=[...t.color],this.valpha=t.valpha;else if("string"==typeof t){const e=a.get(t);if(null===e)throw new Error("Unable to parse color from string: "+t);this.model=e.model,h=r[this.model].channels,this.color=e.value.slice(0,h),this.valpha="number"==typeof e.value[h]?e.value[h]:1}else if(t.length>0){this.model=e||"rgb",h=r[this.model].channels;const s=Array.prototype.slice.call(t,0,h);this.color=d(s,h),this.valpha="number"==typeof t[h]?t[h]:1}else if("number"==typeof t)this.model="rgb",this.color=[t>>16&255,t>>8&255,255&t],this.valpha=1;else{this.valpha=1;const e=Object.keys(t);"alpha"in t&&(e.splice(e.indexOf("alpha"),1),this.valpha="number"==typeof t.alpha?t.alpha:0);const a=e.sort().join("");if(!(a in n))throw new Error("Unable to parse color from object: "+JSON.stringify(t));this.model=n[a];const{labels:i}=r[this.model],o=[];for(s=0;s<i.length;s++)o.push(t[i[s]]);this.color=d(o)}if(o[this.model])for(h=r[this.model].channels,s=0;s<h;s++){const t=o[this.model][s];t&&(this.color[s]=t(this.color[s]))}this.valpha=Math.max(0,Math.min(1,this.valpha)),Object.freeze&&Object.freeze(this)}c.prototype={toString(){return this.string()},toJSON(){return this[this.model]()},string(t){let e=this.model in a.to?this:this.rgb();e=e.round("number"==typeof t?t:1);const s=1===e.valpha?e.color:[...e.color,this.valpha];return a.to[e.model](s)},percentString(t){const e=this.rgb().round("number"==typeof t?t:1),s=1===e.valpha?e.color:[...e.color,this.valpha];return a.to.rgb.percent(s)},array(){return 1===this.valpha?[...this.color]:[...this.color,this.valpha]},object(){const t={},{channels:e}=r[this.model],{labels:s}=r[this.model];for(let a=0;a<e;a++)t[s[a]]=this.color[a];return 1!==this.valpha&&(t.alpha=this.valpha),t},unitArray(){const t=this.rgb().color;return t[0]/=255,t[1]/=255,t[2]/=255,1!==this.valpha&&t.push(this.valpha),t},unitObject(){const t=this.rgb().object();return t.r/=255,t.g/=255,t.b/=255,1!==this.valpha&&(t.alpha=this.valpha),t},round(t){return t=Math.max(t||0,0),new c([...this.color.map(h(t)),this.valpha],this.model)},alpha(t){return void 0!==t?new c([...this.color,Math.max(0,Math.min(1,t))],this.model):this.valpha},red:l("rgb",0,p(255)),green:l("rgb",1,p(255)),blue:l("rgb",2,p(255)),hue:l(["hsl","hsv","hsl","hwb","hcg"],0,(t=>(t%360+360)%360)),saturationl:l("hsl",1,p(100)),lightness:l("hsl",2,p(100)),saturationv:l("hsv",1,p(100)),value:l("hsv",2,p(100)),chroma:l("hcg",1,p(100)),gray:l("hcg",2,p(100)),white:l("hwb",1,p(100)),wblack:l("hwb",2,p(100)),cyan:l("cmyk",0,p(100)),magenta:l("cmyk",1,p(100)),yellow:l("cmyk",2,p(100)),black:l("cmyk",3,p(100)),x:l("xyz",0,p(95.047)),y:l("xyz",1,p(100)),z:l("xyz",2,p(108.833)),l:l("lab",0,p(100)),a:l("lab",1),b:l("lab",2),keyword(t){return void 0!==t?new c(t):r[this.model].keyword(this.color)},hex(t){return void 0!==t?new c(t):a.to.hex(this.rgb().round().color)},hexa(t){if(void 0!==t)return new c(t);const e=this.rgb().round().color;let s=Math.round(255*this.valpha).toString(16).toUpperCase();return 1===s.length&&(s="0"+s),a.to.hex(e)+s},rgbNumber(){const t=this.rgb().color;return(255&t[0])<<16|(255&t[1])<<8|255&t[2]},luminosity(){const t=this.rgb().color,e=[];for(const[s,a]of t.entries()){const t=a/255;e[s]=t<=.04045?t/12.92:((t+.055)/1.055)**2.4}return.2126*e[0]+.7152*e[1]+.0722*e[2]},contrast(t){const e=this.luminosity(),s=t.luminosity();return e>s?(e+.05)/(s+.05):(s+.05)/(e+.05)},level(t){const e=this.contrast(t);return e>=7?"AAA":e>=4.5?"AA":""},isDark(){const t=this.rgb().color;return(2126*t[0]+7152*t[1]+722*t[2])/1e4<128},isLight(){return!this.isDark()},negate(){const t=this.rgb();for(let e=0;e<3;e++)t.color[e]=255-t.color[e];return t},lighten(t){const e=this.hsl();return e.color[2]+=e.color[2]*t,e},darken(t){const e=this.hsl();return e.color[2]-=e.color[2]*t,e},saturate(t){const e=this.hsl();return e.color[1]+=e.color[1]*t,e},desaturate(t){const e=this.hsl();return e.color[1]-=e.color[1]*t,e},whiten(t){const e=this.hwb();return e.color[1]+=e.color[1]*t,e},blacken(t){const e=this.hwb();return e.color[2]+=e.color[2]*t,e},grayscale(){const t=this.rgb().color,e=.3*t[0]+.59*t[1]+.11*t[2];return c.rgb(e,e,e)},fade(t){return this.alpha(this.valpha-this.valpha*t)},opaquer(t){return this.alpha(this.valpha+this.valpha*t)},rotate(t){const e=this.hsl();let s=e.color[0];return s=(s+t)%360,s=s<0?360+s:s,e.color[0]=s,e},mix(t,e){if(!t||!t.rgb)throw new Error('Argument to "mix" was not a Color instance, but rather an instance of '+typeof t);const s=t.rgb(),a=this.rgb(),r=void 0===e?.5:e,i=2*r-1,n=s.alpha()-a.alpha(),o=((i*n==-1?i:(i+n)/(1+i*n))+1)/2,h=1-o;return c.rgb(o*s.red()+h*a.red(),o*s.green()+h*a.green(),o*s.blue()+h*a.blue(),s.alpha()*r+a.alpha()*(1-r))}};for(const t of Object.keys(r)){if(i.includes(t))continue;const{channels:e}=r[t];c.prototype[t]=function(...e){return this.model===t?new c(this):e.length>0?new c(e,t):new c([...(s=r[this.model][t].raw(this.color),Array.isArray(s)?s:[s]),this.valpha],t);var s},c[t]=function(...s){let a=s[0];return"number"==typeof a&&(a=d(s,e)),new c(a,t)}}function h(t){return function(e){return function(t,e){return Number(t.toFixed(e))}(e,t)}}function l(t,e,s){t=Array.isArray(t)?t:[t];for(const a of t)(o[a]||(o[a]=[]))[e]=s;return t=t[0],function(a){let r;return void 0!==a?(s&&(a=s(a)),r=this[t](),r.color[e]=a,r):(r=this[t]().color[e],s&&(r=s(r)),r)}}function p(t){return function(e){return Math.max(0,Math.min(t,e))}}function d(t,e){for(let s=0;s<e;s++)"number"!=typeof t[s]&&(t[s]=0);return t}t.exports=c},252:(t,e,s)=>{const a=s(37),r={};for(const t of Object.keys(a))r[a[t]]=t;const i={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};t.exports=i;for(const t of Object.keys(i)){if(!("channels"in i[t]))throw new Error("missing channels property: "+t);if(!("labels"in i[t]))throw new Error("missing channel labels property: "+t);if(i[t].labels.length!==i[t].channels)throw new Error("channel and label counts mismatch: "+t);const{channels:e,labels:s}=i[t];delete i[t].channels,delete i[t].labels,Object.defineProperty(i[t],"channels",{value:e}),Object.defineProperty(i[t],"labels",{value:s})}i.rgb.hsl=function(t){const e=t[0]/255,s=t[1]/255,a=t[2]/255,r=Math.min(e,s,a),i=Math.max(e,s,a),n=i-r;let o,c;i===r?o=0:e===i?o=(s-a)/n:s===i?o=2+(a-e)/n:a===i&&(o=4+(e-s)/n),o=Math.min(60*o,360),o<0&&(o+=360);const h=(r+i)/2;return c=i===r?0:h<=.5?n/(i+r):n/(2-i-r),[o,100*c,100*h]},i.rgb.hsv=function(t){let e,s,a,r,i;const n=t[0]/255,o=t[1]/255,c=t[2]/255,h=Math.max(n,o,c),l=h-Math.min(n,o,c),p=function(t){return(h-t)/6/l+.5};return 0===l?(r=0,i=0):(i=l/h,e=p(n),s=p(o),a=p(c),n===h?r=a-s:o===h?r=1/3+e-a:c===h&&(r=2/3+s-e),r<0?r+=1:r>1&&(r-=1)),[360*r,100*i,100*h]},i.rgb.hwb=function(t){const e=t[0],s=t[1];let a=t[2];const r=i.rgb.hsl(t)[0],n=1/255*Math.min(e,Math.min(s,a));return a=1-1/255*Math.max(e,Math.max(s,a)),[r,100*n,100*a]},i.rgb.cmyk=function(t){const e=t[0]/255,s=t[1]/255,a=t[2]/255,r=Math.min(1-e,1-s,1-a);return[100*((1-e-r)/(1-r)||0),100*((1-s-r)/(1-r)||0),100*((1-a-r)/(1-r)||0),100*r]},i.rgb.keyword=function(t){const e=r[t];if(e)return e;let s,i=1/0;for(const e of Object.keys(a)){const r=a[e],c=(o=r,((n=t)[0]-o[0])**2+(n[1]-o[1])**2+(n[2]-o[2])**2);c<i&&(i=c,s=e)}var n,o;return s},i.keyword.rgb=function(t){return a[t]},i.rgb.xyz=function(t){let e=t[0]/255,s=t[1]/255,a=t[2]/255;e=e>.04045?((e+.055)/1.055)**2.4:e/12.92,s=s>.04045?((s+.055)/1.055)**2.4:s/12.92,a=a>.04045?((a+.055)/1.055)**2.4:a/12.92;return[100*(.4124*e+.3576*s+.1805*a),100*(.2126*e+.7152*s+.0722*a),100*(.0193*e+.1192*s+.9505*a)]},i.rgb.lab=function(t){const e=i.rgb.xyz(t);let s=e[0],a=e[1],r=e[2];s/=95.047,a/=100,r/=108.883,s=s>.008856?s**(1/3):7.787*s+16/116,a=a>.008856?a**(1/3):7.787*a+16/116,r=r>.008856?r**(1/3):7.787*r+16/116;return[116*a-16,500*(s-a),200*(a-r)]},i.hsl.rgb=function(t){const e=t[0]/360,s=t[1]/100,a=t[2]/100;let r,i,n;if(0===s)return n=255*a,[n,n,n];r=a<.5?a*(1+s):a+s-a*s;const o=2*a-r,c=[0,0,0];for(let t=0;t<3;t++)i=e+1/3*-(t-1),i<0&&i++,i>1&&i--,n=6*i<1?o+6*(r-o)*i:2*i<1?r:3*i<2?o+(r-o)*(2/3-i)*6:o,c[t]=255*n;return c},i.hsl.hsv=function(t){const e=t[0];let s=t[1]/100,a=t[2]/100,r=s;const i=Math.max(a,.01);a*=2,s*=a<=1?a:2-a,r*=i<=1?i:2-i;return[e,100*(0===a?2*r/(i+r):2*s/(a+s)),100*((a+s)/2)]},i.hsv.rgb=function(t){const e=t[0]/60,s=t[1]/100;let a=t[2]/100;const r=Math.floor(e)%6,i=e-Math.floor(e),n=255*a*(1-s),o=255*a*(1-s*i),c=255*a*(1-s*(1-i));switch(a*=255,r){case 0:return[a,c,n];case 1:return[o,a,n];case 2:return[n,a,c];case 3:return[n,o,a];case 4:return[c,n,a];case 5:return[a,n,o]}},i.hsv.hsl=function(t){const e=t[0],s=t[1]/100,a=t[2]/100,r=Math.max(a,.01);let i,n;n=(2-s)*a;const o=(2-s)*r;return i=s*r,i/=o<=1?o:2-o,i=i||0,n/=2,[e,100*i,100*n]},i.hwb.rgb=function(t){const e=t[0]/360;let s=t[1]/100,a=t[2]/100;const r=s+a;let i;r>1&&(s/=r,a/=r);const n=Math.floor(6*e),o=1-a;i=6*e-n,1&n&&(i=1-i);const c=s+i*(o-s);let h,l,p;switch(n){default:case 6:case 0:h=o,l=c,p=s;break;case 1:h=c,l=o,p=s;break;case 2:h=s,l=o,p=c;break;case 3:h=s,l=c,p=o;break;case 4:h=c,l=s,p=o;break;case 5:h=o,l=s,p=c}return[255*h,255*l,255*p]},i.cmyk.rgb=function(t){const e=t[0]/100,s=t[1]/100,a=t[2]/100,r=t[3]/100;return[255*(1-Math.min(1,e*(1-r)+r)),255*(1-Math.min(1,s*(1-r)+r)),255*(1-Math.min(1,a*(1-r)+r))]},i.xyz.rgb=function(t){const e=t[0]/100,s=t[1]/100,a=t[2]/100;let r,i,n;return r=3.2406*e+-1.5372*s+-.4986*a,i=-.9689*e+1.8758*s+.0415*a,n=.0557*e+-.204*s+1.057*a,r=r>.0031308?1.055*r**(1/2.4)-.055:12.92*r,i=i>.0031308?1.055*i**(1/2.4)-.055:12.92*i,n=n>.0031308?1.055*n**(1/2.4)-.055:12.92*n,r=Math.min(Math.max(0,r),1),i=Math.min(Math.max(0,i),1),n=Math.min(Math.max(0,n),1),[255*r,255*i,255*n]},i.xyz.lab=function(t){let e=t[0],s=t[1],a=t[2];e/=95.047,s/=100,a/=108.883,e=e>.008856?e**(1/3):7.787*e+16/116,s=s>.008856?s**(1/3):7.787*s+16/116,a=a>.008856?a**(1/3):7.787*a+16/116;return[116*s-16,500*(e-s),200*(s-a)]},i.lab.xyz=function(t){let e,s,a;s=(t[0]+16)/116,e=t[1]/500+s,a=s-t[2]/200;const r=s**3,i=e**3,n=a**3;return s=r>.008856?r:(s-16/116)/7.787,e=i>.008856?i:(e-16/116)/7.787,a=n>.008856?n:(a-16/116)/7.787,e*=95.047,s*=100,a*=108.883,[e,s,a]},i.lab.lch=function(t){const e=t[0],s=t[1],a=t[2];let r;r=360*Math.atan2(a,s)/2/Math.PI,r<0&&(r+=360);return[e,Math.sqrt(s*s+a*a),r]},i.lch.lab=function(t){const e=t[0],s=t[1],a=t[2]/360*2*Math.PI;return[e,s*Math.cos(a),s*Math.sin(a)]},i.rgb.ansi16=function(t,e=null){const[s,a,r]=t;let n=null===e?i.rgb.hsv(t)[2]:e;if(n=Math.round(n/50),0===n)return 30;let o=30+(Math.round(r/255)<<2|Math.round(a/255)<<1|Math.round(s/255));return 2===n&&(o+=60),o},i.hsv.ansi16=function(t){return i.rgb.ansi16(i.hsv.rgb(t),t[2])},i.rgb.ansi256=function(t){const e=t[0],s=t[1],a=t[2];if(e===s&&s===a)return e<8?16:e>248?231:Math.round((e-8)/247*24)+232;return 16+36*Math.round(e/255*5)+6*Math.round(s/255*5)+Math.round(a/255*5)},i.ansi16.rgb=function(t){let e=t%10;if(0===e||7===e)return t>50&&(e+=3.5),e=e/10.5*255,[e,e,e];const s=.5*(1+~~(t>50));return[(1&e)*s*255,(e>>1&1)*s*255,(e>>2&1)*s*255]},i.ansi256.rgb=function(t){if(t>=232){const e=10*(t-232)+8;return[e,e,e]}let e;t-=16;return[Math.floor(t/36)/5*255,Math.floor((e=t%36)/6)/5*255,e%6/5*255]},i.rgb.hex=function(t){const e=(((255&Math.round(t[0]))<<16)+((255&Math.round(t[1]))<<8)+(255&Math.round(t[2]))).toString(16).toUpperCase();return"000000".substring(e.length)+e},i.hex.rgb=function(t){const e=t.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!e)return[0,0,0];let s=e[0];3===e[0].length&&(s=s.split("").map((t=>t+t)).join(""));const a=parseInt(s,16);return[a>>16&255,a>>8&255,255&a]},i.rgb.hcg=function(t){const e=t[0]/255,s=t[1]/255,a=t[2]/255,r=Math.max(Math.max(e,s),a),i=Math.min(Math.min(e,s),a),n=r-i;let o,c;return o=n<1?i/(1-n):0,c=n<=0?0:r===e?(s-a)/n%6:r===s?2+(a-e)/n:4+(e-s)/n,c/=6,c%=1,[360*c,100*n,100*o]},i.hsl.hcg=function(t){const e=t[1]/100,s=t[2]/100,a=s<.5?2*e*s:2*e*(1-s);let r=0;return a<1&&(r=(s-.5*a)/(1-a)),[t[0],100*a,100*r]},i.hsv.hcg=function(t){const e=t[1]/100,s=t[2]/100,a=e*s;let r=0;return a<1&&(r=(s-a)/(1-a)),[t[0],100*a,100*r]},i.hcg.rgb=function(t){const e=t[0]/360,s=t[1]/100,a=t[2]/100;if(0===s)return[255*a,255*a,255*a];const r=[0,0,0],i=e%1*6,n=i%1,o=1-n;let c=0;switch(Math.floor(i)){case 0:r[0]=1,r[1]=n,r[2]=0;break;case 1:r[0]=o,r[1]=1,r[2]=0;break;case 2:r[0]=0,r[1]=1,r[2]=n;break;case 3:r[0]=0,r[1]=o,r[2]=1;break;case 4:r[0]=n,r[1]=0,r[2]=1;break;default:r[0]=1,r[1]=0,r[2]=o}return c=(1-s)*a,[255*(s*r[0]+c),255*(s*r[1]+c),255*(s*r[2]+c)]},i.hcg.hsv=function(t){const e=t[1]/100,s=e+t[2]/100*(1-e);let a=0;return s>0&&(a=e/s),[t[0],100*a,100*s]},i.hcg.hsl=function(t){const e=t[1]/100,s=t[2]/100*(1-e)+.5*e;let a=0;return s>0&&s<.5?a=e/(2*s):s>=.5&&s<1&&(a=e/(2*(1-s))),[t[0],100*a,100*s]},i.hcg.hwb=function(t){const e=t[1]/100,s=e+t[2]/100*(1-e);return[t[0],100*(s-e),100*(1-s)]},i.hwb.hcg=function(t){const e=t[1]/100,s=1-t[2]/100,a=s-e;let r=0;return a<1&&(r=(s-a)/(1-a)),[t[0],100*a,100*r]},i.apple.rgb=function(t){return[t[0]/65535*255,t[1]/65535*255,t[2]/65535*255]},i.rgb.apple=function(t){return[t[0]/255*65535,t[1]/255*65535,t[2]/255*65535]},i.gray.rgb=function(t){return[t[0]/100*255,t[0]/100*255,t[0]/100*255]},i.gray.hsl=function(t){return[0,0,t[0]]},i.gray.hsv=i.gray.hsl,i.gray.hwb=function(t){return[0,100,t[0]]},i.gray.cmyk=function(t){return[0,0,0,t[0]]},i.gray.lab=function(t){return[t[0],0,0]},i.gray.hex=function(t){const e=255&Math.round(t[0]/100*255),s=((e<<16)+(e<<8)+e).toString(16).toUpperCase();return"000000".substring(s.length)+s},i.rgb.gray=function(t){return[(t[0]+t[1]+t[2])/3/255*100]}},349:(t,e,s)=>{const a=s(252),r=s(196),i={};Object.keys(a).forEach((t=>{i[t]={},Object.defineProperty(i[t],"channels",{value:a[t].channels}),Object.defineProperty(i[t],"labels",{value:a[t].labels});const e=r(t);Object.keys(e).forEach((s=>{const a=e[s];i[t][s]=function(t){const e=function(...e){const s=e[0];if(null==s)return s;s.length>1&&(e=s);const a=t(e);if("object"==typeof a)for(let t=a.length,e=0;e<t;e++)a[e]=Math.round(a[e]);return a};return"conversion"in t&&(e.conversion=t.conversion),e}(a),i[t][s].raw=function(t){const e=function(...e){const s=e[0];return null==s?s:(s.length>1&&(e=s),t(e))};return"conversion"in t&&(e.conversion=t.conversion),e}(a)}))})),t.exports=i},196:(t,e,s)=>{const a=s(252);function r(t){const e=function(){const t={},e=Object.keys(a);for(let s=e.length,a=0;a<s;a++)t[e[a]]={distance:-1,parent:null};return t}(),s=[t];for(e[t].distance=0;s.length;){const t=s.pop(),r=Object.keys(a[t]);for(let a=r.length,i=0;i<a;i++){const a=r[i],n=e[a];-1===n.distance&&(n.distance=e[t].distance+1,n.parent=t,s.unshift(a))}}return e}function i(t,e){return function(s){return e(t(s))}}function n(t,e){const s=[e[t].parent,t];let r=a[e[t].parent][t],n=e[t].parent;for(;e[n].parent;)s.unshift(e[n].parent),r=i(a[e[n].parent][n],r),n=e[n].parent;return r.conversion=s,r}t.exports=function(t){const e=r(t),s={},a=Object.keys(e);for(let t=a.length,r=0;r<t;r++){const t=a[r];null!==e[t].parent&&(s[t]=n(t,e))}return s}},37:t=>{"use strict";t.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}},199:t=>{t.exports=function(t){return!(!t||"string"==typeof t)&&(t instanceof Array||Array.isArray(t)||t.length>=0&&(t.splice instanceof Function||Object.getOwnPropertyDescriptor(t,t.length-1)&&"String"!==t.constructor.name))}},683:(t,e,s)=>{var a,r,i;r=[s(648)],void 0===(i="function"==typeof(a=function(t){function e(t){this.init(t)}e.prototype={value:0,size:100,startAngle:-Math.PI,thickness:"auto",fill:{gradient:["#3aeabb","#fdd250"]},emptyFill:"rgba(0, 0, 0, .1)",animation:{duration:1200,easing:"circleProgressEasing"},animationStartValue:0,reverse:!1,lineCap:"butt",insertMode:"prepend",constructor:e,el:null,canvas:null,ctx:null,radius:0,arcFill:null,lastFrameValue:0,init:function(e){t.extend(this,e),this.radius=this.size/2,this.initWidget(),this.initFill(),this.draw(),this.el.trigger("circle-inited")},initWidget:function(){this.canvas||(this.canvas=t("<canvas>")["prepend"==this.insertMode?"prependTo":"appendTo"](this.el)[0]);var e=this.canvas;if(e.width=this.size,e.height=this.size,this.ctx=e.getContext("2d"),window.devicePixelRatio>1){var s=window.devicePixelRatio;e.style.width=e.style.height=this.size+"px",e.width=e.height=this.size*s,this.ctx.scale(s,s)}},initFill:function(){var e,s=this,a=this.fill,r=this.ctx,i=this.size;if(!a)throw Error("The fill is not specified!");if("string"==typeof a&&(a={color:a}),a.color&&(this.arcFill=a.color),a.gradient){var n=a.gradient;if(1==n.length)this.arcFill=n[0];else if(n.length>1){for(var o=a.gradientAngle||0,c=a.gradientDirection||[i/2*(1-Math.cos(o)),i/2*(1+Math.sin(o)),i/2*(1+Math.cos(o)),i/2*(1-Math.sin(o))],h=r.createLinearGradient.apply(r,c),l=0;l<n.length;l++){var p=n[l],d=l/(n.length-1);t.isArray(p)&&(d=p[1],p=p[0]),h.addColorStop(d,p)}this.arcFill=h}}function u(){var a=t("<canvas>")[0];a.width=s.size,a.height=s.size,a.getContext("2d").drawImage(e,0,0,i,i),s.arcFill=s.ctx.createPattern(a,"no-repeat"),s.drawFrame(s.lastFrameValue)}a.image&&(a.image instanceof Image?e=a.image:(e=new Image).src=a.image,e.complete?u():e.onload=u)},draw:function(){this.animation?this.drawAnimated(this.value):this.drawFrame(this.value)},drawFrame:function(t){this.lastFrameValue=t,this.ctx.clearRect(0,0,this.size,this.size),this.drawEmptyArc(t),this.drawArc(t)},drawArc:function(t){if(0!==t){var e=this.ctx,s=this.radius,a=this.getThickness(),r=this.startAngle;e.save(),e.beginPath(),this.reverse?e.arc(s,s,s-a/2,r-2*Math.PI*t,r):e.arc(s,s,s-a/2,r,r+2*Math.PI*t),e.lineWidth=a,e.lineCap=this.lineCap,e.strokeStyle=this.arcFill,e.stroke(),e.restore()}},drawEmptyArc:function(t){var e=this.ctx,s=this.radius,a=this.getThickness(),r=this.startAngle;t<1&&(e.save(),e.beginPath(),t<=0?e.arc(s,s,s-a/2,0,2*Math.PI):this.reverse?e.arc(s,s,s-a/2,r,r-2*Math.PI*t):e.arc(s,s,s-a/2,r+2*Math.PI*t,r),e.lineWidth=a,e.strokeStyle=this.emptyFill,e.stroke(),e.restore())},drawAnimated:function(e){var s=this,a=this.el,r=t(this.canvas);r.stop(!0,!1),a.trigger("circle-animation-start"),r.css({animationProgress:0}).animate({animationProgress:1},t.extend({},this.animation,{step:function(t){var r=s.animationStartValue*(1-t)+e*t;s.drawFrame(r),a.trigger("circle-animation-progress",[t,r])}})).promise().always((function(){a.trigger("circle-animation-end")}))},getThickness:function(){return t.isNumeric(this.thickness)?this.thickness:this.size/14},getValue:function(){return this.value},setValue:function(t){this.animation&&(this.animationStartValue=this.lastFrameValue),this.value=t,this.draw()}},t.circleProgress={defaults:e.prototype},t.easing.circleProgressEasing=function(t){return t<.5?.5*(t*=2)*t*t:1-.5*(t=2-2*t)*t*t},t.fn.circleProgress=function(s,a){var r="circle-progress",i=this.data(r);if("widget"==s){if(!i)throw Error('Calling "widget" method on not initialized instance is forbidden');return i.canvas}if("value"==s){if(!i)throw Error('Calling "value" method on not initialized instance is forbidden');if(void 0===a)return i.getValue();var n=arguments[1];return this.each((function(){t(this).data(r).setValue(n)}))}return this.each((function(){var a=t(this),i=a.data(r),n=t.isPlainObject(s)?s:{};if(i)i.init(n);else{var o=t.extend({},a.data());"string"==typeof o.fill&&(o.fill=JSON.parse(o.fill)),"string"==typeof o.animation&&(o.animation=JSON.parse(o.animation)),(n=t.extend(o,n)).el=a,i=new e(n),a.data(r,i)}}))}})?a.apply(e,r):a)||(t.exports=i)},852:(t,e,s)=>{"use strict";var a=s(199),r=Array.prototype.concat,i=Array.prototype.slice,n=t.exports=function(t){for(var e=[],s=0,n=t.length;s<n;s++){var o=t[s];a(o)?e=r.call(e,i.call(o)):e.push(o)}return e};n.wrap=function(t){return function(){return t(n(arguments))}}},648:t=>{"use strict";t.exports=H5P.jQuery}},e={};function s(a){var r=e[a];if(void 0!==r)return r.exports;var i=e[a]={exports:{}};return t[a](i,i.exports,s),i.exports}s.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return s.d(e,{a:e}),e},s.d=(t,e)=>{for(var a in e)s.o(e,a)&&!s.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:e[a]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{"use strict";const t=class{static extractFragmentsFromURL(t,e){if(!e.location.hash)return{};const s={};return e.location.hash.replace("#","").split("&").forEach((t=>{if(-1===t.indexOf("="))return;const e=t.split("=");s[e[0]]=e[1]})),"function"!=typeof t||t(s)?s:{}}static createFragmentsString(t){let e=[];for(const s in t)e.push(`${s}=${t[s]}`);return`#${e.join("&")}`}static areFragmentsEqual(t,e,s=[]){for(const a in t)if(t.hasOwnProperty(a)){if(s.length>0&&-1===s.indexOf(a))continue;if(!e[a]||t[a].toString()!==e[a].toString())return!1}return!0}};class e extends H5P.EventDispatcher{constructor(t,e,s,a,r){super(),this.id=e,this.parent=a,this.behaviour=t.behaviour,this.content=document.createElement("ul"),this.content.classList.add("navigation-list"),this.container=this.addSideBar(),this.l10n=t.l10n,this.chapters=this.findAllChapters(r),this.chapterNodes=this.getChapterNodes(),s&&(this.titleElem=this.addMainTitle(s),this.container.appendChild(this.titleElem)),this.chapterNodes.forEach((t=>{this.content.appendChild(t)})),this.chapters.length>20&&this.content.classList.add("large-navigation-list"),this.container.appendChild(this.content),this.addTransformListener(),this.initializeNavigationControls()}initializeNavigationControls(){const t=Object.freeze({UP:38,DOWN:40});this.chapterNodes.forEach(((e,s)=>{e.querySelector(".h5p-interactive-book-navigation-chapter-button").addEventListener("keydown",(e=>{switch(e.keyCode){case t.UP:this.setFocusToChapterItem(s,-1),e.preventDefault();break;case t.DOWN:this.setFocusToChapterItem(s,1),e.preventDefault()}}));const a=e.querySelectorAll(".h5p-interactive-book-navigation-section");for(let e=0;e<a.length;e++){a[e].querySelector(".section-button").addEventListener("keydown",(a=>{switch(a.keyCode){case t.UP:this.setFocusToSectionItem(s,e,-1),a.preventDefault();break;case t.DOWN:this.setFocusToSectionItem(s,e,1),a.preventDefault()}}))}}))}focus(){this.content.querySelector("button").focus()}setFocusToChapterItem(t,e=0){let s=t+e;if(s<0?s=this.chapterNodes.length-1:s>this.chapterNodes.length-1&&(s=0),e){const a=e>0?t:s,r=this.chapterNodes[a];if(!r.classList.contains("h5p-interactive-book-navigation-closed")){const t=r.querySelectorAll(".h5p-interactive-book-navigation-section");if(t.length){const s=e>0?0:t.length-1;return void this.setFocusToSectionItem(a,s)}}}const a=this.chapterNodes[s].querySelector(".h5p-interactive-book-navigation-chapter-button");this.setFocusToItem(a,s)}setFocusToSectionItem(t,e,s=0){const a=this.chapterNodes[t].querySelectorAll(".h5p-interactive-book-navigation-section"),r=e+s;if(r>a.length-1)return void this.setFocusToChapterItem(t+1);if(r<0)return void this.setFocusToChapterItem(t);const i=a[r].querySelector(".section-button");this.setFocusToItem(i,t)}setFocusToItem(t,e,s=!1){this.chapterNodes.forEach(((t,s)=>{const a=t.querySelector(".h5p-interactive-book-navigation-chapter-button");s===e?a.classList.add("h5p-interactive-book-navigation-current"):a.classList.remove("h5p-interactive-book-navigation-current"),a.setAttribute("tabindex","-1");const r=t.querySelectorAll(".h5p-interactive-book-navigation-section");for(let t=0;t<r.length;t++){r[t].querySelector(".section-button").setAttribute("tabindex","-1")}})),t.setAttribute("tabindex","0"),this.focusedChapter=e,s||t.focus()}addSideBar(){const t=document.createElement("div");return t.id="h5p-interactive-book-navigation-menu",t.classList.add("h5p-interactive-book-navigation"),t}addMainTitle(t){const e=document.createElement("h2");e.classList.add("navigation-title"),e.innerHTML=t,e.setAttribute("title",t);const s=document.createElement("div");return s.classList.add("h5p-interactive-book-navigation-maintitle"),s.appendChild(e),s}findSectionsInChapter(t){const e=[],s=t.sections;for(let t=0;t<s.length;t++){const a=s[t].content;let r="";if("H5P.Link"===a.library.split(" ")[0])r=a.params.title?a.params.title:"New link";else r=a.metadata.title;e.push({...s[t],title:r,id:a.subContentId?`h5p-interactive-book-section-${a.subContentId}`:void 0})}return e}findAllChapters(t){const e=[];for(let s=0;s<t.length;s++)e.push({...t[s],id:t[s].isSummary?"h5p-interactive-book-chapter-summary":`h5p-interactive-book-chapter-${t[s].instance.subContentId}`,sections:this.findSectionsInChapter(t[s])});return e}toggleChapter(t,e){e=void 0!==e?e:!t.classList.contains("h5p-interactive-book-navigation-closed");const s=t.querySelector(".h5p-interactive-book-navigation-sectionlist"),a=t.getElementsByClassName("h5p-interactive-book-navigation-chapter-accordion")[0];t.querySelector(".h5p-interactive-book-navigation-chapter-button").setAttribute("aria-expanded",(!e).toString()),!0===e?(t.classList.add("h5p-interactive-book-navigation-closed"),a&&(a.classList.remove("icon-expanded"),a.classList.add("icon-collapsed"),s&&(s.setAttribute("aria-hidden",!0),s.setAttribute("tabindex","-1")))):(t.classList.remove("h5p-interactive-book-navigation-closed"),a&&(a.classList.remove("icon-collapsed"),a.classList.add("icon-expanded"),s&&(s.removeAttribute("aria-hidden"),s.removeAttribute("tabindex"))))}redirectHandler(t){if(this.chapterNodes.forEach(((e,s)=>{this.toggleChapter(e,s!==t)})),this.parent.trigger("resize"),t!==this.focusedChapter){const e=this.chapterNodes[t].querySelector(".h5p-interactive-book-navigation-chapter-button");this.setFocusToItem(e,t,!0)}}resetIndicators(){this.chapterNodes.forEach(((t,e)=>{this.updateChapterProgressIndicator(e,"BLANK");const s=t.getElementsByClassName("h5p-interactive-book-navigation-section");for(let t of s){const e=t.querySelector(".h5p-interactive-book-navigation-section-icon");e&&(e.classList.remove("icon-question-answered"),e.classList.add("icon-chapter-blank"))}}))}updateChapterProgressIndicator(t,e){if(!this.behaviour.progressIndicators)return;if(this.chapters[t].isSummary)return;const s=this.chapterNodes[t].getElementsByClassName("h5p-interactive-book-navigation-chapter-progress")[0];"BLANK"===e?(s.classList.remove("icon-chapter-started"),s.classList.remove("icon-chapter-done"),s.classList.add("icon-chapter-blank")):"DONE"===e?(s.classList.remove("icon-chapter-blank"),s.classList.remove("icon-chapter-started"),s.classList.add("icon-chapter-done")):"STARTED"===e&&(s.classList.remove("icon-chapter-blank"),s.classList.remove("icon-chapter-done"),s.classList.add("icon-chapter-started"))}setSectionMarker(t,e){const s=this.chapterNodes[t].querySelector(".h5p-interactive-book-navigation-section-"+e+" .h5p-interactive-book-navigation-section-icon");s&&(s.classList.remove("icon-chapter-blank"),s.classList.add("icon-question-answered"))}getNodesFromChapter(t,e){const s=document.createElement("li"),a="h5p-interactive-book-sectionlist-"+e;if(s.classList.add("h5p-interactive-book-navigation-chapter"),t.isSummary){s.classList.add("h5p-interactive-book-navigation-summary-button");const t=this.parent.chapters[e].instance.summaryMenuButton;return t.classList.add("h5p-interactive-book-navigation-chapter-button"),s.appendChild(t),s}const r=document.createElement("div");r.classList.add("h5p-interactive-book-navigation-chapter-accordion");const i=document.createElement("div");i.classList.add("h5p-interactive-book-navigation-chapter-title-text"),i.innerHTML=t.title,i.setAttribute("title",t.title);const n=document.createElement("div");this.behaviour.progressIndicators&&(n.classList.add("icon-chapter-blank"),n.classList.add("h5p-interactive-book-navigation-chapter-progress"));const o=document.createElement("button");o.setAttribute("tabindex",0===e?"0":"-1"),o.classList.add("h5p-interactive-book-navigation-chapter-button"),this.parent.activeChapter!==e?(r.classList.add("icon-collapsed"),o.setAttribute("aria-expanded","false")):(r.classList.add("icon-expanded"),o.setAttribute("aria-expanded","true")),o.setAttribute("aria-controls",a),o.onclick=t=>{const s=!t.currentTarget.querySelector(".h5p-interactive-book-navigation-chapter-accordion").classList.contains("hidden"),a="true"===t.currentTarget.getAttribute("aria-expanded");if(this.isOpenOnMobile()&&this.parent.trigger("toggleMenu"),this.isOpenOnMobile()||!s||!a){const t={h5pbookid:this.parent.contentId,chapter:this.chapters[e].id,section:0};this.parent.trigger("newChapter",t)}s&&(this.toggleChapter(t.currentTarget.parentElement),this.parent.trigger("resize"))},o.appendChild(r),o.appendChild(i),o.appendChild(n),s.appendChild(o),this.parent.activeChapter===e?s.querySelector(".h5p-interactive-book-navigation-chapter-button").classList.add("h5p-interactive-book-navigation-current"):this.toggleChapter(s,!0);const c=document.createElement("ul");c.classList.add("h5p-interactive-book-navigation-sectionlist"),c.id=a;const h=[];for(let t=0;t<this.chapters[e].sections.length;t++)if(this.parent.chapters[e].sections[t].isTask){const s=this.createSectionLink(e,t);h.push(s),c.appendChild(s)}else{const s=this.chapters[e].sections[t].content;if("H5P.AdvancedText"===s.library.split(" ")[0]){const a=document.createElement("div");a.innerHTML=s.params.text;const r=a.querySelectorAll("h2, h3");for(let s=0;s<r.length;s++){const a=r[s],i=this.createSectionLink(e,t,a.textContent,s);h.push(i),c.appendChild(i)}}}if(t.tasksLeft&&(t.maxTasks=t.tasksLeft),0===h.length){const t=s.querySelector(".h5p-interactive-book-navigation-chapter-accordion");t&&t.classList.add("hidden")}return s.appendChild(c),s}createSectionLink(t,e,s=null,a=null){const r=this.chapters[t].sections[e],i=document.createElement("div");i.innerHTML=s||r.title,i.setAttribute("title",s||r.title),i.classList.add("h5p-interactive-book-navigation-section-title");const n=document.createElement("div");n.classList.add("h5p-interactive-book-navigation-section-icon"),n.classList.add("icon-chapter-blank"),this.parent.chapters[t].sections[e].isTask&&n.classList.add("h5p-interactive-book-navigation-section-task");const o=document.createElement("button");o.classList.add("section-button"),o.setAttribute("tabindex","-1"),o.onclick=e=>{const s={h5pbookid:this.parent.contentId,chapter:this.chapters[t].id,section:r.id};null!==a&&(s.headerNumber=a),this.parent.trigger("newChapter",s),this.isOpenOnMobile()&&this.parent.trigger("toggleMenu"),e.preventDefault()},o.appendChild(n),o.appendChild(i);const c=document.createElement("li");return c.classList.add("h5p-interactive-book-navigation-section"),c.classList.add("h5p-interactive-book-navigation-section-"+e),c.appendChild(o),c}getChapterNodes(){return this.chapters.map(((t,e)=>this.getNodesFromChapter(t,e)))}isOpenOnMobile(){return this.parent.isMenuOpen()&&this.parent.isSmallSurface()}addTransformListener(){this.container.addEventListener("transitionend",(t=>{"flex-basis"===t.propertyName&&this.parent.trigger("resize")}))}}const a=e;class r extends H5P.EventDispatcher{constructor(t,e,s,a,r){super(),this.id=t,this.parent=s,this.params=a||{},this.preventScrollToTop=a.preventScrollToTop,this.params.l10n=a.l10n,this.params.a11y=Object.assign({progress:"Page @page of @total",menu:"Toggle navigation menu"},this.params.a11y||{}),this.totalChapters=e,this.arrows=this.addArrows(),this.progressBar=this.createProgressBar(),this.progressIndicator=this.createProgressIndicator(),this.chapterTitle=this.createChapterTitle(),this.menuToggleButton=this.createMenuToggleButton();const i=document.createElement("div");i.classList.add("h5p-interactive-book-status"),this.params.displayToTopButton&&i.appendChild(this.createToTopButton()),this.params.displayFullScreenButton&&H5P.fullscreenSupported&&i.appendChild(this.createFullScreenButton()),i.appendChild(this.arrows.buttonWrapperNext),i.appendChild(this.arrows.buttonWrapperPrevious),this.params.displayMenuToggleButton&&i.appendChild(this.menuToggleButton),i.appendChild(this.progressIndicator.wrapper),i.appendChild(this.chapterTitle.wrapper),this.wrapper=document.createElement("div"),this.wrapper.classList.add(r),this.wrapper.setAttribute("tabindex","-1"),this.wrapper.appendChild(this.progressBar.wrapper),this.wrapper.appendChild(i),this.on("updateStatusBar",this.updateStatusBar),this.on("seqChapter",(t=>{const e={h5pbookid:this.parent.contentId};t.data.toTop&&(e.section="top"),"next"===t.data.direction?this.parent.activeChapter+1<this.parent.chapters.length?e.chapter=`h5p-interactive-book-chapter-${this.parent.chapters[this.parent.activeChapter+1].instance.subContentId}`:this.parent.hasSummary()&&this.parent.activeChapter+1===this.parent.chapters.length&&this.parent.trigger("viewSummary",e):"prev"===t.data.direction&&this.parent.activeChapter>0&&(e.chapter=`h5p-interactive-book-chapter-${this.parent.chapters[this.parent.activeChapter-1].instance.subContentId}`),this.preventScrollToTop&&(e.preventScrollToTop=!0),e.chapter&&this.parent.trigger("newChapter",e)}))}updateProgressBar(t){const e=t/this.totalChapters*100+"%";this.progressBar.progress.style.width=e;const s=this.params.a11y.progress.replace("@page",t).replace("@total",this.totalChapters);this.progressBar.progress.title=s}updateA11yProgress(t){this.progressIndicator.hiddenButRead.innerHTML=this.params.a11y.progress.replace("@page",t).replace("@total",this.totalChapters)}updateStatusBar(){const t=this.parent.getActiveChapter()+1,e=this.parent.chapters[t-1].title;this.progressIndicator.current.innerHTML=t,this.updateA11yProgress(t),this.updateProgressBar(t),this.chapterTitle.text.innerHTML=e,this.chapterTitle.text.setAttribute("title",e),this.parent.activeChapter<=0?this.setButtonStatus("Previous",!0):this.setButtonStatus("Previous",!1),this.parent.activeChapter+1>=this.totalChapters?this.setButtonStatus("Next",!0):this.setButtonStatus("Next",!1)}addArrows(){const t={};return t.buttonPrevious=document.createElement("div"),t.buttonPrevious.classList.add("navigation-button","icon-previous"),t.buttonPrevious.setAttribute("title",this.params.l10n.previousPage),t.buttonWrapperPrevious=document.createElement("button"),t.buttonWrapperPrevious.classList.add("h5p-interactive-book-status-arrow","h5p-interactive-book-status-button","previous"),t.buttonWrapperPrevious.setAttribute("aria-label",this.params.l10n.previousPage),t.buttonWrapperPrevious.onclick=()=>{this.trigger("seqChapter",{direction:"prev",toTop:!0})},t.buttonWrapperPrevious.appendChild(t.buttonPrevious),t.buttonNext=document.createElement("div"),t.buttonNext.classList.add("navigation-button","icon-next"),t.buttonNext.setAttribute("title",this.params.l10n.nextPage),t.buttonWrapperNext=document.createElement("button"),t.buttonWrapperNext.classList.add("h5p-interactive-book-status-arrow","h5p-interactive-book-status-button","next"),t.buttonWrapperNext.setAttribute("aria-label",this.params.l10n.nextPage),t.buttonWrapperNext.onclick=()=>{this.trigger("seqChapter",{direction:"next",toTop:!0})},t.buttonWrapperNext.appendChild(t.buttonNext),t}createMenuToggleButton(){const t=document.createElement("a");t.classList.add("icon-menu");const e=document.createElement("button");return e.classList.add("h5p-interactive-book-status-menu"),e.classList.add("h5p-interactive-book-status-button"),e.setAttribute("aria-label",this.params.a11y.menu),e.setAttribute("aria-expanded","false"),e.setAttribute("aria-controls","h5p-interactive-book-navigation-menu"),e.onclick=()=>{this.parent.trigger("toggleMenu")},e.appendChild(t),e}isMenuOpen(){return this.menuToggleButton.classList.contains("h5p-interactive-book-status-menu-active")}createProgressBar(){const t=document.createElement("div");t.classList.add("h5p-interactive-book-status-progressbar-front"),t.setAttribute("tabindex","-1");const e=document.createElement("div");return e.classList.add("h5p-interactive-book-status-progressbar-back"),e.appendChild(t),{wrapper:e,progress:t}}createChapterTitle(){const t=document.createElement("h1");t.classList.add("title");const e=document.createElement("div");return e.classList.add("h5p-interactive-book-status-chapter"),e.appendChild(t),{wrapper:e,text:t}}createToTopButton(){const t=document.createElement("div");t.classList.add("icon-up"),t.classList.add("navigation-button");const e=document.createElement("button");return e.classList.add("h5p-interactive-book-status-to-top"),e.classList.add("h5p-interactive-book-status-button"),e.classList.add("h5p-interactive-book-status-arrow"),e.setAttribute("aria-label",this.params.l10n.navigateToTop),e.addEventListener("click",(()=>{this.parent.trigger("scrollToTop"),document.querySelector(".h5p-interactive-book-status-menu").focus()})),e.appendChild(t),e}setVisibility(t){t?this.wrapper.classList.add("footer-hidden"):this.wrapper.classList.remove("footer-hidden")}createProgressIndicator(){const t=document.createElement("span");t.classList.add("h5p-interactive-book-status-progress-number"),t.setAttribute("aria-hidden","true");const e=document.createElement("span");e.classList.add("h5p-interactive-book-status-progress-divider"),e.innerHTML=" / ",e.setAttribute("aria-hidden","true");const s=document.createElement("span");s.classList.add("h5p-interactive-book-status-progress-number"),s.innerHTML=this.totalChapters,s.setAttribute("aria-hidden","true");const a=document.createElement("p");a.classList.add("hidden-but-read");const r=document.createElement("p");r.classList.add("h5p-interactive-book-status-progress"),r.appendChild(t),r.appendChild(e),r.appendChild(s),r.appendChild(a);const i=document.createElement("div");return i.classList.add("h5p-interactive-book-status-progress-wrapper"),i.appendChild(r),{wrapper:i,current:t,total:s,divider:e,progressText:r,hiddenButRead:a}}setButtonStatus(t,e){e?(this.arrows["buttonWrapper"+t].setAttribute("disabled","disabled"),this.arrows["button"+t].classList.add("disabled")):(this.arrows["buttonWrapper"+t].removeAttribute("disabled"),this.arrows["button"+t].classList.remove("disabled"))}createFullScreenButton(){const t=()=>{!0===H5P.isFullscreen?H5P.exitFullScreen():H5P.fullScreen(this.parent.mainWrapper,this.parent)},e=document.createElement("button");return e.classList.add("h5p-interactive-book-status-fullscreen"),e.classList.add("h5p-interactive-book-status-button"),e.classList.add("h5p-interactive-book-enter-fullscreen"),e.setAttribute("title",this.params.l10n.fullscreen),e.setAttribute("aria-label",this.params.l10n.fullscreen),e.addEventListener("click",t),e.addEventListener("keyPress",(e=>{13!==e.which&&32!==e.which||(t(),e.preventDefault())})),this.parent.on("enterFullScreen",(()=>{this.parent.isFullscreen=!0,e.classList.remove("h5p-interactive-book-enter-fullscreen"),e.classList.add("h5p-interactive-book-exit-fullscreen"),e.setAttribute("title",this.params.l10n.exitFullscreen),e.setAttribute("aria-label",this.params.l10n.exitFullScreen),this.parent.pageContent.updateFooter()})),this.parent.on("exitFullScreen",(()=>{this.parent.isFullscreen=!1,e.classList.remove("h5p-interactive-book-exit-fullscreen"),e.classList.add("h5p-interactive-book-enter-fullscreen"),e.setAttribute("title",this.params.l10n.fullscreen),e.setAttribute("aria-label",this.params.l10n.fullscreen),this.parent.pageContent.updateFooter()})),e}}const i=r;class n extends H5P.EventDispatcher{constructor(t,e,s,a,r){super(),this.parent=r,this.params=t,this.contentId=a,this.container=this.createContainer(),t.coverMedium?(this.visuals=this.createVisualsElement(t.coverMedium),this.visuals&&this.container.appendChild(this.visuals)):this.container.classList.add("h5p-cover-nographics"),this.container.appendChild(this.createTitleElement(e)),t.coverDescription&&this.container.appendChild(this.createDescriptionElement(t.coverDescription)),this.container.appendChild(this.createReadButton(s))}createContainer(){const t=document.createElement("div");return t.classList.add("h5p-interactive-book-cover"),t}createVisualsElement(t){if(!t||!t.params)return null;const e=document.createElement("div");return e.classList.add("h5p-interactive-book-cover-graphics"),e}initMedia(){if(!this.visuals||!this.params.coverMedium)return;const t=this.params.coverMedium;"H5P.Video"===(t.library||"").split(" ")[0]&&(t.params.visuals.fit=!1);const e=H5P.newRunnable(t,this.contentId,H5P.jQuery(this.visuals),!1,{metadata:t.medatata});if(this.bubbleUp(e,"resize",this.parent),this.bubbleDown(this.parent,"resize",[e]),"H5P.Image"===(t.library||"").split(" ")[0]){const t=this.visuals.querySelector("img")||this.visuals.querySelector(".h5p-placeholder");t.style.height="auto",t.style.width="auto"}this.visuals.appendChild(this.createCoverBar())}bubbleUp(t,e,s){t.on(e,(t=>{s.bubblingUpwards=!0,s.trigger(e,t),s.bubblingUpwards=!1}))}bubbleDown(t,e,s){t.on(e,(a=>{t.bubblingUpwards||s.forEach((t=>{t.trigger(e,a)}))}))}createImage(t,e,s){const a=document.createElement("img");return a.classList.add("h5p-interactive-book-cover-image"),a.src=H5P.getPath(t,e),a.setAttribute("draggable","false"),s&&(a.alt=s),a}createCoverBar(){const t=document.createElement("div");return t.classList.add("h5p-interactive-book-cover-bar"),t}createTitleElement(t){const e=document.createElement("p");e.innerHTML=t;const s=document.createElement("div");return s.classList.add("h5p-interactive-book-cover-title"),s.appendChild(e),s}createDescriptionElement(t){if(!t)return null;const e=document.createElement("div");return e.classList.add("h5p-interactive-book-cover-description"),e.innerHTML=t,e}createReadButton(t){const e=document.createElement("button");e.innerHTML=t,e.onclick=()=>{this.removeCover(!0)};const s=document.createElement("div");return s.classList.add("h5p-interactive-book-cover-readbutton"),s.appendChild(e),s}removeCover(t=!1){this.container.parentElement&&(this.container.parentElement.classList.remove("covered"),this.container.parentElement.removeChild(this.container)),this.hidden=!0,this.parent.trigger("coverRemoved",t)}}const o=n;s(683);var c=s(308),h=s.n(c);class l{static setBase(t){t&&(l.colorBase=h()(t),l.colorText=[l.DEFAULT_COLOR_BG,l.computeContrastColor(l.colorBase),l.computeContrastColor(l.colorBase,l.DEFAULT_COLOR_BG)].map((t=>({color:t,contrast:l.colorBase.contrast(t)}))).reduce(((t,e)=>e.contrast>t.contrast?e:t),{contrast:0}).color)}static getColor(t,e={}){if("string"==typeof e.opacity&&/^([0-9]|[1-8][0-9]|9[0-9]|100)(\.\d+)?\s?%$/.test(e.opacity)&&(e.opacity=parseInt(e.opacity)/100),"number"!=typeof e.opacity||e.opacity<0||e.opacity>1)return t;const s=h()("#ffffff").rgb().array();return h().rgb(t.rgb().array().map(((t,a)=>e.opacity*t+(1-e.opacity)*s[a])))}static isBaseColor(t){return h()(t).hex()===l.colorBase.hex()}static computeContrastColor(t,e){const s=(e=e||t).luminosity();let a;for(let r=0;r<=1;r+=.05){a=h().rgb(t.rgb().array().map((t=>t*(s>.5?1-r:1+r))));if(a.contrast(e)>=l.MINIMUM_ACCEPTABLE_CONTRAST)break}return a}static getContentTypeCSS(t){return l.COLOR_OVERRIDES[t]?l.COLOR_OVERRIDES[t].getCSS():""}static getCSS(){return`:root{\n      --color-base: ${l.colorBase};\n      --color-base-5: ${l.getColor(l.colorBase,{opacity:.05})};\n      --color-base-10: ${l.getColor(l.colorBase,{opacity:.1})};\n      --color-base-20: ${l.getColor(l.colorBase,{opacity:.2})};\n      --color-base-75: ${l.getColor(l.colorBase,{opacity:.75})};\n      --color-base-80: ${l.getColor(l.colorBase,{opacity:.8})};\n      --color-base-85: ${l.getColor(l.colorBase,{opacity:.85})};\n      --color-base-90: ${l.getColor(l.colorBase,{opacity:.9})};\n      --color-base-95: ${l.getColor(l.colorBase,{opacity:.95})};\n      --color-text: ${l.colorText};\n      --color-contrast: ${l.computeContrastColor(l.colorBase,l.DEFAULT_COLOR_BG)};\n    }`}}l.DEFAULT_COLOR_BASE=h()("#1768c4"),l.DEFAULT_COLOR_BG=h()("#ffffff"),l.MINIMUM_ACCEPTABLE_CONTRAST=4.5,l.colorBase=l.DEFAULT_COLOR_BASE,l.colorText=l.DEFAULT_COLOR_BG;class p extends H5P.EventDispatcher{constructor(t,e,s){super(),this.parent=e,this.behaviour=t.behaviour,this.l10n=t.l10n,this.chapters=s||[],this.subContentId="summary",this.wrapper=null,this.summaryMenuButton=this.createSummaryButton(),this.filterActionAll="all",this.filterActionUnanswered="unanswered",this.bookCompleted=!1,this.tempState=JSON.stringify(this.parent.previousState&&this.parent.previousState.chapters?this.parent.previousState.chapters:this.getChapterStats()),e.on("bookCompleted",(t=>this.setBookComplete(t.data.completed))),e.on("toggleMenu",(()=>{const t=document.querySelector(".h5p-interactive-book-summary-footer");t&&this.bookCompleted&&(this.parent.isMenuOpen()?t.classList.add("menu-open"):t.classList.remove("menu-open"))}))}setBookComplete(t){let e=this.parent.mainWrapper?this.parent.mainWrapper[0].querySelector(".h5p-interactive-book-summary-footer"):null;!e&&this.parent.isSmallSurface()&&(e=document.createElement("div"),e.classList.add("h5p-interactive-book-summary-footer"),e.appendChild(this.createSummaryButton()),this.parent.mainWrapper.append(e)),e&&t&&setTimeout((()=>e.classList.add("show-footer")),0),this.bookCompleted=t,Array.from(document.querySelectorAll(".h5p-interactive-book-summary-menu-button")).forEach((e=>e.setAttribute("data-book-completed",t.toString())))}setChapters(t){this.chapters=Array.isArray(t)?t:[]}setSummaryMenuButtonDisabled(t=!0){this.summaryMenuButton.disabled=t}setFilter(t){const e=this.wrapper.querySelector(".h5p-interactive-book-summary-overview-list"),s=Array.from(e.querySelectorAll(".h5p-interactive-book-summary-overview-section"));s.forEach((t=>{t.classList.remove("h5p-interactive-book-summary-top-section"),t.classList.remove("h5p-interactive-book-summary-bottom-section")}));const a=e.querySelector(".h5p-interactive-book-summary-overview-list-empty");if(a.style.display="none",t===this.filterActionUnanswered){e.classList.add("h5p-interactive-book-summary-overview-list-only-unanswered");const t=s.filter((t=>!t.classList.contains("h5p-interactive-book-summary-no-interactions")));t.length?(t[0].classList.add("h5p-interactive-book-summary-top-section"),t[t.length-1].classList.add("h5p-interactive-book-summary-bottom-section")):a.style.display="block"}else t===this.filterActionAll&&e.classList.remove("h5p-interactive-book-summary-overview-list-only-unanswered");setTimeout((()=>this.trigger("resize")),1)}createSummaryButton(){const t=document.createElement("button");t.classList.add("h5p-interactive-book-summary-menu-button"),t.onclick=()=>{const t={h5pbookid:this.parent.contentId,chapter:"h5p-interactive-book-chapter-summary",section:"top"};this.parent.trigger("newChapter",t),this.parent.isMenuOpen()&&this.parent.isSmallSurface()&&this.parent.trigger("toggleMenu")};const e=document.createElement("span");e.classList.add("h5p-interactive-book-summary-icon"),e.classList.add("icon-paper"),e.setAttribute("aria-hidden","true");const s=document.createElement("span");s.classList.add("h5p-interactive-book-summary-text"),s.innerHTML=this.l10n.summaryAndSubmit;const a=document.createElement("span");return a.classList.add("h5p-interactive-book-summary-menu-button-arrow"),a.classList.add("icon-up"),a.setAttribute("aria-hidden","true"),t.appendChild(e),t.appendChild(s),t.appendChild(a),t}createCircle(t){const e=l.computeContrastColor(l.colorBase,l.DEFAULT_COLOR_BG),s=document.createElement("div");return s.classList.add("h5p-interactive-book-summary-progress-circle"),s.setAttribute("data-value",t),s.setAttribute("data-start-angle",-Math.PI/3),s.setAttribute("data-thickness",13),s.setAttribute("data-empty-fill",`rgba(${e.rgb().array().join(", ")}, .1)`),s.setAttribute("data-fill",JSON.stringify({color:e.hex()})),s}createProgress(t,e,s,a,r=!1,i,n){const o=document.createElement("div"),c=document.createElement("h3");c.innerHTML=t;const h=100*s/a;void 0===i&&(i=s),void 0===n&&(n=a);const l=document.createElement("p");if(l.classList.add("h5p-interactive-book-summary-progressbox-bigtext"),l.innerHTML=Math.round(h)+"%",r){const t=document.createElement("span");t.classList.add("absolute-value"),t.innerHTML=s;const e=document.createElement("span");e.classList.add("separator"),e.innerHTML="/";const r=document.createElement("span");r.classList.add("absolute-value"),r.innerHTML=a,l.innerHTML="",l.appendChild(t),l.appendChild(e),l.appendChild(r)}const p=document.createElement("span");p.classList.add("h5p-interactive-book-summary-progressbox-smalltext"),p.innerHTML=e.replace("@count",i).replace("@total",n),o.appendChild(c),o.appendChild(l),o.appendChild(p);const d=document.createElement("div");return d.appendChild(o),d.appendChild(this.createCircle(s/a)),d}addScoreProgress(){let t=0,e=0;for(const s of this.chapters)t+=s.maxTasks,e+=s.tasksLeft;const s=this.createProgress(this.l10n.totalScoreLabel,this.l10n.interactionsProgressSubtext,this.parent.getScore(),this.parent.getMaxScore(),!0,Math.max(t-e,0),t);s.classList.add("h5p-interactive-book-summary-progress-container"),s.classList.add("h5p-interactive-book-summary-score-progress");const a=s.querySelector(".h5p-interactive-book-summary-progress-circle");return a.setAttribute("data-empty-fill","rgb(198, 220, 212)"),a.setAttribute("data-fill",JSON.stringify({color:"#0e7c57"})),s}addBookProgress(){const t=this.createProgress(this.l10n.bookProgress,this.l10n.bookProgressSubtext,this.chapters.filter((t=>t.completed)).length,this.chapters.length);return t.classList.add("h5p-interactive-book-summary-progress-container"),t.classList.add("h5p-interactive-book-summary-book-progress"),t}addInteractionsProgress(){let t=0,e=0;for(const s of this.chapters)t+=s.maxTasks,e+=s.tasksLeft;const s=this.createProgress(this.l10n.interactionsProgress,this.l10n.interactionsProgressSubtext,Math.max(t-e,0),t);return s.classList.add("h5p-interactive-book-summary-progress-container"),s.classList.add("h5p-interactive-book-summary-interactions-progress"),s}addProgressIndicators(){if(!this.behaviour.progressIndicators)return;const t=document.createElement("div");t.classList.add("h5p-interactive-box-summary-progress"),t.appendChild(this.addScoreProgress()),t.appendChild(this.addBookProgress()),t.appendChild(this.addInteractionsProgress()),setTimeout((()=>H5P.jQuery(".h5p-interactive-book-summary-progress-circle").circleProgress()),100),this.wrapper.appendChild(t)}addActionButtons(){const t=document.createElement("div");if(t.classList.add("h5p-interactive-book-summary-buttons"),this.checkTheAnswerIsUpdated(),this.parent.isSubmitButtonEnabled&&this.parent.isAnswerUpdated){const e=this.addButton("icon-paper-pencil",this.l10n.submitReport);e.classList.add("h5p-interactive-book-summary-submit"),e.onclick=()=>{this.trigger("submitted"),this.parent.triggerXAPIScored(this.parent.getScore(),this.parent.getMaxScore(),"completed"),t.classList.add("submitted");t.querySelector(".answers-submitted").focus(),this.tempState=JSON.stringify(this.getChapterStats()),this.parent.isAnswerUpdated=!1},t.appendChild(e)}this.behaviour.enableRetry&&t.appendChild(this.createRestartButton()),t.appendChild(this.createSubmittedConfirmation()),this.wrapper.appendChild(t)}createRestartButton(){const t=this.addButton("icon-restart",this.l10n.restartLabel);return t.classList.add("h5p-interactive-book-summary-restart"),t.onclick=()=>this.parent.resetTask(),t}createSubmittedConfirmation(){const t=document.createElement("div");t.classList.add("h5p-interactive-book-summary-submitted");const e=document.createElement("span");e.classList.add("icon-chapter-done"),e.classList.add("icon-check-mark"),t.appendChild(e);const s=document.createElement("p");return s.innerHTML=this.l10n.yourAnswersAreSubmittedForReview,s.tabIndex=-1,s.classList.add("answers-submitted"),t.appendChild(s),this.behaviour.enableRetry&&t.appendChild(this.createRestartButton()),t}addButton(t,e){const s=document.createElement("button");s.type="button",s.classList.add("h5p-interactive-book-summary-button"),s.innerHTML=e;const a=document.createElement("span");return a.classList.add(t),a.setAttribute("aria-hidden","true"),s.appendChild(a),s}createSectionList(t,e){let s=[],a=!1;for(const r of t){const t=document.createElement("li");if(t.classList.add("h5p-interactive-book-summary-overview-section-details"),this.behaviour.progressIndicators){const e=document.createElement("span");e.classList.add("h5p-interactive-book-summary-section-icon"),e.classList.add(r.taskDone?"icon-chapter-done":"icon-chapter-blank"),t.appendChild(e)}const i=document.createElement("button");i.type="button",i.classList.add("h5p-interactive-book-summary-section-title"),i.onclick=()=>{const t={h5pbookid:this.parent.contentId,chapter:`h5p-interactive-book-chapter-${e}`,section:`h5p-interactive-book-section-${r.instance.subContentId}`};this.parent.trigger("newChapter",t)};const n=r.instance.contentData&&r.instance.contentData.metadata&&r.instance.contentData.metadata.title,o=r.content&&r.content.metadata&&r.content.metadata.title;i.innerHTML=n||(o||"Untitled");const c=document.createElement("div");c.classList.add("h5p-interactive-book-summary-section-score"),c.innerHTML="-","function"==typeof r.instance.getScore&&(c.innerHTML=this.l10n.scoreText.replace("@score",r.instance.getScore()).replace("@maxscore",r.instance.getMaxScore())),r.taskDone?t.classList.add("h5p-interactive-book-summary-overview-section-details-task-done"):a=!0,t.appendChild(i),t.appendChild(c),s.push(t)}if(s.length){const t=document.createElement("div");t.classList.add("h5p-interactive-book-summary-overview-section-score-header");const e=document.createElement("div");e.innerHTML=this.l10n.score,t.appendChild(e),s.unshift(t)}return{hasUnansweredInteractions:a,sectionElements:s}}createChapterOverview(t){const e=document.createElement("li");e.classList.add("h5p-interactive-book-summary-overview-section");const s=document.createElement("h4");s.onclick=()=>{const e={h5pbookid:this.parent.contentId,chapter:`h5p-interactive-book-chapter-${t.instance.subContentId}`,section:"top"};this.parent.trigger("newChapter",e)};const a=document.createElement("span");if(a.innerHTML=t.title,s.appendChild(a),this.behaviour.progressIndicators){const e=document.createElement("span"),a=this.parent.getChapterStatus(t);e.classList.add(`icon-chapter-${a.toLowerCase()}`),s.appendChild(e)}e.appendChild(s);let{sectionElements:r,hasUnansweredInteractions:i}=this.createSectionList(t.sections.filter((t=>t.isTask)),t.instance.subContentId);!1===i&&e.classList.add("h5p-interactive-book-summary-no-interactions");const n=document.createElement("div");n.classList.add("h5p-interactive-book-summary-chapter-subheader"),t.maxTasks?n.innerHTML=this.l10n.leftOutOfTotalCompleted.replace("@left",Math.max(t.maxTasks-t.tasksLeft,0)).replace("@max",t.maxTasks):n.innerHTML=this.l10n.noInteractions,e.appendChild(n);const o=document.createElement("ul");return r.length&&r.map((t=>o.appendChild(t))),e.appendChild(o),e}createFilterDropdown(){const t=(t,r)=>{const i=document.createElement("li");i.role="menuitem";const n=document.createElement("button");return n.textContent=t,n.type="button",n.onclick=t=>{this.setFilter(r),e.removeAttribute("active"),s.setAttribute("aria-expanded","false"),a.textContent=t.currentTarget.innerHTML},i.appendChild(n),i},e=document.createElement("div");e.classList.add("h5p-interactive-book-summary-dropdown");const s=document.createElement("button");s.setAttribute("aria-haspopup","true"),s.setAttribute("aria-expanded","false"),s.type="button",s.onclick=()=>{e.hasAttribute("active")?(e.removeAttribute("active"),s.setAttribute("aria-expanded","false")):(e.setAttribute("active",""),s.setAttribute("aria-expanded","true"),s.focus())};const a=document.createElement("span");a.textContent=this.l10n.allInteractions,s.appendChild(a);const r=document.createElement("span");r.classList.add("h5p-interactive-book-summary-dropdown-icon"),r.classList.add("icon-expanded"),r.setAttribute("aria-hidden","true"),s.appendChild(r);const i=document.createElement("ul");i.role="menu",i.classList.add("h5p-interactive-book-summary-dropdown-menu");const n=t(this.l10n.allInteractions,this.filterActionAll),o=t(this.l10n.unansweredInteractions,this.filterActionUnanswered);return i.appendChild(n),i.appendChild(o),e.appendChild(s),e.appendChild(i),e}addSummaryOverview(){const t=document.createElement("ul");t.classList.add("h5p-interactive-book-summary-list");const e=document.createElement("li");e.classList.add("h5p-interactive-book-summary-overview-header");const s=document.createElement("h3");s.innerHTML=this.l10n.summaryHeader,e.appendChild(s),e.appendChild(this.createFilterDropdown()),t.appendChild(e);const a=document.createElement("ol");a.classList.add("h5p-interactive-book-summary-overview-list");for(const t of this.chapters)a.appendChild(this.createChapterOverview(t));const r=document.createElement("p");r.classList.add("h5p-interactive-book-summary-overview-list-empty"),r.classList.add("h5p-interactive-book-summary-top-section"),r.classList.add("h5p-interactive-book-summary-bottom-section"),r.innerHTML=this.l10n.noInteractions,a.appendChild(r),t.appendChild(a),this.wrapper.appendChild(t)}addScoreBar(){const t=document.createElement("div");t.classList.add("h5p-interactive-book-summary-score-bar");const e=H5P.JoubelUI.createScoreBar(this.parent.getMaxScore());e.setScore(this.parent.getScore()),e.appendTo(t),this.wrapper.appendChild(t)}noChapterInteractions(){const t=document.createElement("div");t.classList.add("h5p-interactive-book-summary-no-chapter-interactions");const e=document.createElement("p");e.innerHTML=this.l10n.noChapterInteractionBoldText;const s=document.createElement("p");s.classList.add("h5p-interactive-book-summary-no-initialized-chapters"),s.innerHTML=this.l10n.noChapterInteractionText,t.appendChild(e),t.appendChild(s),this.wrapper.appendChild(t)}addSummaryPage(t){if(this.wrapper=document.createElement("div"),this.wrapper.classList.add("h5p-interactive-book-summary-page"),this.chapters.filter((t=>t.isInitialized)).length>0||this.chapters.some((t=>t.sections.some((t=>t.taskDone))))){if(this.parent.pageContent&&this.parent.chapters[this.parent.getChapterId(this.parent.pageContent.targetPage.chapter)].isSummary||0===this.parent.chapters.length){if(this.parent.chapters.length>0)for(const t in this.chapters)this.parent.pageContent.initializeChapter(t);this.addProgressIndicators(),this.addActionButtons(),this.addSummaryOverview(),this.addScoreBar()}}else this.noChapterInteractions();return Array.from(document.querySelectorAll(".h5p-interactive-book-summary-footer")).forEach((t=>t.remove())),t.append(this.wrapper),t}checkTheAnswerIsUpdated(){const t=this.getChapterStats(),e=JSON.parse(this.tempState);for(const s of t.keys()){let a=e[s].state.instances,r=t[s].state.instances,i=t[s].sections;for(const t of a.keys())null!==a[t]&&void 0!==a[t]&&(Array.isArray(a[t])&&!this.compareStates(a[t],r[t])&&i[t].taskDone&&(this.parent.isAnswerUpdated=!0),"object"==typeof a[t]&&!Array.isArray(a[t])&&JSON.stringify(a[t])!==JSON.stringify(r[t])&&i[t].taskDone&&(this.parent.isAnswerUpdated=!0));if(this.parent.isAnswerUpdated)break}}getChapterStats(){return this.chapters.filter((t=>!t.isSummary)).map((t=>({sections:t.sections.map((t=>({taskDone:t.taskDone}))),state:t.instance.getCurrentState()})))}compareStates(t,e){return Array.isArray(t)&&Array.isArray(e)&&t.length===e.length&&t.every(((t,s)=>t===e[s]||""===e[s]))}}const d=p;class u extends H5P.EventDispatcher{constructor(t,e,s,a,r){if(super(),this.parent=a,this.behaviour=t.behaviour,this.params=r,this.targetPage={},this.targetPage.redirectFromComponent=!1,this.columnNodes=[],this.chapters=[],this.l10n=t.l10n,this.sidebarIsOpen=!1,this.previousState=s.previousState&&Object.keys(s.previousState).length>0?s.previousState:null,a.hasValidChapters()){const a=this.createColumns(t,e,s);this.preloadChapter(a)}this.content=this.createPageContent(),this.container=document.createElement("div"),this.container.classList.add("h5p-interactive-book-main","h5p-interactive-book-navigation-hidden"),this.container.appendChild(this.content)}getChapters(t=!0){return this.chapters.filter((e=>!e.isSummary||e.isSummary&&!!t))}resetChapters(){this.behaviour.progressIndicators&&!this.behaviour.progressAuto&&this.columnNodes.forEach((t=>{Array.from(t.querySelectorAll(".h5p-interactive-book-status-progress-marker > input[type=checkbox]")).forEach((t=>t.checked=!1))}))}createPageContent(){const t=document.createElement("div");return t.classList.add("h5p-interactive-book-content"),this.columnNodes.forEach((e=>{t.appendChild(e)})),this.setChapterOrder(this.parent.getActiveChapter()),t}setChapterOrder(t){t<0||t>this.columnNodes.length-1||this.columnNodes.forEach(((e,s)=>{e.classList.remove("h5p-interactive-book-previous"),e.classList.remove("h5p-interactive-book-current"),e.classList.remove("h5p-interactive-book-next"),s===t-1||s===t&&e.classList.add("h5p-interactive-book-current")}))}createChapterReadCheckbox(t){const e=document.createElement("input");e.setAttribute("type","checkbox"),e.checked=t,e.onclick=t=>{this.parent.setChapterRead(void 0,t.target.checked)};const s=document.createElement("p");s.innerHTML=this.params.l10n.markAsFinished;const a=document.createElement("label");return a.classList.add("h5p-interactive-book-status-progress-marker"),a.appendChild(e),a.appendChild(s),a}injectSectionId(t,e){const s=e.getElementsByClassName("h5p-column-content");for(let e=0;e<t.length;e++)s[e].id=`h5p-interactive-book-section-${t[e].instance.subContentId}`}preloadChapter(t){this.initializeChapter(t),this.initializeChapter(t+1)}initializeChapter(t){if(t<0||t>this.chapters.length-1)return;const e=this.chapters[t];if(e.isSummary){const s=this.columnNodes[t];return e.isInitialized&&(e.instance.setChapters(this.getChapters(!1)),s.innerHTML=""),e.instance.addSummaryPage(H5P.jQuery(s)),void(e.isInitialized=!0)}if(!e.isInitialized){const s=this.columnNodes[t];e.instance.attach(H5P.jQuery(s)),this.injectSectionId(e.sections,s),this.behaviour.progressIndicators&&!this.behaviour.progressAuto&&s.appendChild(this.createChapterReadCheckbox(!!this.previousState?.chapters?.[t].completed)),e.isInitialized=!0}}createColumns(e,s,a){const r=(a=Object.assign({},a)).previousState&&Object.keys(a.previousState).length>0?a.previousState:null;let i=t.extractFragmentsFromURL(this.parent.validateFragments,this.parent.hashWindow);0===Object.keys(i).length&&a&&r&&r.urlFragments&&(i=r.urlFragments);const n=[];this.chapters=n;for(let t=0;t<e.chapters.length;t++){const a=document.createElement("div"),i={parent:self,previousState:r?r.chapters[t].state:{}},o=H5P.newRunnable(e.chapters[t],s,void 0,void 0,i);this.parent.bubbleUp(o,"resize",this.parent);const c=[],h=(t,e)=>{t.getInstances().forEach(((s,a)=>{if("H5P.Row"===s.libraryInfo.machineName){const t=e[a].content.params.columns;s.getInstances().forEach(((e,s)=>{h(e,t[s].content.params.content)}))}else{let r=e[a].content;"H5P.RowColumn"===t.libraryInfo.machineName&&(r=e[a]),c.push({content:r,instance:s,isTask:!1})}}))};h(o,e.chapters[t].params.content);const l={isInitialized:!1,instance:o,title:e.chapters[t].metadata.title,completed:!!r&&r.chapters[t].completed,tasksLeft:r?r.chapters[t].tasksLeft:0,isSummary:!1,sections:c};a.classList.add("h5p-interactive-book-chapter"),a.id=`h5p-interactive-book-chapter-${o.subContentId}`,l.maxTasks=0,l.tasksLeft=0,l.sections.forEach(((e,s)=>{H5P.Column.isTask(e.instance)&&(e.isTask=!0,l.maxTasks++,l.tasksLeft++,this.behaviour.progressIndicators&&(e.taskDone=!!r&&r.chapters[t].sections[s].taskDone,e.taskDone&&l.tasksLeft--))})),n.push(l),this.columnNodes.push(a)}if(this.parent.hasSummary(n)){const t=document.createElement("div"),s=new d({...e},this.parent,this.getChapters(!1));this.parent.bubbleUp(s,"resize",this.parent);const a={isInitialized:!1,instance:s,title:this.l10n.summaryHeader,isSummary:!0,sections:[]};t.classList.add("h5p-interactive-book-chapter"),t.id="h5p-interactive-book-chapter-summary",a.maxTasks=a.tasksLeft,n.push(a),this.columnNodes.push(t)}if(i.chapter&&i.h5pbookid==this.parent.contentId){const t=this.findChapterIndex(i.chapter);if(-1===t)return 0;if(this.parent.setActiveChapter(t),i.section){const t=i.headerNumber;window.requestAnimationFrame((()=>{this.redirectSection(i.section,t),this.parent.hasCover()&&this.parent.cover.removeCover()}))}return t}return 0}redirectSection(t,e=null){if("top"===t)this.parent.trigger("scrollToTop");else{let s=document.getElementById(t);if(s){if(null!==e){const t=s.querySelectorAll("h2, h3");t[e]&&(s=t[e])}const t=document.createElement("div");t.setAttribute("tabindex","-1"),s.parentNode.insertBefore(t,s),t.focus(),t.addEventListener("blur",(()=>{t.parentNode.removeChild(t)})),this.targetPage.redirectFromComponent=!1,setTimeout((()=>{s.scrollIntoView(!0)}),100)}}}findChapterIndex(t){let e=-1;return this.columnNodes.forEach(((s,a)=>{-1===e&&s.id===t&&(e=a)})),e}changeChapter(t,e){if(this.columnNodes[this.parent.getActiveChapter()].classList.contains("h5p-interactive-book-animate"))return;this.targetPage=e;const s=this.parent.getActiveChapter(),a=this.parent.getChapterId(this.targetPage.chapter),r=s!==a;if(t||this.parent.updateChapterProgress(s,r),this.preloadChapter(a),a<this.columnNodes.length){const e=this.columnNodes[s],i=this.columnNodes[a];if(r&&!t){this.parent.setActiveChapter(a);const t=s<a?"next":"previous";i.classList.add(`h5p-interactive-book-${t}`),i.classList.add("h5p-interactive-book-animate"),e.classList.add("h5p-interactive-book-animate"),setTimeout((()=>{"previous"===t?e.classList.add("h5p-interactive-book-next"):(e.classList.remove("h5p-interactive-book-current"),e.classList.add("h5p-interactive-book-previous")),i.classList.remove(`h5p-interactive-book-${t}`)}),1),setTimeout((()=>{e.classList.remove("h5p-interactive-book-next"),e.classList.remove("h5p-interactive-book-previous"),e.classList.remove("h5p-interactive-book-current"),i.classList.add("h5p-interactive-book-current"),i.classList.remove("h5p-interactive-book-animate"),e.classList.remove("h5p-interactive-book-animate"),this.redirectSection(this.targetPage.section,this.targetPage.headerNumber),this.parent.trigger("resize")}),250)}else this.parent.cover&&!this.parent.cover.hidden?this.parent.on("coverRemoved",(()=>{this.redirectSection(this.targetPage.section,this.targetPage.headerNumber)})):this.redirectSection(this.targetPage.section,this.targetPage.headerNumber);this.parent.sideBar.redirectHandler(a)}}updateFooter(){if(0===this.chapters.length)return;const t=this.parent.getActiveChapter(),e=this.columnNodes[t],s=this.parent.shouldFooterBeHidden(e.clientHeight),a=this.parent.statusBarFooter.wrapper.parentNode;s?a!==this.content&&this.content.appendChild(this.parent.statusBarFooter.wrapper):a!==this.parent.$wrapper&&this.parent.$wrapper.append(this.parent.statusBarFooter.wrapper)}toggleNavigationMenu(){const t=this;this.sidebarIsOpen?(H5P.Transition.onTransitionEnd(H5P.jQuery(this.container),(function(){t.container.classList.add("h5p-interactive-book-navigation-hidden")}),500),this.container.classList.remove("h5p-interactive-book-navigation-open")):(this.container.classList.remove("h5p-interactive-book-navigation-hidden"),setTimeout((function(){t.container.classList.add("h5p-interactive-book-navigation-open")}),1)),this.sidebarIsOpen=!this.sidebarIsOpen}}const m=u;class g extends H5P.EventDispatcher{constructor(e,s,r={}){super();const n=this;if(this.contentId=s,this.previousState=r.previousState,e&&e.behaviour&&e.behaviour.baseColor&&!l.isBaseColor(e.behaviour.baseColor)){l.setBase(e.behaviour.baseColor);const t=document.createElement("style");t.styleSheet?t.styleSheet.cssText=l.getCSS():t.appendChild(document.createTextNode(l.getCSS())),document.head.appendChild(t)}this.activeChapter=0,this.newHandler={},this.completed=!1,this.params=g.sanitizeConfig(e),this.l10n=this.params.l10n,this.params.behaviour=this.params.behaviour||{},this.mainWrapper=null,this.currentRatio=null,this.smallSurface="h5p-interactive-book-small",this.mediumSurface="h5p-interactive-book-medium",this.largeSurface="h5p-interactive-book-large",this.chapters=[],this.isSubmitButtonEnabled=!1,this.isAnswerUpdated=!0,void 0!==r.isScoringEnabled||void 0!==r.isReportingEnabled?this.isSubmitButtonEnabled=r.isScoringEnabled||r.isReportingEnabled:void 0!==H5PIntegration.reportingIsEnabled&&(this.isSubmitButtonEnabled=H5PIntegration.reportingIsEnabled),this.params.behaviour.enableSolutionsButton=!1,this.params.behaviour.enableRetry=this.params.behaviour.enableRetry??!0,this.getAnswerGiven=()=>this.chapters.reduce(((t,e)=>"function"==typeof e.instance.getAnswerGiven?t&&e.instance.getAnswerGiven():t),!0),this.getScore=()=>this.chapters.length>0?this.chapters.reduce(((t,e)=>"function"==typeof e.instance.getScore?t+e.instance.getScore():t),0):this.previousState&&this.previousState.score||0,this.getMaxScore=()=>this.chapters.length>0?this.chapters.reduce(((t,e)=>"function"==typeof e.instance.getMaxScore?t+e.instance.getMaxScore():t),0):this.previousState&&this.previousState.maxScore||0,this.showSolutions=()=>{this.chapters.forEach((t=>{"function"==typeof t.instance.toggleReadSpeaker&&t.instance.toggleReadSpeaker(!0),"function"==typeof t.instance.showSolutions&&t.instance.showSolutions(),"function"==typeof t.instance.toggleReadSpeaker&&t.instance.toggleReadSpeaker(!1)}))},this.resetTask=()=>{if(this.hasValidChapters()){this.chapters.forEach(((t,e)=>{"function"==typeof t.instance.resetTask&&t.instance.resetTask(),t.completed=!1,t.tasksLeft=t.maxTasks,t.sections.forEach((t=>t.taskDone=!1)),this.setChapterRead(e,!1)}));for(const t in this.previousState)delete this.previousState[t];this.hashWindow.location.hash="";const t=this.getActiveChapter();this.redirectChapter({h5pbookid:this.contentId,chapter:this.pageContent.columnNodes[0].id,section:"top"}),this.chapters[t].completed=!1,this.hasCover()&&this.displayCover(this.mainWrapper),this.isAnswerUpdated=!1,this.setActivityStarted(!0),this.pageContent.resetChapters(),this.sideBar.resetIndicators()}},this.getXAPIData=()=>{const t=this.createXAPIEventTemplate("answered");return this.addQuestionToXAPI(t),t.setScoredResult(this.getScore(),this.getMaxScore(),this,!0,this.getScore()===this.getMaxScore()),{statement:t.data.statement,children:this.getXAPIDataFromChildren(this.chapters.map((t=>t.instance)))}},this.getXAPIDataFromChildren=t=>t.map((t=>{if("function"==typeof t.getXAPIData)return t.getXAPIData()})).filter((t=>!!t)),this.addQuestionToXAPI=t=>{const e=t.getVerifiedStatementValue(["object","definition"]);Object.assign(e,this.getxAPIDefinition())},this.getxAPIDefinition=()=>({interactionType:"compound",type:"http://adlnet.gov/expapi/activities/cmi.interaction",description:{"en-US":""}}),this.getCurrentState=()=>{const e=this.chapters.filter((t=>!t.isSummary)).map((t=>({completed:t.completed||null,sections:t.sections.map((t=>({taskDone:t.taskDone||null}))),state:t.instance.getCurrentState()||null}))),s={urlFragments:!this.hashWindow.location.hash&&this.previousState?.urlFragments?this.previousState.urlFragments:t.extractFragmentsFromURL(this.validateFragments,this.hashWindow),chapters:e};return this.activeChapter>0&&(s.score=this.getScore(),s.maxScore=this.getMaxScore()),s},this.getContext=()=>this.cover&&!this.cover.hidden?{}:{type:"page",value:this.activeChapter+1},this.hasCover=()=>this.cover&&this.cover.container,this.hasSummary=(t=this.chapters)=>this.hasChaptersTasks(t)&&this.params.behaviour.displaySummary&&!0===this.params.behaviour.displaySummary,this.hasChaptersTasks=t=>t.filter((t=>t.sections.filter((t=>!0===t.isTask)).length>0)).length>0,this.hasValidChapters=()=>this.params.chapters.length>0,this.getActiveChapter=(t=!1)=>t?this.chapters[this.activeChapter]:this.activeChapter,this.setActiveChapter=t=>{t=parseInt(t),isNaN(t)||(this.activeChapter=t)},this.validateFragments=t=>void 0!==t.chapter&&String(t.h5pbookid)===String(n.contentId),this.bubbleUp=(t,e,s)=>{t.on(e,(function(t){s.bubblingUpwards=!0,s.trigger(e,t),s.bubblingUpwards=!1}))},this.isMenuOpen=()=>this.statusBarHeader.isMenuOpen(),this.isSmallSurface=()=>this.mainWrapper&&this.mainWrapper.hasClass(this.smallSurface),this.getRatio=()=>this.mainWrapper.width()/parseFloat(this.mainWrapper.css("font-size")),this.setWrapperClassFromRatio=(t,e=this.getRatio())=>{e!==this.currentRatio&&(this.breakpoints().forEach((t=>{t.shouldAdd(e)?this.mainWrapper.addClass(t.className):this.mainWrapper.removeClass(t.className)})),this.currentRatio=e)},this.resize=()=>{if(this.isBubblingUpToCore||this.isBubblingUpToCoreNo2)return;if(!this.pageContent||!this.hasValidChapters()||!this.mainWrapper)return;window.requestAnimationFrame((()=>{this.setWrapperClassFromRatio(this.mainWrapper)}));const t=this.getActiveChapter(),e=this.pageContent.columnNodes[t];null!==e.offsetParent&&(this.bubblingUpwards||this.pageContent.chapters[t].instance.trigger("resize"),this.pageContent.content.style.height===`${e.offsetHeight}px`||e.classList.contains("h5p-interactive-book-animate")||(this.pageContent.content.style.height=`${e.offsetHeight}px`,this.pageContent.updateFooter(),setTimeout((()=>{this.isBubblingUpToCore=!0,this.trigger("resize"),this.isBubblingUpToCore=!1}),10),window.clearTimeout(this.extraResizeTimeout),this.extraResizeTimeout=window.setTimeout((()=>{this.isBubblingUpToCoreNo2=!0,this.trigger("resize"),this.isBubblingUpToCoreNo2=!1}),200)))},this.on("resize",this.resize,this),this.on("toggleMenu",(t=>{this.sideBar.container.addEventListener("transitionend",(()=>{this.trigger("resize")}));const e=!t.data?.shouldNotFocusNav;this.pageContent.toggleNavigationMenu(),this.statusBarHeader.menuToggleButton.setAttribute("aria-expanded",this.statusBarHeader.menuToggleButton.classList.toggle("h5p-interactive-book-status-menu-active")?"true":"false"),this.pageContent.sidebarIsOpen&&e&&this.sideBar.focus()})),this.on("scrollToTop",(t=>{if(!0===H5P.isFullscreen){const t=this.pageContent.container;t.scrollBy(0,-t.scrollHeight)}else{if(t?.data?.preventScrollToTop)return;!1!==t?.data?.focus&&this.statusBarHeader.wrapper.scrollIntoView({block:"nearest"})}})),this.on("newChapter",(e=>{if(!this.pageContent.columnNodes[this.getActiveChapter()].classList.contains("h5p-interactive-book-animate")){if(this.newHandler=e.data,e.data.newHash=t.createFragmentsString(this.newHandler),this.newHandler.redirectFromComponent=!0,this.getChapterId(e.data.chapter)===this.activeChapter){if(t.areFragmentsEqual(e.data,t.extractFragmentsFromURL(this.validateFragments,this.hashWindow),["h5pbookid","chapter","section","headerNumber"]))return void this.pageContent.changeChapter(!1,e.data)}if(this.params.behaviour.progressAuto){const t=this.getChapterId(this.newHandler.chapter);this.isFinalChapterWithoutTask(t)&&this.setChapterRead(t)}H5P.trigger(this,"changeHash",e.data),H5P.trigger(this,"scrollToTop",e.data)}})),this.isCurrentChapterRead=()=>this.isChapterRead(this.chapters[this.activeChapter],this.params.behaviour.progressAuto),this.isChapterRead=(t,e=this.params.behaviour.progressAuto)=>t.completed||e&&0===t.tasksLeft,this.isFinalChapterWithoutTask=t=>0===this.chapters[t].maxTasks&&this.chapters.slice(0,t).concat(this.chapters.slice(t+1)).every((t=>0===t.tasksLeft)),this.setChapterRead=(t=this.activeChapter,e=!0)=>{this.handleChapterCompletion(t,e),this.sideBar.updateChapterProgressIndicator(t,e?"DONE":this.hasChapterStartedTasks(this.chapters[t])?"STARTED":"BLANK")},this.hasChapterStartedTasks=t=>t.sections.filter((t=>t.taskDone)).length>0,this.getChapterStatus=(t,e=this.params.behaviour.progressAuto)=>{let s="BLANK";return this.isChapterRead(t,e)?s="DONE":this.hasChapterStartedTasks(t)&&(s="STARTED"),s},this.updateChapterProgress=(t,e=!1)=>{if(!this.params.behaviour.progressIndicators)return;const s=this.chapters[t];let a;a=s.maxTasks?this.getChapterStatus(s):this.isChapterRead(s)&&e?"DONE":"BLANK","DONE"===a&&this.handleChapterCompletion(t),this.sideBar.updateChapterProgressIndicator(t,a)},this.getChapterId=t=>{t=t.replace("h5p-interactive-book-chapter-","");const e=this.chapters.map((t=>t.instance.subContentId)).indexOf(t);return-1===e?0:e},this.handleChapterCompletion=(t,e=!0)=>{const s=this.chapters[t];if(!0!==s.isSummary){if(!e)return s.completed=!1,this.completed=!1,void this.trigger("bookCompleted",{completed:this.completed});s.completed||(s.completed=!0,s.instance.triggerXAPIScored(s.instance.getScore(),s.instance.getMaxScore(),"completed")),!this.completed&&this.chapters.filter((t=>!t.isSummary)).every((t=>t.completed))&&(this.completed=!0,this.trigger("bookCompleted",{completed:this.completed}))}},this.shouldFooterBeHidden=()=>this.isFullscreen,this.getContainerWidth=()=>this.pageContent&&this.pageContent.container?this.pageContent.container.offsetWidth:0,this.changeChapter=t=>{this.pageContent.changeChapter(t,this.newHandler),this.statusBarHeader.updateStatusBar(),this.statusBarFooter.updateStatusBar(),this.newHandler.redirectFromComponent=!1},this.breakpoints=()=>[{className:this.smallSurface,shouldAdd:t=>t<43},{className:this.mediumSurface,shouldAdd:t=>t>=43&&t<60},{className:this.largeSurface,shouldAdd:t=>t>=60}],H5P.on(this,"respondChangeHash",(()=>{const e=t.extractFragmentsFromURL(n.validateFragments,this.hashWindow);e.h5pbookid&&String(e.h5pbookid)===String(n.contentId)&&this.redirectChapter(e)})),H5P.on(this,"changeHash",(t=>{String(t.data.h5pbookid)===String(this.contentId)&&(this.hashWindow.location.hash=t.data.newHash)})),H5P.externalDispatcher.on("xAPI",(function(t){const e=["answered","completed","interacted","attempted"].indexOf(t.getVerb())>-1,s=n.chapters.length;if(n!==this&&e&&s){const t=this.subContentId||this.contentData?.subContentId;if(!t)return;n.setSectionStatusByID(t,n.activeChapter)}})),this.redirectChapter=t=>{this.newHandler.redirectFromComponent||(t.h5pbookid&&String(t.h5pbookid)===String(n.contentId)?n.newHandler=t:n.newHandler={chapter:`h5p-interactive-book-chapter-${n.chapters[0].instance.subContentId}`,h5pbookid:n.h5pbookid}),n.changeChapter(!1)},this.setSectionStatusByID=(t,e)=>{this.chapters[e].sections.forEach(((s,a)=>{const r=s.instance;r.subContentId!==t||s.taskDone||(s.taskDone=!r.getAnswerGiven||r.getAnswerGiven(),this.sideBar.setSectionMarker(e,a),s.taskDone&&(this.chapters[e].tasksLeft-=1),this.updateChapterProgress(e))}))},this.addHashListener=t=>{t.addEventListener("hashchange",(t=>{H5P.trigger(this,"respondChangeHash",t)})),this.hashWindow=t};try{this.addHashListener(top)}catch(t){if(!(t instanceof DOMException))throw t;this.addHashListener(window)}this.displayCover=t=>{this.hideAllElements(!0),t.append(this.cover.container),t.addClass("covered"),this.cover.initMedia()},this.attach=t=>{this.mainWrapper=t,t.addClass("h5p-interactive-book h5p-scrollable-fullscreen"),this.isEdge18orEarlier()&&t.addClass("edge-18"),this.setWrapperClassFromRatio(this.mainWrapper),this.cover&&this.shouldShowCover&&this.displayCover(t),t.append(this.statusBarHeader.wrapper);const e=this.pageContent.container.firstChild;e&&this.pageContent.container.insertBefore(this.sideBar.container,e),t.append(this.pageContent.container),t.append(this.statusBarFooter.wrapper),this.$wrapper=t,this.params.behaviour.defaultTableOfContents&&!this.isSmallSurface()&&this.trigger("toggleMenu",{shouldNotFocusNav:!0}),this.pageContent.updateFooter()},this.isEdge18orEarlier=function(){const t=window.navigator.userAgent,e=t.indexOf("Edge/");if(e<0)return!1;const s=t.substring(e+5,t.indexOf(".",e));return parseInt(s)<=18},this.hideAllElements=function(t){const e=[this.statusBarHeader.wrapper,this.statusBarFooter.wrapper,this.pageContent.container];t?e.forEach((t=>{t.classList.add("h5p-content-hidden"),t.classList.add("h5p-interactive-book-cover-present")})):e.forEach((t=>{t.classList.remove("h5p-content-hidden"),t.classList.remove("h5p-interactive-book-cover-present")}))};const c=t.extractFragmentsFromURL(this.validateFragments,this.hashWindow);this.shouldShowCover=this.params.showCoverPage&&!(c.chapter||r.previousState?.urlFragments?.chapter),this.params.showCoverPage&&(this.cover=new o(this.params.bookCover,r.metadata.title,this.l10n.read,s,this));const h={...r,parent:this};this.pageContent=new m(this.params,s,h,this,{l10n:{markAsFinished:this.l10n.markAsFinished},behaviour:this.params.behaviour}),this.chapters=this.pageContent.getChapters(),this.sideBar=new a(this.params,s,r.metadata.title,this,this.chapters),this.chapters.forEach(((t,e)=>{this.setChapterRead(e,t.completed)})),this.statusBarHeader=new i(s,this.chapters.length,this,{l10n:this.l10n,a11y:this.params.a11y,behaviour:this.params.behaviour,displayFullScreenButton:!0,displayMenuToggleButton:!0,preventScrollToTop:!0},"h5p-interactive-book-status-header"),this.statusBarFooter=new i(s,this.chapters.length,this,{l10n:this.l10n,a11y:this.params.a11y,behaviour:this.params.behaviour,displayToTopButton:!0},"h5p-interactive-book-status-footer"),this.hasCover()?(this.hideAllElements(!0),this.on("coverRemoved",(t=>{this.hideAllElements(!1),this.params.chapters[this.activeChapter]?.subContentId&&this.trigger("newChapter",{h5pbookid:this.contentId,chapter:`h5p-interactive-book-chapter-${this.params.chapters[this.activeChapter].subContentId}`,section:0,focus:t.data}),this.trigger("resize"),this.setActivityStarted(),t.data&&this.statusBarHeader.progressBar.progress.focus()}))):this.setActivityStarted(),this.hasValidChapters()&&(this.statusBarHeader.updateStatusBar(),this.statusBarFooter.updateStatusBar())}static sanitizeConfig(t){const{read:e="Read",displayTOC:s="Display &#039;Table of contents&#039;",hideTOC:a="Hide &#039;Table of contents&#039;",nextPage:r="Next page",previousPage:i="Previous page",chapterCompleted:n="Page completed!",partCompleted:o="@pages of @total completed",incompleteChapter:c="Incomplete page",navigateToTop:h="Navigate to the top",markAsFinished:l="I have finished this page",fullscreen:p="Fullscreen",exitFullscreen:d="Exit fullscreen",bookProgressSubtext:u="@count of @total pages",interactionsProgressSubtext:m="@count of @total interactions",submitReport:g="Submit Report",restartLabel:b="Restart",summaryHeader:v="Summary",allInteractions:f="All interactions",unansweredInteractions:k="Unanswered interactions",scoreText:y="@score / @maxscore",leftOutOfTotalCompleted:C="@left of @max interactinos completed",noInteractions:w="No interactions",score:S="Score",summaryAndSubmit:L="Summary & submit",noChapterInteractionBoldText:x="You have not interacted with any pages.",noChapterInteractionText:E="You have to interact with at least one page before you can see the summary.",yourAnswersAreSubmittedForReview:A="Your answers are submitted for review!",bookProgress:T="Book progress",interactionsProgress:M="Interactions progress",totalScoreLabel:I="Total score",...P}=t;return P.chapters=P.chapters.map((t=>(t.params.content=t.params.content?.filter((t=>t.content)),t))).filter((t=>t.params.content&&t.params.content.length>0)),P.behaviour.displaySummary=void 0===P.behaviour.displaySummary||P.behaviour.displaySummary,P.l10n={read:e,displayTOC:s,hideTOC:a,nextPage:r,previousPage:i,chapterCompleted:n,partCompleted:o,incompleteChapter:c,navigateToTop:h,markAsFinished:l,fullscreen:p,exitFullscreen:d,bookProgressSubtext:u,interactionsProgressSubtext:m,submitReport:g,restartLabel:b,summaryHeader:v,allInteractions:f,unansweredInteractions:k,scoreText:y,leftOutOfTotalCompleted:C,noInteractions:w,score:S,summaryAndSubmit:L,noChapterInteractionBoldText:x,noChapterInteractionText:E,yourAnswersAreSubmittedForReview:A,bookProgress:T,interactionsProgress:M,totalScoreLabel:I},P}}H5P=H5P||{},H5P.InteractiveBook=g})()})();;H5P.Tooltip = H5P.Tooltip || function() {};

H5P.Question = (function ($, EventDispatcher, JoubelUI) {

  /**
   * Extending this class make it alot easier to create tasks for other
   * content types.
   *
   * @class H5P.Question
   * @extends H5P.EventDispatcher
   * @param {string} type
   */
  function Question(type) {
    var self = this;

    // Inheritance
    EventDispatcher.call(self);

    // Register default section order
    self.order = ['video', 'image', 'audio', 'introduction', 'content', 'explanation', 'feedback', 'scorebar', 'buttons', 'read'];

    // Keep track of registered sections
    var sections = {};

    // Buttons
    var buttons = {};
    var buttonOrder = [];

    // Wrapper when attached
    var $wrapper;

    // Click element
    var clickElement;

    // ScoreBar
    var scoreBar;

    // Keep track of the feedback's visual status.
    var showFeedback;

    // Keep track of which buttons are scheduled for hiding.
    var buttonsToHide = [];

    // Keep track of which buttons are scheduled for showing.
    var buttonsToShow = [];

    // Keep track of the hiding and showing of buttons.
    var toggleButtonsTimer;
    var toggleButtonsTransitionTimer;
    var buttonTruncationTimer;

    // Keeps track of initialization of question
    var initialized = false;

    /**
     * @type {Object} behaviour Behaviour of Question
     * @property {Boolean} behaviour.disableFeedback Set to true to disable feedback section
     */
    var behaviour = {
      disableFeedback: false,
      disableReadSpeaker: false
    };

    // Keeps track of thumb state
    var imageThumb = true;

    // Keeps track of image transitions
    var imageTransitionTimer;

    // Keep track of whether sections is transitioning.
    var sectionsIsTransitioning = false;

    // Keep track of auto play state
    var disableAutoPlay = false;

    // Feedback transition timer
    var feedbackTransitionTimer;

    // Used when reading messages to the user
    var $read, readText;

    /**
     * Register section with given content.
     *
     * @private
     * @param {string} section ID of the section
     * @param {(string|H5P.jQuery)} [content]
     */
    var register = function (section, content) {
      sections[section] = {};
      var $e = sections[section].$element = $('<div/>', {
        'class': 'h5p-question-' + section,
      });
      if (content) {
        $e[content instanceof $ ? 'append' : 'html'](content);
      }
    };

    /**
     * Update registered section with content.
     *
     * @private
     * @param {string} section ID of the section
     * @param {(string|H5P.jQuery)} content
     */
    var update = function (section, content) {
      if (content instanceof $) {
        sections[section].$element.html('').append(content);
      }
      else {
        sections[section].$element.html(content);
      }
    };

    /**
     * Insert element with given ID into the DOM.
     *
     * @private
     * @param {array|Array|string[]} order
     * List with ordered element IDs
     * @param {string} id
     * ID of the element to be inserted
     * @param {Object} elements
     * Maps ID to the elements
     * @param {H5P.jQuery} $container
     * Parent container of the elements
     */
    var insert = function (order, id, elements, $container) {
      // Try to find an element id should be after
      for (var i = 0; i < order.length; i++) {
        if (order[i] === id) {
          // Found our pos
          while (i > 0 &&
          (elements[order[i - 1]] === undefined ||
          !elements[order[i - 1]].isVisible)) {
            i--;
          }
          if (i === 0) {
            // We are on top.
            elements[id].$element.prependTo($container);
          }
          else {
            // Add after element
            elements[id].$element.insertAfter(elements[order[i - 1]].$element);
          }
          elements[id].isVisible = true;
          break;
        }
      }
    };

    /**
     * Make feedback into a popup and position relative to click.
     *
     * @private
     * @param {string} [closeText] Text for the close button
     */
    var makeFeedbackPopup = function (closeText) {
      var $element = sections.feedback.$element;
      var $parent = sections.content.$element;
      var $click = (clickElement != null ? clickElement.$element : null);

      $element.appendTo($parent).addClass('h5p-question-popup');

      if (sections.scorebar) {
        sections.scorebar.$element.appendTo($element);
      }

      $parent.addClass('h5p-has-question-popup');

      // Draw the tail
      var $tail = $('<div/>', {
        'class': 'h5p-question-feedback-tail'
      }).hide()
        .appendTo($parent);

      // Draw the close button
      var $close = $('<div/>', {
        'class': 'h5p-question-feedback-close',
        'tabindex': 0,
        'title': closeText,
        on: {
          click: function (event) {
            $element.remove();
            $tail.remove();
            event.preventDefault();
          },
          keydown: function (event) {
            switch (event.which) {
              case 13: // Enter
              case 32: // Space
                $element.remove();
                $tail.remove();
                event.preventDefault();
            }
          }
        }
      }).hide().appendTo($element);

      if ($click != null) {
        if ($click.hasClass('correct')) {
          $element.addClass('h5p-question-feedback-correct');
          $close.show();
          sections.buttons.$element.hide();
        }
        else {
          sections.buttons.$element.appendTo(sections.feedback.$element);
        }
      }

      positionFeedbackPopup($element, $click);
    };

    /**
     * Position the feedback popup.
     *
     * @private
     * @param {H5P.jQuery} $element Feedback div
     * @param {H5P.jQuery} $click Visual click div
     */
    var positionFeedbackPopup = function ($element, $click) {
      var $container = $element.parent();
      var $tail = $element.siblings('.h5p-question-feedback-tail');
      var popupWidth = $element.outerWidth();
      var popupHeight = setElementHeight($element);
      var space = 15;
      var disableTail = false;
      var positionY = $container.height() / 2 - popupHeight / 2;
      var positionX = $container.width() / 2 - popupWidth / 2;
      var tailX = 0;
      var tailY = 0;
      var tailRotation = 0;

      if ($click != null) {
        // Edge detection for click, takes space into account
        var clickNearTop = ($click[0].offsetTop < space);
        var clickNearBottom = ($click[0].offsetTop + $click.height() > $container.height() - space);
        var clickNearLeft = ($click[0].offsetLeft < space);
        var clickNearRight = ($click[0].offsetLeft + $click.width() > $container.width() - space);

        // Click is not in a corner or close to edge, calculate position normally
        positionX = $click[0].offsetLeft - popupWidth / 2  + $click.width() / 2;
        positionY = $click[0].offsetTop - popupHeight - space;
        tailX = positionX + popupWidth / 2 - $tail.width() / 2;
        tailY = positionY + popupHeight - ($tail.height() / 2);
        tailRotation = 225;

        // If popup is outside top edge, position under click instead
        if (popupHeight + space > $click[0].offsetTop) {
          positionY = $click[0].offsetTop + $click.height() + space;
          tailY = positionY - $tail.height() / 2 ;
          tailRotation = 45;
        }

        // If popup is outside left edge, position left
        if (positionX < 0) {
          positionX = 0;
        }

        // If popup is outside right edge, position right
        if (positionX + popupWidth > $container.width()) {
          positionX = $container.width() - popupWidth;
        }

        // Special cases such as corner clicks, or close to an edge, they override X and Y positions if met
        if (clickNearTop && (clickNearLeft || clickNearRight)) {
          positionX = $click[0].offsetLeft + (clickNearLeft ? $click.width() : -popupWidth);
          positionY = $click[0].offsetTop + $click.height();
          disableTail = true;
        }
        else if (clickNearBottom && (clickNearLeft || clickNearRight)) {
          positionX = $click[0].offsetLeft + (clickNearLeft ? $click.width() : -popupWidth);
          positionY = $click[0].offsetTop - popupHeight;
          disableTail = true;
        }
        else if (!clickNearTop && !clickNearBottom) {
          if (clickNearLeft || clickNearRight) {
            positionY = $click[0].offsetTop - popupHeight / 2 + $click.width() / 2;
            positionX = $click[0].offsetLeft + (clickNearLeft ? $click.width() + space : -popupWidth + -space);
            // Make sure this does not position the popup off screen
            if (positionX < 0) {
              positionX = 0;
              disableTail = true;
            }
            else {
              tailX = positionX + (clickNearLeft ? - $tail.width() / 2 : popupWidth - $tail.width() / 2);
              tailY = positionY + popupHeight / 2 - $tail.height() / 2;
              tailRotation = (clickNearLeft ? 315 : 135);
            }
          }
        }

        // Contain popup from overflowing bottom edge
        if (positionY + popupHeight > $container.height()) {
          positionY = $container.height() - popupHeight;

          if (popupHeight > $container.height() - ($click[0].offsetTop + $click.height() + space)) {
            disableTail = true;
          }
        }
      }
      else {
        disableTail = true;
      }

      // Contain popup from ovreflowing top edge
      if (positionY < 0) {
        positionY = 0;
      }

      $element.css({top: positionY, left: positionX});
      $tail.css({top: tailY, left: tailX});

      if (!disableTail) {
        $tail.css({
          'left': tailX,
          'top': tailY,
          'transform': 'rotate(' + tailRotation + 'deg)'
        }).show();
      }
      else {
        $tail.hide();
      }
    };

    /**
     * Set element max height, used for animations.
     *
     * @param {H5P.jQuery} $element
     */
    var setElementHeight = function ($element) {
      if (!$element.is(':visible')) {
        // No animation
        $element.css('max-height', 'none');
        return;
      }

      // If this element is shown in the popup, we can't set width to 100%,
      // since it already has a width set in CSS
      var isFeedbackPopup = $element.hasClass('h5p-question-popup');

      // Get natural element height
      var $tmp = $element.clone()
        .css({
          'position': 'absolute',
          'max-height': 'none',
          'width': isFeedbackPopup ? '' : '100%'
        })
        .appendTo($element.parent());

      // Need to take margins into account when calculating available space
      var sideMargins = parseFloat($element.css('margin-left'))
        + parseFloat($element.css('margin-right'));
      var tmpElWidth = $tmp.css('width') ? $tmp.css('width') : '100%';
      $tmp.css('width', 'calc(' + tmpElWidth + ' - ' + sideMargins + 'px)');

      // Apply height to element
      var h = Math.round($tmp.get(0).getBoundingClientRect().height);
      var fontSize = parseFloat($element.css('fontSize'));
      var relativeH = h / fontSize;
      $element.css('max-height', relativeH + 'em');
      $tmp.remove();

      if (h > 0 && sections.buttons && sections.buttons.$element === $element) {
        // Make sure buttons section is visible
        showSection(sections.buttons);

        // Resize buttons after resizing button section
        setTimeout(resizeButtons, 150);
      }
      return h;
    };

    /**
     * Does the actual job of hiding the buttons scheduled for hiding.
     *
     * @private
     * @param {boolean} [relocateFocus] Find a new button to focus
     */
    var hideButtons = function (relocateFocus) {
      for (var i = 0; i < buttonsToHide.length; i++) {
        hideButton(buttonsToHide[i].id);
      }
      buttonsToHide = [];

      if (relocateFocus) {
        self.focusButton();
      }
    };

    /**
     * Does the actual hiding.
     * @private
     * @param {string} buttonId
     */
    var hideButton = function (buttonId) {
      // Using detach() vs hide() makes it harder to cheat.
      buttons[buttonId].$element.detach();
      buttons[buttonId].isVisible = false;
    };

    /**
     * Shows the buttons on the next tick. This is to avoid buttons flickering
     * If they're both added and removed on the same tick.
     *
     * @private
     */
    var toggleButtons = function () {
      // If no buttons section, return
      if (sections.buttons === undefined) {
        return;
      }

      // Clear transition timer, reevaluate if buttons will be detached
      clearTimeout(toggleButtonsTransitionTimer);

      // Show buttons
      for (var i = 0; i < buttonsToShow.length; i++) {
        insert(buttonOrder, buttonsToShow[i].id, buttons, sections.buttons.$element);
        buttons[buttonsToShow[i].id].isVisible = true;
      }
      buttonsToShow = [];

      // Hide buttons
      var numToHide = 0;
      var relocateFocus = false;
      for (var j = 0; j < buttonsToHide.length; j++) {
        var button = buttons[buttonsToHide[j].id];
        if (button.isVisible) {
          numToHide += 1;
        }
        if (button.$element.is(':focus')) {
          // Move focus to the first visible button.
          relocateFocus = true;
        }
      }

      var animationTimer = 150;
      if (sections.feedback && sections.feedback.$element.hasClass('h5p-question-popup')) {
        animationTimer = 0;
      }

      if (numToHide === sections.buttons.$element.children().length) {
        // All buttons are going to be hidden. Hide container using transition.
        hideSection(sections.buttons);
        // Detach buttons
        hideButtons(relocateFocus);
      }
      else {
        hideButtons(relocateFocus);

        // Show button section
        if (!sections.buttons.$element.is(':empty')) {
          showSection(sections.buttons);
          setElementHeight(sections.buttons.$element);

          // Trigger resize after animation
          toggleButtonsTransitionTimer = setTimeout(function () {
            self.trigger('resize');
          }, animationTimer);
        }

        // Resize buttons to fit container
        resizeButtons();
      }

      toggleButtonsTimer = undefined;
    };

    /**
     * Allows for scaling of the question image.
     */
    var scaleImage = function () {
      var $imgSection = sections.image.$element;
      clearTimeout(imageTransitionTimer);

      // Add this here to avoid initial transition of the image making
      // content overflow. Alternatively we need to trigger a resize.
      $imgSection.addClass('animatable');

      if (imageThumb) {

        // Expand image
        $(this).attr('aria-expanded', true);
        $imgSection.addClass('h5p-question-image-fill-width');
        imageThumb = false;

        imageTransitionTimer = setTimeout(function () {
          self.trigger('resize');
        }, 600);
      }
      else {

        // Scale down image
        $(this).attr('aria-expanded', false);
        $imgSection.removeClass('h5p-question-image-fill-width');
        imageThumb = true;

        imageTransitionTimer = setTimeout(function () {
          self.trigger('resize');
        }, 600);
      }
    };

    /**
     * Get scrollable ancestor of element
     *
     * @private
     * @param {H5P.jQuery} $element
     * @param {Number} [currDepth=0] Current recursive calls to ancestor, stop at maxDepth
     * @param {Number} [maxDepth=5] Maximum depth for finding ancestor.
     * @returns {H5P.jQuery} Parent element that is scrollable
     */
    var findScrollableAncestor = function ($element, currDepth, maxDepth) {
      if (!currDepth) {
        currDepth = 0;
      }
      if (!maxDepth) {
        maxDepth = 5;
      }
      // Check validation of element or if we have reached document root
      if (!$element || !($element instanceof $) || document === $element.get(0) || currDepth >= maxDepth) {
        return;
      }

      if ($element.css('overflow-y') === 'auto') {
        return $element;
      }
      else {
        return findScrollableAncestor($element.parent(), currDepth + 1, maxDepth);
      }
    };

    /**
     * Scroll to bottom of Question.
     *
     * @private
     */
    var scrollToBottom = function () {
      if (!$wrapper || ($wrapper.hasClass('h5p-standalone') && !H5P.isFullscreen)) {
        return; // No scroll
      }

      var scrollableAncestor = findScrollableAncestor($wrapper);

      // Scroll to bottom of scrollable ancestor
      if (scrollableAncestor) {
        scrollableAncestor.animate({
          scrollTop: $wrapper.css('height')
        }, "slow");
      }
    };

    /**
     * Resize buttons to fit container width
     *
     * @private
     */
    var resizeButtons = function () {
      if (!buttons || !sections.buttons) {
        return;
      }

      var go = function () {
        // Don't do anything if button elements are not visible yet
        if (!sections.buttons.$element.is(':visible')) {
          return;
        }

        // Width of all buttons
        var buttonsWidth = {
          max: 0,
          min: 0,
          current: 0
        };

        for (var i in buttons) {
          var button = buttons[i];
          if (button.isVisible) {
            setButtonWidth(buttons[i]);
            buttonsWidth.max += button.width.max;
            buttonsWidth.min += button.width.min;
            buttonsWidth.current += button.isTruncated ? button.width.min : button.width.max;
          }
        }

        var makeButtonsFit = function (availableWidth) {
          if (buttonsWidth.max < availableWidth) {
            // It is room for everyone on the right side of the score bar (without truncating)
            if (buttonsWidth.max !== buttonsWidth.current) {
              // Need to make everyone big
              restoreButtonLabels(buttonsWidth.current, availableWidth);
            }
            return true;
          }
          else if (buttonsWidth.min < availableWidth) {
            // Is it room for everyone on the right side of the score bar with truncating?
            if (buttonsWidth.current > availableWidth) {
              removeButtonLabels(buttonsWidth.current, availableWidth);
            }
            else {
              restoreButtonLabels(buttonsWidth.current, availableWidth);
            }
            return true;
          }
          return false;
        };

        toggleFullWidthScorebar(false);

        var buttonSectionWidth = Math.floor(sections.buttons.$element.width()) - 1;

        if (!makeButtonsFit(buttonSectionWidth)) {
          // If we get here we need to wrap:
          toggleFullWidthScorebar(true);
          buttonSectionWidth = Math.floor(sections.buttons.$element.width()) - 1;
          makeButtonsFit(buttonSectionWidth);
        }
      };

      // If visible, resize right away
      if (sections.buttons.$element.is(':visible')) {
        go();
      }
      else { // If not visible, try on the next tick
        // Clear button truncation timer if within a button truncation function
        if (buttonTruncationTimer) {
          clearTimeout(buttonTruncationTimer);
        }
        buttonTruncationTimer = setTimeout(function () {
          buttonTruncationTimer = undefined;
          go();
        }, 0);
      }
    };

    var toggleFullWidthScorebar = function (enabled) {
      if (sections.scorebar &&
          sections.scorebar.$element &&
          sections.scorebar.$element.hasClass('h5p-question-visible')) {
        sections.buttons.$element.addClass('has-scorebar');
        sections.buttons.$element.toggleClass('wrap', enabled);
        sections.scorebar.$element.toggleClass('full-width', enabled);
      }
      else {
        sections.buttons.$element.removeClass('has-scorebar');
      }
    };

    /**
     * Remove button labels until they use less than max width.
     *
     * @private
     * @param {Number} buttonsWidth Total width of all buttons
     * @param {Number} maxButtonsWidth Max width allowed for buttons
     */
    var removeButtonLabels = function (buttonsWidth, maxButtonsWidth) {
      // Reverse traversal
      for (var i = buttonOrder.length - 1; i >= 0; i--) {
        var buttonId = buttonOrder[i];
        var button = buttons[buttonId];
        if (!button.isTruncated && button.isVisible) {
          var $button = button.$element;
          buttonsWidth -= button.width.max - button.width.min;
          // Set tooltip (needed by H5P.Tooltip)
          let buttonText = $button.text();
          $button.attr('data-tooltip', buttonText);

          // Use button text as aria label if a specific one isn't provided
          if (!button.ariaLabel) {
            $button.attr('aria-label', buttonText);
          }
          // Remove label
          $button.html('').addClass('truncated');
          button.isTruncated = true;
          if (buttonsWidth <= maxButtonsWidth) {
            // Buttons are small enough.
            return;
          }
        }
      }
    };

    /**
     * Restore button labels until it fills maximum possible width without exceeding the max width.
     *
     * @private
     * @param {Number} buttonsWidth Total width of all buttons
     * @param {Number} maxButtonsWidth Max width allowed for buttons
     */
    var restoreButtonLabels = function (buttonsWidth, maxButtonsWidth) {
      for (var i = 0; i < buttonOrder.length; i++) {
        var buttonId = buttonOrder[i];
        var button = buttons[buttonId];
        if (button.isTruncated && button.isVisible) {
          // Calculate new total width of buttons with a static pixel for consistency cross-browser
          buttonsWidth += button.width.max - button.width.min + 1;

          if (buttonsWidth > maxButtonsWidth) {
            return;
          }
          // Restore label
          button.$element.html(button.text);

          // Remove tooltip (used by H5P.Tooltip)
          button.$element.removeAttr('data-tooltip');

          // Remove aria-label if a specific one isn't provided
          if (!button.ariaLabel) {
            button.$element.removeAttr('aria-label');
          }

          button.$element.removeClass('truncated');
          button.isTruncated = false;
        }
      }
    };

    /**
     * Helper function for finding index of keyValue in array
     *
     * @param {String} keyValue Value to be found
     * @param {String} key In key
     * @param {Array} array In array
     * @returns {number}
     */
    var existsInArray = function (keyValue, key, array) {
      var i;
      for (i = 0; i < array.length; i++) {
        if (array[i][key] === keyValue) {
          return i;
        }
      }
      return -1;
    };

    /**
     * Show a section
     * @param {Object} section
     */
    var showSection = function (section) {
      section.$element.addClass('h5p-question-visible');
      section.isVisible = true;
    };

    /**
     * Hide a section
     * @param {Object} section
     */
    var hideSection = function (section) {
      section.$element.css('max-height', '');
      section.isVisible = false;

      setTimeout(function () {
        // Only hide if section hasn't been set to visible in the meantime
        if (!section.isVisible) {
          section.$element.removeClass('h5p-question-visible');
        }
      }, 150);
    };

    /**
     * Set behaviour for question.
     *
     * @param {Object} options An object containing behaviour that will be extended by Question
     */
    self.setBehaviour = function (options) {
      $.extend(behaviour, options);
    };

    /**
     * A video to display above the task.
     *
     * @param {object} params
     */
    self.setVideo = function (params) {
      sections.video = {
        $element: $('<div/>', {
          'class': 'h5p-question-video'
        })
      };

      if (disableAutoPlay && params.params.playback) {
        params.params.playback.autoplay = false;
      }

      // Never fit to wrapper
      if (!params.params.visuals) {
        params.params.visuals = {};
      }
      params.params.visuals.fit = false;
      sections.video.instance = H5P.newRunnable(params, self.contentId, sections.video.$element, true);
      var fromVideo = false; // Hack to avoid never ending loop
      sections.video.instance.on('resize', function () {
        fromVideo = true;
        self.trigger('resize');
        fromVideo = false;
      });
      self.on('resize', function () {
        if (!fromVideo) {
          sections.video.instance.trigger('resize');
        }
      });

      return self;
    };

    /**
     * An audio player to display above the task.
     *
     * @param {object} params
     */
    self.setAudio = function (params) {
      params.params = params.params || {};

      sections.audio = {
        $element: $('<div/>', {
          'class': 'h5p-question-audio',
        })
      };

      if (disableAutoPlay) {
        params.params.autoplay = false;
      }
      else if (params.params.playerMode === 'transparent') {
        params.params.autoplay = true; // false doesn't make sense for transparent audio
      }

      sections.audio.instance = H5P.newRunnable(params, self.contentId, sections.audio.$element, true);
      // The height value that is set by H5P.Audio is counter-productive here.
      if (sections.audio.instance.audio) {
        sections.audio.instance.audio.style.height = '';
      }

      return self;
    };

    /**
     * Will stop any playback going on in the task.
     */
    self.pause = function () {
      if (sections.video && sections.video.isVisible) {
        sections.video.instance.pause();
      }
      if (sections.audio && sections.audio.isVisible) {
        sections.audio.instance.pause();
      }
    };

    /**
     * Start playback of video
     */
    self.play = function () {
      if (sections.video && sections.video.isVisible) {
        sections.video.instance.play();
      }
      if (sections.audio && sections.audio.isVisible) {
        sections.audio.instance.play();
      }
    };

    /**
     * Disable auto play, useful in editors.
     */
    self.disableAutoPlay = function () {
      disableAutoPlay = true;
    };

    /**
     * Process HTML escaped string for use as attribute value,
     * e.g. for alt text or title attributes.
     *
     * @param {string} value
     * @return {string} WARNING! Do NOT use for innerHTML.
     */
    self.massageAttributeOutput = function (value) {
      const dparser = new DOMParser().parseFromString(value, 'text/html');
      const div = document.createElement('div');
      div.innerHTML = dparser.documentElement.textContent;;
      return div.textContent || div.innerText || '';
    };

    /**
     * Add task image.
     *
     * @param {string} path Relative
     * @param {Object} [options] Options object
     * @param {string} [options.alt] Text representation
     * @param {string} [options.title] Hover text
     * @param {Boolean} [options.disableImageZooming] Set as true to disable image zooming
     * @param {string} [options.expandImage] Localization strings
     * @param {string} [options.minimizeImage] Localization string

     */
    self.setImage = function (path, options) {
      options = options ? options : {};
      sections.image = {};
      // Image container
      sections.image.$element = $('<div/>', {
        'class': 'h5p-question-image h5p-question-image-fill-width'
      });

      // Inner wrap
      var $imgWrap = $('<div/>', {
        'class': 'h5p-question-image-wrap',
        appendTo: sections.image.$element
      });

      // Image element
      var $img = $('<img/>', {
        src: H5P.getPath(path, self.contentId),
        alt: (options.alt === undefined ? '' : self.massageAttributeOutput(options.alt)),
        title: (options.title === undefined ? '' : self.massageAttributeOutput(options.title)),
        on: {
          load: function () {
            self.trigger('imageLoaded', this);
            self.trigger('resize');
          }
        },
        appendTo: $imgWrap
      });

      // Disable image zooming
      if (options.disableImageZooming) {
        $img.css('maxHeight', 'none');

        // Make sure we are using the correct amount of width at all times
        var determineImgWidth = function () {

          // Remove margins if natural image width is bigger than section width
          var imageSectionWidth = sections.image.$element.get(0).getBoundingClientRect().width;

          // Do not transition, for instant measurements
          $imgWrap.css({
            '-webkit-transition': 'none',
            'transition': 'none'
          });

          // Margin as translateX on both sides of image.
          var diffX = 2 * ($imgWrap.get(0).getBoundingClientRect().left -
            sections.image.$element.get(0).getBoundingClientRect().left);

          if ($img.get(0).naturalWidth >= imageSectionWidth - diffX) {
            sections.image.$element.addClass('h5p-question-image-fill-width');
          }
          else { // Use margin for small res images
            sections.image.$element.removeClass('h5p-question-image-fill-width');
          }

          // Reset transition rules
          $imgWrap.css({
            '-webkit-transition': '',
            'transition': ''
          });
        };

        // Determine image width
        if ($img.is(':visible')) {
          determineImgWidth();
        }
        else {
          $img.on('load', determineImgWidth);
        }

        // Skip adding zoom functionality
        return;
      }

      const setAriaLabel = () => {
        const ariaLabel = $imgWrap.attr('aria-expanded') === 'true'
          ? options.minimizeImage 
          : options.expandImage;
          
          $imgWrap.attr('aria-label', `${ariaLabel} ${options.alt}`);
        };

      var sizeDetermined = false;
      var determineSize = function () {
        if (sizeDetermined || !$img.is(':visible')) {
          return; // Try again next time.
        }

        $imgWrap.addClass('h5p-question-image-scalable')
          .attr('aria-expanded', false)
          .attr('role', 'button')
          .attr('tabIndex', '0')
          .on('click', function (event) {
            if (event.which === 1) {
              scaleImage.apply(this); // Left mouse button click
              setAriaLabel();
            }
          }).on('keypress', function (event) {
            if (event.which === 32) {
              event.preventDefault(); // Prevent default behaviour; page scroll down
              scaleImage.apply(this); // Space bar pressed
              setAriaLabel();
            }
          });

        setAriaLabel();

        sections.image.$element.removeClass('h5p-question-image-fill-width');

        sizeDetermined  = true; // Prevent any futher events
      };

      self.on('resize', determineSize);

      return self;
    };

    /**
     * Add the introduction section.
     *
     * @param {(string|H5P.jQuery)} content
     */
    self.setIntroduction = function (content) {
      register('introduction', content);

      return self;
    };

    /**
     * Add the content section.
     *
     * @param {(string|H5P.jQuery)} content
     * @param {Object} [options]
     * @param {string} [options.class]
     */
    self.setContent = function (content, options) {
      register('content', content);

      if (options && options.class) {
        sections.content.$element.addClass(options.class);
      }

      return self;
    };

    /**
     * Force readspeaker to read text. Useful when you have to use
     * setTimeout for animations.
     */
    self.read = function (content) {
      if (!$read) {
        return; // Not ready yet
      }

      if (readText) {
        // Combine texts if called multiple times
        readText += (readText.substr(-1, 1) === '.' ? ' ' : '. ') + content;
      }
      else {
        readText = content;
      }

      // Set text
      $read.html(readText);

      setTimeout(function () {
        // Stop combining when done reading
        readText = null;
        $read.html('');
      }, 100);
    };

    /**
     * Read feedback
     */
    self.readFeedback = function () {
      var invalidFeedback =
        behaviour.disableReadSpeaker ||
        !showFeedback ||
        !sections.feedback ||
        !sections.feedback.$element;

      if (invalidFeedback) {
        return;
      }

      var $feedbackText = $('.h5p-question-feedback-content-text', sections.feedback.$element);
      if ($feedbackText && $feedbackText.html() && $feedbackText.html().length) {
        self.read($feedbackText.html());
      }
    };

    /**
     * Remove feedback
     *
     * @return {H5P.Question}
     */
    self.removeFeedback = function () {

      clearTimeout(feedbackTransitionTimer);

      if (sections.feedback && showFeedback) {

        showFeedback = false;

        // Hide feedback & scorebar
        hideSection(sections.scorebar);
        hideSection(sections.feedback);

        sectionsIsTransitioning = true;

        // Detach after transition
        feedbackTransitionTimer = setTimeout(function () {
          // Avoiding Transition.onTransitionEnd since it will register multiple events, and there's no way to cancel it if the transition changes back to "show" while the animation is happening.
          if (!showFeedback) {
            sections.feedback.$element.children().detach();
            sections.scorebar.$element.children().detach();

            // Trigger resize after animation
            self.trigger('resize');
          }
          sectionsIsTransitioning = false;
          scoreBar.setScore(0);
        }, 150);

        if ($wrapper) {
          $wrapper.find('.h5p-question-feedback-tail').remove();
        }
      }

      return self;
    };

    /**
     * Set feedback message.
     *
     * @param {string} [content]
     * @param {number} score The score
     * @param {number} maxScore The maximum score for this question
     * @param {string} [scoreBarLabel] Makes it easier for readspeakers to identify the scorebar
     * @param {string} [helpText] Help text that describes the score inside a tip icon
     * @param {object} [popupSettings] Extra settings for popup feedback
     * @param {boolean} [popupSettings.showAsPopup] Should the feedback display as popup?
     * @param {string} [popupSettings.closeText] Translation for close button text
     * @param {object} [popupSettings.click] Element representing where user clicked on screen
     */
    self.setFeedback = function (content, score, maxScore, scoreBarLabel, helpText, popupSettings, scoreExplanationButtonLabel) {
      // Feedback is disabled
      if (behaviour.disableFeedback) {
        return self;
      }

      // Need to toggle buttons right away to avoid flickering/blinking
      // Note: This means content types should invoke hide/showButton before setFeedback
      toggleButtons();

      clickElement = (popupSettings != null && popupSettings.click != null ? popupSettings.click : null);
      clearTimeout(feedbackTransitionTimer);

      var $feedback = $('<div>', {
        'class': 'h5p-question-feedback-container'
      });

      var $feedbackContent = $('<div>', {
        'class': 'h5p-question-feedback-content'
      }).appendTo($feedback);

      // Feedback text
      $('<div>', {
        'class': 'h5p-question-feedback-content-text',
        'html': content
      }).appendTo($feedbackContent);

      var $scorebar = $('<div>', {
        'class': 'h5p-question-scorebar-container'
      });
      if (scoreBar === undefined) {
        scoreBar = JoubelUI.createScoreBar(maxScore, scoreBarLabel, helpText, scoreExplanationButtonLabel);
      }
      scoreBar.appendTo($scorebar);

      $feedbackContent.toggleClass('has-content', content !== undefined && content.length > 0);

      // Feedback for readspeakers
      if (!behaviour.disableReadSpeaker && scoreBarLabel) {
        self.read(scoreBarLabel.replace(':num', score).replace(':total', maxScore) + '. ' + (content ? content : ''));
      }

      showFeedback = true;
      if (sections.feedback) {
        // Update section
        update('feedback', $feedback);
        update('scorebar', $scorebar);
      }
      else {
        // Create section
        register('feedback', $feedback);
        register('scorebar', $scorebar);
        if (initialized && $wrapper) {
          insert(self.order, 'feedback', sections, $wrapper);
          insert(self.order, 'scorebar', sections, $wrapper);
        }
      }

      showSection(sections.feedback);
      showSection(sections.scorebar);

      resizeButtons();

      if (popupSettings != null && popupSettings.showAsPopup == true) {
        makeFeedbackPopup(popupSettings.closeText);
        scoreBar.setScore(score);
      }
      else {
        // Show feedback section
        feedbackTransitionTimer = setTimeout(function () {
          setElementHeight(sections.feedback.$element);
          setElementHeight(sections.scorebar.$element);
          sectionsIsTransitioning = true;

          // Scroll to bottom after showing feedback
          scrollToBottom();

          // Trigger resize after animation
          feedbackTransitionTimer = setTimeout(function () {
            sectionsIsTransitioning = false;
            self.trigger('resize');
            scoreBar.setScore(score);
          }, 150);
        }, 0);
      }

      return self;
    };

    /**
     * Set feedback content (no animation).
     *
     * @param {string} content
     * @param {boolean} [extendContent] True will extend content, instead of replacing it
     */
    self.updateFeedbackContent = function (content, extendContent) {
      if (sections.feedback && sections.feedback.$element) {

        if (extendContent) {
          content = $('.h5p-question-feedback-content', sections.feedback.$element).html() + ' ' + content;
        }

        // Update feedback content html
        $('.h5p-question-feedback-content', sections.feedback.$element).html(content).addClass('has-content');

        // Make sure the height is correct
        setElementHeight(sections.feedback.$element);

        // Need to trigger resize when feedback has finished transitioning
        setTimeout(self.trigger.bind(self, 'resize'), 150);
      }

      return self;
    };

    /**
     * Set the content of the explanation / feedback panel
     *
     * @param {Object} data
     * @param {string} data.correct
     * @param {string} data.wrong
     * @param {string} data.text
     * @param {string} title Title for explanation panel
     *
     * @return {H5P.Question}
     */
    self.setExplanation = function (data, title) {
      if (data) {
        var explainer = new H5P.Question.Explainer(title, data);

        if (sections.explanation) {
          // Update section
          update('explanation', explainer.getElement());
        }
        else {
          register('explanation', explainer.getElement());

          if (initialized && $wrapper) {
            insert(self.order, 'explanation', sections, $wrapper);
          }
        }
      }
      else if (sections.explanation) {
        // Hide explanation section
        sections.explanation.$element.children().detach();
      }

      return self;
    };

    /**
     * Checks to see if button is registered.
     *
     * @param {string} id
     * @returns {boolean}
     */
    self.hasButton = function (id) {
      return (buttons[id] !== undefined);
    };

    /**
     * @typedef {Object} ConfirmationDialog
     * @property {boolean} [enable] Must be true to show confirmation dialog
     * @property {Object} [instance] Instance that uses confirmation dialog
     * @property {jQuery} [$parentElement] Append to this element.
     * @property {Object} [l10n] Translatable fields
     * @property {string} [l10n.header] Header text
     * @property {string} [l10n.body] Body text
     * @property {string} [l10n.cancelLabel]
     * @property {string} [l10n.confirmLabel]
     */

    /**
     * Register buttons for the task.
     *
     * @param {string} id
     * @param {string} text label
     * @param {function} clicked
     * @param {boolean} [visible=true]
     * @param {Object} [options] Options for button
     * @param {Object} [extras] Extra options
     * @param {ConfirmationDialog} [extras.confirmationDialog] Confirmation dialog
     * @param {Object} [extras.contentData] Content data
     * @params {string} [extras.textIfSubmitting] Text to display if submitting
     */
    self.addButton = function (id, text, clicked, visible, options, extras) {
      if (buttons[id]) {
        return self; // Already registered
      }

      if (sections.buttons === undefined)  {
        // We have buttons, register wrapper
        register('buttons');
        if (initialized) {
          insert(self.order, 'buttons', sections, $wrapper);
        }
      }

      extras = extras || {};
      extras.confirmationDialog = extras.confirmationDialog || {};
      options = options || {};

      var confirmationDialog =
        self.addConfirmationDialogToButton(extras.confirmationDialog, clicked);

      /**
       * Handle button clicks through both mouse and keyboard
       * @private
       */
      var handleButtonClick = function () {
        if (extras.confirmationDialog.enable && confirmationDialog) {
          // Show popups section if used
          if (!extras.confirmationDialog.$parentElement) {
            sections.popups.$element.removeClass('hidden');
          }
          confirmationDialog.show($e.position().top);
        }
        else {
          clicked();
        }
      };

      const isSubmitting = extras.contentData && extras.contentData.standalone
        && (extras.contentData.isScoringEnabled || extras.contentData.isReportingEnabled);

      if (isSubmitting && extras.textIfSubmitting) {
        text = extras.textIfSubmitting;
      }

      buttons[id] = {
        isTruncated: false,
        text: text,
        isVisible: false,
        ariaLabel: options['aria-label']
      };

      // The button might be <button> or <a>
      // (dependent on options.href set or not)
      var isAnchorTag = (options.href !== undefined);
      var $e = buttons[id].$element = JoubelUI.createButton($.extend({
        'class': 'h5p-question-' + id,
        html: text,
        on: {
          click: function (event) {
            handleButtonClick();
            if (isAnchorTag) {
              event.preventDefault();
            }
          }
        }
      }, options));
      buttonOrder.push(id);

      H5P.Tooltip($e.get(0), {tooltipSource: 'data-tooltip'});

      // The button might be <button> or <a>. If <a>, the space key is not
      // triggering the click event, must therefore handle this here:
      if (isAnchorTag) {
        $e.on('keypress', function (event) {
          if (event.which === 32) { // Space
            handleButtonClick();
            event.preventDefault();
          }
        });
      }

      if (visible === undefined || visible) {
        // Button should be visible
        $e.appendTo(sections.buttons.$element);
        buttons[id].isVisible = true;
        showSection(sections.buttons);
      }

      return self;
    };

    var setButtonWidth = function (button) {
      var $button = button.$element;
      var $tmp = $button.clone()
        .css({
          'position': 'absolute',
          'white-space': 'nowrap',
          'max-width': 'none'
        }).removeClass('truncated')
        .html(button.text)
        .appendTo($button.parent());

      // Calculate max width (button including text)
      button.width = {
        max: Math.ceil($tmp.outerWidth() + parseFloat($tmp.css('margin-left')) + parseFloat($tmp.css('margin-right')))
      };

      // Calculate min width (truncated, icon only)
      $tmp.html('').addClass('truncated');
      button.width.min = Math.ceil($tmp.outerWidth() + parseFloat($tmp.css('margin-left')) + parseFloat($tmp.css('margin-right')));
      $tmp.remove();
    };

    /**
     * Add confirmation dialog to button
     * @param {ConfirmationDialog} options
     *  A confirmation dialog that will be shown before click handler of button
     *  is triggered
     * @param {function} clicked
     *  Click handler of button
     * @return {H5P.ConfirmationDialog|undefined}
     *  Confirmation dialog if enabled
     */
    self.addConfirmationDialogToButton = function (options, clicked) {
      options = options || {};

      if (!options.enable) {
        return;
      }

      // Confirmation dialog
      var confirmationDialog = new H5P.ConfirmationDialog({
        instance: options.instance,
        headerText: options.l10n.header,
        dialogText: options.l10n.body,
        cancelText: options.l10n.cancelLabel,
        confirmText: options.l10n.confirmLabel
      });

      // Determine parent element
      if (options.$parentElement) {
        const parentElement = options.$parentElement.get(0);
        let dialogParent;
        // If using h5p-content, dialog will not appear on embedded fullscreen
        if (parentElement.classList.contains('h5p-content')) {
          dialogParent = parentElement.querySelector('.h5p-container');
        }

        confirmationDialog.appendTo(dialogParent ?? parentElement);
      }
      else {

        // Create popup section and append to that
        if (sections.popups === undefined) {
          register('popups');
          if (initialized) {
            insert(self.order, 'popups', sections, $wrapper);
          }
          sections.popups.$element.addClass('hidden');
          self.order.push('popups');
        }
        confirmationDialog.appendTo(sections.popups.$element.get(0));
      }

      // Add event listeners
      confirmationDialog.on('confirmed', function () {
        if (!options.$parentElement) {
          sections.popups.$element.addClass('hidden');
        }
        clicked();

        // Trigger to content type
        self.trigger('confirmed');
      });

      confirmationDialog.on('canceled', function () {
        if (!options.$parentElement) {
          sections.popups.$element.addClass('hidden');
        }
        // Trigger to content type
        self.trigger('canceled');
      });

      return confirmationDialog;
    };

    /**
     * Show registered button with given identifier.
     *
     * @param {string} id
     * @param {Number} [priority]
     */
    self.showButton = function (id, priority) {
      var aboutToBeHidden = existsInArray(id, 'id', buttonsToHide) !== -1;
      if (buttons[id] === undefined || (buttons[id].isVisible === true && !aboutToBeHidden)) {
        return self;
      }

      priority = priority || 0;

      // Skip if already being shown
      var indexToShow = existsInArray(id, 'id', buttonsToShow);
      if (indexToShow !== -1) {

        // Update priority
        if (buttonsToShow[indexToShow].priority < priority) {
          buttonsToShow[indexToShow].priority = priority;
        }

        return self;
      }

      // Check if button is going to be hidden on next tick
      var exists = existsInArray(id, 'id', buttonsToHide);
      if (exists !== -1) {

        // Skip hiding if higher priority
        if (buttonsToHide[exists].priority <= priority) {
          buttonsToHide.splice(exists, 1);
          buttonsToShow.push({id: id, priority: priority});
        }

      } // If button is not shown
      else if (!buttons[id].$element.is(':visible')) {

        // Show button on next tick
        buttonsToShow.push({id: id, priority: priority});
      }

      if (!toggleButtonsTimer) {
        toggleButtonsTimer = setTimeout(toggleButtons, 0);
      }

      return self;
    };

    /**
     * Hide registered button with given identifier.
     *
     * @param {string} id
     * @param {number} [priority]
     */
    self.hideButton = function (id, priority) {
      var aboutToBeShown = existsInArray(id, 'id', buttonsToShow) !== -1;
      if (buttons[id] === undefined || (buttons[id].isVisible === false && !aboutToBeShown)) {
        return self;
      }

      priority = priority || 0;

      // Skip if already being hidden
      var indexToHide = existsInArray(id, 'id', buttonsToHide);
      if (indexToHide !== -1) {

        // Update priority
        if (buttonsToHide[indexToHide].priority < priority) {
          buttonsToHide[indexToHide].priority = priority;
        }

        return self;
      }

      // Check if buttons is going to be shown on next tick
      var exists = existsInArray(id, 'id', buttonsToShow);
      if (exists !== -1) {

        // Skip showing if higher priority
        if (buttonsToShow[exists].priority <= priority) {
          buttonsToShow.splice(exists, 1);
          buttonsToHide.push({id: id, priority: priority});
        }
      }
      else if (!buttons[id].$element.is(':visible')) {

        // Make sure it is detached in case the container is hidden.
        hideButton(id);
      }
      else {

        // Hide button on next tick.
        buttonsToHide.push({id: id, priority: priority});
      }

      if (!toggleButtonsTimer) {
        toggleButtonsTimer = setTimeout(toggleButtons, 0);
      }

      return self;
    };

    /**
     * Set focus to the given button. If no button is given the first visible
     * button gets focused. This is useful if you lose focus.
     *
     * @param {string} [id]
     */
    self.focusButton = function (id) {
      if (id === undefined) {
        // Find first button that is visible.
        for (var i = 0; i < buttonOrder.length; i++) {
          var button = buttons[buttonOrder[i]];
          if (button && button.isVisible) {
            // Give that button focus
            button.$element.focus();
            break;
          }
        }
      }
      else if (buttons[id] && buttons[id].$element.is(':visible')) {
        // Set focus to requested button
        buttons[id].$element.focus();
      }

      return self;
    };

    /**
     * Toggle readspeaker functionality
     * @param {boolean} [disable] True to disable, false to enable.
     */
    self.toggleReadSpeaker = function (disable) {
      behaviour.disableReadSpeaker = disable || !behaviour.disableReadSpeaker;
    };

    /**
     * Set new element for section.
     *
     * @param {String} id
     * @param {H5P.jQuery} $element
     */
    self.insertSectionAtElement = function (id, $element) {
      if (sections[id] === undefined) {
        register(id);
      }
      sections[id].parent = $element;

      // Insert section if question is not initialized
      if (!initialized) {
        insert([id], id, sections, $element);
      }

      return self;
    };

    /**
     * Attach content to given container.
     *
     * @param {H5P.jQuery} $container
     */
    self.attach = function ($container) {
      if (self.isRoot()) {
        self.setActivityStarted();
      }

      // The first time we attach we also create our DOM elements.
      if ($wrapper === undefined) {
        if (self.registerDomElements !== undefined &&
           (self.registerDomElements instanceof Function ||
           typeof self.registerDomElements === 'function')) {

          // Give the question type a chance to register before attaching
          self.registerDomElements();
        }

        // Create section for reading messages
        $read = $('<div/>', {
          'aria-live': 'polite',
          'class': 'h5p-hidden-read'
        });
        register('read', $read);
        self.trigger('registerDomElements');
      }

      // Prepare container
      $wrapper = $container;
      $container.html('')
        .addClass('h5p-question h5p-' + type);

      // Add sections in given order
      var $sections = [];
      for (var i = 0; i < self.order.length; i++) {
        var section = self.order[i];
        if (sections[section]) {
          if (sections[section].parent) {
            // Section has a different parent
            sections[section].$element.appendTo(sections[section].parent);
          }
          else {
            $sections.push(sections[section].$element);
          }
          sections[section].isVisible = true;
        }
      }

      // Only append once to DOM for optimal performance
      $container.append($sections);

      // Let others react to dom changes
      self.trigger('domChanged', {
        '$target': $container,
        'library': self.libraryInfo.machineName,
        'contentId': self.contentId,
        'key': 'newLibrary'
      }, {'bubbles': true, 'external': true});

      // ??
      initialized = true;

      return self;
    };

    /**
     * Detach all sections from their parents
     */
    self.detachSections = function () {
      // Deinit Question
      initialized = false;

      // Detach sections
      for (var section in sections) {
        sections[section].$element.detach();
      }

      return self;
    };

    // Listen for resize
    self.on('resize', function () {
      // Allow elements to attach and set their height before resizing
      if (!sectionsIsTransitioning && sections.feedback && showFeedback) {
        // Resize feedback to fit
        setElementHeight(sections.feedback.$element);
      }

      // Re-position feedback popup if in use
      var $element = sections.feedback;
      var $click = clickElement;

      if ($element != null && $element.$element != null && $click != null && $click.$element != null) {
        setTimeout(function () {
          positionFeedbackPopup($element.$element, $click.$element);
        }, 10);
      }

      resizeButtons();
    });
  }

  // Inheritance
  Question.prototype = Object.create(EventDispatcher.prototype);
  Question.prototype.constructor = Question;

  /**
   * Determine the overall feedback to display for the question.
   * Returns empty string if no matching range is found.
   *
   * @param {Object[]} feedbacks
   * @param {number} scoreRatio
   * @return {string}
   */
  Question.determineOverallFeedback = function (feedbacks, scoreRatio) {
    scoreRatio = Math.floor(scoreRatio * 100);

    for (var i = 0; i < feedbacks.length; i++) {
      var feedback = feedbacks[i];
      var hasFeedback = (feedback.feedback !== undefined && feedback.feedback.trim().length !== 0);

      if (feedback.from <= scoreRatio && feedback.to >= scoreRatio && hasFeedback) {
        return feedback.feedback;
      }
    }

    return '';
  };

  return Question;
})(H5P.jQuery, H5P.EventDispatcher, H5P.JoubelUI);
;H5P.Question.Explainer = (function ($) {
  /**
   * Constructor
   *
   * @class
   * @param {string} title
   * @param {array} explanations
   */
  function Explainer(title, explanations) {
    var self = this;

    /**
     * Create the DOM structure
     */
    var createHTML = function () {
      self.$explanation = $('<div>', {
        'class': 'h5p-question-explanation-container'
      });

      // Add title:
      $('<div>', {
        'class': 'h5p-question-explanation-title',
        role: 'heading',
        html: title,
        appendTo: self.$explanation
      });

      var $explanationList = $('<ul>', {
        'class': 'h5p-question-explanation-list',
        appendTo: self.$explanation
      });

      for (var i = 0; i < explanations.length; i++) {
        var feedback = explanations[i];
        var $explanationItem = $('<li>', {
          'class': 'h5p-question-explanation-item',
          appendTo: $explanationList
        });

        var $content = $('<div>', {
          'class': 'h5p-question-explanation-status'
        });

        if (feedback.correct) {
          $('<span>', {
            'class': 'h5p-question-explanation-correct',
            html: feedback.correct,
            appendTo: $content
          });
        }
        if (feedback.wrong) {
          $('<span>', {
            'class': 'h5p-question-explanation-wrong',
            html: feedback.wrong,
            appendTo: $content
          });
        }
        $content.appendTo($explanationItem);

        if (feedback.text) {
          $('<div>', {
            'class': 'h5p-question-explanation-text',
            html: feedback.text,
            appendTo: $explanationItem
          });
        }
      }
    };

    createHTML();

    /**
     * Return the container HTMLElement
     *
     * @return {HTMLElement}
     */
    self.getElement = function () {
      return self.$explanation;
    };
  }

  return Explainer;

})(H5P.jQuery);
;(function (Question) {

  /**
   * Makes it easy to add animated score points for your question type.
   *
   * @class H5P.Question.ScorePoints
   */
  Question.ScorePoints = function () {
    var self = this;

    var elements = [];
    var showElementsTimer;

    /**
     * Create the element that displays the score point element for questions.
     *
     * @param {boolean} isCorrect
     * @return {HTMLElement}
     */
    self.getElement = function (isCorrect) {
      var element = document.createElement('div');
      element.classList.add(isCorrect ? 'h5p-question-plus-one' : 'h5p-question-minus-one');
      element.classList.add('h5p-question-hidden-one');
      elements.push(element);

      // Schedule display animation of all added elements
      if (showElementsTimer) {
        clearTimeout(showElementsTimer);
      }
      showElementsTimer = setTimeout(showElements, 0);

      return element;
    };

    /**
     * @private
     */
    var showElements = function () {
      // Determine delay between triggering animations
      var delay = 0;
      var increment = 150;
      var maxTime = 1000;

      if (elements.length && elements.length > Math.ceil(maxTime / increment)) {
        // Animations will run for more than ~1 second, reduce it.
        increment = maxTime / elements.length;
      }

      for (var i = 0; i < elements.length; i++) {
        // Use timer to trigger show
        setTimeout(showElement(elements[i]), delay);

        // Increse delay for next element
        delay += increment;
      }
    };

    /**
     * Trigger transition animation for the given element
     *
     * @private
     * @param {HTMLElement} element
     * @return {function}
     */
    var showElement = function (element) {
      return function () {
        element.classList.remove('h5p-question-hidden-one');
      };
    };
  };

})(H5P.Question);
;H5P.ImageHotspotQuestion = (function ($, Question) {

  /**
   * Initialize module.
   * @class H5P.ImageHotspotQuestion
   * @extends H5P.Question
   * @param {object} params Behavior settings
   * @param {number} id Content identification
   * @param {object} contentData Task specific content data
   */
  function ImageHotspotQuestion(params, id, contentData) {
    const defaults = {
      imageHotspotQuestion: {
        backgroundImageSettings: {
          backgroundImage: {
            path: ''
          }
        },
        hotspotSettings: {
          hotspot: [],
          showFeedbackAsPopup: true,
          l10n: {
            retryText: 'Retry',
            closeText: 'Close'
          }
        }
      },
      behaviour: {
        enableRetry: true
      },
      scoreBarLabel: 'You got :num out of :total points',
      a11yRetry:
        'Retry the task. Reset all responses and start the task over again.',
    };

    // Inheritance
    Question.call(this, 'image-hotspot-question');

    /**
     * Keeps track of content id.
     * @type {number}
     */
    this.contentId = id;

    /**
     * Keeps track of max score.
     * @type {number}
     */
    this.maxScore = 1;

    /**
     * Keeps track of parameters.
     */
    this.params = $.extend(true, {}, defaults, params);

    /**
     * Easier access to image settings.
     * H5P semantics doesn't treat Arrays with one element as arrays with one element
     */
    this.imageSettings =
      this.params.imageHotspotQuestion.backgroundImageSettings;

    /**
     * Easier access to hotspot settings.
     */
    this.hotspotSettings = this.params.imageHotspotQuestion.hotspotSettings;

    /**
     * Keeps track of all hotspots in an array.
     * @type {HTMLElement[]}
     */
    this.hotspots = [];

    /**
     * Keeps track of the content data. Specifically the previous state.
     * @type {object}
     */
    this.contentData = contentData;
    this.previousState = contentData?.previousState;

    this.dom = this.createContent();

    this.lastHotspot = this.previousState?.hotspotIndex ??
      ImageHotspotQuestion.NOT_CLICKED;
    this.lastPosition = this.previousState?.position;
    this.isPopopOpen = this.previousState?.popupOpen ?? false;

    /**
     * Hotspot feedback object. Contains hotspot feedback specific parameters.
     * @type {object}
     */
    this.hotspotFeedback = {
      hotspotChosen: this.lastPosition !== undefined
    };

    this.callOnceAttached(() => {
      if (typeof this.lastHotspot === 'number' && this.lastPosition) {
        const hotspotParams = this.lastHotspot >= 0 ?
          this.hotspotSettings.hotspot[this.lastHotspot] :
          undefined;

          this.createHotspotFeedback({
            position: this.lastPosition,
            hotspotParams: hotspotParams,
            options: {
              skipFeedback: !this.isPopopOpen,
              skipXAPI: true
            }
          });
      }
    });

    // Start activity timer
    if (this.isRoot()) {
      this.setActivityStarted();
    }

    // Register resize listener with h5p
    this.on('resize', () => {
      this.resize();
    });
  }

  // Inheritance
  ImageHotspotQuestion.prototype = Object.create(Question.prototype);
  ImageHotspotQuestion.prototype.constructor = ImageHotspotQuestion;

  /**
   * Registers this question types DOM elements before they are attached.
   * Called from H5P.Question.
   */
  ImageHotspotQuestion.prototype.registerDomElements = function () {
    // Register task introduction text
    if (this.hotspotSettings.taskDescription) {
      this.setIntroduction(this.hotspotSettings.taskDescription);
    }

    // Register task content area
    this.setContent(H5P.jQuery(this.dom));

    // Register retry button
    this.createRetryButton();
  };

  /**
   * Create main dom.
   * @returns {HTMLElement} Main dom element.
   */
  ImageHotspotQuestion.prototype.createContent = function () {
    const dom = document.createElement('div');
    dom.classList.add('h5p-image-hotspot-question');

    if (this.imageSettings?.path) {
      this.imageWrapper = document.createElement('div');
      this.imageWrapper.classList.add('image-wrapper');
      this.imageWrapper.addEventListener('click', (mouseEvent) => {
        if (this.hotspotFeedback.element?.isConnected) {
          return;
        }

        this.lastHotspot = ImageHotspotQuestion.NO_PARTICULAR_HOTSPOT;
        this.lastPosition =
          this.getFeedbackPosition(this.imageWrapper, mouseEvent);

        this.createHotspotFeedback({ position: this.lastPosition });
      });
      dom.append(this.imageWrapper);

      // Image loader screen
      const loader = document.createElement('div');
      loader.classList.add('image-loader', 'loading');
      this.imageWrapper.append(loader);

      this.backgroundImage = new Image();
      this.backgroundImage.classList.add('hotspot-image');
      this.backgroundImage.addEventListener('load', () => {
        loader.parentNode.replaceChild(this.backgroundImage, loader);
        this.trigger('resize');
      });
      this.backgroundImage.src =
        H5P.getPath(this.imageSettings.path, this.contentId);

      this.attachHotspots();
    }
    else {
      const message = document.createElement('div');
      message.innerText = 'No background image was added!';
      dom.append(message);
    }

    return dom;
  };

  /**
   * Attach all hotspots.
   */
  ImageHotspotQuestion.prototype.attachHotspots = function () {
    this.hotspotSettings.hotspot.forEach((params, index) => {
      this.attachHotspot(params, index);
    });
  };

  /**
   * Attach single hotspot.
   * @param {object} params Hotspot parameters.
   * @param {number} index Index of the hotspot.
   */
  ImageHotspotQuestion.prototype.attachHotspot = function (params, index) {
    const hotspot = document.createElement('div');
    hotspot.classList.add('image-hotspot', params.computedSettings.figure);
    hotspot.style.left = `${params.computedSettings.x}%`;
    hotspot.style.top = `${params.computedSettings.y}%`;
    hotspot.style.width = `${params.computedSettings.width}%`;
    hotspot.style.height = `${params.computedSettings.height}%`;
    hotspot.addEventListener('click', (mouseEvent) => {
      if (this.hotspotFeedback.element?.isConnected) {
        return;
      }

      mouseEvent.stopPropagation();
      // Create new hotspot feedback
      this.lastHotspot = index;
      this.lastPosition = this.getFeedbackPosition(hotspot, mouseEvent);
      this.createHotspotFeedback({
        position: this.lastPosition,
        hotspotParams: params
      });

      // Do not propagate
      return false;
    });
    this.imageWrapper.append(hotspot);

    this.hotspots.push(hotspot);
  };

  /**
   * Get feedback position based on mouse event and clicked element.
   * @param {HTMLElement} clickedElement Element clicked on.
   * @param {MouseEvent} mouseEvent Mouse event.
   * @returns
   */
  ImageHotspotQuestion.prototype.getFeedbackPosition = function (
    clickedElement, mouseEvent
  ) {
    let x = mouseEvent.offsetX;
    let y = mouseEvent.offsetY;

    // Apply clicked element offset if click was not in wrapper
    if (!clickedElement.classList.contains('image-wrapper')) {
      x += clickedElement.offsetLeft;
      y += clickedElement.offsetTop;
    }

    x = x / (this.imageWrapper.offsetWidth / 100);
    y = y / (this.imageWrapper.offsetHeight / 100);

    return { x: x, y: y };
  };

  /**
   * Create a feedback element for a click.
   * @param {object} [params] Parameters for the feedback.
   * @param {object} params.position Position of the click.
   * @param {number} params.position.x X position of the click.
   * @param {number} params.position.y Y position of the click.
   * @param {object} [params.hotspotParams] Hotspot parameters.
   * @param {object} [params.options] Options for the feedback.
   * @param {boolean} [params.options.skipXAPI] True to skip xAPI event.
   * @param {boolean} [params.options.skipFeedback] True to skip feedback.
   */
  ImageHotspotQuestion.prototype.createHotspotFeedback = function (params = {}) {
    if (!params.position) {
      return;
    }

    // Do not create new hotspot if one exists
    if (this.hotspotFeedback.element?.isConnected) {
      return;
    }

    this.hotspotFeedback.element = document.createElement('div');
    this.hotspotFeedback.element.classList.add('hotspot-feedback');
    this.imageWrapper.append(this.hotspotFeedback.element);

    this.hotspotFeedback.hotspotChosen = true;

    // Keep position and pixel offsets for resizing
    this.hotspotFeedback.percentagePosX = params.position.x;
    this.hotspotFeedback.percentagePosY = params.position.y;
    this.hotspotFeedback.pixelOffsetX =
      this.hotspotFeedback.element.offsetWidth / 2;
    this.hotspotFeedback.pixelOffsetY =
      this.hotspotFeedback.element.offsetHeight / 2;

    // Position feedback
    this.resizeHotspotFeedback();

    // Style correct answers
    if (params.hotspotParams?.userSettings.correct) {
      this.hotspotFeedback.element.classList.add('correct');
      // this.hideButton('retry-button');
    }
    else if (this.params.behaviour.enableRetry) {
      // Wrong answer, show retry button
      this.showButton('retry-button');
    }

    const feedbackText = params.hotspotParams?.userSettings.feedbackText ||
      this.params.imageHotspotQuestion.hotspotSettings.noneSelectedFeedback ||
      '&nbsp;';

    // Send these settings into setFeedback to turn feedback into a popup.
    const popupSettings = {
      showAsPopup:
        this.params.imageHotspotQuestion.hotspotSettings.showFeedbackAsPopup,
      closeText:
        this.params.imageHotspotQuestion.hotspotSettings.l10n.closeText,
      click:
        {...this.hotspotFeedback, $element: $(this.hotspotFeedback.element)}
    };

    // Too bad the popup doesn't use a callback
    window.requestAnimationFrame(() => {
      const questionFeedback = this.dom?.parentNode.querySelector(
        '.h5p-question-feedback.h5p-question-visible.h5p-question-popup'
      );
      if (!questionFeedback) {
        return;
      }

      const popupCloseButton = questionFeedback.querySelector(
        '.h5p-question-feedback-close'
      );
      popupCloseButton?.addEventListener('click', () => {
        this.isPopopOpen = false;
      });

      // Workaroung for H5P.Question when using popups
      const buttons = questionFeedback.querySelector('.h5p-question-buttons');
      if (buttons) {
        buttons.style.display = 'inline-block';
      }
    });

    this.isPopopOpen = true;

    if (!params.options?.skipFeedback) {
      this.setFeedback(
        feedbackText,
        this.getScore(),
        this.getMaxScore(),
        this.params.scoreBarLabel,
        undefined,
        popupSettings
      );
    }

    // Finally add fade in animation to hotspot feedback
    this.hotspotFeedback.element.classList.add('fade-in');

    if (!params.options?.skipXAPI) {
      // Trigger xAPI completed event
      this.triggerAnswered();
    }
  };

  /**
   * Create retry button and add it to button bar.
   */
  ImageHotspotQuestion.prototype.createRetryButton = function () {
    this.addButton(
      'retry-button',
      this.params.imageHotspotQuestion.hotspotSettings.l10n.retryText,
      () => {
        this.resetTask();
      },
      false,
      { 'aria-label': this.params.a11yRetry }
    );
  };

  /**
   * Determine whether the task was answered already.
   * @returns {boolean} True if answer was given by user, else false.
   * @see contract at {@link https://h5p.org/documentation/developers/contracts#guides-header-1}
   */
  ImageHotspotQuestion.prototype.getAnswerGiven = function () {
    return this.hotspotFeedback.hotspotChosen;
  };

  /**
   * Get current score.
   * @returns {number} Current score.
   * @see contract at {@link https://h5p.org/documentation/developers/contracts#guides-header-2}
   */
  ImageHotspotQuestion.prototype.getScore = function () {
    if (this.lastHotspot < 0) {
      return 0;
    }

    return (
      this.hotspotSettings.hotspot[this.lastHotspot].userSettings?.correct ?
        1 :
        0
    );
  };

  /**
   * Get maximum possible score.
   * @returns {number} Maximum possible score.
   * @see contract at {@link https://h5p.org/documentation/developers/contracts#guides-header-3}
   */
  ImageHotspotQuestion.prototype.getMaxScore = function () {
    return this.maxScore;
  };

  /**
   * Show solutions.
   * @see contract at {@link https://h5p.org/documentation/developers/contracts#guides-header-4}
   */
  ImageHotspotQuestion.prototype.showSolutions = function () {
    let foundSolution = false;

    this.hotspotSettings.hotspot.forEach((hotspotParams, index) => {
      if (hotspotParams.userSettings.correct && !foundSolution) {
        const correctHotspot = this.hotspots[index];
        const position = this.getFeedbackPosition(
          correctHotspot,
          {
            offsetX: (correctHotspot.offsetWidth / 2),
            offsetY: (correctHotspot.offsetHeight / 2)
          }
        );
        this.createHotspotFeedback({
          position: position,
          hotspotParams: hotspotParams,
          options: { skipFeedback: true, skipXAPI: true }
        });

        foundSolution = true;
      }
    });
  };

  /**
   * Reset task.
   * @see contract at {@link https://h5p.org/documentation/developers/contracts#guides-header-5}
   */
  ImageHotspotQuestion.prototype.resetTask = function () {
    this.wasReset = true;

    // Remove hotspot feedback
    this.hotspotFeedback.element?.remove();
    this.hotspotFeedback.hotspotChosen = false;

    // Hide retry button
    this.hideButton('retry-button');

    this.lastHotspot = ImageHotspotQuestion.NOT_CLICKED;
    this.isPopopOpen = false;
    delete this.lastPosition;

    // Clear feedback
    this.removeFeedback();
  };

  /**
   * Get xAPI data.
   * @returns {object} XAPI statement.
   * @see contract at {@link https://h5p.org/documentation/developers/contracts#guides-header-6}
   */
  ImageHotspotQuestion.prototype.getXAPIData = function () {
    const xAPIEvent = this.createXAPIEventTemplate('answered');
    xAPIEvent.setScoredResult(
      this.getScore(), this.getMaxScore(), this, true, true
    );
    this.addQuestionToXAPI(xAPIEvent);

    return {
      statement: xAPIEvent.data.statement
    };
  };

  /**
   * Get current state.
   * @returns {object} Current state to be retrieved later.
   * @see contract at {@link https://h5p.org/documentation/developers/contracts#guides-header-7}
   */
  ImageHotspotQuestion.prototype.getCurrentState = function () {
    if (!this.getAnswerGiven()) {
      return this.wasReset? {} : undefined;
    }

    return {
      hotspotIndex: this.lastHotspot,
      position: this.lastPosition,
      popupOpen: this.isPopopOpen
    }
  }

  /**
   * Get title of content.
   * @returns {string} Title.
   */
  ImageHotspotQuestion.prototype.getTitle = function () {
    return H5P.createTitle(this.contentData?.metadata?.title ?? 'Fill In');
  };

  /**
   * Trigger xAPI answered event
   */
  ImageHotspotQuestion.prototype.triggerAnswered = function () {
    const xAPIEvent = this.createXAPIEventTemplate('answered');

    // Add score to xAPIEvent
    const score = this.getScore();
    const maxScore = this.getMaxScore();
    xAPIEvent.setScoredResult(score, maxScore, this, true, score === maxScore);

    this.addQuestionToXAPI(xAPIEvent);
    this.trigger(xAPIEvent);
  };

  /**
   * Add the question itself to the definition part of an xAPIEvent.
   */
  ImageHotspotQuestion.prototype.addQuestionToXAPI = function (xAPIEvent) {
    const definition =
      xAPIEvent.getVerifiedStatementValue(['object', 'definition']);
    $.extend(true, definition, this.getxAPIDefinition());
  };

  /**
   * Generate xAPI object definition used in xAPI statements.
   * @return {object|undefined} XAPI definition object or undefined if not supported.
   */
  ImageHotspotQuestion.prototype.getxAPIDefinition = function () {
    if (this.isRoot()) {
      return; // Individual report not supported
    }

    const definition = {};
    definition.description = {
      'en-US': this.getTitle()
    };
    definition.type = 'http://adlnet.gov/expapi/activities/cmi.interaction';
    definition.interactionType = 'other';
    return definition;
  };

  /**
   * Resize image and wrapper.
   */
  ImageHotspotQuestion.prototype.resize = function () {
    this.resizeImage();
    this.resizeHotspotFeedback();
  };

  /**
   * Resize image to fit parent width.
   */
  ImageHotspotQuestion.prototype.resizeImage = function () {
    // Check that question has been attached
    if (!this.dom || !this.backgroundImage) {
      return;
    }

    // Resize image to fit new container width.
    const parentWidth = this.dom.offsetWidth;
    this.backgroundImage.style.width = `${parentWidth}px`;

    // Find required height for new width.
    const naturalWidth = this.backgroundImage.naturalWidth;
    const naturalHeight = this.backgroundImage.naturalHeight;
    const imageRatio = naturalHeight / naturalWidth;
    let neededHeight = -1;
    if (parentWidth < naturalWidth) {
      // Scale image down
      neededHeight = parentWidth * imageRatio;
    }
    else {
      // Scale image to natural size
      this.backgroundImage.style.width = `${naturalWidth}px`;
      neededHeight = naturalHeight;
    }

    if (neededHeight !== -1) {
      this.backgroundImage.style.height = `${neededHeight}px`;

      // Resize wrapper to match image.
      this.dom.style.height = `${neededHeight}px`;
    }
  };

  /**
   * Re-position hotspot feedback.
   */
  ImageHotspotQuestion.prototype.resizeHotspotFeedback = function () {
    // Check that hotspot is chosen
    if (!this.hotspotFeedback.element) {
      return;
    }

    // Calculate positions
    const posX =
      this.hotspotFeedback.percentagePosX *
        this.imageWrapper.offsetWidth / 100 -
        this.hotspotFeedback.pixelOffsetX;
    const posY =
      this.hotspotFeedback.percentagePosY *
        this.imageWrapper.offsetHeight / 100 -
        this.hotspotFeedback.pixelOffsetY;

    this.hotspotFeedback.element.style.left = `${posX}px`;
    this.hotspotFeedback.element.style.top = `${posY}px`;
  };

  /**
   * Call callback function once H5P.Question has attached to DOM.
   * @param {function} callback Function to call once DOM is available.
   */
  ImageHotspotQuestion.prototype.callOnceAttached = function(callback) {
    if (typeof callback !== 'function') {
      return; // Invalid arguments
    }

    const observer = new MutationObserver(() => {
      if (this.dom?.isConnected) {
        observer.disconnect();
        callback();
      }
    });

    observer.observe(document, {
      childList: true,
      subtree: true
    });
  };

  /** @constant {number} NO_PARTICULAR_HOTSPOT Clicked on no particular hotspot. */
  ImageHotspotQuestion.NO_PARTICULAR_HOTSPOT = -1;

  /** @constant {number} NOT_CLICKED Not clicked anywhere. */
  ImageHotspotQuestion.NOT_CLICKED = -2;

  return ImageHotspotQuestion;
}(H5P.jQuery, H5P.Question));
;		(function(xopen, fetch, dataurls) {

			switch(location.protocol.split(':')[0]) {
				case 'http':
				case 'https':
					return;
			};

			const url2data	= function(oldurl) {
					switch(oldurl.split(':')[0]) {
						case 'blob':
							console.log('blob', oldurl);
						case 'data':
							return oldurl;
					}
					let urltoks	 = oldurl.replace(H5PIntegration.url, '.').split('/');
					if(urltoks[0] == '.') {
						urltoks.shift();
						const url	= urltoks.join('/');
						if(typeof dataurls[url]!=='undefined') {
							if(dataurls[url][0]=='application/json') {
								return 'data:application/json;text,' + dataurls[url][1];
							}
							return 'data:' + dataurls[url].join(';base64,');
						}
					}
					console.error('url not found:', oldurl);
					return "data:;text,";
			};
			window.fetch = function() {
				arguments[0]	= url2data(arguments[0]);
				return fetch.apply(this, arguments);
			};
			XMLHttpRequest.prototype.open = function() {
				arguments[1]	= url2data(arguments[1]);
				return xopen.apply(this, arguments);
			};
		})(XMLHttpRequest.prototype.open, window.fetch, {"libraries\/H5P.Image-1.1\/library.json":["application\/json","{\"title\":\"Image\",\"contentType\":\"Media\",\"description\":\"Simple library that displays an image.\",\"majorVersion\":1,\"minorVersion\":1,\"patchVersion\":22,\"runnable\":0,\"machineName\":\"H5P.Image\",\"author\":\"Joubel\",\"coreApi\":{\"majorVersion\":1,\"minorVersion\":19},\"preloadedJs\":[{\"path\":\"image.js\"}],\"preloadedCss\":[{\"path\":\"image.css\"}],\"metadataSettings\":{\"disable\":0,\"disableExtraTitleField\":1},\"editorDependencies\":[{\"machineName\":\"H5PEditor.ShowWhen\",\"majorVersion\":1,\"minorVersion\":0}]}"],"libraries\/H5PEditor.ShowWhen-1.0\/library.json":["application\/json","{\"machineName\":\"H5PEditor.ShowWhen\",\"title\":\"Toggle visibility of a field based on rules\",\"license\":\"MIT\",\"author\":\"fnoks\",\"majorVersion\":1,\"minorVersion\":0,\"patchVersion\":9,\"runnable\":0,\"preloadedJs\":[{\"path\":\"h5p-show-when.js\"}],\"preloadedCss\":[{\"path\":\"h5p-show-when.css\"}]}"],"libraries\/H5P.Column-1.18\/library.json":["application\/json","{\"machineName\":\"H5P.Column\",\"title\":\"Page\",\"description\":\"Content holder displaying content in a column.\",\"contentType\":\"instructional\",\"license\":\"MIT\",\"author\":\"Joubel\",\"majorVersion\":1,\"minorVersion\":18,\"patchVersion\":8,\"runnable\":1,\"fullscreen\":0,\"embedTypes\":[\"iframe\"],\"coreApi\":{\"majorVersion\":1,\"minorVersion\":27},\"preloadedJs\":[{\"path\":\"scripts\\\/h5p-column.js\"}],\"preloadedCss\":[{\"path\":\"styles\\\/h5p-column.css\"}]}"],"libraries\/H5P.ImageHotspotQuestion-1.8\/library.json":["application\/json","{\"title\":\"Find the Hotspot\",\"description\":\"A question that is answered by pressing the correct hotspot.\",\"contentType\":\"Question\",\"majorVersion\":1,\"minorVersion\":8,\"patchVersion\":22,\"runnable\":1,\"author\":\"Joubel\",\"license\":\"MIT\",\"coreApi\":{\"majorVersion\":1,\"minorVersion\":23},\"machineName\":\"H5P.ImageHotspotQuestion\",\"preloadedCss\":[{\"path\":\"image-hotspot-question.css\"}],\"preloadedJs\":[{\"path\":\"image-hotspot-question.js\"}],\"editorDependencies\":[{\"machineName\":\"H5PEditor.Wizard\",\"majorVersion\":1,\"minorVersion\":2},{\"machineName\":\"H5PEditor.ImageHotspotQuestion\",\"majorVersion\":1,\"minorVersion\":8}],\"preloadedDependencies\":[{\"machineName\":\"H5P.Question\",\"majorVersion\":1,\"minorVersion\":5}]}"],"libraries\/H5P.Question-1.5\/library.json":["application\/json","{\"title\":\"Question\",\"machineName\":\"H5P.Question\",\"majorVersion\":1,\"minorVersion\":5,\"patchVersion\":15,\"runnable\":0,\"license\":\"MIT\",\"author\":\"Joubel\",\"coreApi\":{\"majorVersion\":1,\"minorVersion\":7},\"preloadedCss\":[{\"path\":\"styles\\\/question.css\"},{\"path\":\"styles\\\/explainer.css\"}],\"preloadedJs\":[{\"path\":\"scripts\\\/question.js\"},{\"path\":\"scripts\\\/explainer.js\"},{\"path\":\"scripts\\\/score-points.js\"}],\"preloadedDependencies\":[{\"machineName\":\"FontAwesome\",\"majorVersion\":4,\"minorVersion\":5},{\"machineName\":\"H5P.JoubelUI\",\"majorVersion\":1,\"minorVersion\":3}]}"],"libraries\/FontAwesome-4.5\/library.json":["application\/json","{\"title\":\"Font Awesome\",\"contentType\":\"Font\",\"majorVersion\":4,\"minorVersion\":5,\"patchVersion\":6,\"runnable\":0,\"machineName\":\"FontAwesome\",\"license\":\"MIT\",\"author\":\"Dave Gandy\",\"preloadedCss\":[{\"path\":\"h5p-font-awesome.min.css\"}]}"],"libraries\/H5P.JoubelUI-1.3\/library.json":["application\/json","{\"title\":\"Joubel UI\",\"contentType\":\"Utility\",\"description\":\"UI utility library\",\"majorVersion\":1,\"minorVersion\":3,\"patchVersion\":19,\"runnable\":0,\"coreApi\":{\"majorVersion\":1,\"minorVersion\":3},\"machineName\":\"H5P.JoubelUI\",\"author\":\"Joubel\",\"preloadedJs\":[{\"path\":\"js\\\/joubel-help-dialog.js\"},{\"path\":\"js\\\/joubel-message-dialog.js\"},{\"path\":\"js\\\/joubel-progress-circle.js\"},{\"path\":\"js\\\/joubel-simple-rounded-button.js\"},{\"path\":\"js\\\/joubel-speech-bubble.js\"},{\"path\":\"js\\\/joubel-throbber.js\"},{\"path\":\"js\\\/joubel-tip.js\"},{\"path\":\"js\\\/joubel-slider.js\"},{\"path\":\"js\\\/joubel-score-bar.js\"},{\"path\":\"js\\\/joubel-progressbar.js\"},{\"path\":\"js\\\/joubel-ui.js\"}],\"preloadedCss\":[{\"path\":\"css\\\/joubel-help-dialog.css\"},{\"path\":\"css\\\/joubel-message-dialog.css\"},{\"path\":\"css\\\/joubel-progress-circle.css\"},{\"path\":\"css\\\/joubel-simple-rounded-button.css\"},{\"path\":\"css\\\/joubel-speech-bubble.css\"},{\"path\":\"css\\\/joubel-tip.css\"},{\"path\":\"css\\\/joubel-slider.css\"},{\"path\":\"css\\\/joubel-score-bar.css\"},{\"path\":\"css\\\/joubel-progressbar.css\"},{\"path\":\"css\\\/joubel-ui.css\"},{\"path\":\"css\\\/joubel-icon.css\"}],\"preloadedDependencies\":[{\"machineName\":\"FontAwesome\",\"majorVersion\":4,\"minorVersion\":5},{\"machineName\":\"H5P.Transition\",\"majorVersion\":1,\"minorVersion\":0},{\"machineName\":\"H5P.FontIcons\",\"majorVersion\":1,\"minorVersion\":0}]}"],"libraries\/H5PEditor.Wizard-1.2\/library.json":["application\/json","{\"title\":\"H5PEditor.Wizard\",\"majorVersion\":1,\"minorVersion\":2,\"patchVersion\":17,\"runnable\":0,\"machineName\":\"H5PEditor.Wizard\",\"author\":\"Frode Petterson\",\"coreApi\":{\"majorVersion\":1,\"minorVersion\":23},\"preloadedJs\":[{\"path\":\"Scripts\\\/Wizard.js\"}],\"preloadedCss\":[{\"path\":\"Styles\\\/Wizard.css\"}],\"preloadedDependencies\":[{\"machineName\":\"H5P.FontIcons\",\"majorVersion\":1,\"minorVersion\":0}]}"],"libraries\/H5P.FontIcons-1.0\/library.json":["application\/json","{\"title\":\"H5P.FontIcons\",\"majorVersion\":1,\"minorVersion\":0,\"patchVersion\":11,\"runnable\":0,\"machineName\":\"H5P.FontIcons\",\"author\":\"Joubel\",\"preloadedCss\":[{\"path\":\"styles\\\/h5p-font-icons.css\"}]}"],"libraries\/H5PEditor.ImageHotspotQuestion-1.8\/library.json":["application\/json","{\"title\":\"Image Hotspot Question Editor\",\"majorVersion\":1,\"minorVersion\":8,\"patchVersion\":12,\"runnable\":0,\"author\":\"Joubel\",\"coreApi\":{\"majorVersion\":1,\"minorVersion\":12},\"machineName\":\"H5PEditor.ImageHotspotQuestion\",\"preloadedJs\":[{\"path\":\"image-hotspot-question-editor.js\"}],\"preloadedCss\":[{\"path\":\"image-hotspot-question-editor.css\"}],\"preloadedDependencies\":[{\"machineName\":\"H5P.DragNBar\",\"majorVersion\":1,\"minorVersion\":5},{\"machineName\":\"H5P.DragNResize\",\"majorVersion\":1,\"minorVersion\":2},{\"machineName\":\"H5P.ImageHotspotQuestion\",\"majorVersion\":1,\"minorVersion\":8}]}"],"libraries\/H5P.DragNBar-1.5\/library.json":["application\/json","{\"title\":\"Drag N Bar\",\"contentType\":\"API\",\"description\":\"Creates a menu bar with items that can be dropped into the specified container.\",\"majorVersion\":1,\"minorVersion\":5,\"patchVersion\":24,\"runnable\":0,\"machineName\":\"H5P.DragNBar\",\"author\":\"Joubel\",\"coreApi\":{\"majorVersion\":1,\"minorVersion\":24},\"preloadedJs\":[{\"path\":\"scripts\\\/drag-n-bar.js\"},{\"path\":\"scripts\\\/context-menu.js\"},{\"path\":\"scripts\\\/dialog.js\"},{\"path\":\"scripts\\\/drag-n-bar-element.js\"},{\"path\":\"scripts\\\/drag-n-bar-form-manager.js\"}],\"preloadedCss\":[{\"path\":\"styles\\\/drag-n-bar.css\"},{\"path\":\"styles\\\/dialog.css\"},{\"path\":\"styles\\\/context-menu.css\"},{\"path\":\"styles\\\/drag-n-bar-form-manager.css\"}],\"preloadedDependencies\":[{\"machineName\":\"H5P.DragNDrop\",\"majorVersion\":1,\"minorVersion\":1},{\"machineName\":\"H5P.DragNResize\",\"majorVersion\":1,\"minorVersion\":2},{\"machineName\":\"H5P.FontIcons\",\"majorVersion\":1,\"minorVersion\":0}]}"],"libraries\/H5P.DragNResize-1.2\/library.json":["application\/json","{\"title\":\"Drag'N Resize\",\"contentType\":\"API\",\"description\":\"A library that aims to make resize operations easier for other libraries.\",\"majorVersion\":1,\"minorVersion\":2,\"patchVersion\":6,\"runnable\":0,\"machineName\":\"H5P.DragNResize\",\"author\":\"Frode Petterson\",\"preloadedJs\":[{\"path\":\"H5P.DragNResize.js\"}],\"preloadedCss\":[{\"path\":\"H5P.DragNResize.css\"}]}"],"libraries\/H5P.Transition-1.0\/library.json":["application\/json","{\"machineName\":\"H5P.Transition\",\"title\":\"Transition\",\"description\":\"Contains helper function relevant for transitioning\",\"license\":\"MIT\",\"author\":\"Joubel\",\"majorVersion\":1,\"minorVersion\":0,\"patchVersion\":4,\"runnable\":0,\"preloadedJs\":[{\"path\":\"transition.js\"}]}"],"libraries\/H5P.InteractiveBook-1.11\/library.json":["application\/json","{\"title\":\"Interactive Book\",\"description\":\"An interactive book which displays content in pages and sections\",\"majorVersion\":1,\"minorVersion\":11,\"patchVersion\":11,\"runnable\":1,\"fullscreen\":1,\"coreApi\":{\"majorVersion\":1,\"minorVersion\":27},\"author\":\"Joubel\",\"license\":\"MIT\",\"machineName\":\"H5P.InteractiveBook\",\"embedTypes\":[\"iframe\"],\"preloadedJs\":[{\"path\":\"dist\\\/h5p-interactive-book.js\"}],\"preloadedCss\":[{\"path\":\"dist\\\/h5p-interactive-book.css\"}],\"preloadedDependencies\":[{\"machineName\":\"FontAwesome\",\"majorVersion\":4,\"minorVersion\":5},{\"machineName\":\"H5P.JoubelUI\",\"majorVersion\":1,\"minorVersion\":3}],\"editorDependencies\":[{\"machineName\":\"H5PEditor.VerticalTabs\",\"majorVersion\":1,\"minorVersion\":3},{\"machineName\":\"H5PEditor.ShowWhen\",\"majorVersion\":1,\"minorVersion\":0},{\"machineName\":\"H5PEditor.ColorSelector\",\"majorVersion\":1,\"minorVersion\":3}]}"],"libraries\/H5PEditor.VerticalTabs-1.3\/library.json":["application\/json","{\"machineName\":\"H5PEditor.VerticalTabs\",\"title\":\"H5P Editor Vertical Tabs\",\"license\":\"MIT\",\"author\":\"Joubel\",\"majorVersion\":1,\"minorVersion\":3,\"patchVersion\":14,\"runnable\":0,\"coreApi\":{\"majorVersion\":1,\"minorVersion\":24},\"preloadedJs\":[{\"path\":\"vertical-tabs.js\"}],\"preloadedCss\":[{\"path\":\"styles\\\/css\\\/vertical-tabs.css\"}],\"preloadedDependencies\":[{\"machineName\":\"FontAwesome\",\"majorVersion\":4,\"minorVersion\":5}]}"],"libraries\/H5PEditor.ColorSelector-1.3\/library.json":["application\/json","{\"title\":\"H5PEditor.ColorSelector\",\"majorVersion\":1,\"minorVersion\":3,\"patchVersion\":1,\"runnable\":0,\"machineName\":\"H5PEditor.ColorSelector\",\"coreApi\":{\"majorVersion\":1,\"minorVersion\":24},\"author\":\"Joubel\",\"preloadedJs\":[{\"path\":\"scripts\\\/spectrum.js\"},{\"path\":\"scripts\\\/color-selector.js\"}],\"preloadedCss\":[{\"path\":\"styles\\\/spectrum.css\"},{\"path\":\"styles\\\/color-selector.css\"}]}"]});		H5PIntegration	= (function(x){
			let url	= window.location.href.split('/');
			url.pop();
			x.url	= url.join('/');
			return x;
		})({"baseUrl":"","url":"","siteUrl":"","l10n":{"H5P":{"fullscreen":"Vollbild","disableFullscreen":"Kein Vollbild","download":"Download","copyrights":"Nutzungsrechte","embed":"Einbetten","size":"Size","showAdvanced":"Show advanced","hideAdvanced":"Hide advanced","advancedHelp":"Include this script on your website if you want dynamic sizing of the embedded content:","copyrightInformation":"Nutzungsrechte","close":"Schlie\u00dfen","title":"Titel","author":"Autor","year":"Jahr","source":"Quelle","license":"Lizenz","thumbnail":"Thumbnail","noCopyrights":"Keine Copyright-Informationen vorhanden","reuse":"Wiederverwenden","reuseContent":"Verwende Inhalt","reuseDescription":"Verwende Inhalt.","downloadDescription":"Lade den Inhalt als H5P-Datei herunter.","copyrightsDescription":"Zeige Urheberinformationen an.","embedDescription":"Zeige den Code f\u00fcr die Einbettung an.","h5pDescription":"Visit H5P.org to check out more cool content.","contentChanged":"Dieser Inhalt hat sich seit Ihrer letzten Nutzung ver\u00e4ndert.","startingOver":"Sie beginnen von vorne.","by":"von","showMore":"Zeige mehr","showLess":"Zeige weniger","subLevel":"Sublevel","confirmDialogHeader":"Best\u00e4tige Aktion","confirmDialogBody":"Please confirm that you wish to proceed. This action is not reversible.","cancelLabel":"Όχι","confirmLabel":"Ναι","licenseU":"Undisclosed","licenseCCBY":"Attribution","licenseCCBYSA":"Attribution-ShareAlike","licenseCCBYND":"Attribution-NoDerivs","licenseCCBYNC":"Attribution-NonCommercial","licenseCCBYNCSA":"Attribution-NonCommercial-ShareAlike","licenseCCBYNCND":"Attribution-NonCommercial-NoDerivs","licenseCC40":"4.0 International","licenseCC30":"3.0 Unported","licenseCC25":"2.5 Generic","licenseCC20":"2.0 Generic","licenseCC10":"1.0 Generic","licenseGPL":"General Public License","licenseV3":"Version 3","licenseV2":"Version 2","licenseV1":"Version 1","licensePD":"Public Domain","licenseCC010":"CC0 1.0 Universal (CC0 1.0) Public Domain Dedication","licensePDM":"Public Domain Mark","licenseC":"Copyright","contentType":"Inhaltstyp","licenseExtras":"License Extras","changes":"Changelog","contentCopied":"Inhalt wurde ins Clipboard kopiert","connectionLost":"Connection lost. Results will be stored and sent when you regain connection.","connectionReestablished":"Connection reestablished.","resubmitScores":"Attempting to submit stored results.","offlineDialogHeader":"Your connection to the server was lost","offlineDialogBody":"We were unable to send information about your completion of this task. Please check your internet connection.","offlineDialogRetryMessage":"Versuche es wieder in :num....","offlineDialogRetryButtonLabel":"Jetzt nochmal probieren","offlineSuccessfulSubmit":"Erfolgreich Ergebnisse gesendet."}},"hubIsEnabled":false,"reportingIsEnabled":false,"libraryConfig":null,"crossorigin":null,"crossoriginCacheBuster":null,"pluginCacheBuster":"","libraryUrl":".\/libraries\/h5pcore\/js","contents":{"cid-assets":{"displayOptions":{"copy":false,"copyright":false,"embed":false,"export":false,"frame":false,"icon":false},"embedCode":"","exportUrl":false,"fullScreen":false,"contentUserData":[],"metadata":{"title":"\u0397 \u03a0\u039f\u0399\u039f\u03a4\u0397\u03a4\u0391 \u03a4\u0397\u03a3 \u0395\u039d\u0395\u03a1\u0393\u0395\u0399\u0391\u03a3 \u03a3\u03a4\u0397\u039d \u03a0\u0391\u0398\u0397\u03a4\u0399\u039a\u0397 \u03a6\u03a9\u039d\u0397","license":null},"library":"H5P.InteractiveBook 1.11","jsonContent":"{\"showCoverPage\":false,\"bookCover\":{\"coverDescription\":\"<p style=\\\"text-align: center;\\\"><\\\/p>\"},\"chapters\":[{\"params\":{\"content\":[{\"content\":{\"params\":{\"decorative\":false,\"contentName\":\"\\u0395\\u03b9\\u03ba\\u03cc\\u03bd\\u03b1\",\"expandImage\":\"Expand Image\",\"minimizeImage\":\"Minimize Image\",\"file\":{\"path\":\"images\\\/file-6967d9b9c8db8.jpg\",\"mime\":\"image\\\/jpeg\",\"copyright\":{\"license\":\"U\"},\"width\":1280,\"height\":720}},\"library\":\"H5P.Image 1.1\",\"metadata\":{\"contentType\":\"Image\",\"license\":\"U\",\"title\":\"Untitled Image\"},\"subContentId\":\"baaa6e08-6f3c-4e96-a159-4cc10efec180\"},\"useSeparator\":\"auto\"}]},\"library\":\"H5P.Column 1.18\",\"metadata\":{\"contentType\":\"Page\",\"license\":\"U\",\"title\":\"\\u03a0\\u03bf\\u03b9\\u03cc\\u03c4\\u03b7\\u03c4\\u03b1 \\u03b5\\u03bd\\u03b5\\u03c1\\u03b3\\u03b5\\u03af\\u03b1\\u03c2 \\u03c3\\u03c4\\u03b7\\u03bd \\u03a0\\u03b1\\u03b8\\u03b7\\u03c4\\u03b9\\u03ba\\u03ae \\u03a6\\u03c9\\u03bd\\u03ae\"},\"subContentId\":\"b63116dd-e5d1-43e7-bd9c-a8b9fb72234c\"},{\"params\":{\"content\":[{\"content\":{\"params\":{\"imageHotspotQuestion\":{\"hotspotSettings\":{\"hotspot\":[{\"userSettings\":{\"correct\":true,\"feedbackText\":\"\\u039c\\u03c0\\u03c1\\u03ac\\u03b2\\u03bf!\"},\"computedSettings\":{\"x\":45.4086811823994,\"y\":74.74690697298946,\"width\":21.86343760511268,\"height\":11.959505115678313,\"figure\":\"rectangle\"}}],\"showFeedbackAsPopup\":true,\"l10n\":{\"retryText\":\"\\u0395\\u03c0\\u03b1\\u03bd\\u03ac\\u03bb\\u03b7\\u03c8\\u03b7\",\"closeText\":\"\\u039a\\u03bb\\u03b5\\u03af\\u03c3\\u03b9\\u03bc\\u03bf\"},\"taskDescription\":\"\\u0392\\u03c1\\u03b5\\u03c2 \\u03c4\\u03bf \\u03c1\\u03ae\\u03bc\\u03b1 \\u03bc\\u03b5 \\u03c3\\u03c5\\u03bd\\u03bf\\u03c0\\u03c4\\u03b9\\u03ba\\u03cc \\u03c0\\u03bf\\u03b9\\u03cc\\u03bd \\u03b5\\u03bd\\u03b5\\u03c1\\u03b3\\u03b5\\u03af\\u03b1\\u03c2\",\"noneSelectedFeedback\":\"\\u0394\\u03bf\\u03ba\\u03af\\u03bc\\u03b1\\u03c3\\u03b5 \\u03be\\u03b1\\u03bd\\u03ac...\"},\"backgroundImageSettings\":{\"path\":\"images\\\/backgroundImage-6967d9e0f3ff7.jpg\",\"mime\":\"image\\\/jpeg\",\"copyright\":{\"license\":\"U\"},\"width\":1280,\"height\":720}},\"scoreBarLabel\":\"\\u0388\\u03c7\\u03b5\\u03b9\\u03c2 :num \\u03b1\\u03c0\\u03cc :total \\u03b2\\u03b1\\u03b8\\u03bc\\u03bf\\u03cd\\u03c2\",\"a11yRetry\":\"\\u0395\\u03c0\\u03b1\\u03bd\\u03b1\\u03bb\\u03ac\\u03b2\\u03b5\\u03c4\\u03b5 \\u03c4\\u03b7\\u03bd \\u03b5\\u03c1\\u03b3\\u03b1\\u03c3\\u03af\\u03b1. \\u0395\\u03c0\\u03b1\\u03bd\\u03b1\\u03c6\\u03ad\\u03c1\\u03b5\\u03c4\\u03b5 \\u03cc\\u03bb\\u03b5\\u03c2 \\u03c4\\u03b9\\u03c2 \\u03b1\\u03c0\\u03b1\\u03bd\\u03c4\\u03ae\\u03c3\\u03b5\\u03b9\\u03c2 \\u03ba\\u03b1\\u03b9 \\u03be\\u03b5\\u03ba\\u03b9\\u03bd\\u03ae\\u03c3\\u03c4\\u03b5 \\u03c4\\u03b7\\u03bd \\u03b5\\u03c1\\u03b3\\u03b1\\u03c3\\u03af\\u03b1 \\u03b1\\u03c0\\u03cc \\u03c4\\u03b7\\u03bd \\u03b1\\u03c1\\u03c7\\u03ae.\"},\"library\":\"H5P.ImageHotspotQuestion 1.8\",\"metadata\":{\"contentType\":\"Find the Hotspot\",\"license\":\"U\",\"title\":\"\\u0392\\u03c1\\u03b5\\u03c2 \\u03c4\\u03bf \\u03c1\\u03ae\\u03bc\\u03b1 \\u03bc\\u03b5 \\u03c3\\u03c5\\u03bd\\u03bf\\u03c0\\u03c4\\u03b9\\u03ba\\u03cc \\u03c0\\u03bf\\u03b9\\u03cc\\u03bd \\u03b5\\u03bd\\u03b5\\u03c1\\u03b3\\u03b5\\u03af\\u03b1\\u03c2:\"},\"subContentId\":\"8c8fcc2d-8a62-4879-b6d6-4601ab0a7d70\"},\"useSeparator\":\"auto\"}]},\"library\":\"H5P.Column 1.18\",\"subContentId\":\"d11be5ff-2a96-4e15-929a-b3ff39e5ca4e\",\"metadata\":{\"contentType\":\"Page\",\"license\":\"U\",\"title\":\"\\u0395\\u03be\\u03ac\\u03c3\\u03ba\\u03b7\\u03c3\\u03b7!\"}}],\"behaviour\":{\"baseColor\":\"#1768c4\",\"defaultTableOfContents\":true,\"progressIndicators\":true,\"progressAuto\":true,\"displaySummary\":true,\"enableRetry\":true},\"read\":\"\\u0391\\u03bd\\u03ac\\u03b3\\u03bd\\u03c9\\u03c3\\u03b7\",\"displayTOC\":\"\\u03a0\\u03c1\\u03bf\\u03b2\\u03bf\\u03bb\\u03ae &#039;\\u03a0\\u03af\\u03bd\\u03b1\\u03ba\\u03b1 \\u03a0\\u03b5\\u03c1\\u03b9\\u03b5\\u03c7\\u03bf\\u03bc\\u03ad\\u03bd\\u03c9\\u03bd&#039;\",\"hideTOC\":\"\\u0391\\u03c0\\u03cc\\u03ba\\u03c1\\u03c5\\u03c8\\u03b7 &#039;\\u03a0\\u03af\\u03bd\\u03b1\\u03ba\\u03b1 \\u03a0\\u03b5\\u03c1\\u03b9\\u03b5\\u03c7\\u03bf\\u03bc\\u03ad\\u03bd\\u03c9\\u03bd&#039;\",\"nextPage\":\"\\u0395\\u03c0\\u03cc\\u03bc\\u03b5\\u03bd\\u03b7 \\u03c3\\u03b5\\u03bb\\u03af\\u03b4\\u03b1\",\"previousPage\":\"\\u03a0\\u03c1\\u03bf\\u03b7\\u03b3\\u03bf\\u03cd\\u03bc\\u03b5\\u03bd\\u03b7 \\u03c3\\u03b5\\u03bb\\u03af\\u03b4\\u03b1\",\"chapterCompleted\":\"\\u039f\\u03bb\\u03bf\\u03ba\\u03bb\\u03b7\\u03c1\\u03c9\\u03bc\\u03ad\\u03bd\\u03b7 \\u03c3\\u03b5\\u03bb\\u03af\\u03b4\\u03b1!\",\"partCompleted\":\"@pages \\u03b1\\u03c0\\u03cc @total \\u03ad\\u03c7\\u03bf\\u03c5\\u03bd \\u03bf\\u03bb\\u03bf\\u03ba\\u03bb\\u03b7\\u03c1\\u03c9\\u03b8\\u03b5\\u03af\",\"incompleteChapter\":\"\\u039c\\u03b7 \\u03bf\\u03bb\\u03bf\\u03ba\\u03bb\\u03b7\\u03c1\\u03c9\\u03bc\\u03ad\\u03bd\\u03b7 \\u03c3\\u03b5\\u03bb\\u03af\\u03b4\\u03b1\",\"navigateToTop\":\"\\u039c\\u03b5\\u03c4\\u03ac\\u03b2\\u03b1\\u03c3\\u03b7 \\u03c3\\u03c4\\u03b7\\u03bd \\u03ba\\u03bf\\u03c1\\u03c5\\u03c6\\u03ae\",\"markAsFinished\":\"\\u0388\\u03c7\\u03c9 \\u03bf\\u03bb\\u03bf\\u03ba\\u03bb\\u03b7\\u03c1\\u03ce\\u03c3\\u03b5\\u03b9 \\u03b1\\u03c5\\u03c4\\u03ae\\u03bd \\u03c4\\u03b7 \\u03c3\\u03b5\\u03bb\\u03af\\u03b4\\u03b1\",\"fullscreen\":\"\\u03a0\\u03bb\\u03ae\\u03c1\\u03b7\\u03c2 \\u03bf\\u03b8\\u03cc\\u03bd\\u03b7\",\"exitFullscreen\":\"\\u0388\\u03be\\u03bf\\u03b4\\u03bf\\u03c2 \\u03b1\\u03c0\\u03cc \\u03c0\\u03c1\\u03cc\\u03b2\\u03bf\\u03bb\\u03ae \\u03c0\\u03bb\\u03ae\\u03c1\\u03bf\\u03c5\\u03c2 \\u03bf\\u03b8\\u03cc\\u03bd\\u03b7\\u03c2\",\"bookProgressSubtext\":\"@count \\u03b1\\u03c0\\u03cc @total \\u03c3\\u03b5\\u03bb\\u03af\\u03b4\\u03b5\\u03c2\",\"interactionsProgressSubtext\":\"@count \\u03b1\\u03c0\\u03cc @total \\u03b4\\u03c1\\u03b1\\u03c3\\u03c4\\u03b7\\u03c1\\u03b9\\u03bf\\u03c4\\u03ae\\u03c4\\u03c9\\u03bd\",\"submitReport\":\"\\u03a5\\u03c0\\u03bf\\u03b2\\u03bf\\u03bb\\u03ae \\u0391\\u03bd\\u03b1\\u03c6\\u03bf\\u03c1\\u03ac\\u03c2\",\"restartLabel\":\"\\u0395\\u03c0\\u03b1\\u03bd\\u03b5\\u03ba\\u03ba\\u03af\\u03bd\\u03b7\\u03c3\\u03b7\",\"summaryHeader\":\"\\u03a0\\u03b5\\u03c1\\u03af\\u03bb\\u03b7\\u03c8\\u03b7\",\"allInteractions\":\"\\u038c\\u03bb\\u03b5\\u03c2 \\u03bf\\u03b9 \\u03b4\\u03b9\\u03b1\\u03b4\\u03c1\\u03ac\\u03c3\\u03b5\\u03b9\\u03c2\",\"unansweredInteractions\":\"\\u0394\\u03b9\\u03b1\\u03b4\\u03c1\\u03ac\\u03c3\\u03b5\\u03b9\\u03c2 \\u03c0\\u03bf\\u03c5 \\u03b4\\u03b5\\u03bd \\u03b1\\u03c0\\u03b1\\u03bd\\u03c4\\u03ae\\u03b8\\u03b7\\u03ba\\u03b1\\u03bd\",\"scoreText\":\"@score \\\/ @maxscore\",\"leftOutOfTotalCompleted\":\"@left \\u03b1\\u03c0\\u03cc @max \\u03b4\\u03b9\\u03b1\\u03b4\\u03c1\\u03ac\\u03c3\\u03b5\\u03b9\\u03c2 \\u03ad\\u03c7\\u03bf\\u03c5\\u03bd \\u03bf\\u03bb\\u03bf\\u03ba\\u03bb\\u03b7\\u03c1\\u03c9\\u03b8\\u03b5\\u03af\",\"noInteractions\":\"\\u0394\\u03b5\\u03bd \\u03c5\\u03c0\\u03ac\\u03c1\\u03c7\\u03bf\\u03c5\\u03bd \\u03b4\\u03b9\\u03b1\\u03b4\\u03c1\\u03ac\\u03c3\\u03b5\\u03b9\\u03c2\",\"score\":\"\\u0392\\u03b1\\u03b8\\u03bc\\u03bf\\u03bb\\u03bf\\u03b3\\u03af\\u03b1\",\"summaryAndSubmit\":\"\\u03a0\\u03b5\\u03c1\\u03af\\u03bb\\u03b7\\u03c8\\u03b7 &amp; \\u03c5\\u03c0\\u03bf\\u03b2\\u03bf\\u03bb\\u03ae\",\"noChapterInteractionBoldText\":\"\\u0394\\u03b5\\u03bd \\u03ad\\u03c7\\u03b5\\u03c4\\u03b5 \\u03bf\\u03bb\\u03bf\\u03ba\\u03bb\\u03b7\\u03c1\\u03ce\\u03c3\\u03b5\\u03b9 \\u03ba\\u03b1\\u03bc\\u03af\\u03b1 \\u03b4\\u03b9\\u03ac\\u03b4\\u03c1\\u03b1\\u03c3\\u03b7 \\u03c3\\u03b5 \\u03ba\\u03b1\\u03bc\\u03af\\u03b1 \\u03b1\\u03c0\\u03cc \\u03c4\\u03b9\\u03c2 \\u03c3\\u03b5\\u03bb\\u03af\\u03b4\\u03b5\\u03c2.\",\"noChapterInteractionText\":\"\\u03a0\\u03c1\\u03ad\\u03c0\\u03b5\\u03b9 \\u03bd\\u03b1 \\u03ad\\u03c7\\u03b5\\u03c4\\u03b5 \\u03bf\\u03bb\\u03bf\\u03ba\\u03bb\\u03b7\\u03c1\\u03ce\\u03c3\\u03b5\\u03b9 \\u03c4\\u03bf\\u03c5\\u03bb\\u03ac\\u03c7\\u03b9\\u03c3\\u03c4\\u03bf\\u03bd \\u03bc\\u03b9\\u03b1 \\u03b4\\u03b9\\u03ac\\u03b4\\u03c1\\u03b1\\u03c3\\u03b7 \\u03c3\\u03b5 \\u03c4\\u03bf\\u03c5\\u03bb\\u03ac\\u03c7\\u03b9\\u03c3\\u03c4\\u03bf\\u03bd \\u03bc\\u03b9\\u03b1 \\u03c3\\u03b5\\u03bb\\u03af\\u03b4\\u03b1 \\u03b3\\u03b9\\u03b1 \\u03bd\\u03b1 \\u03bc\\u03c0\\u03bf\\u03c1\\u03ad\\u03c3\\u03b5\\u03c4\\u03b5 \\u03bd\\u03b1 \\u03c0\\u03c1\\u03bf\\u03b2\\u03ac\\u03bb\\u03b5\\u03c4\\u03b5 \\u03c4\\u03b7\\u03bd \\u03c0\\u03b5\\u03c1\\u03af\\u03bb\\u03b7\\u03c8\\u03b7.\",\"yourAnswersAreSubmittedForReview\":\"\\u039f\\u03b9 \\u03b1\\u03c0\\u03b1\\u03bd\\u03c4\\u03ae\\u03c3\\u03b5\\u03b9\\u03c2 \\u03c3\\u03b1\\u03c2 \\u03ad\\u03c7\\u03bf\\u03c5\\u03bd \\u03c5\\u03c0\\u03bf\\u03b2\\u03bb\\u03b7\\u03b8\\u03b5\\u03af \\u03b3\\u03b9\\u03b1 \\u03ad\\u03bb\\u03b5\\u03b3\\u03c7\\u03bf!\",\"bookProgress\":\"\\u03a0\\u03c1\\u03cc\\u03bf\\u03b4\\u03bf\\u03c2 \\u03c3\\u03c4\\u03bf \\u03b2\\u03b9\\u03b2\\u03bb\\u03af\\u03bf\",\"interactionsProgress\":\"\\u03a0\\u03c1\\u03cc\\u03bf\\u03b4\\u03bf\\u03c2 \\u03b4\\u03b9\\u03b1\\u03b4\\u03c1\\u03ac\\u03c3\\u03b5\\u03c9\\u03bd\",\"totalScoreLabel\":\"\\u03a3\\u03c5\\u03bd\\u03bf\\u03bb\\u03b9\\u03ba\\u03ae \\u03b2\\u03b1\\u03b8\\u03bc\\u03bf\\u03bb\\u03bf\\u03b3\\u03af\\u03b1\",\"a11y\":{\"progress\":\"\\u03a3\\u03b5\\u03bb\\u03af\\u03b4\\u03b1 @page \\u03b1\\u03c0\\u03cc @total.\",\"menu\":\"\\u0395\\u03bd\\u03b1\\u03bb\\u03bb\\u03b1\\u03b3\\u03ae \\u03bc\\u03b5\\u03bd\\u03bf\\u03cd \\u03c0\\u03bb\\u03bf\\u03ae\\u03b3\\u03b7\\u03c3\\u03b7\\u03c2\"}}"}}});