Здравствуйте, создаю страничку тестирования, в рабочем поле единовременно может отображаться только один вопрос, ПРИ этом все вопросы есть в
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++
}
}
}
};
