Muranx
@Muranx

Как правильно инкрементировать переменную в данном случае, чтобы тест работа?

Здравствуйте, создаю страничку тестирования, в рабочем поле единовременно может отображаться только один вопрос, ПРИ этом все вопросы есть в html - коде в виде div - блоков, со свойством display : none , короче говоря ,при нажатии на кнопку "Ответ" один блок исчезает , второй появляется! Проблема в переменной ifm(сокращение indexForMassive) эта переменная мною задумана, чтобы проверять правильность ответов, которые собственно хранятся в массиве tam (trueAnswerMassive), а именно, изначально, когда вопрос имеет индекс - 0, соответственно и переменная ifm тоже равняется 0, а когда я нажимаю на кнопку "Ответ" эта переменная инкрементируется, что собственно действительно работает, т.к. при ответе я для проверки вывел alert("Wright/wrong"+ifm), чтобы после нажатия на "Ответ" действительно убедиться, что ifm инкрементировалась. Проблема в том, что первый "Ответ" действительно проверяется, и работает корректно, но при ответе на второй и третий вопрос, переменная ifm инкрементируется, НО, сравнение правильного значения с соответствующим значением в массиве tam почему-то не происходит! Сама методика банальна до безобразия, я просто сравниваю radio.checked.value с эквивалентной позицией в массиве tam! Будьте добры, подскажите, в чем касяк, убедительно прошу на примере моего кода, и нужен ответ именно на мой поставленный вопрос, на примере моего кода, спасибо!
<!-- 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 -->

*{
  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;
}


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; // переменная , которая должна обозначать текущий индекс в массиве правильных ответов, для сравнения его с тем radio , который мы выделяем
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]){
                      alert("Wright"+"--->"+ifm)
                      ifm++
                    }else{
                      alert("Wrong"+"--->"+ifm)
                      ifm++
                    }
                }
            }
};
  • Вопрос задан
  • 46 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы