Тест на javascript для сайта


Как создать тест Приветствую вас дорогие друзья! В сегодняшнем выпуске мы рассмотрим тест, написанный на javascript! Совсем недавно я рассказывал как проверить билетик - счастливый или нет, сегодня мы создадим простецкий тест и как всегда в конце статьи будет Demo пример. Итак, давайте сначала разберем структуру нашего теста..

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

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

Для примера, я составил тест из четырех вопросов, а значит, что должно быть и 4 варианта ответов.. Итого - потребуется: 4 вопроса 4 * 4 = 16 вариантов возможных ответов 4 варианта правильных ответов

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

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

Массив questions В данном массиве содержатся вопросы (в нашем примере - это слова на русском либо на английском языке). Массивы number1 (2,3,4) Четыре данных массива предназначены для хранения вариантов ответа.

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

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

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

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

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

<script type="text/javascript">

	var countQuest = 0;
	var plus = 0;
	var test_start = 0;
	
	function check(num){
	
		if(num == 4){ 
			
			document.getElementById('area').style.display='block'; //
			document.getElementById('start').style.display='none';
			document.getElementById('end').style.display='inline';

			if(test_start == 0){
			
					//Массив вопросов
				var questions = ["Hello","Дом","Дерево","Homeland"];

					//Массивы вариантов ответов
				var number1 = ["Как дела","House","House"];	
				var number2 = ["Привет","Cat","Door"];	
				var number3 = ["Пока","Dog","Wall"];	
				var number4 = ["Дом","Tree","Tree"];

				document.getElementById('question').innerHTML=questions[countQuest];
				
				document.getElementById('option1').innerHTML=number1[countQuest];
				document.getElementById('option2').innerHTML=number2[countQuest];
				document.getElementById('option3').innerHTML=number3[countQuest];
				document.getElementById('option4').innerHTML=number4[countQuest];
				
					//Массив правильных ответов
				var answer = [1,0,3,1];
				
				test_start = 1;	
			}
		}
		else{
					//Массив вопросов
			var questions = ["Hello","Дом","Дерево","Homeland"];
			
				//Массивы вариантов ответов
			var number1 = ["Как дела","House","House","Природа"];	
			var number2 = ["Привет","Cat","Door","Родина"];	
			var number3 = ["Пока","Dog","Wall","Остров"];	
			var number4 = ["Дом","Tree","Tree","Планета"];	
			
				//Массив правильных ответов
			var answer = [1,0,3,1];
			
			if(num == answer[countQuest]) plus++;
			
			if(questions.length - 1> countQuest){

				countQuest++;
				
				document.getElementById('question').innerHTML=questions[countQuest];
			
				document.getElementById('option1').innerHTML=number1[countQuest];
				document.getElementById('option2').innerHTML=number2[countQuest];
				document.getElementById('option3').innerHTML=number3[countQuest];
				document.getElementById('option4').innerHTML=number4[countQuest];

			}
			else{ 
			
				document.getElementById('area').style.display='none';
				alert('У Вас ' + plus + ' правильных ответа!');
			}
		}
	}
	
</script>
Итак,  разберем первые четыре переменные: 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 с ответами?


Раздел: Программирование

Дата последнего изменения: 2019-01-05 21:15:28

Просмотров: 19965

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Видео галерея на JavaScript!
Падающий мяч на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript

Оставить комментарий

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*