Quizhive

Welcome to QuizHive, a dynamic and engaging quiz application designed to test your knowledge and provide an enjoyable quiz experience. Built with a focus on user experience, QuizHive supports both light and dark themes, responsive design, and a variety of question categories to choose from.

Features

• Timer:

  • Keep track of your time while answering questions to add a challenging element to your quiz experience.

• Question Selection:

  • Choose questions based on category, difficulty, type, and number of questions, allowing you to tailor the quiz to your preferences.

• Progress Tracking:

  • A progress bar shows your current question number and score, helping you stay on track.

• Navigation:

  • Navigate through the quiz using Next and Previous buttons. While you can go back to review questions, changing answers is disabled to maintain integrity.

• Real-Time Feedback:

  • Upon selecting an answer, the option color changes to red or green, indicating whether it’s correct or not.

• Interactive Result Page:

  • View your quiz performance with a visually appealing results page.

  • Includes a pie chart showing the percentage of correct (green) and incorrect (red) answers.

  • Displays a detailed scorecard with your total score, correct and incorrect answers, time taken, and accuracy percentage.

  • Provides a dynamic feedback message based on your score percentage to motivate or challenge you.

• Restart Functionality:

  • Start a new quiz at any time with the Restart button.

• Quiz History:

  • Keep track of your past quizzes with the quiz history feature. View detailed statistics, including your score percentage, number of questions attempted, time taken, and the date of completion. Accessible from the main menu, this feature helps users review their performance and progress over time.

• Dynamic Theming:

  • Toggle between light and dark themes based on your preference or system settings.

• Responsive Design:

  • Optimized for devices of all screen sizes, from desktops to mobile phones.

Technologies Used

• Frontend:

  • React.js (with hooks and context API for state management)

  • Tailwind CSS for styling

• State Management:

  • useReducer with Context API to manage quiz states and theme toggling.

• API:

  • Open Trivia Database (Trivia API) for fetching quiz questions and categories.