A simple quiz application where users can answer questions and get their score at the end of the quiz. The application is built using React.js and TailwindCSS for styling. The application is responsive and works on mobile, tablet and desktop devices.
The main idea was to create a simple quiz application first where user can answer questions and see their score. After that, result section was enhanced with answers comparision and report generation. Then, extra features were added.
The application has 3 pages:
- Home Page: This page takes the user details, validate them and then allow them to take test.
- Start Page: Here questions are fetched and instructions are shown to the user. User can start the quiz from here.
- Test Page: Here user can see the question and options with a question navigation components. User can select an option and move to next question. User can also go back to previous question. User can also submit the test from here. A timer is added to show the time left for the test.
- Result Page: Here user can see their score and correct answers. User can also see the report of their answers. User can get the report on his Email by clicking on the button.
To run this project locally, you will need to have Node.js and npm (Node Package Manager) installed on your machine. After installing Node.js and npm, follow these steps:
- Clone this repository
- Open the terminal in the project directory, and run the following command to install all the dependencies:
npm install- After installing all the dependencies, run the following command to start the development server:
npm start- Open http://localhost:5173 to view it in the browser.
- User input validation
- Timer
- Question navigation through pagination and question navigation component with status of questions (answered, visited, not visited)
- Report generation and answers comparision
- Responsive design
- Report generation on Email
- Better state management using context API