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

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 в 16:28.
Ответить с цитированием