🫀 Build an Interactive Human Body Learning Tool

Session 4, Topic 3 | Free Power Tools - Interactive Projects

← Back to Course Dashboard / Session 4 / Topic 3
⏱️ 2 hours

Capstone Project: Professional Educational Tool

In this hands-on project, you'll combine LMArena, NanoBanana, and Claude.ai to build a sophisticated interactive human body systems viewer - a tool that would normally cost $5,000+ to develop professionally!

🎯 Learning Objectives

  • Apply the three-phase AI workflow (Compare → Iterate → Polish)
  • Build a complete educational visualization tool
  • Work with SVG graphics, animations, and interactivity
  • Learn to refine AI-generated code through iteration
  • Create something you can actually use with students
  • Gain confidence building complex projects with AI assistance

🎯 Today's Challenge: Interactive Human Body Systems Viewer

What we're building: An educational tool that displays different body systems with interactive toggles, animations, and educational content!

❤️
Cardiovascular System

Heart, blood vessels, pulsing flow animations

🧠
Nervous System

Brain, spine, nerves, signal animations

💨
Respiratory System

Lungs, airways, oxygen flow particles

✨ Features Your Project Will Have:

  • SVG human body outline (front view)
  • Three toggle buttons for each body system
  • Animated flow effects (blood flow, nerve signals, oxygen)
  • Color-coded systems for easy identification
  • Info panels that appear on hover
  • Mobile responsive design
  • Educational descriptions and facts
  • Dark theme with glowing effects
  • Professional medical/scientific appearance

🎮 The Three-Phase AI Workflow

1 Phase 1: Generate & Compare (LMArena)

🏟️ LMArena

Goal: Get initial code from competing AI models and pick the winner

  • Time: 5-10 minutes
  • Why: Different models approach problems differently - battle them to find the best starting point
  • Output: Foundation code with SVG body, toggle buttons, basic structure

2 Phase 2: Rapid Iteration (NanoBanana)

🍌 NanoBanana

Goal: Quickly enhance and refine the code with multiple improvements

  • Time: 30-45 minutes
  • Why: Fast single-model responses perfect for iterating 10+ times
  • Output: Enhanced animations, better styling, fixed bugs, responsive design

3 Phase 3: Final Polish (Claude.ai)

🤖 Claude.ai

Goal: Add complex features and professional finishing touches

  • Time: 30-45 minutes
  • Why: Claude's longer context handles complex requests and maintains code quality
  • Output: Quiz mode, accessibility features, sound effects, loading animations
💡 Why This Workflow Works: Each tool plays to its strengths! LMArena gives you options, NanoBanana gives you speed, and Claude gives you sophistication. Together, they create professional results in a fraction of the time!

🚀 Phase 1: Generate Base Code with LMArena

Open LMArena and Start Battle Mode

  1. Go to lmarena.ai
  2. Click "Arena (battle)" mode
  3. You'll see two side-by-side chat boxes
  4. Get ready to paste the master prompt!

Copy and Submit the Master Prompt

This carefully crafted prompt will generate your entire foundation:

