tracerzzz,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<style type="text/css">
.question, .hide, #control {
display: none;
}
input.ok + label:after{
content: '\2714';
color: green;
font-size: 23px;
}
input.no + label:after{
content: '\2715';
color: red;
font-size: 23px;
}
.show, #control.show {
display: block;
}
#start.show .question{
display: block;
}
</style>
</head>
<body>
<div>
<form method="get" enctype="text/plain" name="testForm">
<div id="start">
<p id="tmr"></p>
<p id="okQuestion"></p>
<div class="question">
<h4 class="quest">Вопрос 1</h4>
<input type="radio" name="q0" value="asd" /><label for=""> </label> 1
<br />
<input type="radio" name="q0" value="asd" /><label for=""> </label> 1
<br />
<input type="radio" name="q0" value="asd" /><label for=""> </label> 1 ♥
<br />
</div>
<div class="question">
<h4 class="quest">Вопрос 2</h4>
<input type="radio" name="q1" value="1" /><label for=""> </label> 2
<br />
<input type="radio" name="q1" value="2" /><label for=""> </label> 2 ♥
<br />
<input type="radio" name="q1" value="3" /><label for=""> </label> 2
<br />
</div>
<div class="question">
<h4 class="quest">Вопрос 3</h4>
<input type="radio" name="q2" value="1" /><label for=""> </label> 3 ♥
<br />
<input type="radio" name="q2" value="2" /><label for=""> </label> 3
<br />
<input type="radio" name="q2" value="3" /><label for=""> </label> 3
<br />
</div>
<div class="question">
<h4 class="quest">Вопрос 4</h4>
<input type="radio" name="q3" value="1" /><label for=""> </label> 4
<br />
<input type="radio" name="q3" value="2" /><label for=""> </label> 4 ♥
<br />
<input type="radio" name="q3" value="3" /><label for=""> </label> 4
<br />
</div>
<div class="question">
<h4 class="quest">Вопрос 5</h4>
<input type="checkbox" name="precipitation[]" value="1" /><label for=""> </label>5 ♥
<br />
<input type="checkbox" name="precipitation[]" value="2" /><label for=""> </label>5
<br />
<input type="checkbox" name="precipitation[]" value="3" /><label for=""> </label>5 ♥
<br />
</div>
<p>
<input type="button" name="btStart" value="Старт" id="next" />
</p>
</div>
<label id="control"><input type="checkbox" /> посмотреть список вопросов </label>
</form>
</div>
<script>
var divQuest = document.querySelectorAll(".question"),
indx = -1,
len = divQuest.length,
arr1 = [
[0, 0, 1],
[0, 1, 0],
[1, 0, 0],
[0, 1, 0],
[1, 0, 1]
],
count = 0,
time = 5;
function fn(a, b, i) {
var ok = b.checked == arr1[indx][i];
b.classList.add(ok ? 'ok' : (a = ok ,'no'))
return a
}
var next = document.querySelector("#next"),
timer, obj = document.querySelector("#tmr"), ctrl = document.querySelector("#control"), start = document.querySelector("#start");
next.addEventListener("click", nextQuestion, false);
ctrl.addEventListener("change", function show()
{
start.classList.toggle("show")
}, false);
function tm() {
obj.innerHTML--;
+obj.innerHTML ? (timer = setTimeout(tm, 1000)) : (obj.innerHTML = "", nextQuestion())
}
function nextQuestion() {
next.value = "Далее";
window.clearTimeout(timer);
if (divQuest[indx]) {
divQuest[indx].classList.remove("show");
var a = divQuest[indx].querySelectorAll("input"),
a = [].reduce.call(a, fn, true);
count += +a
};
document.querySelector("#okQuestion").innerHTML = "Вопросов пройдено: " + (indx + 1) + " из них правильно: " + count;
indx++;
divQuest[indx] && (divQuest[indx].classList.add("show"));
indx < len ? (obj.innerHTML = time, timer = setTimeout(tm, 1000)) : (next.classList.add("hide"), ctrl.classList.add("show"), obj.innerHTML = "Спасибо!")
return false
};
</script>
</body>
</html>