Тест на javascript с ответами и учетом времени

Автор: sergey-oganesyan.ru | 08.01.2017

Приветствую вас дорогие друзья! В этом уроке я покажу, как создать простой тест на javascript, в котором будет учитываться время, а также, пользователю будет даваться оценка!

Я уже публиковал урок – как сделать тест, в том уроке можно выбрать ответ, но после выбора вы не узнаете правильный ответ, даже после прохождения всего теста.

Что умеет тест?

В этом уроке мы создадим тест со следующими возможностями:

Можно будет выбрать вариант ответа (1 из 4);
После выбора ответа, пользователь будет знать – правильно ли он ответил на данный вопрос;
После прохождения теста, будет выведено количество и процент правильных ответов;
Будет засекаться время, потраченное на прохождение теста;
После теста, будет выводиться оценка (плохо, хорошо, отлично).

Как и в других подобных уроках по javascript, в самом низу будет демо пример и возможность скачать все исходный файлы урока!

Итак, давайте начнем!

Хранение данных

В первую очередь нам нужно подумать о том, где мы будет хранить следующие данные:

вопросы
варианты ответов
правильные ответы

Самый идеальный вариант – это хранить все данные в одном массиве, это удобно тем, что для добавления (удаления, изменения) вопроса достаточно сделать правку в одном месте!

Будем использовать двумерный массив, индекс этого массива будет определять номер вопроса, а каждый элемент массива – это еще один массив, содержащий в себе вопрос, варианты ответов и номер правильного ответа (всего 6 элементов).

Давайте посмотрим, как это будет выглядеть:

        //Массив вопросов и ответа
        var data_array = [
          ["Сколько сантиметров в метре?","10","1024","100","1000",3],
          ["Перевод слова: Hello","Как дела?","Привет","Ты","Дом",2],
          ["Перевод слова: Dog","Собака","Кошка","Дерево","Сосиска",1],
          ["Сколько месяцев в году?","10","11","12","13",3],
          ["Перевод слова: Tree","Три","Собака","Дерево","Дом",3],
          ["Перевод слова: Wall","Стена","Дом","Башня","Война",1],
        ];

Например, для того, чтобы узнать номер правильного ответа для 3 вопроса (слева направо), нужно написать такой код:

data_array[2][5];  //1

Т.е. в вопросе, где нужно перевести слово “Dog”, правильный ответ стоит на первом месте.

Для того, чтобы узнать правильный ответ для 3 вопроса (слева направо), нужно написать такой код:

data_array[2][data_array[2][5]];  //Собака

Конечный вариант кода

Теперь приведу js код целиком и поясню основные моменты:


        //Массив вопросов и ответа
        var data_array = [
          ["Сколько сантиметров в метре?","10","1024","100","1000",3],
          ["Перевод слова: Hello","Как дела?","Привет","Ты","Дом",2],
          ["Перевод слова: Dog","Собака","Кошка","Дерево","Сосиска",1],
          ["Сколько месяцев в году?","10","11","12","13",3],
          ["Перевод слова: Tree","Три","Собака","Дерево","Дом",3],
          ["Перевод слова: Wall","Стена","Дом","Башня","Война",1],
        ];

        var plus = 0;
        var time = 0;
        var cur_answer = 0;
        var count_answer = data_array.length;
        
        function sec() {
                time++; 
                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('option4').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('option4').innerHTML=data_array[cur_answer][4];
                        document.getElementById('question').innerHTML=data_array[cur_answer][0];
                        
                        document.getElementById('start').style.display='none';
                        document.getElementById('end').style.display='inline';
                        
                        var intervalID = setInterval(sec, 1000);
                        
                }else{

                        if( num ==  data_array[cur_answer][5]){
                                plus++;
                                document.getElementById('result').innerHTML='Верно!';
                        }else{
                                document.getElementById('result').innerHTML="Неверно! Правильный ответ: " + data_array[cur_answer][data_array[cur_answer][5]];
                        }
                                
                        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('option4').innerHTML=data_array[cur_answer][4];
                                document.getElementById('question').innerHTML=data_array[cur_answer][0];
                                
                        }else{
                                
                                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('option4').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;
                        }
                }
        }

Для учета времени (в секундах) будет использоваться функция – “sec”, эта функция увеличивает переменную time на 1 и выводит новое значение на экран.

Для того, чтобы время “шло”, используется интервал, установленный на одну секунду – этот интервал и запускает функцию sec (сразу после начала теста).

В переменной “plus” мы храним количество правильных ответов, по умолчанию в этой переменной хранится 0, а при каждом правильном ответе эта переменная увеличивается соответственно на единицу.

Для вычисления процентного показателя (переменная percent) правильных ответов, просто делим кол-во правильных ответ на общее кол-во вопросов и умножаем это значение на 100.

Для определения общего кол-ва вопросов, просто определяем размер массива с данными, это означает, что при добавлении или удалении вопросов из массива, больше ничего изменять не нужно.

Также, после прохождения теста, пользователю выставляется оценка – в зависимости от процентного показателя правильных ответов (percent):

по умолчанию оценка: плохо!
если percent больше 80%: хорошо!
если percent равен 100%: отлично!

В принципе, это основные моменты, на которые стоит обратить внимание, эти значения (и условия) вы сможете изменить под свои нужны.

Теперь вы можете проверить тест на реальном примере, а также скачать все исходные файлы данного урока (все в одном файле)!

Demo пример

Скачать исходники

На этом у меня все, если возникнут вопросы, вы можете задать их в комментариях, желаю вам удачи, пока!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.

Тест на javascript с ответами и учетом времени: 89 комментариев

Обсуждение закрыто.