创建一条消息，该消息根据分数在测验末尾弹出

Question

我希望有人可以帮助我，但是我刚刚开始学习javascript，并且我一直在为我正在帮助创建的学习网站的页面进行测验。我被要求添加一条消息，该消息会在测验结束时弹出，但我似乎无法正常工作。请原谅任何可怕的明显错误，就像我说过我只研究了几天。

我在html消息中有一个div，我希望该消息出现。

这是我到目前为止的js。任何提示将不胜感激。

(function($) {
  $.fn.emc = function(options) {

    var defaults = {
      key: [],
      scoring: "normal",
      progress: true
    },
    settings = $.extend(defaults,options),
    $quizItems = $('[data-quiz-item]'),
    $choices = $('[data-choices]'),
    itemCount = $quizItems.length,
    chosen = [],
    $option = null,
    $label = null;

   emcInit();

   if (settings.progress) {
      var $bar = $('#emc-progress'),
          $inner = $('<div id="emc-progress_inner"></div>'),
          $perc = $('<span id="emc-progress_ind">0/'+itemCount+'</span>');
      $bar.append($inner).prepend($perc);
    }

    function emcInit() {
      $quizItems.each( function(index,value) {
      var $this = $(this),
          $choiceEl = $this.find('.choices'),
          choices = $choiceEl.data('choices');
        for (var i = 0; i < choices.length; i++) {
          $option = $('<input name="'+index+'" id="'+index+'_'+i+'" type="radio">');
          $label = $('<label for="'+index+'_'+i+'">'+choices[i]+'</label>');
          $choiceEl.append($option).append($label);

          $option.on( 'change', function() {
            return getChosen();
          });
        }
      });
    }

    function getChosen() {
      chosen = [];
      $choices.each( function() {
        var $inputs = $(this).find('input[type="radio"]');
        $inputs.each( function(index,value) {
          if($(this).is(':checked')) {
            chosen.push(index + 1);
          }
        });
      });
      getProgress();
    }

    function getProgress() {
      var prog = (chosen.length / itemCount) * 100 + "%",
          $submit = $('#emc-submit');
      if (settings.progress) {
        $perc.text(chosen.length+'/'+itemCount);
        $inner.css({height: prog});
      }
      if (chosen.length === itemCount) {
        $submit.addClass('ready-show');
        $submit.click( function(){
          return scoreNormal();
        });
      }
    }

    function scoreNormal() {
      var wrong = [],
          score = null,
          $scoreEl = $('#emc-score');
      for (var i = 0; i < itemCount; i++) {
        if (chosen[i] != settings.key[i]) {
          wrong.push(i);
        }
      }
      $quizItems.each( function(index) {
        var $this = $(this);
        if ($.inArray(index, wrong) !== -1 ) {
            $this.removeClass('item-correct').addClass('item-incorrect');
        } else {
          $this.removeClass('item-incorrect').addClass('item-correct');
        }
      });

      score = ((itemCount - wrong.length) / itemCount).toFixed(2) * 100 + "%";
      $scoreEl.text("You scored a "+score).addClass('new-score');

}
      function print(message) {
  document.write(message);
}
if (score===100){
    print('congratulations');
  }else if(score<=99){
  print('Try Again');
  }



  }


}(jQuery));



$(document).emc({
  key: ["1","2","1","1","1","1"]
});

Answer 1

弹出消息

  

  

• form controls tags

  

• template literal interpolation

  

• nested ternaries

  

• Event Delegation

  

• CSS transform and transition driven by .class

  

---

演示

在<input>中输入数字。要关闭弹出消息，请单击右上角的X。

$('#quiz').on('change', function(e) {
  
  var score = parseInt($('#score').val(), 10);
  
  var msg = `Your score is ${score}<sup>&times;</sup><br>`;
  
  var remark = (score === 100) ? `Perfect, great job!`: (score < 100 && score >= 90) ? `Well done`: (score < 90 && score >= 80) ? `Not bad`: (score < 80 && score >= 70) ? `You can do better`:(score < 70 && score >= 60) ? `That's bad`: `Did you even try?`;    
  
  $('#msg legend').html(`${msg}${remark}`).addClass('newScore');
  
  $('#msg legend').on('click', 'sup', function(e) {
  
    $(this).parent().removeClass('newScore');
    
  });

});

#msg legend {
  position: absolute;
  z-index: 1;
  transform: scale(0);
  transition: 0.6s;
}

#msg legend.newScore {
  font-size:5vw;
  text-align:center;
  transform-origin: left bottom;
  transform: scale(2) translate(0,70%);
  transition: 0.8s;
}

#msg legend.newScore sup {
  cursor:pointer
}

<form id='quiz'>
  <fieldset id='msg'>
    <legend></legend>
    <input id='score' type='number' min='0' max='100'> Enter a Number Between 0 and 100
  </fieldset>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>