Как создать тест или опрос на JavaScript (вариант 2)

Продолжаем создавать тесты на JavaScript и сегодня рассмотрим ещё один замечательный код для создания простого одностраничного или многостраничного теста с подсветкой правильного и неправильного ответа, а также выводом результатов тестирования.

Скачать исходники для статьи можно ниже

Будем создавать вот такой тест/опрос/викторину:

Несколько вещей, чтобы знать, прежде чем начать:

– Для создания теста будем использовать фронтенд код, что означает, что любой, кто знает, как просматривать исходный код страницы, может найти ответы. Для серьезных викторин данные должны обрабатываться через серверную часть, что выходит за рамки этой статьи.
– Код в этой статье использует современный синтаксис JavaScript (ES6+), что означает, что он не будет совместим с любыми версиями Internet Explorer. – Тем не менее, он будет работать просто отлично на современных браузерах.

Вот код Javascript теста:

Скачать готовый код Javascript теста можно – здесь.

1. HTML код:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Simple JavaScript Quiz  (No Pagination)</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div id="quiz"></div>
<button id="submit">Получить результат теста</button>
<div id="results"></div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

В данном коде можно переименовать кнопку “Получить результат теста”.

2. JavaScript код:

(function(){
  function buildQuiz(){
    // variable to store the HTML output
    const output = [];

    // for each question...
    myQuestions.forEach(
      (currentQuestion, questionNumber) => {

        // variable to store the list of possible answers
        const answers = [];

        // and for each available answer...
        for(letter in currentQuestion.answers){

          // ...add an HTML radio button
          answers.push(
            `<label>
              <input type="radio" name="question${questionNumber}" value="${letter}">
              ${letter} :
              ${currentQuestion.answers[letter]}
            </label>`
          );
        }

        // add this question and its answers to the output
        output.push(
          `<div class="question"> ${currentQuestion.question} </div>
          <div class="answers"> ${answers.join('')} </div>`
        );
      }
    );

    // finally combine our output list into one string of HTML and put it on the page
    quizContainer.innerHTML = output.join('');
  }

  function showResults(){

    // gather answer containers from our quiz
    const answerContainers = quizContainer.querySelectorAll('.answers');

    // keep track of user's answers
    let numCorrect = 0;

    // for each question...
    myQuestions.forEach( (currentQuestion, questionNumber) => {

      // find selected answer
      const answerContainer = answerContainers[questionNumber];
      const selector = `input[name=question${questionNumber}]:checked`;
      const userAnswer = (answerContainer.querySelector(selector) || {}).value;

      // if answer is correct
      if(userAnswer === currentQuestion.correctAnswer){
        // add to the number of correct answers
        numCorrect++;

        // color the answers green
        answerContainers[questionNumber].style.color = 'lightgreen';
      }
      // if answer is wrong or blank
      else{
        // color the answers red
        answerContainers[questionNumber].style.color = 'red';
      }
    });

    // show number of correct answers out of total
    resultsContainer.innerHTML = `Правильных ответов ${numCorrect} из ${myQuestions.length}`;
  }

  const quizContainer = document.getElementById('quiz');
  const resultsContainer = document.getElementById('results');
  const submitButton = document.getElementById('submit');
  const myQuestions = [
    {
      question: "Сколько будет 5+6=?",
      answers: {
        a: "12",
        b: "16",
        c: "11"
      },
      correctAnswer: "c"
    },
    {
      question: "Какова температура замерзания воды??",
      answers: {
        a: "-5 градусов",
        b: "+1 градусов",
        c: "0 градусов"
      },
      correctAnswer: "c"
    },
    {
      question: "Прямоугольник у которого все стороны равны называется?",
      answers: {
        a: "Ромб",
        b: "Треугольник",
        c: "Куб",
        d: "Квадрат"
      },
      correctAnswer: "d"
    }
  ];

  // Kick things off
  buildQuiz();

  // Event listeners
  submitButton.addEventListener('click', showResults);
})();

В данном коде можно добавить/удалить/изменить названия вопросов и ответов, а также указать правильный ответ на нужный вопрос (параметр “correctAnswer”).

3. CSS код:

body{
	font-size: 20px;
	font-family: sans-serif;
	color: #333;
}
.question{
	font-weight: 600;
}
.answers {
  margin-bottom: 20px;
}
.answers label{
  display: block;
}
#submit{
	font-family: sans-serif;
	font-size: 20px;
	background-color: #279;
	color: #fff;
	border: 0px;
	border-radius: 3px;
	padding: 20px;
	cursor: pointer;
	margin-bottom: 20px;
}
#submit:hover{
	background-color: #38a;
}

Здесь можно поменять дизайн теста, изменив CSS стили.

Теперь разберемся как можно вставить данный тест на свой сайт:

Самый простой способ – это просто закачать папку с тестом в корневой каталог вашего сайта.

Скачиваем zip архив Javascript теста с моего сайта – здесь.

Распаковываем zip архив и получаем папку с названием dist.

Теперь закачиваем данную папку на сайт через ftp-клиент (FileZilla и др.) или через сайт хостинга.

В данном примере покажу на примере сайта хостинга:

Заходим в Файловый менеджер или FTP менеджер на сайте хостинга:

или

Переходим в корневую папку, на wordpress сайтах в ней лежат следующие папки:
wp-admin
wp-content
wp-includes

И закачиваем в корневую папку сайта нашу папку dist, в которой находятся файлы Javascript теста (можно сначала создать папку dist в корневой папке сайта, а потом закачать в нее файл, которые в ней находятся):