0

Подскажите, пожалуйста, как исправить код ниже, чтобы при достижении таймером нуля, тест прерывался и выходила надпись "Время вышло". Разное перепробовала, но он просто в минус уходит... И как при неправильном ответе поменять стиль у кнопок и оставить их на экране, а потом уже переходить к следующему вопросу. Сейчас комментарий, к примеру, выводится уже над следующим вопросом, как притормозить этот процесс?

 <!DOCTYPE html>
    <html lang="ru-RU">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Тест на время</title>
    <style>
    body{
        font-family:verdana;
        color:#444;
    }
    #option1,#option2,#option3,#option4{
        display:none;
        margin-bottom: 10px;
    }
    .kp{
        text-decoration: none;
        font-size: 20px;
        margin-right: 20px;
        color: #fff;
        background: #333333;
        padding: 4px 8px;
        border: 0;
        cursor: pointer;
    }
    .nach{
        text-decoration: none;
        font-size: 20px;
        margin-right: 20px;
        color: #fff;
        background: #ff8000;
        padding: 4px 8px;
        border: 0;
        cursor: pointer;
    }
    </style>
    <script type="text/javascript">

     function mix(mixArray) {
          var index, valueIndex; 
          for (var i=0; i<=mixArray.length-1; i++) {
            index = Math.floor(Math.random()*i);
            valueIndex = mixArray[index];
            mixArray[index] = mixArray[i];
            mixArray[i] = valueIndex;
          }
          return mixArray;
        }
        //Массив вопросов и ответа
        var data_array = [
          ["Сколько сантиметров в метре?","10","1024","100","комм1",3],
          ["Перевод слова: Hello","Как дела?","Привет","Ты","комм2",2],
          ["Перевод слова: Dog","Собака","Кошка","Дерево","комм3",1],
          ["Сколько месяцев в году?","10","11","12","комм4",3],
          ["Перевод слова: Tree","Три","Собака","Дерево","комм5",3],
          ["Перевод слова: Wall","Стена","Дом","Башня","комм6",1],
        ];
    mix(data_array);
        var plus = 0;
        var time = 60;
        var cur_answer = 0;
        var count_answer = 3;

        function sec() {
            time=time-1;    
            document.getElementById('time').innerHTML=time + ' сек';
        }

        function check(num){

            if(num == 0){ 

                document.getElementById('option1').style.display='block';
                document.getElementById('option2').style.display='block';
                document.getElementById('option3').style.display='block';
                document.getElementById('question').style.display='block';

                document.getElementById('option1').innerHTML=data_array[cur_answer][1];
                document.getElementById('option2').innerHTML=data_array[cur_answer][2];
                document.getElementById('option3').innerHTML=data_array[cur_answer][3];
                document.getElementById('question').innerHTML=data_array[cur_answer][0];

                document.getElementById('start').style.display='none';


                var intervalID = setInterval(sec, 1000);

            }else{



                if( num ==  data_array[cur_answer][5]){
                    plus++;

                }   
                else{
                document.getElementById('result').innerHTML="Неверно!" + [data_array[cur_answer][4]];
                }

                cur_answer++;




                if(cur_answer < count_answer){

                    document.getElementById('option1').innerHTML=data_array[cur_answer][1];
                    document.getElementById('option2').innerHTML=data_array[cur_answer][2];
                    document.getElementById('option3').innerHTML=data_array[cur_answer][3];
                    document.getElementById('question').innerHTML=data_array[cur_answer][0];

                }else{

                    document.getElementById('end').style.display='inline';
                    document.getElementById('time').id = 'stop';
                    document.getElementById('option1').style.display='none';
                    document.getElementById('option2').style.display='none';
                    document.getElementById('option3').style.display='none';
                    document.getElementById('question').style.display='none';
                    document.getElementById('end').style.display='inline';

                    var percent =  Math.round(plus/count_answer*100);               
                    var res = 'Плохо!';
                    if(percent>70) res = 'Хорошо!';
                    if(percent==100) res = 'Отлично!';

                    document.getElementById('result').innerHTML='Правильных ответов: ' + plus + ' из ' + count_answer + ' (' + percent + '%)<br>' + res;
                }
                }

            }
        }
    </script>
    </head>
    <body>
        <center>

            <p style="font-size: 38px;font-weight: bold;padding-top: 2px;" id="time"></p>
            <p style="font-size: 38px;font-weight: bold;padding-top: 2px;" id="result"></p>
            <p style="font-size: 38px;font-weight: bold;padding-top: 2px;" id="vremya"></p>

            <p style="font-size: 38px;font-weight: bold;padding-top: 2px;" id="question"></p>

            <button onclick="check(1)" class="kp" id="option1"></button>

            <button onclick="check(2)" class="kp" id="option2"></button>

            <button onclick="check(3)" class="kp" id="option3"></button>

        </center><br>
        <center>
            <button id="start" class="kp" onclick="check(0)">Приступить к тесту</button>
            <script type="text/javascript"> var curent_url = document.URL; document.write("<a id='end' style='display: none;' class='nach' href='" + curent_url + "'>Начать сначала</a>"); </script>    
        </center><br><br>

    </body>
    </html>

1 ответ 1

0

достаточно добавить в sec() перед изменением счётчика

if(time<0)
    clearInterval(intervalID);

объявить перед sec()

var intervalID;

и соответственно запускать таймер

 intervalID = setInterval(sec, 1000);

Насчёт остановки теста: я бы делал отдельный div с результатом и вопросами. При завершении таймера скрывать вопросы и показывать результат.

2
  • Почему-то вышло так, что таймер остановился не на 0, а на -2 секунды Можете, пожалуйста, показать пример такого div?
    – Хомяк
    17 июн 2018 в 19:55
  • А, всё, вышло :)
    – Хомяк
    17 июн 2018 в 21:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.