Quizzical 🧩

Create a Trivia Game using ReactJS

Live Preview

About ℹ️

Quizzical is a Trivia game implemented in ReactJS by Harmeet Matharoo and Habib ur rehman Bhatti. While creating this project I learned about Event Listeners in React, React State, Conditional Rendering in React, React Hooks(useEffect), etc. A player is given 5 random questions with 4 choices each. Trivia questions are retrieved from Open Trivia Database API. A participant can validate their answers and can play as many times as they want. Have Fun 😄. After creating the project, it was deployed to GitHub Pages 🐦 Feel free to reach me onTwitter 👾

Technologies Used 💻

         

Includes the following features/components ⚙️

- Open Trivia Database API
- ReactJS
- create-react-app
- Figma Design Template
- Event Listeners in React
- React State
- Conditional Rendering in React
- React Hooks(useEffect)
- github-pages

Usage 🤓

### Clone the repository using GitHub CLI
gh repo clone hmjatt/Quizzical

### Go to the quizzical folder
cd quizzical

### Install Dependencies
npm install

### Starts the Development Server(App will open in a new window)
npm start

Steps I followed to complete this project 🪜

1. Initialize Project 🎍

• Initialize the project using npx create-react-app quizzical which will create a complete React App pre-configured and pre-installed with all the dependencies.
• Import Work Sans font from google fonts and apply it to the App component.

2. Organize Project 🗄️

• Create a components folder for custom components inside the src directory.
• Create a styles folder inside the src directory and move .css files inside it.

3. Clean Directory🧹

• Delete unnecessary files.
• Create a tests folder inside the src directory and move .test.js files inside it.
• Delete unnecessary code.

4. App Component 🧩

• Create an App component and basic JSX elements for it.

• Add appropriate classNames to elements in the App component.

• Import App component inside index.js.

• Add styles to body inside index.css.

• Style App component by editing App.css. And also add blob elements to App component

  Output ->

5. Quiz Component 🧩

• Create a Quiz component, basic JSX elements for it and import it in App component.

6. Footer Component 🧩

• Create Footer component and basic JSX elements for it.
• Import Footer component inside App component.
• Style Footer component.

7. Conditionally Render Quiz Component 🆗

• When Start Quiz button is clicked, conditionally render Quiz component.

8. Add Psuedo Elements to Quiz Component 💭

• Add elements to Quiz component.
• Style elements in Quiz component.
• Make it responsive.

9. Allow multiple selection of options ✔️

• Change code inside Quiz component, so that multiple options can be selected for a playthrough but only one option to be selected per question. Can be easily done by converting buttons to radio inputs and applying some styles.

  Output ->

10. Give credit where it's due 🤝

• Add link to Habib ur rehman Bhatti's GitHub in footer as he finished points #11 and #12. Thanks friend 😄 and looking forward to colaborate with you in future projects, learned a lot while doing this project.

11. Populate Quiz Component with Data from Trivia API 📇

• Fetch data from Trivia API.
• Replace psuedo questions with the fetched questions.
• Replace psuedo answers with the fetched answers.
• Add loading animation while fetching data.
• Randomize the order of answers.

12. Add logics to Quiz Component 🧠

• Add logic to check if answer is correct or not.

• Save the score in a variable.

• Display the score in when the Submit button is clicked.

• Replace the Submit button with Play Again button when the Submit button is clicked.

• Change background color if the answer is correct or wrong.

• Render the score component.

• Add logic to reset the score when the Play Again button is clicked.

  Output ->

13. Make App Responsive 📱

• Change Absolute units to Relative.
• Make App responsive for mobile by adding media query. 😃

14. Prepare for Deployment 🪢

• Delete unnecessary files from directory and format code with Prettier.
• Test for Responsiveness and make changes if need be.
• Add links to Live Preview and screenshots.

15. Deploy 📤

• Use Official Documentation(link) to push the project to GitHub Pages 🎆🎆🎆

Future Changes ♾️

• Allow players to select category of trivia questions.
• Allow players to select difficulty of trivia questions.
• Divide Quiz Component into smaller components.
• Use Styled Components and CSS Modules to tidy up CSS.

Links to content that helped me with this project 🔗

1. The Odin Project

   • React Introduction
   • React State & Props
   • Handle Inputs And Render Lists

2. Figma Design

   • Quizzical

3. Scrimba

   • Learn React

4. React Official Documentation

   • Mouse Events in React
   • State and Lifecycle
   • Handling Events
   • Conditional Rendering
   • Lists and Keys
   • Forms
   • Using the State Hook
   • Using the Effect Hook

5. Trivia API

   • Official Website

Quote ✒️

“All parts should go together without forcing.  You must remember that the parts you are reassembling were disassembled by you.  Therefore, if you can’t get them together again, there must be a reason.  By all means, do not use a hammer."
— IBM Manual, 1925

💭✅🍂