Lord of the Rings Quote Quiz

Try to guess which character said the quote. Using this api: https://the-one-api.dev/

React Component Tree

• App
  • Score
  • Quiz
    • Quote
    • MultipleChoice
      • Choice

Components

---

App

state

• movie data
• character data
• quote data

behavior

• fetch movie, character, and quote data from the api

---

Score

state

props

behavior

---

Quiz

state

• current quote
• boolean value for if the quiz is in progress

props

• quote data
• movie data
• character data

behavior

• function that selects a random quote from the quote data
• function that selects 3 random characters, that are distinct from the character that said the current quote
• if the quiz is in progress, display a Quote and MultipleChoice
• if the quiz is not in progress, display a Quote and the correct choice, and a button to get a new quote

---

Quote

props

• the current quote to display

behavior

• display the quote (p)

---

MultipleChoice

state

props

• array of 4 character objects (which have the properties name, and whether they are the right answer)

behavior

• display 4 Choice components in a random order

---

Choice

state

props

• the character's name
• whether it is right answer, as a boolean value

behavior

• render a choice for the character (button)
• on click, set the Quiz's in progress state to false

---