Skip to content

mgirma/trivia

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

75 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Trivia App Starter Code!

Project Description

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.

====

Day 1: React Components and props

Goal 1: Render a question from sample_data.json on the screen.

  • 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.

Day 1.0 goal

Goal 2: Render a "Next Question" button on the screen.

  • 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 />.

Day 1.5 goal

Day 2: Nested components and state

Goal 1: Render the answer choices from sample_data.json on the screen.

  • 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.

Day 2.0 goal

Goal 2: Render a button on the screen that reveals the correct answer when clicked.

  • Add state to <App /> using the useState 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.

Day 2.5 goal - unanswered >Day 2.5 goal - answered

Day 3: Event handlers

Goal 1: Add functionality to your "Next Question" button so that it renders the next question when clicked.

  • Add state to <App /> using the useState 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.

Day 3.0 goal >Day 3.0 with bonus

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.
  • 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.

Goal 3: Sort your Trivia app into separate files and import/export the components.

  • 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.

Day 3.5 correct >Day 3.5 wrong

Extensions!

  • 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!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 58.1%
  • HTML 38.2%
  • CSS 3.7%