My First React Project
This is a simple quiz application built with React. It presents a series of multiple-choice questions with a timer, tracks the user's score, and displays the results at the end. The quiz also provides a feature to review the answered questions and their correctness.
- Quiz Presentation: Displays questions with multiple-choice options.
- Timer: Each question has a 30-second timer. If the time runs out, the quiz automatically moves to the next question.
- Answer Selection: Allows users to select an answer for each question.
- Navigation: Provides "Next" and "Previous" buttons for moving between questions. A "Skip" button allows skipping questions.
- Progress Tracking: Displays the current question number and overall progress with a visual progress bar.
- Results Display: Shows the final score and allows users to review their answers.
- Closing Quiz: Implemented confirmation before closing the quiz to prevent accidental data loss. Attempts to close the window and falls back to reloading the page if
window.close()fails. - Quiz Restart: Allows the user to restart the quiz from the results page.
- Start Screen: Includes a start screen with quiz details and a button to begin the quiz.
- React: A JavaScript library for building user interfaces.
- Vite: A build tool for fast development.
- Tailwind CSS: A utility-first CSS framework.
- Radix UI Primitives: For accessible UI components (specifically used in the Button component).
- class-variance-authority: For styling React components with variants.
- clsx: For conditionally joining class names.
- tailwind-merge: For merging Tailwind CSS classes.
- Node.js (version >= 16)
- npm
-
Clone the repository:
git clone https://github.com/utkarshjain45/Quiz-app.git cd Quiz-app -
Install dependencies:
npm install
-
Start the development server:
npm run dev
This will usually start the application at
http://localhost:5173/. -
Open the application in your browser.
-
Click the "Start Quiz" button to begin.
-
Answer the questions within the given time frame.
-
Use the "Next" and "Previous" buttons to navigate through the questions.
-
Once finished, the results will be displayed.
-
You can restart the quiz from the results page. You can also close the quiz at any time using the "Close" button.
Not applicable, as this project does not use any external APIs. The quiz questions are stored locally in src/questions.js.
Contributions are welcome! To contribute:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and commit them with descriptive messages.
- Push your changes to your forked repository.
- Submit a pull request to the main repository.
No license specified. All rights are reserved by the author.
For questions or support, please contact:
Utkarsh Jain - jainutkarsh096@gmail.com