Создание интерактивного тестового приложения

Условие

Разработайте небольшое приложение‑тест, в котором:

• Пользователь видит формулировку вопроса и может выбрать один из предложенных вариантов ответа.
• После выбора и нажатия кнопки «Далее» отображается следующий вопрос.
• По завершении всех вопросов выводится сообщение вида «Вы ответили верно на N вопросов из N» и появляется кнопка «Начать заново», позволяющая пройти тест повторно.

function App() {
  const questionsData = [
    {
      question: "Сколько человек на Земле?",
      answer: 3,
      variants: [
        { name: "6 миллиардов", value: 1 },
        { name: "7 миллиардов", value: 2 },
        { name: "8 миллиардов", value: 3 },
      ],
    },
    {
      question: "Сколько частей света?",
      answer: 2,
      variants: [
        { name: "5", value: 1 },
        { name: "6", value: 2 },
        { name: "7", value: 3 },
      ],
    },
    {
      question: "Сколько океанов на Земле?",
      answer: 1,
      variants: [
        { name: "5", value: 1 },
        { name: "6", value: 2 },
        { name: "7", value: 3 },
      ],
    },
  ];
}

Ответ

Храните индекс вопроса, выбранный value и число правильных ответов. Кнопка «Далее» доступна только после выбора; после последнего вопроса покажите итог и сброс состояния.

function Quiz({ questions }) {
  const [step, setStep] = React.useState(0);
  const [selected, setSelected] = React.useState(null);
  const [score, setScore] = React.useState(0);
  if (step === questions.length) return <>
    <p>Вы ответили верно на {score} вопросов из {questions.length}</p>
    <button onClick={() => { setStep(0); setSelected(null); setScore(0); }}>Начать заново</button>
  </>;
  const question = questions[step];
  const next = () => {
    if (selected === null) return;
    setScore(value => value + Number(selected === question.answer));
    setStep(value => value + 1);
    setSelected(null);
  };
  return <section>
    <h2>{question.question}</h2>
    {question.variants.map(option => <label key={option.value}>
      <input type="radio" name="answer" checked={selected === option.value} onChange={() => setSelected(option.value)} />{option.name}
    </label>)}
    <button disabled={selected === null} onClick={next}>Далее</button>
  </section>;
}

Передайте questionsData как questions и импортируйте React. Числовые answer трактуются как value, а не индекс массива. Актуальность самих фактических вопросов проверяется отдельно; код использует ключи ответов из предоставленного набора.