Показать сообщение отдельно
  #2 (permalink)  
Старый 02.05.2015, 13:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Вопросник с множеством выбора
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 в 21:56.
Ответить с цитированием