Почему не работает тест?

120

05 мая 2021, 19:10

При нажатии на кнопку "Ответ" в данном тесте: 1) проверяется соответствие radio.checked.valueпозиции в массиве правильных ответов tam (true answer massive), для обозначения индекса в этом массиве использовал переменную ifm(index for massive), при ответе на первый вопрос, всё работает корректно, когда отвечаешь на второй вопрос, сравнение почему-то не происходит, как исправить?

var q1 = document.getElementById("question0"); 
var q2 = document.getElementById("question1"); 
var q3 = document.getElementById("question2"); 
var ab = document.getElementById("answerButton"); 
var index = 0; // переменная для индексирования вопросов (чтобы знать какой сейчас вопрос) 
var ifm = 0; // переменная для индексирования позиции в массиве правельных ответов 
var tam = [3, 1, 2]; // массив с позициями правильных ответов 
 
window.onload=function(){ 
  q1.style.display="block" 
  q2.style.display="none" 
  q3.style.display="none" 
}; 
 
ab.onclick=function(){ 
  index++ 
  document.getElementById("question"+(index-1)).style.display="none" 
  document.getElementById("question"+index).style.display="block" 
 
            for(var k=0; k<document.getElementsByClassName("init-group-radio").length; k++){ 
                if(document.getElementsByClassName("init-group-radio")[k].checked===true){ 
                    if(document.getElementsByClassName("init-group-radio")[k].value==tam[ifm]){  
                    // document.getElementsByClassName("init-group-radio")[k].value==tam[ifm] проверяю, что value чекнутого ответа совпадало с позицией в массиве правильных ответов 
                      alert("Wright"+"--->"+ifm) 
                      ifm++ // т.к. после нажатия на кнопку "Ответ" вопрос уже другой, (т.е. следующий по порядку) то переменная указывающая индекс позиции в массиве правильных ответов инкрементируется 
                    }else{ 
                      alert("Wrong"+"--->"+ifm) 
                      ifm++ 
                    } 
                } 
            } 
};

*{ 
  color: #fff; 
  margin: 0; 
  padding: 0; 
} 
 
li{ 
  list-style: none; 
} 
 
body{ 
  background: black; 
} 
 
.question-panel{ 
  width: 800px; 
  height: 500px; 
  box-shadow: 0px 0px 10px 3px #fff; 
  margin: 10px; 
} 
 
#initGroup{ 
  margin-top: 10px; 
} 
 
/*BUTTON*/ 
#answerButton{ 
  width: 70px; 
  height: 40px; 
  background-color: #9a9dd5 ; 
  text-align: center; 
  line-height: 40px; 
  margin-left: 30px; 
} 
/*BUTTON*/ 
 
#listGroupItem{ 
  display: inline-block; 
} 
 
/*span*/ 
#initGroupSpan{ 
  margin-right: 20px; 
} 
/*span*/ 
 
.questions{ 
  padding: 20px; 
  margin: 10px; 
}

