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

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

Приветствую вас дорогие друзья! В сегодняшнем выпуске мы рассмотрим тест, написанный на 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 комментария

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