Exercise Page - Copy this React, Tailwind Component to your project
Description of the Exercise Solving Page 1. Overall Layout The layout will have three main sections: Header: Displays the current exercise details and progress. Main Content Area: Focused on the question being solved. Footer: Contains navigation buttons (e.g., Next, Previous, Submit). 2. Color and Styling Maintain a consistent gradient theme: from blue 600 to green 500. Use white backgrounds (bg white) for question cards for a clean look. Highlight active actions with accent colors like text blue 500 or text yellow 400. Keep typography consistent with bold titles (text 2xl) and clean sans serif fonts. 3. Header Section Position: Fixed at the top for visibility. Content: Exercise title (e.g., "Exercise: Chapter 1 Basics"). Progress bar showing the user's completion percentage (75% Complete). A motivational quote or message (e.g., "You're doing great!"). Style: Background: bg gradient to r from blue 600 to green 500. Text: Bold, white text for contrast. Animations: Smooth progress bar transitions (width updates with transition all). Typing animation for motivational messages. 4. Main Content Area Position: Centered on the page with responsive padding. Content: Focused on displaying the current question and user interactions. Structure: Question Text: Large, bold font for clarity. Answer Options: If multiple choice, use styled buttons for each option. Hints or Explanations: Display a collapsible hint section below the question (optional). Animations: Smooth transitions for showing hints or changing questions. Add a subtle hover effect for answer buttons. Example Layout: plaintext Sao chép mã Question 1 of 10 [Question Text Here] [Answer Option 1] [Answer Option 2] [Answer Option 3] [Answer Option 4] [Hint (Click to Expand)] 5. Footer Section Position: Fixed at the bottom of the page. Content: Navigation buttons: Previous Question: Disabled for the first question. Next Question: Takes users to the next question. Submit Exercise: Appears only on the last question. Timer (optional): A countdown timer if the exercise is time limited. Style: Use a gradient background for buttons (from blue 400 to green 300) with hover effects. Rounded buttons with icons for clarity (e.g., FiArrowRight for Next). Animations: Button hover effects (scale and glow). Detailed Layout Mockup Here’s a textual representation of the layout: Header Section: plaintext Sao chép mã + + | [Exercise: Chapter 1 Basics] 75% Complete | | [Motivational Message: You're doing great!] | + + Main Content Area: plaintext Sao chép mã + + | Question 3 of 10 | | | | [What is the capital of France?] | | | | [Answer Option A: Paris] | | [Answer Option B: London] | | [Answer Option C: Rome] | | [Answer Option D: Berlin] | | | | [Hint: It's known as the City of Lights] (optional) | + + Footer Section: plaintext Sao chép mã + + | [Previous] [Next] [Submit] | | | | Time Remaining: 04:30 (optional) | + + Animations and Interactivity Question Transition: When moving between questions, add a fade in or slide in animation for smooth transitions. For example: jsx Sao chép mã <motion.div initial={{ opacity: 0, x: 50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} > {/* Question Content */} </motion.div> Answer Selection: Add a slight bounce or scale effect when users select an answer. Highlight the selected answer with a color change (bg green 100 for correct, bg red 100 for incorrect). Hint Toggle: Use a smooth slide animation for expanding/collapsing hints. Progress Updates: Show an animation on the progress bar as the user completes questions. Responsive Design On smaller screens: Stack the header, content, and footer vertically. Use a single column layout for answer options. Ensure navigation buttons remain accessible at the bottom of the screen. Summary This page will maintain the professional and user friendly aesthetic of the rest of the platform while providing an engaging experience for solving exercises. The animations, consistent colors, and clear structure will keep users motivated and focused.
