Как сделать тест на javascript на своем сайте — пример с исходным кодом + демо.

Как создать тест

Приветствую вас дорогие друзья! В сегодняшнем выпуске мы рассмотрим тест, написанный на javascript!

Совсем недавно я рассказывал как проверить билетик – счастливый или нет, сегодня мы создадим простецкий тест и как всегда в конце статьи будет Demo пример.

Итак, давайте сначала разберем структуру нашего теста..

Из чего состоит тест?

Наш тест будет посвящен знанию английских слов, а именно – он будет содержать один вопрос (слово, требующее перевода) и четыре (4) варианта ответа.

Для того, чтобы ответить, достаточно будет нажать на желаемый вариант ответа.

Для примера, я составил тест из четырех вопросов, а значит, что должно быть и 4 варианта ответов..

Итого – потребуется:

4 вопроса

4 * 4 = 16 вариантов возможных ответов

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

Где хранить вышеперечисленные данные?

Хранить все необходимые данные мы будет в массивах, так как с ними легко работать, добавлять новые элементы и удалять элементы.

В нашем случае структура хранения данных будет выглядеть следующим образом:

Массив questions

В данном массиве содержатся вопросы (в нашем примере – это слова на русском либо на английском языке).

Массивы number1 (2,3,4)

Четыре данных массива предназначены для хранения вариантов ответа.

Массив answer

В этом массиве мы будем хранить правильные варианты ответа, а точнее, индексы массивов с правильным вариантом ответа.

Особенности теста

Первая особенность: тест начинается по нажатию на кнопку – “Приступить к тесту” – после нажатия, данная кнопка исчезает и появляется тест и также кнопка завершения.

Вторая:  Имеется кнопка (“Начать сначала”), соответственно, позволяющая начать тест с самого начала.

Третья: По завершению работы теста, появляется всплывающее окно, в котором выводится информация о количестве правильных ответов.

Код программы

Давайте рассмотрим полный (со стилями и html разметкой) код нашего теста и разберемся подробнее..


Итак,  разберем первые четыре переменные:

var countQuest  — переменная, которая ведет подсчет вопросов – если она меньше количества вопросов в массиве, то увеличиваем её на единицу и продолжаем тест, иначе выводим количество правильных ответов.

var plus  — данная переменная содержит количество правильных ответов, и увеличивается, когда число, переданное пользователем при клике на вариант ответа, совпадает с числом из массива правильных ответов (answer).

var test_start  – эта переменная нужна для запуска теста, 0 – не запущен, 1 – запущен.

Функция check – эта единственная функция, которая и отвечает за сам процесс тестирования.

Она имеет один (1) параметр – их примеры:

check(4) – это означает, что нужно запустить тест

check(5) – это означает, что нужно запустить тест заново.

Такие значения параметров, как: 0,1,2,3 – означают соответствующие варианты ответа.

Думаю, все остальное понятно из кода.

Как его использовать на своем сайте?

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

Данный код не является идеальным, он написан в целях ознакомления, надеюсь он кому-нибудь пригодится в личных целях.

Демо пример

Вот так вот он выглядит в работе..

Demo тест

Скачать пример

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

Добавлен улучшенный тест 05.01.2017: Как сделать тест на javascript с ответами?

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

