This is a simple and interactive quiz application built with React. The app presents a set of multiple-choice questions to the user and allows them to select their answers. Upon submission, the app provides the user with their score.
- Multiple-choice questions with radio buttons for selecting answers.
- Option to select answers by clicking on the text of the options.
- Displays the score once the user completes all questions.
- Smooth UI with 3D effects and animations.
- React: Frontend library for building the user interface.
- CSS: Custom styles for the UI, including 3D effects and animations.
- Bootstrap: Used for basic layout and responsive design.
Ensure you have the following installed on your system:
- npm (Node package manager)
-
Clone the repository:
git clone https://github.com/advika31/quiz.git cd quiz-app -
Install dependencies:
npm install
-
Start the development server:
npm start
This will run the app in development mode, and you can access it at
http://localhost:3000in your browser.
Once the app is running, you can:
- Answer the quiz questions.
- Click on any option to select it.
- Submit your answers to view your score.
App.js: Main component that holds the state of the app and handles logic for the quiz.Question.js: Displays the current question and the options for the user to choose from.Options.js: Contains the options (radio buttons) for each question.Score.js: Displays the score after all questions are answered.questionBank.js: Holds the question data used by the app.
- The app uses custom CSS with 3D effects and animations to make the user interface more engaging.
- The background includes a 3D parallax effect for a dynamic look.
- The radio buttons and buttons have hover and active effects to make interactions visually appealing.
- Add more questions and categories.
- Allow users to retake the quiz.
- Store the quiz results locally or in a backend database.
- Add a timer for each question.