Quiz Page - Copy this React, Tailwind Component to your project

Quiz Page Design Prompt: General Layout: Centered Layout: Place all elements centrally for maximum focus. The quiz questions should be prominently displayed in the middle of the page. Modern UI Elements: Use clean and modern UI elements with clear typography, responsive buttons, and attention grabbing countdown timers. Minimalistic, No Distractions: Ensure the design is distraction free, focusing on the quiz and live rankings. Avoid excessive animations or sidebar distractions. 1. Question Display Area: Position: Center of the screen. Size & Spacing: Large text size for readability. Each question should occupy a significant portion of the screen. Background: Consider using a subtle background color (e.g., soft gradients or muted tones) to highlight the question section. Typography: Use large, bold typography for the question text, ensuring it’s easy to read under time pressure. Timer: A visible countdown timer should be located at the top or near the question to display the time left for answering. Visual Timer: Make it dynamic, like a progress bar or circle countdown animation. It should reduce in size or change color (green > yellow > red) as time runs out. 2. Answer Options Area: Position: Directly below the question text, evenly spaced. Button Design: Color Coding: Use distinct colors for each answer option (e.g., blue, green, red, yellow) to help users quickly differentiate them. Size: Large, clickable buttons to prevent mistakes under time pressure. Hover Effects: Include slight hover effects or shadows for a responsive feel. Spacing: Ensure sufficient padding between each option to avoid mis clicks. State Feedback: Once an option is selected, change the button’s color or highlight it to show it's locked in, but disable further selections. 3. Live Ranking Display: Position: To the right of the question area (or below on mobile view). Display Style: Use a card style or leaderboard table format. Real Time Updates: Each row in the leaderboard should update instantly when students answer questions. Highlighted Rows: Highlight the user’s row in a contrasting color to keep them informed of their rank. Avatar and Name: Include an avatar, name, and points for each student on the leaderboard. You could also show the top three users in a more prominent section at the top. Sorting Animation: Make the ranking changes fluid with smooth animations when students move up or down the leaderboard. 4. Points Calculation Feedback: Position: Below the answer options or as a pop up once the user selects an answer. Style: Use a bold, prominent number to show points earned (e.g., “+900 Points!”). The color of the points (e.g., green for full points, orange for partial) can indicate how fast the answer was given. Timing: After the user selects an answer, briefly flash their earned points and then fade out smoothly. 5. Cool Down Section (Between Questions): Position: Keep the same question layout, but during the cooldown, dim the screen or use a transition effect like a brief fade out and fade in to signal downtime. Countdown Timer: Show a 30 second countdown timer during this phase in the center. Prompt Messaging: Use fun or motivational messages during the cooldown (e.g., “Get ready for the next question!” or “Take a deep breath!”). Visual Progression: Use a loading animation or progress bar to indicate the time remaining before the next question appears. 6. Question Progress Indicator: Position: At the top or near the question. Design: Use a simple progress bar or series of circles that fill as each question is completed (e.g., “Question 3 of 10” with a progress bar underneath). Color Cues: As questions are answered, the progress indicator should change color to green, showing successful progression. 7. Responsive Design Considerations: Mobile: On mobile devices, stack elements vertically: Question at the top. Answer options below the question. Timer and progress indicator above the question. Live rankings at the bottom or in a collapsible section. Tablet/Desktop: On larger screens, use a two column layout with the question and answer options on the left and the live ranking on the right. 8. Animations & Transitions: Keep transitions smooth and avoid overwhelming the user with too many effects. Subtle animations (e.g., points popping up, rankings shifting smoothly) can enhance the experience without being distracting. Use a brief transition when moving between questions to provide a sense of flow. 9. Color Scheme: Primary Colors: Use vibrant, energetic colors (e.g., blue, yellow, orange) to keep users engaged, with contrasting colors for buttons and call to actions. Timer Colors: Ensure the timer changes color as time decreases to create urgency (e.g., green > yellow > red). Background: Keep the background neutral (e.g., light gray or subtle gradient) to ensure focus stays on the content. 10. Accessibility Considerations: Ensure all text elements have sufficient contrast against the background. Make answer buttons large and spaced far enough apart to accommodate touch users. Add alt text for images (e.g., avatars) and ensure that the app is navigable via keyboard shortcuts.