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

Что умеет тест?
В этом уроке мы создадим тест со следующими возможностями:- Можно будет выбрать вариант ответа (1 из 4);
- После выбора ответа, пользователь будет знать - правильно ли он ответил на данный вопрос;
- После прохождения теста, будет выведено количество и процент правильных ответов;
- Будет засекаться время, потраченное на прохождение теста;
- После теста, будет выводиться оценка (плохо, хорошо, отлично).
Хранение данных
В первую очередь нам нужно подумать о том, где мы будет хранить следующие данные:- вопросы
- варианты ответов
- правильные ответы
//Массив вопросов и ответа 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%: отлично!
Раздел: JavaScript с примерами
Дата последнего изменения: 2017-01-05 00:11:33
Просмотров: 13366
Оставить комментарий
* Комментарий: (отменить ответ)
* Ваше имя:
Ваш e-mail:
*
- Благодарю, все есть, это я неправильно смотрела))) Извините за беспокойствоОтветить
- Да ничего, пожалуйста)Ответить
- Добрый день, хотела скачать исходники а их там нет. Только страница на которой сам тест размещен. Можно ли все же попросить у вас файлы с кодом.Ответить
- Можно ли как-то сделать, чтобы в вопросе содержалось изображение?Ответить
- Да можно, для этого достаточно добавить нужную картинку перед нужным вопросом в массиве data_array (Массив вопросов и ответа), например:Как видите из кода, перед нужным вопросом я добавил это: Картинка и тег br для переноса строки.Ответить
- Здравствуйте Сергей, а как сделать так что бы и вопросы и ответы для каждого вопроса были в разноброс (т.е. на угад какой попало=random), не обязательно всё отмечалось по полочкам, надо путать обучающихся что бы они запоминали сам ответ, а не вопросы по порядку. Заранее благодарю!Ответить
- Добрый день, для этого нужно добавить функцию (в самом начале javascript кода), которая перемешивает массив, и вызвать эту функцию после массива вопросов и ответов, то есть код должен выглядеть так:Остальной код остается без изменений.Ответить
- Как сделать чтобы все тесты отображались на 1 странице сразуОтветить
- Какие все? В уроке 1 тестОтветить
- Здраствуйте. А как можно добавить рамку вокруг изображения которое содержится в вопросе?Ответить
- Добрый день, для этого перед скриптом можно добавить такие стили:Ответить
- Spasibo!Ответить
- Пожалуйста!Ответить
- Здравствуйте, а как сделать так чтобы вариантов ответа было несколько, помогите пожалуйста!Ответить
- Здравствуйте, для этого вариант ответа (элемент массива data_array с индексом 5) должен иметь вид: 1#3#4 - где 1, 3 и 4 это правильные варианты ответа. Когда пользователь выбирает несколько ответов, нужно формировать из ответов строку вида 1#3#4 - соответственно сравнивать нужно строки.Ответить
- Здравствуйте, а как можно заставить ответы заноситься в базу данных?Ответить
- Здравствуйте, для этого придется делать post или get запрос, передавая ответы в php скрипт, а в нем уже заносить эти ответы в базу данных.Ответить
- как сделать чтобы было несколько тестов ?Ответить
- На одной странице?Ответить
- вот допустим есть 3 теста и когда начинаешь решать его чтобы рандомомом выбирало какой решатьОтветить
- Чем тесты друг от друга будут отличаться? Просто вопросами?Ответить
- даОтветить
- Самый простой способ - это заменить массив вопросов и ответа, то есть этот код:Заменить на этот: Ответить
- оооооо , спасибо большое И спасибо за тест , долго не мог найти , очень понравился , как раз для моего курсового ) Спасибо )Ответить
- Пожалуйста, удачи!Ответить
- Спасибо вот еще такой вопрос вот когда отвечаешь на вопрос , то сразу выбивает верно или неверно можно как-нибудь сделать цвет , вот если я ответил верно то зелены , а если не верно то красный ?? У меня только получилось чтобы они были одного цветаОтветить
- Ответить
- Здравствуйте, попробовала я код с изменением цвета верно, неверно - не удалось:( Вероятнее всего я его вела неверно... А также добавить несколько ответов тоже не вышло...не могли бы Вы, Сергей, если вас не затруднит мне помочь?!Ответить
- Добрый день! Выдает какие-то ошибки? Оставьте заявку на сайте https://simplequery.ru/, по почте быстрее будет помочь.Ответить
- Я написала, спасибоОтветить
- Скажите пожалуйста, как я могу на задний план разместить фотографию? Мне известна такая штука " . Но так как у вас в HTML-е и скрипт и все стили и само тело, то я теряюсь, куда мне стоит вставить эту конструкцию. Пыталась в разные места.Спасибо.Ответить
- Просто добавьте в body стиль фона, то есть замените это:На это: Где https://sergey-oganesyan.ru/wp-content/uploads/2017/01/test-na-javascript-s-otvetami.jpg - это путь к фотографии, поставьте свой путь.Ответить
- Добрый день! а как можно посчитать кол-во каждого ответа? например: ответов 1 -2 шт, ответов 2-1шт и т.д?Ответить
- Добрый, добавьте в раздел с переменными массив, например:А в коде, перед: Добавьте В итоге в массиве будет храниться кол-во каждого ответа: Ответить
- Спасибо за урок Сергей! У меня все же один вопросик! Можно ли с помощью этого скрипта, массово импортировать вопросы из документов. Например из .txt файлов и т.д.Ответить
- Да, можно в цикле считывать строки любого файла через PHP и добавлять в JavaScript массив вопросов и ответов (data_array)Ответить
- Тоест через PHP можно из любого .txt документа, вопросы а также их ответы поставить так как указан в данной скрипте. Например, на документе test1.txt есть следующие записи: Первый президент США? Дж. Вашингтон Барак Обама Авраам Линкольн Кеннеди Дональд Трамп Так вот, php-скрипт, выводит его так: "Первый президент США?", "Дж. Вашингтон", "Барак Обама", "Авраам Линкольн ", "Кеннеди", "Дональд Трамп", "1" ??Ответить
- Как вариант, вам можно подготовить файл, в котором будут строки вида:И так далее. PHP скрипт будет считывать в цикле строки, после того, как считает, эти строки нужно передать в Javascript и добавить к массиву data_arrayОтветить
- foreach($data AS &$value){ array_pop($value); foreach($value AS &$value2){ // этим циклом мы убираем перенос строки в конце каждого элемента массива $value2 = str_replace("\r\n", "", $value2); } echo $value[0].', '.$value[1].', '.$value[2].', '.$value[3].', '.$value[4].', '.$value[5].''; }Ответить
- Я вот где то поорыл, но вот такая проблема! Можно ли эти массивы выводит как то на кавычках? Чтобы симол/знак ( " " ) автоматический ставились после выведение данных.Ответить
- Вам нужно в цикле, с помощью PHP, считывать файл построчно (вид строки я привел выше) и сразу же добавлять очередную строку в массив вопросов и ответов.Ответить
- как сделать так что бы варианты ответов были случайнами? например 4 вариянта ответа 1 правильный а 3 случайным образом появлялись Например Зимой и летом одним цветом Ёлка Башмаг Кот Собака а после обновления страницы Зимой и летом одним цветом компютер машина ёлка клешь и что бы вопросы были случайным образом то есть в начале теста скрипт определял какие вопросы будут случайным образомОтветить
- Чтобы вопросы были в случайном порядке - выше уже отвечал, функция mix, для случайных вариантов, вам нужно перестроить массив вопросов и ответа так, чтобы правильный ответ не зависел от порядка элементов в массиве, тогда можно будет перемешать массив вариантов с помощью все той же функции mix. P.S. как 1 из вариантов.Ответить
- Добрый день! Может не совсем по данному тесту вопрос. Заранее извиняйте! Подскажите как сделать зависимость ответов? Понятнее на примере: Вопрос: Что сделать с...? И варианты ответов Если допустим Топор-рубить,кидать. Если Пила-пилить, рубить. И так далее. Чтобы были вложенные ответы в строчку и при выборе первого пункта менялись варианты во втором поле и т.д. Заранее спасибо!Ответить
- Добрый, это именно тестом должно быть или вы просто такой выбор хотите реализовать?Ответить
- Как сделать, чтобы результаты сохранялись в результаты тестирования в текстовом файлеОтветить
- Для этого уже нужен серверный язык, например, php, можно сделать 1 ajax запрос, отправив результат, а там уже записать его в файлОтветить
- Добрый день! Может не совсем по теме, но как сделать чтобы по окончанию теста блок сворачивался и открывался другой. Заранее спасибо!!!Ответить
- Добрый день, какой блок должен свернуться? Скрыть блок:Показать блок: Где moy_block - id нужного блока.Ответить
- Здравствуйте. Как сделать так, чтобы кнопка начать сначала появилось только после завершения тестаОтветить
- Добрый день, перенесите строчку:и вставьте её перед строчкой: Ответить
- Огромное спасибо за скрипт! А можно ли его переделать так, чтобы вместо вариантов ответа было поле для ввода?Ответить
- Пожалуйста, для этого вам нужно будет привести массив к виду:Вместо ответов добавить поле, например: Ну и сравнивать ответы можно, например, так: Это все в общих чертах.Ответить
- Подскажите как перенести этот код в отдельный файл чтобы он не был в htmlОтветить
- Что вы имеете ввиду?Ответить
- Подскажите как в этот тест добавить выбор вначале тестируемых людей а в конце теста вылазило имя прошедшего тест?Ответить
- Для этого нужно создать базу данных (либо хранить список людей в файле) и обрабатывать уже с помощью какого-нибудь серверного языка, например, phpОтветить
- Подскажите как сделать так, чтобы можно было добавить вопросы с выбором правильной последовательности ответов.Ответить
- Не совсем ясен вопрос, опишите поподробнее.Ответить
- Здравствуйте,как сделать чтобы после неправильного выбора выводилась подсказка!?Ответить
- Здравствуйте, так она и так выводится: "Неверно! Правильный ответ: .."Ответить
- Здраствуйте , помогит пжл как сделать несколько вариантов ответа, все комментарии прочел не нашелОтветить
- Здравствуйте, это уже совершенно другой тест, проще написать с 0, чем данный переделывать. Будет время, возможно напишу такой урок, пока могу лишь подсказать, что в качестве ответов нужно будет использовать input типа checkbox, а ответ хранить в виде цифр правильных ответов, разделенных, например, решеткой #Ответить
- Здравствуйте! Подскажите пожалуйста,как сделать так: Например у меня на странице 2 и более тестов ,они идут друг за другом ,и чтобы попасть в следующий ,нужно пройти предыдущий на 100% , а если он не пройден,то тест будет недоступен.?Ответить
- Здравствуйте, просто создайте переменную, например,Если человек прошел на 100% первый тест, то выполните: А второй тест оберните в такое условие: Ответить
- Доброе время суток! Нарвался на Ваш сайт очень понравился. Все грамотно и понятно расписано. Вот решил изучить JavaScript. Сын все время просит поиграть компьютер, но не хочит делать домашнее задание на каникулах. Я конечно в его возрасте тоже бы не делал тем более в его время все доступно. Это в наше время компьютер был на вес золото. И у меня возникла такая задача. Как только он за хочет открыть оперу чтоб открывалось страница о прохождении тестов. Потом нажимает кнопку перейти к тестам но чтоб в обработчике кнопки была проверка по дате и страницы. И перебрасывала на страницу. Допустим сегодня 7 число переброс на 7 страницу или 31 число на 31 страницу. Заранее благодарен!!!Ответить
- Добрый день, просто создайте ярлык на рабочем столе, который будет открывать файл, например, test.html - в этом файле просто определите сегодняшнюю дату и перенаправьте пользователя на нужный тест, например, так:Ответить
- У меня вопрос. Можно ли пронумеровать вопросы, если я перемешивают массив? Что бы понимать сколько уже прошёл, и сколько ещё осталось.Ответить
- Можно выводить номер текущего вопроса и их кол-во, для этого замените эту строку в 2-х местах:На эту: И тогда под вопросом будет выводиться номер вопроса вида: 2/6Ответить
- Спасибо, очень помогли. А возможно теперь выровнять этот: x/y по центру?Ответить
- Здравствуйте, подскажите как сделать, чтобы были стрелки назад и вперед для переключения вопросов и можно было пропускать вопрос?Ответить
- Тоже интересует этот вопрос решили проблемуОтветить
- Здравствуйте! Что-то ответов на последние вопросы пока не видно, но попробую спросить. Можно ли сделать так, чтобы учитывалось время прохождения теста, т. е. после его окончания не уложившимся в определенное время выводилось сообщение типа: "Необходимо улучшить время прохождения"?Ответить
- Да, времени, к сожалению, не хватает всем ответитьОтветить
- Извините за беспокойство: сам разобрался, переменная time.Ответить
- ОкОтветить
- Как рандомизировать варианты ответов с помощью функции mix (сделал все варианты ответов на 1, но как сделать чтобы они перемешивались?) можно пример на исходнике?Ответить
- Хороший вопрос, подумаю как это лучше реализовать, напишу.Ответить
- Сергей извините а не подскажите как после прохождения теста запустить ярлык на рабочем столе.Ответить
- Так вот выше, вместо гугл поставьте ссылку на другой тест: location="ссылка на другой тест";Ответить
- Здравствуйте, а как сделать вывод неправильных ответов после прохождения теста?Ответить
- Здравствуйте, создайте переменную, например:Далее, после строчки: Добавьте строчку: И в самом низу - "res" замените на - "res + wrongAnswers" В итоге после теста будут выводиться неверные ответы в виде: Вопрос: Перевод слова: Dog/ Ваш ответ: КошкаОтветить
- Извините забыл добавить. Если тест сдал плохо то оставался на этой же странице.Ответить
- Код для предыдущего комментария учитывает этоОтветить
- Извините Сергей. Все заработало. Я Вас не правильно понял. СПАСИБО ОГРОМНОЕ!!!!Ответить
- ПожалуйстаОтветить
- доброе время суток! Скажите пожалуйста как в вашем примере сделать так, если тест прошел на хорошо или отлично то через 5 секунд переходил на другую страницу ну например google.ru. Заранее благодарен!!!Ответить
- Добрый день, замените эту строку:На этот код: 5000 миллисекунд - это 5 мекундОтветить
- Здравствуйте. Пытаюсь поставить ваш код у меня не срабатывает к кнопка приступить к тестам.Ответить
- Здравствуйте. Можно ли сделать следующее? Вывести на страницу 10 илиболее вопросов с вариантами ответов, затем выбрать некоторые вопросы например 2, 5, 6 и 10. Нажать на кнопку "правильные ответы" после чего на стианице остаются только выбранные вопросы с правильными вариантами ответов.Ответить
- Здравствуйте, 10 и более вопросов с ответами можно вывести просто с помощью html, а скриптом уже проверять ответы после нажатия на кнопку "Проверки". Каждый из вопросов можно оформить так:и т.д. В конце будет кнопка: Ну и в самой функции выполняйте что необходимо: Это один из вариантов (самый простой), можно всю информацию выводить на страницу с помощью скрипта.Ответить
- Здравствуйте, спасибо за Ваши классные статьи :) Подскажите, пожалуйста, как сделать так, чтобы при неправильном ответе, высвечивался тот же список вопросов и ответов, но выбранный ответ был красным, а правильный зеленым. То есть,у вас в примере, при неправильном ответе комментарий появляется уже на новом вопросе, а как это сделать с сохранением на странице старого, а потом перейти к новому?Ответить
- Здравствуйте! Ещё вопросик :) Вот, если задать, допустим переменной time значение 60 и пустить в обратном порядке путем изменения в функции sec time++ на time=time-1 как сделать так, чтобы при достижении time значения 0, тест прерывался и выводилось сообщение в духе "Время вышло!"Ответить
- Вопрос,можно ли добавить кнопки социальных сетей чтобы итоги теста можно было публиковать в соц. сетях, или для этого база нужна ?Ответить
- Можно, но все зависит от того, какую информацию вы хотите запостить в соцсети, скорее всего нужно делать open-graph разметку https://yandex.ru/support/webmaster/open-graph/ где и указывать чтобы нужно поститьОтветить
- Сергей, здравствуйте! Возник вопрос по данному тесту, можно ли в этом тесте каким-то образом реализовать подсчет баллов вместо правильных ответов (т.е. 1 ответ = 1 баллу, 2 - двум и т.д.) и в зависимости от набранной суммы выводить результат?Ответить
- Добрый день, можно, просто заменить фразу "Правильных ответов" на "Баллов" в коде. Чтобы выводить результат в зависимости от набранных баллов, замените этот код:на этот: Где 5 и 10 - это кол-во баллов, по аналогии можете добавить свои условия результата.Ответить
- Подскажите пожалуйста после прохождение теста когда выводится общий результат если открыть инструмент разработчика то в консоли мы видим ошибку в 46 строке скрипта (Uncaught TypeError: Cannot set property 'innerHTML' of null) и количество ошибок растёт с каждой секундой.Ответить
- Сергей, здравствуйте! Возник вопрос. Как сделать чтобы 4 варианта не в один ряд шли , а по два каждый. 1 вариант 2 вариант 3 вариант 4 вариант .Ответить
- Здравствуйте. Подскажите пожалуйста такой момент. Псоле того как выведен конечный результат теста, если открыть инструмент разработчика мы увидим ошибку в 46 строчке скрипта (Uncaught TypeError: Cannot set property 'innerHTML' of null) и количество ошибок увеличивается с каждой секундой в консоли.Ответить
- Добрый день. Не подскажите, как менять background на каждый вопрос?Ответить
- Добрый день, просто измените свойство background: #3C8FB7; у класса .oganesyan, #3C8FB7 - это код цвета, замените его на нужныйОтветить
- Добрый день. Не подскажите, как в этот тест добавить хранение результатов прохождения теста с использованием local storage? Чтобы перед тестом человек вводил свое имя, затем проходил тест, и данные сохранялись на отдельную страницу. А затем, при попытке еще раз пройти тест выводилось бы сообщение "данный пользователь уже проходил тест".Ответить
- Тест супер Подскажите как можно поставить кнопки Вперед пусть вопрос пропускается если человек не может ответить на него и всё подсчет итогов теста подправлю сам но никак не пойму как перейти к следующему вопросу если не знаешь ответа на текущий напримерОтветить
- Здравствуйте, спасибо за тест! Хотелось бы узнать кое-что еще: как сделать так, что бы можно было установить таймер, который начинал работу после нажатия на кнопку "приступить к тесту" на 10 минут к примеру и он остановился когда все вопросы были отвечены или же когда не ответили на все вопросы, но время закончилось - выводило кол-во правильных ответов.Ответить
- Добрый день! Таймер имеется, он реализован в функции sec(), в этой функции каждую секунду на 1 увеличивается переменная time, вы можете просто добавить в эту функцию условие:Ответить
- Я чутка не так выразился. Нужно чтобы можно было задать время и отсчет шел в обратную сторону, то бишь с 10 минут до нуля. И вот чтобы в таком таймере если человек успеет ответить заранее на все вопросы - то таймер остановится. А если не успеет - то покажет сразу количество правильных ответов. Если вдруг я Вас не так понял, прошу прощения и прошу Вас объяснить все снова прилагая строчки кода. Заранее спасибо!Ответить
- Тогда изначально в переменной нужно задать var time = 600, а в функции sec() уже прописать такое условие:Ответить
- Спасибо, все работает! Но еще есть вопрос чисто из интереса: как сделать таймер с минутами и секундами по тому же принципу?Ответить
- Делается это просто - переводите "просто секунды" в "минуты и секунды", делением на 60, можете даже просто взять код из моей статьи про таймер - https://sergey-oganesyan.ru/javascript-s-primerami/kak_sozdat_taymer_obratnogo_otscheta_dlya_sayta.htmlОтветить
- И еще раз большое спасибо :)Ответить
- Пожалуйста!Ответить
- Подскажите, а почему у меня таймер доходит до нуля, а потом продолжается (т.е. -1, -2 и т.д.) ??Ответить
- Возможно вы условие для переменной time не прописали, если time = 0, то необходимо остановить таймерОтветить