MathGuru

"Volume and Surface Area of a Cylinder" The simulation should be visually appealing, student-friendly, and work offline in any browser. ### 🎯 Learning Objectives: - Understand what a cylinder is - Learn formulas: - Curved Surface Area = 2πrh - Total Surface Area = 2πr(h + r) - Volume = πr²h - Visualize how changing radius and height affects area and volume --- ### 🧩 Required Features: #### 1. 🏠 Intro Section - Title: "Cylinder Simulation" - Short explanation of cylinder in simple language - Real-life examples (water tank, pipe, can) #### 2. 📐 Interactive Cylinder Model - Draw a 2D/3D-like cylinder using HTML Canvas or SVG - Label radius (r) and height (h) #### 3. 🎚️ Sliders (Core Interaction) - Slider for Radius (r): range 1–20 - Slider for Height (h): range 1–30 - Values should update in real-time #### 4. 🧮 Live Calculations Display dynamically: - Curved Surface Area - Total Surface Area - Volume Use π ≈ 3.1416 #### 5. 📊 Formula Display - Show formulas clearly - Highlight values being used #### 6. 🔄 Real-Time Animation - Cylinder resizes when sliders move - Smooth transitions #### 7. ❓ Quiz Section - 3–5 MCQ questions - Instant feedback (correct/incorrect) #### 8. 💡 Explanation Box - Explain how formulas are derived (simple explanation) #### 9. 🎨 Design Requirements - Use modern CSS (gradients, cards, soft shadows) - Use large readable fonts - Responsive design (mobile-friendly) #### 10. 🔊 Optional Enhancements - Button: "Show Step-by-Step Solution" - Button: "Reset Values" - Hover tooltips for formulas --- ### ⚙️ Technical Requirements: - Single HTML file (no external libraries) - Use pure HTML, CSS, and JavaScript - Clean and well-commented code - Use functions for calculations --- ### 🧪 Example Default Values: - Radius = 5 - Height = 10 ---