Quiz App

Build a browser-based quiz application to test any knowledge

Start building, submit solution and get feedback from the community.
2Submit Solution·
5 upvotes10 upvotes

In this project, we will be making a browser based quiz. The app will present users with a series of multiple-choice questions and after each question, the app will provide immediate feedback on whether the selected answer is correct or incorrect.

Requirements

As a developer, feel free to come up with a JSON based quiz the questions as you see fit.

  • The user will be initially presented with a “start” button and some detail about the quiz
  • When the user presses start they’re presented with the first multiple choice question.
  • The questions are to be presented as cards with the answers being buttons on the card.
  • When the user selects an answer, the answer buttons are to turn red or green depending on the result. It should also show what the correct answer was.
  • If the user answers correctly, a score is to be incremented.
  • At the end of the quiz, the user is presented with a final score and all of the results.
  • Optionally add a timer of 1 minute to each question, if user doesn’t attempt the question in that time, it should skip to next question and score should be decremented by 1.

You can use any frontend framework such as React, Vue or Angular and some state management library to handle the state.


After finishing this project, you will have a good understanding of managing complex states and building an app of moderate complexity using any frontend framework.

Found a mistake? Help us improve.

Actively Maintained

We are always improving our content, adding new resources and adding features to enhance your learning experience.

Join the Community

roadmap.sh is the 7th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

Rank 7th  out of 28M!

302K

GitHub Stars

Star us on GitHub
Help us reach #1

+90k every month

+1.5M

Registered Users

Register yourself
Commit to your growth

+2k every month

30K

Discord Members

Join on Discord
Join the community

Roadmaps Best Practices Guides Videos FAQs YouTube

roadmap.sh by @kamrify

Community created roadmaps, best practices, projects, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh · Terms · Privacy · Advertise ·

ThewNewStack

The top DevOps resource for Kubernetes, cloud-native computing, and large-scale development and deployment.