/flashcard-quiz

Flashcard Quiz is a web application designed to help users practice and test their knowledge on various topics using flashcards. It offers a user-friendly interface and multiple-choice answer selection.

Primary LanguageJavaScriptMIT LicenseMIT

Flashcard Quiz Application

Introduction

Flashcard Quiz is an interactive web application designed to help users practice and test their knowledge on various topics. With multiple-choice answer selection and minor animations, users can engage in an enjoyable learning experience. The app utilizes local storage for certain functionalities and provides a seamless quiz-taking process. Flashcard quiz takes your name to only save your quiz progress and show you the results related only to you.

You can remove your added names at any time.

Features

  • User Authentication: Users can enter their names to start taking quizzes.
  • Multi-User System: Users can add as many names (account) as they want upon signing in, this allows them to maintain a personalized experience and keep track of their progress for each account separately.
  • Topic Selection: Choose from multiple topics to begin the quiz.
  • Quiz Interface: Quiz view presents one question at a time with navigation buttons for moving to the next or previous question.
  • Answer Selection: Select the correct answer from the multiple-choice options provided.
  • Timer: Each quiz has a 10-minute timer to keep track of the duration. If time runs out, only the correct answers amongst the attempted questions are considered for the result.
  • Blur Effect: After completing a quiz, the quiz interface is blurred, and the result is displayed.
  • Quiz Retake: Users can retake quizzes as many times as they want.
  • Local Storage: Utilizes local storage for storing user data and quiz results.
  • User Friendly: Flashcard quiz saves all of your names for you, so whenever you need to sign in with a specific name, you can do so.
  • The UX/UI: The UX/UI of the app is eye catching, and the app is responsive for every screen above 300 pixels of width size.

Usage

  1. User Authentication: Enter your name to start taking quizzes.
  2. Topic Selection: Choose a topic from the available options to begin the quiz.
  3. Quiz Interface: Navigate through the quiz using the next and previous buttons to move between questions.
  4. Answer Selection: Select the correct answer from the multiple-choice options provided for each question.
  5. Timer: Keep track of the remaining time during the quiz. If time runs out, only correct answers amongst attempted questions are considered.
  6. Quiz Completion: After completing the quiz, the interface is blurred, and the result is shown.
  7. Retake Quiz: Users can retake quizzes by navigating back to the topic selection page.

Installation

  1. Clone or download the Flashcard Quiz repository from GitHub
  2. Navigate to the project directory.
  3. Run npm install to install dependencies.
  4. Run npm run dev to start the development server.
  5. Open the provided URL in a web browser to access the application.

Live Demo

Check out the live version of the project here

Support

For any inquiries or support requests, please reach out to me through our GitHub repository.

For direct email inquiries, contact: m.aitisamyaseen@gmail.com.

License

This project is licensed under the MIT License. You are free to use and modify the code according to your requirements.

Happy coding!