Вопрос и варианты ответа

Время для ещё одного проекта! В этом мини-проекте в дело идут состояние, события и условия, а вместе с ними всё, что вы узнали раньше. Как и в предыдущем мини-проекте, задание говорит, что должна делать страница, а как это написать — решать вам.

Проект. Вы делаете игру-викторину о животных. Приложение задаёт вопрос, игрок нажимает на один из вариантов ответа, и приложение говорит, верно ли он ответил. За три упражнения вы покажете вопрос и проверите ответ, затем посчитаете очки и перейдёте к следующему вопросу, а в конце завершите игру результатом и кнопкой, которая начинает всё заново.

Файлы. Вопросы лежат в questions.js: это массив объектов с текстом вопроса text, вариантами ответа answers и правильным ответом correct. App.jsx уже импортирует их: questions[0] — первый вопрос. В style.css есть стили для классов, названных ниже.

Задача. Покажите первый вопрос: его текст в h2, а под ним каждый вариант ответа в виде кнопки, в том порядке, в каком они лежат в массиве. Поместите кнопки в div с классом answers.

Когда игрок нажимает на ответ, покажите в абзаце с классом feedback текст Верно!, если ответ правильный, и Неверно! Правильный ответ: 8., если нет, — вместо 8 подставьте правильный ответ. После этого игрок уже не может передумать: отключите все кнопки с ответами.

Подсказка: при нажатии меняется то, какой ответ выбрал игрок. Храните это в состоянии, сначала со значением null: «пока ничего не выбрано». Показывать ли сообщение, что в нём написано и отключены ли кнопки — всё это можно вычислить из состояния прямо при отрисовке.