Add project idea for quiz app

pull/7780/head
Kamran Ahmed 4 days ago
parent 67d8fcccb1
commit 9948873866
  1. 2
      src/data/projects/pomodoro-timer.md
  2. 43
      src/data/projects/quiz-app.md

@ -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'

@ -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.
Loading…
Cancel
Save