Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.05.2015, 10:58
Интересующийся
Отправить личное сообщение для tracerzzz Посмотреть профиль Найти все сообщения от tracerzzz
 
Регистрация: 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>
Ответить с цитированием
  #2 (permalink)  
Старый 02.05.2015, 14:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Вопросник с множеством выбора
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 &hearts;
                <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 &hearts;
                <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  &hearts;
                <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 &hearts;
                <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 &hearts;
                <br />
                <input type="checkbox" name="precipitation[]" value="2" />5
                <br />
                <input type="checkbox" name="precipitation[]" value="3" />5 &hearts;
                <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 в 22:56.
Ответить с цитированием
  #3 (permalink)  
Старый 02.05.2015, 15:00
Интересующийся
Отправить личное сообщение для tracerzzz Посмотреть профиль Найти все сообщения от tracerzzz
 
Регистрация: 02.05.2015
Сообщений: 10

Замечательно) спасибо, подскажите пожалуйста как сделать что бы после пройденного теста, пользователь мог посмотреть список вопросов и на то как он на них отвечал, где он ошибся а где ответил верно?
Использую django.

Последний раз редактировалось tracerzzz, 02.05.2015 в 15:03.
Ответить с цитированием
  #4 (permalink)  
Старый 02.05.2015, 15:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Сообщение от tracerzzz
Использую django.
а что это?
Ответить с цитированием
  #5 (permalink)  
Старый 02.05.2015, 15:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

tracerzzz,
добавить установку класса error в строку 89 и какойто тригер для класса question для показа ошибок
Ответить с цитированием
  #6 (permalink)  
Старый 02.05.2015, 16:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

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="">&nbsp;</label> 1
                <br />
                <input type="radio" name="q0" value="asd" /><label for="">&nbsp;</label> 1
                <br />
                <input type="radio" name="q0" value="asd" /><label for="">&nbsp;</label> 1 &hearts;
                <br />
            </div>

            <div class="question">
                <h4 class="quest">Вопрос 2</h4>
                <input type="radio" name="q1" value="1" /><label for="">&nbsp;</label> 2
                <br />
                <input type="radio" name="q1" value="2" /><label for="">&nbsp;</label> 2 &hearts;
                <br />
                <input type="radio" name="q1" value="3" /><label for="">&nbsp;</label> 2
                <br />
            </div>
            <div class="question">
                <h4 class="quest">Вопрос 3</h4>
                <input type="radio" name="q2" value="1" /><label for="">&nbsp;</label> 3  &hearts;
                <br />
                <input type="radio" name="q2" value="2" /><label for="">&nbsp;</label> 3
                <br />
                <input type="radio" name="q2" value="3" /><label for="">&nbsp;</label> 3
                <br />
            </div>
            <div class="question">
                <h4 class="quest">Вопрос 4</h4>
                <input type="radio" name="q3" value="1" /><label for="">&nbsp;</label> 4
                <br />
                <input type="radio" name="q3" value="2" /><label for="">&nbsp;</label> 4 &hearts;
                <br />
                <input type="radio" name="q3" value="3" /><label for="">&nbsp;</label> 4
                <br />
            </div>
            <div class="question">
                <h4 class="quest">Вопрос 5</h4>
                <input type="checkbox" name="precipitation[]" value="1" /><label for="">&nbsp;</label>5 &hearts;
                <br />
                <input type="checkbox" name="precipitation[]" value="2" /><label for="">&nbsp;</label>5
                <br />
                <input type="checkbox" name="precipitation[]" value="3" /><label for="">&nbsp;</label>5 &hearts;
                <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 в 17:28.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модернизация теста с возможностью нескольких правильных ответов PinokPodZad Общие вопросы Javascript 13 27.01.2015 20:05
Проверка выбора только 2 ответов из 4 demon166 Общие вопросы Javascript 6 07.01.2010 01:03