- Introduction
- Features
- Technologies Used
- Installation
- Usage
- Project Structure
- Components
- API
- Styling
- Future Enhancements
- Contributing
- License
This React Quiz Application is an interactive, web-based quiz game that allows users to test their knowledge across various categories and difficulty levels. Built with React and Vite, it offers a smooth, responsive user experience with features like timed questions, progress tracking, and score display.
- Dynamic quiz generation based on user-selected category and difficulty
- Timed questions with automatic progression
- Progress bar to track quiz completion
- Score calculation and display
- Option to view correct answers after quiz completion
- Ability to restart the quiz
- Responsive design for various screen sizes
- React 18.3.1
- Vite (for project setup and build optimization)
- OpenTrivia Database API (for quiz questions)
- CSS3 for styling
To run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/DonGuillotine/react-quiz-app.git
-
Navigate to the project directory:
cd react-quiz-app
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and visit
http://localhost:5173
- Select a category and difficulty level from the quiz settings.
- Click "Start Quiz" to begin.
- Answer each question within the time limit.
- Use the "Next" and "Previous" buttons to navigate through questions.
- After answering all questions, click "Finish" to see your score.
- Optionally, view correct answers and restart the quiz.
quiz-app/
│
├── src/
│ ├── components/
│ │ ├── AnswerOptions.jsx
│ │ ├── NavigationButtons.jsx
│ │ ├── ProgressBar.jsx
│ │ ├── Question.jsx
│ │ ├── QuizContainer.jsx
│ │ ├── QuizSettings.jsx
│ │ └── ScoreDisplay.jsx
│ │
│ ├── styles/
│ │ └── index.css
│ │
│ ├── App.jsx
│ ├── main.jsx
│ └── App.css
│
├── index.html
├── package.json
├── vite.config.js
└── README.md
QuizContainer
: Main component managing quiz state and logicQuizSettings
: Handles category and difficulty selectionQuestion
: Displays current question and answer optionsAnswerOptions
: Renders selectable answer optionsNavigationButtons
: Provides navigation between questionsProgressBar
: Shows quiz progressScoreDisplay
: Displays final score and correct answers
This application uses the Open Trivia Database API to fetch quiz questions. The API endpoint is:
https://opentdb.com/api.php
Parameters used:
amount
: Number of questions (default: 10)category
: Question category IDdifficulty
: easy, medium, or hardtype
: multiple (for multiple-choice questions)
The application uses CSS for styling, with styles defined in App.css
and index.css
. The layout is responsive and centered on the screen for optimal viewing on various devices.
- User authentication and score tracking
- Leaderboard functionality
- More customization options (number of questions, time limit)
- Additional question types (true/false, fill in the blank)
- Accessibility improvements
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.