02.05.2015, 09:58
|
|
Интересующийся
|
|
Регистрация: 02.05.2015
Сообщений: 10
|
|
|
Проверка теста с возможностью мультивыбора ответов
С подсчетом правильных ответов для radiobatton разобрался, а как быть если правильных ответов может быть более чем один, как подсчитывать более одного правильного ответа для checkbox?
Как определить если это checkbox?
Может быть можно записать значение в переменную, тега input свойства type?
Например если type==checkbox тогда действовать так, если type=radio тогда действовать иначе.
var x = document.getElementById("question4").type;
alert(x);
Выдаёт сообщение undefined.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<script>
var arrnext = '0'; // Подсчет нажатий Далее
var time = '5';
var arr = []; // массив ответов
var arr1 = [0, 0, 0, 0, 0]; //Массив правильных ответов
var count = 0; // баллы
function timer() {
var obj = document.getElementById('timer');
obj.innerHTML--;
if (obj.innerHTML == 0) {
stopTest();
} else {
setTimeout(timer, 1000);
}
}
function startTest() {
document.getElementById("timer").innerHTML = time;
setTimeout(timer, 1000);
document.getElementById("start").style.display = 'block';
document.getElementById("btStart").style.display = 'none';
for (arrnext = '1'; arrnext < 5; arrnext++) {
document.getElementById("question" + arrnext).style.display = 'none';
}
arrnext = '0'
}
function nextQuestion() {
var i = 0;
for (i = 0; i < document.getElementsByName("q" + arrnext).length; i++) {
if (document.getElementsByName("q" + arrnext)[i].checked) {
arr[arrnext] = i; //какой правильный чекбокс, начинается с 0
}
}
document.getElementById("question" + arrnext++).style.display = 'none';
document.getElementById("question" + arrnext).style.display = 'block';
}
function stopTest() {
for (i = 0; i < arr.length; i++) {
if (arr[i] == arr1[i]) count++;
}
alert(arr);
}
</script>
</head>
<body>
<style type="text/css">
<!-- #start {
display: none;
}
-->
</style>
<form method="get" enctype="text/plain" name="testForm">
<p>
<input type="button" name="btStart" value="Старт" onclick="startTest()" id="btStart" />
</p>
<div id="start">
<p id="timer"></p>
<p class="quest">Вопрос</p>
<div id="question0">
<input type="radio" name="q0" value="asd" /> 1
<br />
<input type="radio" name="q0" value="asd" /> 1
<br />
<input type="radio" name="q0" value="asd" /> 1
<br />
</div>
<div id="question1">
<input type="radio" name="q1" value="1" /> 2
<br />
<input type="radio" name="q1" value="2" /> 2
<br />
<input type="radio" name="q1" value="3" /> 2
<br />
</div>
<div id="question2">
<input type="radio" name="q2" value="1" /> 3
<br />
<input type="radio" name="q2" value="2" /> 3
<br />
<input type="radio" name="q2" value="3" /> 3
<br />
</div>
<div id="question3">
<input type="radio" name="q3" value="1" /> 4
<br />
<input type="radio" name="q3" value="2" /> 4
<br />
<input type="radio" name="q3" value="3" /> 4
<br />
</div>
<div id="question4">
<input type="checkbox" name="precipitation[]" value="1" />5
<br />
<input type="checkbox" name="precipitation[]" value="2" />5
<br />
<input type="checkbox" name="precipitation[]" value="3" />5
<br />
</div>
<p>
<input type="button" name="btStart" value="Далее" onclick="nextQuestion()" id="next" />
</p>
</div>
</form>
</div>
</body>
</html>
|
|
02.05.2015, 13:31
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
Вопросник с множеством выбора
tracerzzz,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<style type="text/css">
.question {
display: none;
}
</style>
</head>
<body>
<div>
<form method="get" enctype="text/plain" name="testForm">
<div id="start">
<p id="timer"></p>
<p id="okQuestion"></p>
<div class="question">
<h4 class="quest">Вопрос 1</h4>
<input type="radio" name="q0" value="asd" /> 1
<br />
<input type="radio" name="q0" value="asd" /> 1
<br />
<input type="radio" name="q0" value="asd" /> 1 ♥
<br />
</div>
<div class="question">
<h4 class="quest">Вопрос 2</h4>
<input type="radio" name="q1" value="1" /> 2
<br />
<input type="radio" name="q1" value="2" /> 2 ♥
<br />
<input type="radio" name="q1" value="3" /> 2
<br />
</div>
<div class="question">
<h4 class="quest">Вопрос 3</h4>
<input type="radio" name="q2" value="1" /> 3 ♥
<br />
<input type="radio" name="q2" value="2" /> 3
<br />
<input type="radio" name="q2" value="3" /> 3
<br />
</div>
<div class="question">
<h4 class="quest">Вопрос 4</h4>
<input type="radio" name="q3" value="1" /> 4
<br />
<input type="radio" name="q3" value="2" /> 4 ♥
<br />
<input type="radio" name="q3" value="3" /> 4
<br />
</div>
<div class="question">
<h4 class="quest">Вопрос 5</h4>
<input type="checkbox" name="precipitation[]" value="1" />5 ♥
<br />
<input type="checkbox" name="precipitation[]" value="2" />5
<br />
<input type="checkbox" name="precipitation[]" value="3" />5 ♥
<br />
</div>
<p>
<input type="button" name="btStart" value="Старт" onclick="nextQuestion()" id="next" />
</p>
</div>
</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) {
return a.checked == arr1[indx][b]
}
var next = document.querySelector("#next"),
timer, obj = document.querySelector("#timer");
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].style.display = "none";
var a = divQuest[indx].querySelectorAll("input"),
a = [].every.call(a, fn);
count += +a
}
document.querySelector("#okQuestion").innerHTML = "Вопросов пройдено: " + (indx + 1) + " из них правильно: " + count;
indx++;
divQuest[indx] && (divQuest[indx].style.display = "block");
indx < len ? (obj.innerHTML = time, timer = setTimeout(tm, 1E3)) : (next.style.display = "none", obj.innerHTML = "Спасибо!") };
</script>
</body>
</html>
Последний раз редактировалось рони, 15.05.2016 в 21:56.
|
|
02.05.2015, 14:00
|
|
Интересующийся
|
|
Регистрация: 02.05.2015
Сообщений: 10
|
|
|
Замечательно) спасибо, подскажите пожалуйста как сделать что бы после пройденного теста, пользователь мог посмотреть список вопросов и на то как он на них отвечал, где он ошибся а где ответил верно?
Использую django.
Последний раз редактировалось tracerzzz, 02.05.2015 в 14:03.
|
|
02.05.2015, 14:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
Сообщение от tracerzzz
|
|
Использую django.
|
а что это? |
|
02.05.2015, 14:42
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
tracerzzz,
добавить установку класса error в строку 89 и какойто тригер для класса question для показа ошибок
|
|
02.05.2015, 15:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
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>
Последний раз редактировалось рони, 02.05.2015 в 16:28.
|
|
|
|
