МиниТест на 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 подошел к концу, желаю вам удачи и до скорых встреч!


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

  1. Axmed пишет:

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

  2. Айдар пишет:

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

  3. Нурбек пишет:

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

    • Вместо:

      alert('У Вас ' + plus + ' правильных ответа!');

      Можно написать так:

      
      if( plus  > 1 ) alert('Плохо! У Вас ' + plus + ' правильных ответа!');
      if( plus  > 2 ) alert('Хорошо! У Вас ' + plus + ' правильных ответа!');
      if( plus  > 3 ) alert('Очень хорошо! У Вас ' + plus + ' правильных ответа!');
      
      
  4. Atilla пишет:

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

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

  5. Аружан пишет:

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

  6. Аружан пишет:

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

    • Скачайте исходные файлы и в коде поменяйте:

      Вместо:

      alert('У Вас ' + plus + ' правильных ответа!');

      Написать:

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

      В комментарии выше if был написан с большой буквы И, сейчас подправил, проверил – все работает.

  7. olga пишет:

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

    • Чтобы получить общее время, затраченное на текст, нужно:

      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. Аружан пишет:

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

  9. Павел пишет:

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

    • Здравствуйте, Павел, подобный тест реализовать даже проще, чем тот, что приведен выше:

      1. Выводите 4 кнопки:

      <button onclick="check(0)" class="myButton" id="option1">часто</button>
      
      <button onclick="check(1)" class="myButton" id="option2">иногда</button>
      
      <button onclick="check(2)" class="myButton" id="option3">редко</button>
      
      <button onclick="check(3)" class="myButton" id="option4">никогда</button>
      

      2. При клике по каждый из кнопок срабатывает функция check, и передается параметр от 0 до 3. Вам нужно просто при каждом клике (их будет 20) складывать этот параметр в какую-нибудь переменную, пускай будет summ.

      По завершению получите сумму – конечное число баллов.

      3. Чтобы сделать шкалу, используйте простые условия:

      По умолчанию будет: 1 ответ

      if( summ > 20) 2 ответ
      if( summ > 40) 3 ответ
      
  10. Тамаз пишет:

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

    • Пожалуйста, сделать это можно по аналогии с изменением вариантов ответов, добавив картинки:

      			
      <button onclick="check(0)" class="myButton" id="option1">Как дела</button>
      <img src="ссылка на картинку" id="img1">
      				
      <button onclick="check(1)" class="myButton" id="option2">Привет</button>
      <img src="ссылка на картинку" id="img2">
      				
      <button onclick="check(2)" class="myButton" id="option3">Пока</button>
      <img src="ссылка на картинку" id="img3">
      				
      <button onclick="check(3)" class="myButton" id="option4">Дом</button>
      <img src="ссылка на картинку" id="img4">
      

      В коде нужно добавить к вариантам ответом массив с картинками:

                      //Массивы вариантов ответов (это уже есть)
                  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('http://sergey-oganesyan.ru/wp-content/uploads/2014/01/f.jpg');}
      
  11. Aigerim пишет:

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

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

      <input value="Кнопка!" onclick="vote()" type="button" />
      <div id="vote_status">Здесь будет ответ сервера</div>
      <script type="text/javascript">
      // javascript-код голосования из примера
      function vote() {
      	// (1) создать объект для запроса к серверу
      	var req = getXmlHttp()  
             
              // (2)
      	// span рядом с кнопкой
      	// в нем будем отображать ход выполнения
      	var statusElem = document.getElementById('vote_status') 
      	
      	req.onreadystatechange = function() {  
              // onreadystatechange активируется при получении ответа сервера
      
      		if (req.readyState == 4) { 
                  // если запрос закончил выполняться
      
      			statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)
      
      			if(req.status == 200) { 
                       // если статус 200 (ОК) - выдать ответ пользователю
      				alert("Ответ сервера: "+req.responseText);
      			}
      			// тут можно добавить else с обработкой ошибок запроса
      		}
      
      	}
      
             // (3) задать адрес подключения
      	req.open('GET', '/ajax_intro/vote.php', true);  
      
      	// объект запроса подготовлен: указан адрес и создана функция onreadystatechange
      	// для обработки ответа сервера
      	 
              // (4)
      	req.send(null);  // отослать запрос
        
              // (5)
      	statusElem.innerHTML = 'Ожидаю ответа сервера...' 
      }
      </script>
      

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

  12. Яна пишет:

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

  13. Максим пишет:

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

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

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

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

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>