function JoubelScoreBar(maxScore, label) {
    var self = this;

    self.maxScore = maxScore;
    self.score = 0;

    /**
     * @method hasFullScore
     * @private
     * @return {Boolean} true if full score, else false
     */
    var hasFullScore = function () {
      return self.score === self.maxScore;
    };

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

    /**
     * Creates the html for this widget
     *
     * @method createHtml
     * @private
     */
    var createHtml = function () {
      // Container div
      self.$scoreBar = $('<div>', {
        'class': 'h5p-joubelui-score-bar',
        'role': 'progressbar',
        'aria-valuenow': 0,
        'aria-valuemin': 0,
        'aria-valuemax': self.maxScore
      });
      if (label) {
        self.$scoreBar.attr('aria-label', label + '.');
      }

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

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

      // The star
      self.$endWrapper = $('<div>', {
        'class': 'h5p-joubelui-score-bar-end'
      }).appendTo(self.$scoreBar);

      // The default star
      self.$defaultStar = $('<span>', {
        'class': 'h5p-joubelui-score-bar-default-star'
      }).appendTo(self.$endWrapper);

      // The full score star
      self.$fullScoreStar = $('<span>', {
        'class': 'h5p-joubelui-score-bar-full-score-star'
      }).appendTo(self.$endWrapper);
    };

    /**
     * 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 () {
      var fullscore = hasFullScore();
      self.$scoreBar.attr('aria-valuenow', self.score);

      setTimeout(function () {
        self.$progress.addClass('animate');
        self.$progress.css({
          width: (fullscore ? '102' : (self.maxScore - 1 !== 0 ? (self.score * 100 / (self.maxScore - 1)) : 0)) + '%'
        });
        H5P.Transition.sequence([
          {
            $element: self.$progress,
            timeout: 600,
            end: function () {
              self.$progress.removeClass('animate');
              self.$scoreBar.toggleClass('full-score', fullscore);
              if (fullscore) {
                self.$fullScoreStar.addClass('animate-background');
              }
            },
            break: !fullscore
          },
          {
            $element: self.$fullScoreStar,
            timeout: 400,
            end: function () {
              self.$fullScoreStar.addClass('animate-star show-star');
            }
          },
          {
            $element: self.$fullScoreStar,
            end: function () {
              self.$fullScoreStar.removeClass('animate-star');
              self.$fullScoreStar.addClass('animate-star-blink');
            }
          }
        ]);
      }, 300);
    };

    /**
     * Removes all classes
     * @method reset
     */
    self.reset = function () {
      self.$fullScoreStar.removeClass('animate-star animate-star-blink show-star animate-background');
      self.$scoreBar.removeClass('full-score');
    };

    createHtml();
  }
/**
   * Creates a score bar
   * @class H5P.JoubelScoreBar
   * @param {number=} maxScore  Maximum score
   * @param {string} [label] Makes it easier for readspeakers to identify the scorebar
   */
Creates a score bar
@class H5P.JoubelScoreBar
@param {number=} maxScore  Maximum score
@param {string} [label] Makes it easier for readspeakers to identify the scorebar
Creates a score bar @class H5P . JoubelScoreBar @param { number = } maxScore Maximum score @param { string } [ label ] Makes it easier for readspeakers to identify the scorebar
function JoubelScoreBar(maxScore, label) {
    var self = this;
    self.maxScore = maxScore;
    self.score = 0;
    var hasFullScore = function () {
      return self.score === self.maxScore;
    };
    self.appendTo = function ($wrapper) {
      self.$scoreBar.appendTo($wrapper);
    };
    var createHtml = function () {
      self.$scoreBar = $('<div>', {
        'class': 'h5p-joubelui-score-bar',
        'role': 'progressbar',
        'aria-valuenow': 0,
        'aria-valuemin': 0,
        'aria-valuemax': self.maxScore
      });
      if (label) {
        self.$scoreBar.attr('aria-label', label + '.');
      }
      self.$progressWrapper = $('<div>', {
        'class': 'h5p-joubelui-score-bar-progress-wrapper'
      }).appendTo(self.$scoreBar);
      self.$progress = $('<div>', {
        'class': 'h5p-joubelui-score-bar-progress'
      }).appendTo(self.$progressWrapper);
      self.$endWrapper = $('<div>', {
        'class': 'h5p-joubelui-score-bar-end'
      }).appendTo(self.$scoreBar);
      self.$defaultStar = $('<span>', {
        'class': 'h5p-joubelui-score-bar-default-star'
      }).appendTo(self.$endWrapper);
      self.$fullScoreStar = $('<span>', {
        'class': 'h5p-joubelui-score-bar-full-score-star'
      }).appendTo(self.$endWrapper);
    };
    self.setScore = function (score) {
      if (score === self.score) {
        return;
      }
      self.score = score > self.maxScore ? self.maxScore : score;
      self.updateVisuals();
    };
    self.incrementScore = function (incrementBy) {
      self.setScore(self.score + (incrementBy || 1));
    };
    self.setMaxScore = function (maxScore) {
      self.maxScore = maxScore;
    };
    self.updateVisuals = function () {
      var fullscore = hasFullScore();
      self.$scoreBar.attr('aria-valuenow', self.score);
      setTimeout(function () {
        self.$progress.addClass('animate');
        self.$progress.css({
          width: (fullscore ? '102' : (self.maxScore - 1 !== 0 ? (self.score * 100 / (self.maxScore - 1)) : 0)) + '%'
        });
        H5P.Transition.sequence([
          {
            $element: self.$progress,
            timeout: 600,
            end: function () {
              self.$progress.removeClass('animate');
              self.$scoreBar.toggleClass('full-score', fullscore);
              if (fullscore) {
                self.$fullScoreStar.addClass('animate-background');
              }
            },
            break: !fullscore
          },
          {
            $element: self.$fullScoreStar,
            timeout: 400,
            end: function () {
              self.$fullScoreStar.addClass('animate-star show-star');
            }
          },
          {
            $element: self.$fullScoreStar,
            end: function () {
              self.$fullScoreStar.removeClass('animate-star');
              self.$fullScoreStar.addClass('animate-star-blink');
            }
          }
        ]);
      }, 300);
    };
    self.reset = function () {
      self.$fullScoreStar.removeClass('animate-star animate-star-blink show-star animate-background');
      self.$scoreBar.removeClass('full-score');
    };
    createHtml();
  }
