Как сделать тест на javascript с ответами?


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

Что умеет тест?

В этом уроке мы создадим тест со следующими возможностями:
  • Можно будет выбрать вариант ответа (1 из 4);
  • После выбора ответа, пользователь будет знать - правильно ли он ответил на данный вопрос;
  • После прохождения теста, будет выведено количество и процент правильных ответов;
  • Будет засекаться время, потраченное на прохождение теста;
  • После теста, будет выводиться оценка (плохо, хорошо, отлично).
Как и в других подобных уроках по javascript, в самом низу будет демо пример и возможность скачать все исходный файлы урока! Итак, давайте начнем!  

Хранение данных

В первую очередь нам нужно подумать о том, где мы будет хранить следующие данные:
  1. вопросы
  2. варианты ответов
  3. правильные ответы
Самый идеальный вариант - это хранить все данные в одном массиве, это удобно тем, что для добавления (удаления, изменения) вопроса достаточно сделать правку в одном месте! Будем использовать двумерный массив, индекс этого массива будет определять номер вопроса, а каждый элемент массива - это еще один массив, содержащий в себе вопрос, варианты ответов и номер правильного ответа (всего 6 элементов). Давайте посмотрим, как это будет выглядеть:
	//Массив вопросов и ответа
	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%: отлично!
В принципе, это основные моменты, на которые стоит обратить внимание, эти значения (и условия) вы сможете изменить под свои нужны. Теперь вы можете проверить тест на реальном примере, а также скачать все исходные файлы данного урока (все в одном файле)!

Demo пример

Скачать исходники

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


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

Дата последнего изменения: 2017-01-05 00:11:33

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

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

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

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

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

* Ваше имя:

Ваш e-mail:

*