Проверка теста с возможностью мультивыбора ответов
С подсчетом правильных ответов для 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> |
Вопросник с множеством выбора
tracerzzz,
:write: <!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> |
Замечательно) спасибо, подскажите пожалуйста как сделать что бы после пройденного теста, пользователь мог посмотреть список вопросов и на то как он на них отвечал, где он ошибся а где ответил верно?
Использую django. |
Цитата:
|
tracerzzz,
добавить установку класса error в строку 89 и какойто тригер для класса question для показа ошибок |
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> |
Часовой пояс GMT +3, время: 04:12. |