function JoubelScoreBar ( maxScore , label ) { var self = this ; self . maxScore = maxScore ; self . score = 0 ; var hasFullScore = function ( ) { return self . score === self . maxScore ; } ; self . appendTo = function ( $wrapper ) { self . $scoreBar . appendTo ( $wrapper ) ; } ; var createHtml = function ( ) { self . $scoreBar = $ ( '<div>' , { 'class' : 'h5p-joubelui-score-bar' , 'role' : 'progressbar' , 'aria-valuenow' : 0 , 'aria-valuemin' : 0 , 'aria-valuemax' : self . maxScore } ) ; if ( label ) { self . $scoreBar . attr ( 'aria-label' , label + '.' ) ; } self . $progressWrapper = $ ( '<div>' , { 'class' : 'h5p-joubelui-score-bar-progress-wrapper' } ) . appendTo ( self . $scoreBar ) ; self . $progress = $ ( '<div>' , { 'class' : 'h5p-joubelui-score-bar-progress' } ) . appendTo ( self . $progressWrapper ) ; self . $endWrapper = $ ( '<div>' , { 'class' : 'h5p-joubelui-score-bar-end' } ) . appendTo ( self . $scoreBar ) ; self . $defaultStar = $ ( '<span>' , { 'class' : 'h5p-joubelui-score-bar-default-star' } ) . appendTo ( self . $endWrapper ) ; self . $fullScoreStar = $ ( '<span>' , { 'class' : 'h5p-joubelui-score-bar-full-score-star' } ) . appendTo ( self . $endWrapper ) ; } ; self . setScore = function ( score ) { if ( score === self . score ) { return ; } self . score = score > self . maxScore ? self . maxScore : score ; self . updateVisuals ( ) ; } ; self . incrementScore = function ( incrementBy ) { self . setScore ( self . score + ( incrementBy || 1 ) ) ; } ; self . setMaxScore = function ( maxScore ) { self . maxScore = maxScore ; } ; self . updateVisuals = function ( ) { var fullscore = hasFullScore ( ) ; self . $scoreBar . attr ( 'aria-valuenow' , self . score ) ; setTimeout ( function ( ) { self . $progress . addClass ( 'animate' ) ; self . $progress . css ( { width : ( fullscore ? '102' : ( self . maxScore - 1 !== 0 ? ( self . score * 100 / ( self . maxScore - 1 ) ) : 0 ) ) + '%' } ) ; H5P . Transition . sequence ( [ { $element : self . $progress , timeout : 600 , end : function ( ) { self . $progress . removeClass ( 'animate' ) ; self . $scoreBar . toggleClass ( 'full-score' , fullscore ) ; if ( fullscore ) { self . $fullScoreStar . addClass ( 'animate-background' ) ; } } , break : ! fullscore } , { $element : self . $fullScoreStar , timeout : 400 , end : function ( ) { self . $fullScoreStar . addClass ( 'animate-star show-star' ) ; } } , { $element : self . $fullScoreStar , end : function ( ) { self . $fullScoreStar . removeClass ( 'animate-star' ) ; self . $fullScoreStar . addClass ( 'animate-star-blink' ) ; } } ] ) ; } , 300 ) ; } ; self . reset = function ( ) { self . $fullScoreStar . removeClass ( 'animate-star animate-star-blink show-star animate-background' ) ; self . $scoreBar . removeClass ( 'full-score' ) ; } ; createHtml ( ) ; }
Creates a score bar
 @class H5P.JoubelScoreBar
 @param {number=} maxScore  Maximum score
 @param {string} [label] Makes it easier for readspeakers to identify the scorebar
Creates a score bar @class H5P . JoubelScoreBar @param { number = } maxScore Maximum score @param { string } [ label ] Makes it easier for readspeakers to identify the scorebar
/**
     * @method hasFullScore
     * @private
     * @return {Boolean} true if full score, else false
     */ /**
     * @function appendTo
     * @memberOf H5P.JoubelScoreBar#
     * @param {H5P.jQuery}  $wrapper  Dom container
     */ /**
     * Creates the html for this widget
     *
     * @method createHtml
     * @private
     */ // Container div // The progress bar wrapper // The star // The default star // The full score star /**
     * Set the current score
     * @method setScore
     * @memberOf H5P.JoubelScoreBar#
     * @param  {number} score
     */ // Do nothing if score hasn't changed /**
     * Increment score
     * @method incrementScore
     * @memberOf H5P.JoubelScoreBar#
     * @param  {number=}        incrementBy Optional parameter, defaults to 1
     */ /**
     * Set the max score
     * @method setMaxScore
     * @memberOf H5P.JoubelScoreBar#
     * @param  {number}    maxScore The max score
     */ /**
     * Updates the progressbar visuals
     * @memberOf H5P.JoubelScoreBar#
     * @method updateVisuals
     */ /**
     * Removes all classes
     * @method reset
     */