<!-- MAIN PANEL --> 
<div class="question-panel"> 
 
        <div id="question0" class="questions"> 
 
          <div id="question"> 
            1) Назовите любой цвет 
          </div> 
 
          <div id="answer"> 
            <div id="initGroup"> 
              <span id="initGroupSpan"><input class="init-group-radio" value="1" name="0" type="radio"></span> 
              <li id="listGroupItem">Зелёный</li> 
            </div> 
            <div id="initGroup"> 
              <span id="initGroupSpan"><input class="init-group-radio" value="2" name="0" type="radio"></span> 
              <li id="listGroupItem">Красный</li> 
            </div> 
            <div id="initGroup"> 
              <span id="initGroupSpan"><input class="init-group-radio" value="3" name="0" type="radio"></span> 
              <li id="listGroupItem">Жёлтый</li> 
            </div> 
            <div id="initGroup"> 
              <span id="initGroupSpan"><input class="init-group-radio" value="4" name="0" type="radio"></span> 
              <li id="listGroupItem">Белый</li> 
            </div> 
          </div> 
 
 
        </div> 
 
        <div id="question1" class="questions"> 
          <div id="question"> 
            2) Назовите любую цифру 
          </div> 
          <div id="answer"> 
            <div id="initGroup"> 
              <span id="initGroupSpan"><input class="initGroupRadio" value="1" name="1" type="radio"></span> 
              <li id="listGroupItem">15</li> 
            </div> 
            <div id="initGroup"> 
              <span id="initGroupSpan"><input class="initGroupRadio" value="2" name="1" type="radio"></span> 
              <li id="listGroupItem">34</li> 
            </div> 
            <div id="initGroup"> 
              <span id="initGroupSpan"><input class="initGroupRadio" value="3" name="1" type="radio"></span> 
              <li id="listGroupItem">46</li> 
            </div> 
            <div id="initGroup"> 
              <span id="initGroupSpan"><input class="initGroupRadio" value="4" name="1" type="radio"></span> 
              <li id="listGroupItem">9</li> 
            </div> 
          </div> 
        </div> 
 
        <div id="question2" class="questions"> 
          <div id="question"> 
            3) Назовите любое животное 
          </div> 
          <div id="answer"> 
            <div id="initGroup"> 
              <span id="initGroupSpan"><input class="initGroupRadio" value="1" name="2" type="radio"></span> 
              <li id="listGroupItem">Тигр</li> 
            </div> 
            <div id="initGroup"> 
              <span id="initGroupSpan"><input class="initGroupRadio" value="2" name="2" type="radio"></span> 
              <li id="listGroupItem">Крокодил</li> 
            </div> 
            <div id="initGroup"> 
              <span id="initGroupSpan"><input class="initGroupRadio" value="3" name="2" type="radio"></span> 
              <li id="listGroupItem">Лев</li> 
            </div> 
            <div id="initGroup"> 
              <span id="initGroupSpan"><input class="initGroupRadio" value="4" name="2" type="radio"></span> 
              <li id="listGroupItem">Моя бывшая</li> 
            </div> 
          </div> 
        </div> 
 
        <div id="answerButton">Ответ</div> 
 
</div> 
 
<!-- MAIN PANEL -->

Answer 1

Везде заменил id на классы, переписал скрипт для классов. Изначально невидимость вопросов можно записать в CSS, это будет работать быстрее, чем onload. Всем классам "questions" добавил невидимость, + сверху класс .visi {display: block;} первому вопросу.

var q = document.querySelectorAll(".questions"); // Получаем все блоки вопросов по классу. 
var ab = document.getElementById("answerButton"); 
var index = 0; // не понял, для чего там ifm, оставил только индекс. 
 
var tam = [3, 1, 2];  
// Правильные ответы (не забыть, что счет начинается с нуля. Т.е. 3 = 4-й вариант) 
 
ab.onclick = function() { 
  // При клике - сразу собираем все радио внутри текущего вопроса q[index] 
  var init = q[index].querySelectorAll('.init-group-radio');  
   
  // tam[index] будет являться номером (индексом) правильного ответа 
  // Проверка, если у радио под именно этим номером, есть checked - выбран правильный. 
  if (init[tam[index]].checked) { 
    alert("Right"); 
  } else { 
    alert("Wrong"); 
  } 
 
  q[index].classList.remove('visi'); // скрываем вопрос 
  index++; // увеличиваем индекс 
  if (q[index]) { // Если есть еще следующий вопрос 
    q[index].classList.add('visi'); // показываем его 
  } else { 
    this.style.display = 'none'; // иначе - скрываем кнопку "ответить" 
  } 
}

* { 
  color: #fff; 
  margin: 0; 
  padding: 0; 
} 
 
li { 
  list-style: none; 
} 
 
body { 
  background: black; 
} 
 
.question-panel { 
  width: 800px; 
  height: 500px; 
  box-shadow: 0px 0px 10px 3px #fff; 
  margin: 10px; 
} 
 