Как сделать тест на javascript на своем сайте — пример с исходным кодом + демо.: 32 комментария

  1. Axmed

    Спасибо огромное!

    1. Виталий Admin

      Всегда пожалуйста!

  2. Айдар

    Огромное спасибо за обширное пояснение, долго реально долго искал сайты где проще и доскональнально описано, но вот возник другой вопрос… к примеру мне нужно вывести не количество правильных ответов а к примеру процент правильных ответов

    1. Виталий Admin

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

  3. Нурбек

    Как вывести оценку хорошо очень хорошо, плохо и правильные ответы ключ?

    1. Виталий Admin

      Вместо: alert(‘У Вас ‘ + plus + ‘ правильных ответа!’); Можно написать так: if( plus > 1 ) alert(‘Плохо! У Вас ‘ + plus + ‘ правильных ответа!’); if( plus > 2 ) alert(‘Хорошо! У Вас ‘ + plus + ‘ правильных ответа!’); if( plus > 3 ) alert(‘Очень хорошо! У Вас ‘ + plus + ‘ правильных ответа!’);

  4. Atilla

    Спасибо огромное, все понятно! Но у меня тоже вопрос. Как создать тест с вводом ответа?

    1. Виталий Admin

      Всегда пожалуйста! Там имеются свои нюансы, в комментариях долго писать, возможно напишу отдельный урок по созданию теста уже на jquery (будет намного меньше кода) и с вводом ответа.

  5. Аружан

    if( plus > 1 ) alert(‘Плохо! У Вас ‘ + plus + ‘ правильных ответа!’); if( plus > 2 ) alert(‘Хорошо! У Вас ‘ + plus + ‘ правильных ответа!’); if( plus > 3 ) alert(‘Очень хорошо! У Вас ‘ + plus + ‘ правильных ответа!’); не выводить результаты document.getElementById(‘area’).style.display=’none'(может здесь изменять что-то?)

    1. Виталий Admin

      Нет, alert должен работать. Пробовали разное количество правильных ответов? При каком условии не выводится?

  6. Аружан

    Не запускается тест.Ответьте пожалуйста!!Очень важна!!

    1. Виталий Admin

      Скачайте исходные файлы и в коде поменяйте: Вместо: alert(‘У Вас ‘ + plus + ‘ правильных ответа!’); Написать: if( plus > 1 ) alert(‘Плохо! У Вас ‘ + plus + ‘ правильных ответа!’); if( plus > 2 ) alert(‘Хорошо! У Вас ‘ + plus + ‘ правильных ответа!’); if( plus > 3 ) alert(‘Очень хорошо! У Вас ‘ + plus + ‘ правильных ответа!’); В комментарии выше if был написан с большой буквы И, сейчас подправил, проверил – все работает.

  7. olga

    а как сделать таймер? чтоб засекалось время потраченное на ответы и выводилось в конце теста по всем вопросам?

    1. Виталий Admin

      Чтобы получить общее время, затраченное на текст, нужно: if(test_start == 0){ Заменить на: if(test_start == 0){ var my_time = 0; function sec() { my_time++; } setInterval(sec, 1000); И вместо: alert(‘У Вас ‘ + plus + ‘ правильных ответа!’); Напишите: alert(‘У Вас ‘ + plus + ‘ правильных ответа! Время ‘ + my_time); Чтобы получить время, затраченное на каждый вопрос, нужно создать массив, и записывать в него время, при каждом ответе.

  8. Аружан

    Большое спасибо!!!!!!

    1. Виталий Admin

      Пожалуйста

  9. Павел

    Здравствуйте, Виталий! Мне в качестве курсовой работы нужно сделать психологический тест состоящий из 20 вопросов и 4 вариантами ответов (часто, иногда, редко, никогда). Ответам присваиваются баллы (3,2,1,0) В конце тест считает количество баллов и в конце и выдает ответ, например: от 0 до 20 баллов – 1 ответ, от 20 до 40 – 2 ответ, от 40 до 60 – 3 ответ. Подскажите пожалуйста как это сделать?

    1. Виталий Admin

      Здравствуйте, Павел, подобный тест реализовать даже проще, чем тот, что приведен выше: 1. Выводите 4 кнопки: 2. При клике по каждый из кнопок срабатывает функция check, и передается параметр от 0 до 3. Вам нужно просто при каждом клике (их будет 20) складывать этот параметр в какую-нибудь переменную, пускай будет summ. По завершению получите сумму – конечное число баллов. 3. Чтобы сделать шкалу, используйте простые условия: По умолчанию будет: 1 ответ if( summ > 20) 2 ответ if( summ > 40) 3 ответ

  10. Тамаз

    Виталий, очень нужный пример Вы здесь выложили. Спасибо) Такой момент: Можно ли к каждому варианту ответа прикрепить фото? И как можно поменять фон? Заранее спасибо

    1. Виталий Admin

      Пожалуйста, сделать это можно по аналогии с изменением вариантов ответов, добавив картинки: В коде нужно добавить к вариантам ответом массив с картинками: //Массивы вариантов ответов (это уже есть) var number1 = [«Как дела»,»House»,»House»,»Природа»]; var number2 = [«Привет»,»Cat»,»Door»,»Родина»]; var number3 = [«Пока»,»Dog»,»Wall»,»Остров»]; var number4 = [«Дом»,»Tree»,»Tree»,»Планета»]; //Массивы вариантов картинок — Добавили! var images1 = [«Ссылка на 1ю картинку»,»на 2ю»,»на 3ю»,»на 4ю»]; var images2 = [«Ссылка на 1ю картинку»,»на 2ю»,»на 3ю»,»на 4ю»]; var images3 = [«Ссылка на 1ю картинку»,»на 2ю»,»на 3ю»,»на 4ю»]; var images4 = [«Ссылка на 1ю картинку»,»на 2ю»,»на 3ю»,»на 4ю»]; Чтобы менять картинки при каждом ответе, нужно дописать: //Это мы меняем варианты ответов (это уже есть) document.getElementById(‘option1’).innerHTML=number1[countQuest]; document.getElementById(‘option2’).innerHTML=number2[countQuest]; document.getElementById(‘option3’).innerHTML=number3[countQuest]; document.getElementById(‘option4’).innerHTML=number4[countQuest]; //Это мы меняем варианты картинок — Добавили! document.getElementById(‘img1’).src=images1[countQuest]; document.getElementById(‘img2’).src=images2[countQuest]; document.getElementById(‘img3’).src=images3[countQuest]; document.getElementById(‘img4’).src=images4[countQuest]; Набросал для примера, поэтому нужно перепроверить все, могут быть ошибки. Если вы про фон сайта, то это делается стилями, где указывается ссылка на изображение: body{background: url(‘/wp-content/uploads/2014/01/f.jpg’);}

  11. Aigerim

    Как сделать чтобы количество правильных ответов сохранилась в базе данных?

    1. Виталий Admin

      Для этого нужно использовать технологию AJAX, пример функции:

      Здесь будет ответ сервера

      На стороне сервера необходимо создать 1 sql запрос.

  12. Яна

    Здравствуйте, скажите как сделать так, чтобы при запуске теста вопросы меняли свой порядок случайным образом, то есть вопрос например 5, стал 1, 4, 2 и т.д. и ещё чтобы ответы в вопросе менялись, то есть то что было под буквой а, стало под буквой в … тоже случайным образом

  13. Максим

    Есть вопрос по этому тесту: возможно ли вывести список ответов пользователя с разным css правилосом на правильніе/не правильные ответы? Чувствую большие сложности в работе с массивами

  14. Просто пользователь

    Огромное спасибо, очень подробно и круто. Небольшое затруднение с тем, чтобы собрать результаты тестов всех прошедших тестирование, для этого нужно, чтобы каждый результат выгружался в текстовый файл, а затем отправлялся на нужную почту? Интересно как всё таки реализовать такую конструкцию. Подскажите, пожалуйста, если не затруднит.

  15. Андрей

    Здравствуйте, подскажите пожалуйста, как к тестам добавить иллюстрации? вы описали как добавить картинке к вариантам ответов, а как добавить картинки к вопросам?

    1. Виталий Admin

      Здравствуйте, для этого замените массив вопросов на такой вид: //Массив вопросов var questions = [‘Hello’,’Дом’,’Дерево’,’Homeland’]; То есть просто добавьте картинку сразу после вопроса, в примере выше я добавил картинку после вопроса “Hello”, стилями или отступами уже измените внешний вид как вам нужно. P.S. Заметьте, кавычки у элементов массива я заменил на одинарные, чтобы можно было вставить картинку

  16. Яна

    Здравствуйте! Подскажите пожалуйста, как сделать так, чтобы результат ответов был виден не в конце теста, а на каждом вопросе. А именно, чтобы в зависимости от правильности ответа кнопка окрашивалась в зеленый или красный цвет. Спасибо.

  17. Валерия

    Здравствуйте! Подскажите, как сделать так, чтобы кнопка начать сначала отображалась не все время, а только когда вопросы закончились. Спасибо.

    1. Виталий Admin

      Добрый день, переместите строчку: document.getElementById(‘end’).style.display=’inline’; И вставьте её сразу после строчки: alert(‘У Вас ‘ + plus + ‘ правильных ответа!’);

  18. Влад

    Здравствуйте, зачем нужна строчка test_start = 1; за что она отвечает? + если я в первой части кода уберу все вопросы и ответы кроме первых, а во второй не уберу, то тест все равно работает

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