0

Нужно, чтобы при нажатии на кнопку 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">
Если у вас есть вариант решения данной проблемы (что проверка теста работает не корректно), пишите его в ответе, без использования сторонних библиотек, желательно исправив мой код!

2 ответа 2

4

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 - красило в красный.

2
  • спасибо за ответ, к сожалению осмыслить его пока нет времени, но как вернусь с работы, обязательно прочитаю! Спасибо
    – Muranx
    12 июн 2019 в 20:16
  • всё просто, и понятно, и работает, благодарю, проблема в том, что ваш код мне абсолютно понятен, но вот сам я почему-то не могу прийти к этому, видимо в виду недостатка времени. . . ещё раз спасибо, ты меня выручил очень!
    – Muranx
    13 июн 2019 в 10:16
0

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

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>

1
  • спасибо за ответ, к сожалению осмыслить его пока нет времени, но как вернусь с работы, обязательно прочитаю! Спасибо
    – Muranx
    12 июн 2019 в 20:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.