/quizzical

A trivia app using React, part of the Frontend Developer Path.

Primary LanguageJavaScript

Quizzical

A trivia app that tests your knowledge in mythology. The UI is built with React and fetches fresh mythology trivia questions and answers data from the Open Trivia Database API.

welcome

loading

questions

correct answers

In This Document:

  1. Application URL
  2. Demo and Code Walkthrough
  3. How to Use the Application
  4. Technologies Used
  5. Future Feature Sets
  6. Stumbling and Learning Points

Application URL

https://quizzical-shant.netlify.app/

Demo and Code Walkthrough

demo

How to Use the Application

  1. Player browses to the app's welcome page.
  2. App displays 5 trivia questions each with 4 multiple choice answers.
  3. Player clicks on the answer to each questions.
  4. Player clicks on Check Answers.
  5. Correct answers should get highlighted, and a total score and time taken to answer should display.
  6. Player can click on Play Again to restart the game.

Technologies Used

  1. React.js
  2. Open Trivia Database API

Future Feature Sets:

  1. Enable the player to choose the number of questions and the level of difficulty.
  2. Enable the player to choose questions category and change the app theme accordingly.

Stumbling and Learning Points:

  • Figuring out how to display the loading image at least for a set amount of time, and at most for the time it takes to load the data.
const elapsedTime = Date.now() - startTime;
const delay = Math.max(minQuestionsLoadingDelay - elapsedTime, 0);

Up