In this unit, coders will work in groups to build a project using HTML, CSS, React. Their task is to build out the front-end for a Kahoot style question game that displays a question and the possible answers, allows a user to choose answer and determine whether they are right or wrong.
====
- In App.jsx, create a Question component.
- Render an instance of
<Question />
inside of<App />
. - Add props to
<Question />
with the text "Question goes here". - In
<App />
, add a variable to set the current question number to 0. - Replace "Question goes here" with the
question.text
field found in data for the first question.- HINT: Use the question number variable you just wrote.
- BONUS: Add styling to your app.
- In App.jsx, create a NextQuestion component.
- Write the JSX to display a button for the user to click for the next question. (It will not work yet.)
- Render an instance of
<NextQuestion />
inside of<App />
.
- In App.jsx, create an Answer component.
- Render an instance of
<Answer />
inside of<Question />
. - Add props to
<Answer />
with the text "Answer goes here".- Pass props for the answer choices into
<Question />
. - Use those props to render the Answer components inside
<Question />
to display the answer choices. X- [X] Refactor to use map to map over all answer choices.
- Pass props for the answer choices into
- Add state to
<App />
using theuseState
React hook to keep track of if the question is answered. - Add a button to the App component that updates state to
isAnswered
when clicked. - Set the state of
isAnswered
to display the correct answer choice.
Goal 1: Add functionality to your "Next Question" button so that it renders the next question when clicked.
- Add state to
<App />
using theuseState
React hook to keep track of the current question number.- Replace the current question number variable that you wrote in Day 1.
- Create a function that updates the state to the next question number.
- Make a prop on
<NextQuestion />
to pass the prop down to the button element to call that function when the button is clicked. - Check that every part of your question and answer updates to reflect the current question number.
- Reset the state of
isAnswered
when the Next Question button is clicked. - BONUS: Add conditional rendering to hide
<NextQuestion />
when there are no more next questions.
Goal 2: Add functionality so that when the user clicks on an answer choice, the correct answer appears.
- Inside the map function for the Answer components, add an event handler that updates the state of
isAnswered
to be the choice that the user clicks.- HINT: Use props to pass down the state from
<App />
. - HINT: Don't forget to pass your
onClick
down as a prop as well.
- HINT: Use props to pass down the state from
- Inside
<App />
(below state and above return), write a conditional that checks if the answer clicked is the correct answer.- Display text on the screen telling the user if their answer choice was correct.
- Display text on the screen telling the user what the correct answer was.
- HINT: To do this, you should create a variable and display that variable inside your return statement.
- BONUS: Use template literals instead of string concatenation.
- Create a new
.js
file inside the components folder for each of your components. - Move the code for your components into their new files.
- Add an export to each of your components.
- Import all of your components into the correct files.
- Make a timer that resets the game when the timer runs out.
- Make a counter that keeps track of how many times you've guessed the correct answer.
- Change the color of the answer buttons when the user guesses. For example turn the button with the correct answer to green.
- Make it a two player game.
- Anything else you want!