parent
d327a99dea
commit
595d3e4199
2 changed files with 44 additions and 1 deletions
@ -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…
Reference in new issue