.initGroup { 
  margin-top: 10px; 
} 
 
/*BUTTON*/ 
#answerButton { 
  width: 70px; 
  height: 40px; 
  background-color: #9a9dd5; 
  text-align: center; 
  line-height: 40px; 
  margin-left: 30px; 
} 
 
/*BUTTON*/ 
 
.listGroupItem { 
  display: inline-block; 
} 
 
/*span*/ 
.initGroupSpan { 
  margin-right: 20px; 
} 
 
/* span */ 
 
.questions { 
  display: none; 
  padding: 20px; 
  margin: 10px; 
} 
 
.visi { 
  display: block; 
}

<div class="question-panel"> 
 
  <div class="questions visi"> 
    <div class="question"> 
      1) Назовите любой цвет 
    </div> 
 
    <div class="answer"> 
      <div class="initGroup"> 
        <span class="initGroupSpan"><input class="init-group-radio" value="1" name="0" type="radio"></span> 
        <li class="listGroupItem">Зелёный</li> 
      </div> 
      <div class="initGroup"> 
        <span class="initGroupSpan"><input class="init-group-radio" value="2" name="0" type="radio"></span> 
        <li class="listGroupItem">Красный</li> 
      </div> 
      <div class="initGroup"> 
        <span class="initGroupSpan"><input class="init-group-radio" value="3" name="0" type="radio"></span> 
        <li class="listGroupItem">Жёлтый</li> 
      </div> 
      <div class="initGroup"> 
        <span class="initGroupSpan"><input class="init-group-radio" value="4" name="0" type="radio"></span> 
        <li class="listGroupItem">Белый</li> 
      </div> 
    </div> 
  </div> 
 
  <div class="questions"> 
    <div class="question"> 
      2) Назовите любую цифру 
    </div> 
    <div class="answer"> 
      <div class="initGroup"> 
        <span class="initGroupSpan"><input class="init-group-radio" value="1" name="1" type="radio"></span> 
        <li class="listGroupItem">15</li> 
      </div> 
      <div class="initGroup"> 
        <span class="initGroupSpan"><input class="init-group-radio" value="2" name="1" type="radio"></span> 
        <li class="listGroupItem">34</li> 
      </div> 
      <div class="initGroup"> 
        <span class="initGroupSpan"><input class="init-group-radio" value="3" name="1" type="radio"></span> 
        <li class="listGroupItem">46</li> 
      </div> 
      <div class="initGroup"> 
        <span class="initGroupSpan"><input class="init-group-radio" value="4" name="1" type="radio"></span> 
        <li class="listGroupItem">9</li> 
      </div> 
    </div> 
  </div> 
 
  <div class="questions"> 
    <div class="question"> 
      3) Назовите любое животное 
    </div> 
    <div class="answer"> 
      <div class="initGroup"> 
        <span class="initGroupSpan"><input class="init-group-radio" value="1" name="2" type="radio"></span> 
        <li class="listGroupItem">Тигр</li> 
      </div> 
      <div class="initGroup"> 
        <span class="initGroupSpan"><input class="init-group-radio" value="2" name="2" type="radio"></span> 
        <li class="listGroupItem">Крокодил</li> 
      </div> 
      <div class="initGroup"> 
        <span class="initGroupSpan"><input class="init-group-radio" value="3" name="2" type="radio"></span> 
        <li class="listGroupItem">Лев</li> 
      </div> 
      <div class="initGroup"> 
        <span class="initGroupSpan"><input class="init-group-radio" value="4" name="2" type="radio"></span> 
        <li class="listGroupItem">Моя бывшая</li> 
      </div> 
    </div> 
  </div> 
 
  <div id="answerButton">Ответ</div> 
</div>

P.s. пользователи бесятся постоянно скрывать всплывающий alert. Хорошо бы выводить сообщение куда-нибудь в другом месте.

(можно еще считать правильные ответы в процессе... и в конце их показать.)