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

Заказать у меня создание теста от 1000 рублей!

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

Заказать у меня создание теста от 1000 рублей!

Раздел: JavaScript с примерами

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

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

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

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

* Ваше имя:

Ваш e-mail:

*