A Question and Its Answers

Time for another project! This checkpoint puts state, events and conditions to work, together with everything you learned before them. As in the previous checkpoint, the instructions say what the page should do, and how you write it is up to you.

The project. You're building a quiz game about animals. The app asks a question, the player clicks one of the answers, and the app says whether it was right. Over three exercises, you'll show a question and check the answer, then count the score and move on to the next question, and finally end the game with the result and a button to play again.

The files. The questions are in questions.js, an array of objects with the question's text, its answers and the correct one. App.jsx already imports them: questions[0] is the first question. style.css has styles for the classes named below.

The task. Show the first question: its text in an h2, and below it, each of its answers as a button, in the order of the array. Put the buttons in a div with the class answers.

When the player clicks an answer, show Right! in a paragraph with the class feedback if it's the correct one, and Wrong! The answer is 8. if it isn't, with the correct answer instead of 8. Then the player can't change their mind: disable all the answer buttons.

A tip: what changes when the player clicks is which answer they picked. Keep that in state, starting as null, for nothing picked yet. Whether the feedback shows, what it says and whether the buttons are disabled can all be worked out from it while rendering.