From 9948873866c6b17dcf8014bbf6c767ef74c86dd3 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Sun, 24 Nov 2024 10:14:22 +0500 Subject: [PATCH] Add project idea for quiz app --- src/data/projects/pomodoro-timer.md | 2 +- src/data/projects/quiz-app.md | 43 +++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 src/data/projects/quiz-app.md diff --git a/src/data/projects/pomodoro-timer.md b/src/data/projects/pomodoro-timer.md index 88d2db60d..6c1a67f8f 100644 --- a/src/data/projects/pomodoro-timer.md +++ b/src/data/projects/pomodoro-timer.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' diff --git a/src/data/projects/quiz-app.md b/src/data/projects/quiz-app.md new file mode 100644 index 000000000..46b135f9f --- /dev/null +++ b/src/data/projects/quiz-app.md @@ -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. \ No newline at end of file