computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.5 KiB
45 lines
1.5 KiB
--- |
|
title: 'Quizz' |
|
description: 'Build a browser-based quizz.' |
|
isNew: false |
|
sort: 1 |
|
difficulty: 'intermediate' |
|
nature: 'Web App' |
|
skills: |
|
- 'Programming Language' |
|
- 'Browser' |
|
- 'Web App' |
|
- 'JavaScript' |
|
- 'HMTL' |
|
- 'CSS' |
|
seo: |
|
title: 'Build a Web-based Quiz.' |
|
description: 'Build a web-based quizz with a timer and high scores.' |
|
keywords: |
|
- 'html' |
|
- 'css' |
|
- 'javascript' |
|
- 'frontend project idea' |
|
- 'quiz' |
|
roadmapIds: |
|
- 'frontend' |
|
--- |
|
|
|
In this project, we will be making a browser based quizz. 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 the developer, feel free to define the questions as you see fit. |
|
|
|
- The user will be initially present with a "start" button. |
|
- 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. |
|
- If the user answers correctly, a score is to be incremented. |
|
- At the end of the quizz, the user is presented with a final score and all of the results. |
|
|
|
## Stretch Goals |
|
|
|
- Add a time limit to each question, skipping the question and give a 0 score if the limit is hit. |
|
- Add the feature of user inputted answers for more complexity. |
|
- Allow the user to share their results on social media. |