Как сделать , чтобы тест на javascript работал?

113

09 февраля 2021, 10:40

Нужно, чтобы при нажатии на кнопку Answer проверялся тест, и поле вопроса окрашивалось в зелёный цвет (если правильно) в красный (если не правильно)!

var trueAnswers = [12, "голубое"]; //правильные ответы 
 
var qp = document.querySelectorAll(".questionPole"); //для получения колличества вопросов, соотвественно итерраций цикла 
 
var ab = document.getElementById("answerButton"); //кнопка 
 
var mass = document.querySelectorAll(".some"); // 
 
 
ab.onclick=function(){ 
  for(var i=0; i<qp.length; i++){ 
      for(var k=0; k<mass.length; k++){ 
        if(mass[k].checked && mass[k].value===trueAnswers[i]){ 
          mass[k].parentNode.style.backgroundColor="green" 
        }else{ 
          mass[k].parentNode.style.backgroundColor="red" 
        } 
      } 
  } 
}

<div id="questionBlock0" class="questionBlock"> 
  <p class="questionPole">Сколько тебе лет?</p> 
        <input class="some" type="radio" name="ast" value="12">12<br> 
        <input class="some" type="radio" name="ast" value="34">34<br><br> 
</div> 
 
<div id="questionBlock1" class="questionBlock"> 
  <p class="questionPole">Какого цвета небо?</p> 
        <input class="some" type="radio" name="ags" value="голубое">голубое<br> 
        <input class="some" type="radio" name="ags" value="жёлтое">жёлтое<br><br> 
</div> 
 
 
<input id="answerButton" type="button" value="Answer">

Если у вас есть вариант решения данной проблемы (что проверка теста работает не корректно), пишите его в ответе, без использования сторонних библиотек, желательно исправив мой код!

Answer 1

var trueAnswers = [12, "голубое"];  
 
var qp = document.querySelectorAll(".questionPole"); // Количество вопросов 
 
var ab = document.getElementById("answerButton");  
 
ab.onclick = function(){ 
  var check = document.querySelectorAll('.some:checked'); // Отмеченные радио 
  // Если количество отмеченных меньше количества вопросов - делаем что-то. 
  if( check.length < qp.length ){ alert('Вы не ответили на все вопросы!'); return; } 
  //В данном случае, функция прерывает выполнение из-за return; 
 
  // Кол-во вопросов и кол-во отмеченных - одинаковое, поэтому нужен только один цикл 
  for( let i = 0; i < qp.length; i++ ){ 
    if( check[i].value == trueAnswers[i] ){  
      /* Проверяем не на строгое ===, а просто на равенство ==,  
      потому что value получается в виде строки. А в массиве есть и число */ 
      qp[i].parentNode.style.backgroundColor = "green"; 
    } else { 
      qp[i].parentNode.style.backgroundColor = "red"; 
    } 
  } 
}

<div id="questionBlock0" class="questionBlock"> 
  <p class="questionPole">Сколько тебе лет?</p> 
  <input class="some" type="radio" name="ast" value="12">12<br> 
  <input class="some" type="radio" name="ast" value="34">34<br><br> 
</div> 
 
<div id="questionBlock1" class="questionBlock"> 
  <p class="questionPole">Какого цвета небо?</p> 
  <input class="some" type="radio" name="ags" value="голубое">голубое<br> 
  <input class="some" type="radio" name="ags" value="жёлтое">жёлтое<br><br> 
</div> 
 
 
<input id="answerButton" type="button" value="Answer">

P.s. смотрите в сторону тега <label> — если радио будут находится внутри него, пользователю приятнее будет переключать их) Чем пытаться попасть по маленькой кнопке.

P.s-2 вы запускали цикл среди всех радио, а потом проверяли на .checked и красили в зеленый... но на следующем круге оно всё равно находило следующее радио - проверяло, не checked - красило в красный.

Answer 2

Не идеально, но у меня получилось что то такое

var trueAnswers = { 
  ast: 12,  
  ags: "голубое" 
}; 
 
var elementsForm = document.forms['questions'].elements; // элементы формы 
var ab = document.getElementById("form"); //форма 
 
ab.onsubmit=function(e){ 
  e.preventDefault(); 
   
  Object.values(elementsForm).forEach(function(elem) { 
    if( elem.type !== 'submit' ) { // если не кнопка 
      var blockQuestion = elem.parentElement.parentElement; // блок с вопросом 
      if( !blockQuestion.classList.contains('question-checked') ) { // если он еще не проверен  
        var checkedElem = ab.querySelector('[name="' + elem.name + '"]:checked');  
        if( checkedElem.value == trueAnswers[elem.name] ) { // проверяем 
          blockQuestion.style.backgroundColor = '#3a3'; 
          blockQuestion.classList.add('question-checked'); 
        } else { 
          blockQuestion.style.backgroundColor = '#a33'; 
          blockQuestion.classList.add('question-checked'); 
        } 
      } 
    } 
  }) 
}

<form id="form" name="questions"> 
  <div id="questionBlock0" class="questionBlock"> 
    <p class="questionPole">Сколько тебе лет?</p> 
    <label><input class="some" type="radio" name="ast" value="12">12</label><br> 
    <label><input class="some" type="radio" name="ast" value="34">34</label><br><br> 
  </div> 
 
  <div id="questionBlock1" class="questionBlock"> 
    <p class="questionPole">Какого цвета небо?</p> 
    <label><input class="some" type="radio" name="ags" value="голубое">голубое</label><br> 
    <label><input class="some" type="radio" name="ags" value="жёлтое">жёлтое</label><br><br> 
  </div> 
 
 
  <button id="answerButton" type="submit" value="Answer">Проверить</button> 
</form>