Простой JS тест

by beliyadm

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="testform" action="#" method="post" id="testform" class="wrapper">
  Сползает по крыше старик Козлодоев,
  <br /> Пронырливый, как
  <input name="Name" type="text" data-id="0" class="answer inputbox" value="" title="коростель" placeholder="введите ответ: коростель" />.
  <hr /> Стремится в окошко залезть Козлодоев
  <br /> К какой-нибудь
  <input name="Name" type="text" data-id="1" class="answer inputbox" value="" title="бабе" placeholder="введите ответ: бабе" /> в постель.

  <input type="submit" class="btn" value="Проверить текст" />

  <div class="result">
    Ваш результат: <span class="result_text">пока ноль</span>
  </div>
</form>

CSS

.wrapper {
  padding: 20px 40px;
  font-family: 'Arial';
  font-size: 16px;
}

.wrapper .inputbox {
  display: inline-block;
  width: 200px;
  border: 1px solid #000;
  text-align: center;
  padding: 5px 10px;
}

.wrapper .inputbox.good {
  background: #b5ffa9;
}

.wrapper .inputbox.bad {
  background: #FC2626;
}

.wrapper .btn {
  display: block;
  margin: 30px 0;
  border: 0;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  text-transform: uppercase;
  cursor: pointer;
}

.wrapper .btn:hover {
  background: #FC2626;
}

.result {
  margin: 50px 0;
  font-weight: bold;
}

.result.good {
  color: #4ea140;
}

.result.bad {
  color: #FC2626;
}

JavaScript

/*
  	массив с правильными ответами, проверять будем по совпадению data-id с индексом элемента массива
  	потому в хтмл инпуты с классом .answer нумеруем в data-id с нуля и по возрастанию
  */
  var arrAnswer = ['коростель', 'бабе'];

  // сабмитим форму, проверяем всякое и отдаем результат
  $('#testform').on('submit', function(e) {

    var thisform = $(this);
    var questionCount = thisform.find('.answer').length; // количество инпутов\вопросов
    var countRight = 0; // количество правильных
    var resultText = ''; // текст о результатах
    var inputClass = ''; // класс инпута правильно\неправильно
    var percent = 0; // процент правильных (просто для красоты)
    var resultTextClass = ''; // класс для подсветки результирующего текста
    $('.result').removeClass('good bad');

    thisform.find('.answer').each(function() {
      $(this).removeClass('good bad'); // сбросим классы инпута

      var answerid = $(this).attr('data-id'); // ID инпута вопроса
      var answerval = $(this).val(); // значение инпута вопроса от пользователя

      var rightAnswer = arrAnswer[answerid]; // правильный ответ для данного инпута из массива

      if (answerval == rightAnswer) {
        countRight = ++countRight; // увеличим счетчик правильных на +1
        inputClass = 'good'; // установим класс
      } else {
        inputClass = 'bad';
      }
      $(this).addClass(inputClass);


    });

    percent = Math.floor((countRight / questionCount) * 100);
    if (percent > 50) {
      resultTextClass = 'good'; // установим класс
    } else {
      resultTextClass = 'bad'; // установим класс
    }


    resultText = 'правильно ' + percent + '% ' + countRight + ' вопроса из ' + questionCount + '';
    $('.result .result_text').text(resultText);
    $('.result').addClass(resultTextClass);

    return false;
  });