mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-01 06:50:26 +02:00
Add project idea for quiz app
This commit is contained in:
@@ -4,7 +4,7 @@ description: 'Create a pomodoro tracker application for productivity'
|
||||
isNew: true
|
||||
sort: 28
|
||||
difficulty: 'intermediate'
|
||||
nature: 'Networking'
|
||||
nature: 'Frameworks'
|
||||
skills:
|
||||
- 'HTML'
|
||||
- 'CSS'
|
||||
|
43
src/data/projects/quiz-app.md
Normal file
43
src/data/projects/quiz-app.md
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: 'Quiz App'
|
||||
description: 'Build a browser-based quiz application to test any knowledge'
|
||||
isNew: true
|
||||
sort: 29
|
||||
difficulty: 'intermediate'
|
||||
nature: 'Frameworks'
|
||||
skills:
|
||||
- 'HTML'
|
||||
- 'CSS'
|
||||
- 'JavaScript'
|
||||
- 'Frameworks'
|
||||
seo:
|
||||
title: 'Quiz App'
|
||||
description: 'Build a browser-based quiz application to test any knowledge'
|
||||
keywords:
|
||||
- 'frontend project'
|
||||
- 'frontend frameworks'
|
||||
- 'javascript'
|
||||
- 'frontend project idea'
|
||||
roadmapIds:
|
||||
- 'frontend'
|
||||
---
|
||||
|
||||
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.
|
Reference in New Issue
Block a user