Квиз (Quiz) / опросник на ReactJS?

Конечно, возможно создать квиз (quiz) или опросник (poll) с использованием ReactJS. ReactJS - это JavaScript-библиотека, которая позволяет разрабатывать эффективные интерактивные пользовательские интерфейсы. Вместе с его компонентным подходом и виртуальным DOM, React облегчает создание и управление сложных приложений.

Для создания квиза на React, мы можем использовать компонентную архитектуру React. Каждый вопрос и варианты ответов могут быть представлены отдельными компонентами. Основной компонент квиза будет содержать массив с вопросами и их ответами, а также будет отслеживать текущий вопрос, ответы пользователя и результаты.

Вот пример кода для простого квиза на React:

import React, { useState } from 'react';

const Quiz = () => {
  const questions = [
    {
      question: 'What is the capital of France?',
      options: ['Paris', 'London', 'Berlin', 'Rome'],
      answer: 'Paris',
    },
    {
      question: 'What is the largest planet in our solar system?',
      options: ['Jupiter', 'Saturn', 'Neptune', 'Earth'],
      answer: 'Jupiter',
    },
    // ... more questions
  ];

  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [userAnswers, setUserAnswers] = useState([]);
  const [showResult, setShowResult] = useState(false);

  const handleAnswer = (answer) => {
    setUserAnswers([...userAnswers, answer]);

    if (currentQuestion + 1 < questions.length) {
      setCurrentQuestion(currentQuestion + 1);
    } else {
      setShowResult(true);
    }
  };

  const restartQuiz = () => {
    setCurrentQuestion(0);
    setUserAnswers([]);
    setShowResult(false);
  };

  return (
    <div>
      {showResult ? (
        <div>
          <h2>Quiz Result</h2>
          <ul>
            {questions.map((question, index) => (
              <li key={index}>
                {question.question} - {question.answer} -{' '}
                {userAnswers[index] === question.answer ? 'Correct' : 'Incorrect'}
              </li>
            ))}
          </ul>
          <button onClick={restartQuiz}>Restart Quiz</button>
        </div>
      ) : (
        <div>
          <h2>Question {currentQuestion + 1}</h2>
          <p>{questions[currentQuestion].question}</p>
          <ul>
            {questions[currentQuestion].options.map((option, index) => (
              <li key={index} onClick={() => handleAnswer(option)}>
                {option}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default Quiz;

В этом примере мы имеем массив вопросов questions, в котором каждый элемент представляет собой объект с вопросом, вариантами ответов и правильным ответом. С помощью хука useState мы отслеживаем текущий вопрос, ответы пользователя и статус отображения результатов.

Метод handleAnswer вызывается при выборе ответа пользователем. Он добавляет выбранный ответ в массив userAnswers, а затем проверяет, есть ли ещё вопросы. Если есть, он увеличивает currentQuestion на 1, иначе он показывает результаты, устанавливая значение showResult в true.

Верхнее условие showResult определяет, должны ли отображаться результаты или следующий вопрос. Если showResult равно true, мы отображаем результаты для каждого вопроса, а затем предлагаем пользователю возможность начать снова с помощью кнопки "Restart Quiz".

В итоге, этот простой пример демонстрирует возможность создания квиза на ReactJS. Вы можете добавить больше вопросов и настроить стили и поведение приложения по своему усмотрению.