Create an interactive human body systems viewer as a single HTML file. Requirements: 1. SVG-based human body outline (front view, simplified) 2. Three toggle buttons: Cardiovascular, Nervous, Respiratory 3. Each system shown in different colors: - Cardiovascular: Red paths showing heart and major blood vessels - Nervous: Blue paths showing brain, spine, and major nerves - Respiratory: Green showing lungs and airways 4. Interactive features: - Click toggles to show/hide each system - Animated flow effects: - Cardiovascular: pulsing red dots flowing through vessels - Nervous: blue sparks traveling along nerve paths - Respiratory: green particles showing oxygen flow 5. UI Design: - Modern dark background (#1a1a2e) - Glowing effect on active systems - Toggle buttons with on/off states - System labels and descriptions - Smooth transitions when toggling 6. Educational info boxes: - Hover over organs to see descriptions - Facts about each system in side panel Use CSS animations, SVG paths, and JavaScript for interactivity. Make it visually impressive with a medical/scientific feel.
  1. Click the "Copy" button above
  2. Paste into LMArena's input box
  3. Press Enter and wait for BOTH models to respond (1-3 minutes)

Compare Both Outputs

Evaluation criteria - look for:

  • ✓ Complete HTML file with embedded CSS and JavaScript
  • ✓ SVG body outline that's anatomically recognizable
  • ✓ Three working toggle buttons
  • ✓ Animations actually running (not just commented code)
  • ✓ Clean, organized code structure
  • ✓ Good visual design (colors, spacing, layout)
⚠️ Common Issues to Watch For:
  • SVG body is too simple (stick figure instead of anatomical outline)
  • Animations don't work or are too subtle
  • Toggle buttons don't actually toggle systems on/off
  • Code has placeholder comments like "// Add animation here"

Vote for the Winner

  1. Scroll through both complete outputs
  2. Click "Model A is better" or "Model B is better"
  3. See which models competed (e.g., GPT-4 vs Claude Opus)
  4. Copy the entire winning code to your clipboard
  5. Note which model won for future reference!

Test Your Code

  1. Open Notepad (Windows) or TextEdit (Mac)
  2. Paste the code
  3. Save as human-body-viewer.html
  4. Double-click to open in browser
  5. Test each toggle button - do systems appear/disappear?
  6. Check if animations are running
🎉 Phase 1 Complete! You now have working foundation code. Time to enhance it!

⚡ Phase 2: Rapid Iteration with NanoBanana

Open NanoBanana for Speed

  1. Go to nano-banana.com
  2. Select GPT-4 or Claude 3 from model dropdown
  3. You're ready to iterate fast!

Enhancement Round 1: Improve Animations

Here's my human body systems viewer code: [PASTE YOUR CODE FROM LMARENA] Please improve it by: 1. Making the animations smoother and more visible 2. Adding heartbeat animation to the heart 3. Creating a legend/key for the color-coded systems 4. Adding a "Show All" and "Hide All" button 5. Improving mobile responsiveness for tablets

Wait for response, copy updated code, test in browser

Enhancement Round 2: Visual Polish

Continue from previous code. Now enhance the visual design: 1. Add glow effects to active systems using CSS filters 2. Improve the body outline with more anatomical detail 3. Add smooth fade-in/fade-out transitions when toggling 4. Create a better color gradient for the background 5. Add organ labels that appear on hover

Enhancement Round 3: Educational Content

Continue enhancing. Add educational features: 1. Info panel that shows facts about each system when toggled on 2. "Did you know?" facts that rotate every 5 seconds 3. Organ count display (e.g., "Heart: 1, Major vessels: 8") 4. Age-appropriate descriptions for middle school students 5. Print button to create student handout

Enhancement Round 4: Bug Fixes & Optimization

Final improvements for this phase: 1. Fix any JavaScript errors in the console 2. Ensure all animations run continuously when active 3. Make toggle buttons more intuitive with icons 4. Add loading animation when page first opens 5. Optimize code for better performance
⚡ Phase 2 Complete! Your tool is now significantly enhanced with smooth animations, better visuals, and educational content!
🎯 Pro Iteration Tips:
  • Test after EVERY enhancement round - catch bugs early!
  • Save working versions with names like "human-body-v1.html", "human-body-v2.html"
  • If an enhancement breaks something, go back to previous version and try different approach
  • Don't hesitate to ask for specific fixes: "The heart animation is too fast, slow it down"

💎 Phase 3: Final Polish with Claude.ai

Open Claude.ai for Advanced Features

  1. Go to claude.ai and sign in (your free account)
  2. Start a new conversation
  3. Prepare to add sophisticated features!

Add Advanced Interactivity

I have this human body systems viewer: [PASTE YOUR ENHANCED CODE] Please enhance it with: 1. More anatomically accurate organ positions 2. Gradient backgrounds for a professional look 3. Sound effects option (heartbeat, breathing sounds) 4. Educational quiz mode with 5 multiple-choice questions 5. Print-friendly version for students 6. Accessibility features (keyboard navigation, ARIA labels) 7. Loading animation when page starts 8. Statistics dashboard showing system facts Keep everything in a single HTML file.

Add Quiz Mode (Interactive Learning)

Add an interactive quiz mode to the human body viewer: 1. "Quiz Mode" button that switches to quiz interface 2. 10 questions about body systems (multiple choice) 3. Questions like "Which system transports oxygen?" with 3 options 4. Immediate feedback on answers (green for correct, red for incorrect) 5. Score tracking and percentage at the end 6. "Try Again" button to restart quiz 7. Highlight the relevant body system when showing question Make it educational and engaging for students!

Add Teacher Control Panel

Create a teacher control panel with these features: 1. Hidden panel (click corner icon to reveal) 2. Animation speed controls (slow, normal, fast) 3. Toggle for showing/hiding organ labels 4. Education level selector (elementary, middle, high school) that adjusts vocabulary 5. Export quiz results to CSV 6. Presentation mode that hides all buttons for clean display 7. Password protection for teacher settings (password: "teacher123")

Final Testing & Validation

  1. Copy the final code from Claude
  2. Save as human-body-viewer-final.html
  3. Test all features:
    • ✓ All three systems toggle correctly
    • ✓ Animations run smoothly
    • ✓ Quiz mode works and tracks score
    • ✓ Teacher panel appears and functions
    • ✓ Responsive on mobile (test by resizing browser)
    • ✓ Keyboard navigation works
    • ✓ Print preview looks good
🏆 Project Complete! You've built a professional-quality educational tool worth $5,000+ using entirely free AI tools!

🔧 Troubleshooting Common Issues

Problem: Body Outline Too Simple

Symptom: Stick figure or very basic outline

Make the human body outline more detailed with: - Visible head, neck, torso, arms, legs - Basic organ shapes (heart, lungs, brain, stomach, intestines) - Proper anatomical proportions - Smooth curves, not blocky or geometric - Front-facing view appropriate for educational use

Problem: Animations Not Working

Symptom: Static systems, no movement

Fix the animation system: - Ensure all CSS @keyframes are properly defined - Add animation timing and easing functions - Create continuous loops for flow effects - Debug any JavaScript errors in toggle functions - Test animations individually for each system - Make animations more visible with brighter colors/larger particles

Problem: Toggle Buttons Not Working

Symptom: Clicking doesn't show/hide systems

Fix the toggle functionality: - Check that JavaScript event listeners are attached correctly - Ensure SVG groups have proper IDs for each system - Verify CSS classes for .active and .hidden states exist - Add console.log statements to debug which functions are called - Test each button individually

Problem: Visual Effects Not Impressive

Symptom: Looks plain, not engaging

Enhance visual appeal with: - Glow effects using CSS drop-shadow and filter - Particle systems for oxygen flow - Pulse effects synchronized with heartbeat - Transparent overlays for depth perception - Color gradients along system paths - Subtle background animations - Modern glassmorphism effects on UI panels

🎨 Extension Challenges (Optional)

Challenge A: Add More Body Systems

Add these additional systems with toggle buttons: - Skeletal System (white/gray bones structure) - Muscular System (pink/red muscles) - Digestive System (yellow/orange digestive path) Each with unique animations and educational content panels.

Challenge B: Create Study Mode

Add a study mode where: - Users can click on organs to identify them - Score tracking for correct organ identification - Timer for speed challenges - Difficulty levels (beginner shows labels, advanced hides them) - Leaderboard using localStorage

Challenge C: Medical Conditions Viewer

Add a conditions mode showing common health issues: - Heart attack (blocked vessel animation) - Asthma (constricted airways animation) - Nerve damage (broken signal paths) With educational explanations and prevention tips for each condition.

📤 Sharing Your Creation

Option 1: Local Distribution

Option 2: Web Hosting (Free)

Option 3: Learning Management System

🎁 Sharing Tip: Include a "Made with AI" note in your tool to inspire other educators to learn these skills!

✅ Topic Completion Checklist

🎉 Celebrate Your Achievement!

🏆 You Just Built a $5,000+ Educational Tool!

Professional developers charge $3,000-$7,000 for interactive educational visualizations like this. You created one in 2 hours using free AI tools!

Cost to you: $0 | Value created: $5,000+ | Time saved: 40+ hours

🚀 What's Next?

Now that you've mastered building complex interactive projects, the next topic will teach you advanced features and techniques to extend your tools even further - including more systems, conditions viewer, and customization for your specific educational needs!

Next Topic: Advanced Features & Techniques →