Initial commit

2025-11-29 18:49:34 +08:00
commit 4398aa3901
10 changed files with 3371 additions and 0 deletions
--- a/.claude-plugin/plugin.json
+++ b/.claude-plugin/plugin.json
@@ -0,0 +1,12 @@
 {
  "name": "math-teacher",
  "description": "Interactive math teacher that instantly generates playful, gamified learning experiences. Creates visual playgrounds, interactive artifacts, and engaging games for kids and adults to learn math concepts from basic arithmetic to advanced calculus.",
  "version": "0.0.0-2025.11.28",
  "author": {
    "name": "James Rochabrun",
    "email": "jamesrochabrun@gmail.com"
  },
  "skills": [
    "./skills/math-teacher"
  ]
 }
--- a/README.md
+++ b/README.md
@@ -0,0 +1,3 @@
 # math-teacher
 Interactive math teacher that instantly generates playful, gamified learning experiences. Creates visual playgrounds, interactive artifacts, and engaging games for kids and adults to learn math concepts from basic arithmetic to advanced calculus.
--- a/plugin.lock.json
+++ b/plugin.lock.json
@@ -0,0 +1,68 @@
 {
  "$schema": "internal://schemas/plugin.lock.v1.json",
  "pluginId": "gh:jamesrochabrun/skills:math-teacher",
  "normalized": {
    "repo": null,
    "ref": "refs/tags/v20251128.0",
    "commit": "6a31bdb3d133977f6f6afd9305ea1cd976d46126",
    "treeHash": "1260f5067df53e9dcfbfb460633e1e49f2d843f8059a52b773e501d212e34d49",
    "generatedAt": "2025-11-28T10:17:51.958990Z",
    "toolVersion": "publish_plugins.py@0.2.0"
  },
  "origin": {
    "remote": "git@github.com:zhongweili/42plugin-data.git",
    "branch": "master",
    "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
    "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
  },
  "manifest": {
    "name": "math-teacher",
    "description": "Interactive math teacher that instantly generates playful, gamified learning experiences. Creates visual playgrounds, interactive artifacts, and engaging games for kids and adults to learn math concepts from basic arithmetic to advanced calculus."
  },
  "content": {
    "files": [
      {
        "path": "README.md",
        "sha256": "956103bbab6ab8dcaac087aacb237f327bb02464bfc16e4db0e96ad80aa96677"
      },
      {
        "path": ".claude-plugin/plugin.json",
        "sha256": "8258e6593fca28391d3526589bf9626c0642b378f537d6fd117b7236cefd26f2"
      },
      {
        "path": "skills/math-teacher/SKILL.md",
        "sha256": "a33df481c2f6d892ccd07b6179dcc4a374c1be652ff9fb321eaa2e78a7658164"
      },
      {
        "path": "skills/math-teacher/references/gamification.md",
        "sha256": "9c0e38a4fa8e27c8a26834a435760f53991be4d8fb73eedc2e0bffa1251b6c7f"
      },
      {
        "path": "skills/math-teacher/references/calculus.md",
        "sha256": "c1faa90e9fab5df8ef41c7a34737d82b25c10ead2603dfaec41b21fae810eab1"
      },
      {
        "path": "skills/math-teacher/references/basic_math.md",
        "sha256": "a7f4558520b77e984750b541385a42fccc02c7dffc04150642a2163b8c8d1f4e"
      },
      {
        "path": "skills/math-teacher/references/algebra.md",
        "sha256": "6b2fe12ad3f91780366784a08f5b6c22e0e9bb25b58bbf47c26c93754f4dada8"
      },
      {
        "path": "skills/math-teacher/scripts/generate_playground.sh",
        "sha256": "2965dc38f3f1fe798c7e0cc95c48854f49234c6d2cf1844d51d7baf6c237f7c0"
      },
      {
        "path": "skills/math-teacher/scripts/generate_game.sh",
        "sha256": "115a6e89b07c96bc0c77e9f5397bcb161c66a63f6529dd30d4158a6afa1e43d6"
      }
    ],
    "dirSha256": "1260f5067df53e9dcfbfb460633e1e49f2d843f8059a52b773e501d212e34d49"
  },
  "security": {
    "scannedAt": null,
    "scannerVersion": null,
    "flags": []
  }
 }
--- a/skills/math-teacher/SKILL.md
+++ b/skills/math-teacher/SKILL.md
@@ -0,0 +1,369 @@
 ---
 name: math-teacher
 description: Interactive math teacher that instantly generates playful, gamified learning experiences. Creates visual playgrounds, interactive artifacts, and engaging games for kids and adults to learn math concepts from basic arithmetic to advanced calculus.
 ---
 # Math Teacher
 An interactive, playful math teacher that instantly generates engaging learning experiences through interactive artifacts, visual playgrounds, and gamified challenges.
 ## What This Skill Does
 Transforms math learning into interactive, visual experiences:
 - **Instant Playground Generation** - Creates interactive HTML/JS artifacts on demand
 - **Adaptive Learning** - Scales from basic arithmetic to advanced calculus
 - **Visual Learning** - Graphs, animations, and interactive visualizations
 - **Gamification** - Points, achievements, challenges, and progress tracking
 - **Question-Driven** - User asks, teacher generates custom learning experiences
 - **Playful Techniques** - Engaging animations, rewards, and fun challenges
 - **No Setup Required** - All artifacts work standalone in browser
 ## Why This Skill Matters
 **Traditional math learning:**
 - Abstract concepts without visualization
 - Passive reading and memorization
 - One-size-fits-all approach
 - Boring drills and repetition
 - Limited interactivity
 - Difficult to stay engaged
 **With this skill:**
 - Instant visual understanding
 - Active learning through play
 - Personalized to your level
 - Fun, game-like challenges
 - Immediate feedback loops
 - High engagement and retention
 ## Core Principles
 ### 1. Learn by Doing
 - Interactive manipulatives
 - Experiment with variables
 - Real-time feedback
 - Hands-on exploration
 - Visual experimentation
 ### 2. Gamification First
 - Points and achievements
 - Progress tracking
 - Level systems
 - Challenges and streaks
 - Leaderboards (personal bests)
 - Reward animations
 ### 3. Visual Learning
 - Dynamic graphs and charts
 - Animated demonstrations
 - Color-coded explanations
 - Interactive diagrams
 - Step-by-step visualizations
 ### 4. Instant Gratification
 - Generate artifacts immediately
 - No setup or installation
 - Works in any browser
 - Shareable playgrounds
 - Mobile-friendly
 ### 5. Adaptive Complexity
 - Starts simple, grows complex
 - Detects skill level
 - Progressive difficulty
 - Scaffolded learning
 - Multiple approaches
 ## Math Topics Covered
 ### Elementary (Ages 6-12)
 - **Arithmetic**: Addition, subtraction, multiplication, division
 - **Fractions**: Visual fraction bars, equivalent fractions
 - **Geometry**: Shapes, angles, perimeter, area
 - **Patterns**: Number sequences, visual patterns
 - **Word Problems**: Interactive story problems
 - **Time & Money**: Clock reading, coin counting
 ### Middle School (Ages 12-15)
 - **Pre-Algebra**: Variables, expressions, equations
 - **Ratios & Proportions**: Scale drawings, unit rates
 - **Percentages**: Discounts, interest, growth
 - **Statistics**: Mean, median, mode, graphs
 - **Basic Geometry**: Pythagorean theorem, volume
 - **Integers**: Negative numbers, operations
 ### High School (Ages 15-18)
 - **Algebra**: Linear equations, quadratics, polynomials
 - **Functions**: Domain/range, graphing, transformations
 - **Trigonometry**: Sin, cos, tan, unit circle
 - **Geometry**: Proofs, similarity, coordinate geometry
 - **Pre-Calculus**: Limits, sequences, series
 - **Statistics**: Probability, distributions, analysis
 ### Advanced (College+)
 - **Calculus**: Derivatives, integrals, optimization
 - **Linear Algebra**: Matrices, vectors, transformations
 - **Differential Equations**: ODEs, PDEs, modeling
 - **Complex Analysis**: Complex numbers, mappings
 - **Abstract Algebra**: Groups, rings, fields
 - **Real Analysis**: Sequences, series, convergence
 ## Interactive Playground Examples
 ### Example 1: Fraction Visualizer (Elementary)
 **User asks:** "Help me understand fractions"
 **Teacher generates:** An interactive pizza fraction visualizer with:
 - Visual pizza slices to understand fractions
 - Interactive sliders to change numerator/denominator
 - Real-time percentage calculation
 - Gamified with points and achievements
 - Equivalent fraction finder
 - Color-coded, playful design
 (See `/references/examples/fraction-visualizer.html` for full implementation)
 ### Example 2: Quadratic Explorer (High School)
 **User asks:** "I don't understand quadratic functions"
 **Teacher generates:** Interactive graph with sliders for a, b, c coefficients, showing:
 - Real-time parabola graphing
 - Vertex highlighting
 - Roots (x-intercepts) marked
 - Axis of symmetry
 - Discriminant explanation
 - Points for discovering special cases
 ### Example 3: Derivative Visualizer (Advanced)
 **User asks:** "Show me how derivatives work"
 **Teacher generates:** Interactive calculus playground with:
 - Function input field
 - Tangent line at any point
 - Secant line animation showing limit
 - Slope calculation display
 - Common derivative rules reference
 - Challenge mode: guess the derivative
 ## Gamification System
 ### Points & Rewards
 - **Exploration Points** (5pts): Try different values
 - **Discovery Points** (10pts): Find special cases
 - **Mastery Points** (20pts): Complete challenges
 - **Streak Bonus** (2x): Consecutive correct answers
 - **Speed Bonus** (1.5x): Quick correct responses
 ### Achievements
 - 🌟 **First Steps**: Complete first problem
 - 🔥 **Hot Streak**: 5 correct in a row
 - 🎯 **Bullseye**: Perfect score on challenge
 - 🏆 **Math Master**: 1000 points earned
 - 💡 **Eureka**: Discover hidden pattern
 - 🚀 **Speed Demon**: 10 problems under 5 min
 ### Progress Tracking
 - Problems attempted
 - Success rate
 - Points earned
 - Current streak
 - Time spent learning
 - Topics mastered
 ### Challenge Modes
 - **Time Attack**: Solve as many as possible
 - **Accuracy Mode**: Get perfect answers
 - **Exploration**: Discover patterns
 - **Boss Battle**: Complex multi-step problems
 - **Daily Challenge**: New problem each day
 ## Playful Learning Techniques
 ### 1. Storytelling
 Math problems wrapped in engaging narratives:
 - "Space mission" for algebra
 - "Treasure hunt" for geometry
 - "Recipe scaling" for ratios
 - "Game design" for functions
 ### 2. Visual Metaphors
 Abstract concepts made concrete:
 - Derivatives = "speedometer"
 - Integrals = "area under curve"
 - Variables = "mystery boxes"
 - Functions = "magic machines"
 ### 3. Progressive Hints
 Scaffolded support system:
 - Level 1: Gentle nudge
 - Level 2: Show strategy
 - Level 3: Step-by-step
 - Level 4: Full solution
 ### 4. Immediate Feedback
 Real-time learning loops:
 - Color-coded correctness
 - Encouraging messages
 - Error explanations
 - Try-again suggestions
 ### 5. Celebration Animations
 Reward correct answers:
 - Confetti explosions
 - Success sounds
 - Growing score counter
 - Achievement popups
 ## Artifact Generation Patterns
 ### Standard Playground Structure
 Every generated artifact follows this pattern:
 - Header with title and score display
 - Visual representation area (canvas, SVG, or HTML elements)
 - Interactive controls (sliders, inputs, buttons)
 - Explanation section with real-time feedback
 - Gamification elements (points, achievements, streaks)
 - Self-contained HTML with inline CSS and JavaScript
 - Responsive design for mobile/tablet/desktop
 - Playful, colorful styling with animations
 ### Key Features in Every Artifact
 ✅ **Visual**: Graphs, animations, diagrams
 ✅ **Interactive**: Sliders, inputs, buttons
 ✅ **Responsive**: Works on mobile/tablet/desktop
 ✅ **Gamified**: Points, achievements, feedback
 ✅ **Educational**: Clear explanations
 ✅ **Accessible**: Keyboard navigation, ARIA labels
 ✅ **Standalone**: No external dependencies
 ## Usage Patterns
 ### Pattern 1: Concept Explanation
 **User:** "Explain [concept]"
 **Teacher:** Generates interactive visualization + step-by-step guide
 ### Pattern 2: Practice Problems
 **User:** "Give me practice problems for [topic]"
 **Teacher:** Creates randomized problem generator with hints
 ### Pattern 3: Visual Understanding
 **User:** "Show me [concept] visually"
 **Teacher:** Builds animated demonstration with controls
 ### Pattern 4: Challenge Mode
 **User:** "Challenge me on [topic]"
 **Teacher:** Creates timed quiz game with leaderboard
 ### Pattern 5: Exploration
 **User:** "Let me explore [concept]"
 **Teacher:** Makes open sandbox with guided experiments
 ## Technical Implementation
 ### Key Techniques
 - **Canvas Drawing**: Use HTML5 Canvas API for graphs and visualizations
 - **Real-time Updates**: Event listeners that update on user input
 - **Animation Loops**: RequestAnimationFrame for smooth animations
 - **Responsive Design**: CSS Grid, Flexbox, and media queries
 - **No Dependencies**: Pure HTML/CSS/JavaScript (no libraries required)
 ## Reference Materials
 All included in `/references`:
 - **basic_math.md** - Elementary concepts and techniques
 - **algebra.md** - Algebraic patterns and formulas
 - **geometry.md** - Geometric principles and visualizations
 - **calculus.md** - Derivatives, integrals, limits
 - **statistics.md** - Probability and data analysis
 - **gamification.md** - Game mechanics and reward systems
 ## Scripts
 All in `/scripts`:
 - **generate_playground.sh** - Create interactive math playground
 - **generate_game.sh** - Build gamified math challenge
 - **generate_quiz.sh** - Create adaptive quiz system
 ## Implementation Approach
 **IMPORTANT:** When this skill is invoked, use the Bash tool to execute the appropriate script.
 ### How to use the scripts:
 1. **For general math games/challenges:** Use `generate_game.sh`
   ```bash
   bash /Users/jamesrochabrun/Desktop/skills/skills/math-teacher/scripts/generate_game.sh
   ```
 2. **For interactive playgrounds:** Use `generate_playground.sh`
   ```bash
   bash /Users/jamesrochabrun/Desktop/skills/skills/math-teacher/scripts/generate_playground.sh
   ```
 3. **For quizzes:** Use `generate_quiz.sh` (if it exists)
   ```bash
   bash /Users/jamesrochabrun/Desktop/skills/skills/math-teacher/scripts/generate_quiz.sh
   ```
 **DO NOT** try to invoke these scripts automatically when the skill loads - this causes bash security errors. Always use the Bash tool explicitly to run them.
 ## Best Practices
 ### DO:
 ✅ Make it visual and interactive
 ✅ Start simple, add complexity gradually
 ✅ Use colors and animations
 ✅ Provide immediate feedback
 ✅ Celebrate successes
 ✅ Include hints and explanations
 ✅ Make it fun and playful
 ✅ Support mobile devices
 ### DON'T:
 ❌ Show just formulas without context
 ❌ Make it text-heavy
 ❌ Assume prior knowledge
 ❌ Skip the gamification
 ❌ Ignore visual learners
 ❌ Make it intimidating
 ❌ Use boring, academic tone
 ❌ Require external libraries
 ## Example Interactions
 **Beginner:**
 > "I want to learn multiplication"
 *Generates: Interactive times table grid game with click-to-reveal cards, progress tracking, and achievement badges*
 **Intermediate:**
 > "Help me understand the Pythagorean theorem"
 *Generates: Visual right triangle builder where you can drag vertices, see a², b², c² squares, and animated proof*
 **Advanced:**
 > "Show me how to optimize a function"
 *Generates: 3D surface plot with gradient descent visualization, adjustable learning rate, and path tracing*
 ## Summary
 This skill transforms math education by:
 - **Instant Engagement** - Generates playgrounds immediately
 - **Visual Learning** - Graphs, animations, interactive diagrams
 - **Gamification** - Points, achievements, challenges
 - **Adaptive Difficulty** - From elementary to advanced
 - **Self-Contained** - All artifacts work standalone
 - **Playful** - Fun, colorful, rewarding
 - **Effective** - Learn by doing and exploring
 **"Math should be an adventure, not a chore."** 🚀
 ---
 **Usage:** Ask any math question, request a concept explanation, or say "teach me [topic]" and get an instant, interactive learning experience!
--- a/skills/math-teacher/references/algebra.md
+++ b/skills/math-teacher/references/algebra.md
@@ -0,0 +1,505 @@
 # Algebra Reference
 Algebraic concepts and interactive visualizations for middle school to high school.
 ## Variables & Expressions
 ### Visual Variables
 ```javascript
 // Mystery box representation
 function drawVariable(name, value, canvas) {
  const ctx = canvas.getContext('2d');
  // Draw box
  ctx.fillStyle = '#667eea';
  ctx.fillRect(50, 50, 100, 100);
  ctx.strokeStyle = '#333';
  ctx.lineWidth = 3;
  ctx.strokeRect(50, 50, 100, 100);
  // Variable name
  ctx.fillStyle = 'white';
  ctx.font = 'bold 40px Arial';
  ctx.textAlign = 'center';
  ctx.fillText(name, 100, 110);
  // Value (revealed)
  if (value !== undefined) {
    ctx.fillStyle = '#FFD700';
    ctx.font = 'bold 30px Arial';
    ctx.fillText(`= ${value}`, 100, 170);
  } else {
    ctx.fillStyle = '#FFF';
    ctx.font = '20px Arial';
    ctx.fillText('?', 100, 170);
  }
 }
 ```
 ### Expression Evaluator
 ```javascript
 function evaluateExpression(expr, variables) {
  // Replace variables with values
  let result = expr;
  for (const [name, value] of Object.entries(variables)) {
    result = result.replace(new RegExp(name, 'g'), value);
  }
  try {
    return {
      expression: expr,
      substituted: result,
      result: eval(result),
      steps: showSteps(expr, variables)
    };
  } catch (e) {
    return { error: 'Invalid expression' };
  }
 }
 function showSteps(expr, variables) {
  const steps = [];
  steps.push(`Original: ${expr}`);
  let current = expr;
  for (const [name, value] of Object.entries(variables)) {
    current = current.replace(new RegExp(name, 'g'), value);
    steps.push(`Substitute ${name} = ${value}: ${current}`);
  }
  steps.push(`Evaluate: ${eval(current)}`);
  return steps;
 }
 ```
 ## Linear Equations
 ### Equation Solver
 ```javascript
 // Solve ax + b = c for x
 function solveLinear(a, b, c) {
  const x = (c - b) / a;
  return {
    equation: `${a}x + ${b} = ${c}`,
    steps: [
      `${a}x + ${b} = ${c}`,
      `${a}x = ${c - b}`,
      `x = ${(c - b)}/${a}`,
      `x = ${x}`
    ],
    solution: x,
    verification: `${a}(${x}) + ${b} = ${a * x + b} ✓`
  };
 }
 ```
 ### Balance Scale Visualization
 ```javascript
 function drawBalanceScale(left, right, canvas) {
  const ctx = canvas.getContext('2d');
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  // Calculate balance
  const diff = left - right;
  const angle = Math.atan(diff / 10);
  // Draw fulcrum
  ctx.fillStyle = '#333';
  ctx.beginPath();
  ctx.moveTo(centerX - 20, centerY + 50);
  ctx.lineTo(centerX, centerY);
  ctx.lineTo(centerX + 20, centerY + 50);
  ctx.closePath();
  ctx.fill();
  // Draw beam
  ctx.save();
  ctx.translate(centerX, centerY);
  ctx.rotate(angle);
  ctx.fillStyle = '#8B4513';
  ctx.fillRect(-150, -10, 300, 20);
  // Left side
  ctx.fillStyle = '#667eea';
  ctx.fillRect(-140, -60, 80, 80);
  ctx.fillStyle = 'white';
  ctx.font = 'bold 24px Arial';
  ctx.textAlign = 'center';
  ctx.fillText(left, -100, -10);
  // Right side
  ctx.fillStyle = '#FF6347';
  ctx.fillRect(60, -60, 80, 80);
  ctx.fillStyle = 'white';
  ctx.fillText(right, 100, -10);
  ctx.restore();
  // Status
  ctx.fillStyle = '#333';
  ctx.font = '20px Arial';
  ctx.textAlign = 'center';
  const status = Math.abs(diff) < 0.1 ? '⚖️ Balanced!' :
                 diff > 0 ? '⬅️ Left heavier' : '➡️ Right heavier';
  ctx.fillText(status, centerX, centerY + 100);
 }
 ```
 ## Quadratic Equations
 ### Quadratic Formula
 ```javascript
 function solveQuadratic(a, b, c) {
  const discriminant = b * b - 4 * a * c;
  const result = {
    equation: `${a}x² + ${b}x + ${c} = 0`,
    discriminant: discriminant,
    a, b, c
  };
  if (discriminant > 0) {
    const x1 = (-b + Math.sqrt(discriminant)) / (2 * a);
    const x2 = (-b - Math.sqrt(discriminant)) / (2 * a);
    result.solutions = [x1, x2];
    result.type = 'Two real solutions';
    result.message = '🎉 Two x-intercepts!';
  } else if (discriminant === 0) {
    const x = -b / (2 * a);
    result.solutions = [x];
    result.type = 'One real solution';
    result.message = '🎯 One x-intercept (vertex on x-axis)!';
  } else {
    const realPart = -b / (2 * a);
    const imagPart = Math.sqrt(-discriminant) / (2 * a);
    result.solutions = [
      `${realPart} + ${imagPart}i`,
      `${realPart} - ${imagPart}i`
    ];
    result.type = 'Two complex solutions';
    result.message = '👻 No x-intercepts (complex numbers)!';
  }
  return result;
 }
 ```
 ### Parabola Grapher
 ```javascript
 function drawParabola(a, b, c, canvas) {
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  // Clear canvas
  ctx.clearRect(0, 0, width, height);
  // Draw axes
  drawAxes(ctx, width, height);
  // Calculate vertex
  const vertexX = -b / (2 * a);
  const vertexY = a * vertexX * vertexX + b * vertexX + c;
  // Draw parabola
  ctx.beginPath();
  ctx.strokeStyle = '#667eea';
  ctx.lineWidth = 3;
  for (let x = -10; x <= 10; x += 0.1) {
    const y = a * x * x + b * x + c;
    const px = (x + 10) * (width / 20);
    const py = height - ((y + 10) * (height / 20));
    if (x === -10) ctx.moveTo(px, py);
    else ctx.lineTo(px, py);
  }
  ctx.stroke();
  // Mark vertex
  const vx = (vertexX + 10) * (width / 20);
  const vy = height - ((vertexY + 10) * (height / 20));
  ctx.fillStyle = '#FF6347';
  ctx.beginPath();
  ctx.arc(vx, vy, 8, 0, Math.PI * 2);
  ctx.fill();
  // Vertex label
  ctx.fillStyle = '#333';
  ctx.font = '14px Arial';
  ctx.fillText(`Vertex: (${vertexX.toFixed(2)}, ${vertexY.toFixed(2)})`,
               vx + 10, vy - 10);
  // Draw axis of symmetry
  ctx.strokeStyle = '#FFD700';
  ctx.setLineDash([5, 5]);
  ctx.beginPath();
  ctx.moveTo(vx, 0);
  ctx.lineTo(vx, height);
  ctx.stroke();
  ctx.setLineDash([]);
  return { vertexX, vertexY };
 }
 function drawAxes(ctx, width, height) {
  ctx.strokeStyle = '#CCC';
  ctx.lineWidth = 1;
  // X-axis
  ctx.beginPath();
  ctx.moveTo(0, height / 2);
  ctx.lineTo(width, height / 2);
  ctx.stroke();
  // Y-axis
  ctx.beginPath();
  ctx.moveTo(width / 2, 0);
  ctx.lineTo(width / 2, height);
  ctx.stroke();
  // Grid
  ctx.strokeStyle = '#F0F0F0';
  for (let i = 0; i < width; i += width / 20) {
    ctx.beginPath();
    ctx.moveTo(i, 0);
    ctx.lineTo(i, height);
    ctx.stroke();
  }
  for (let i = 0; i < height; i += height / 20) {
    ctx.beginPath();
    ctx.moveTo(0, i);
    ctx.lineTo(width, i);
    ctx.stroke();
  }
 }
 ```
 ## Functions
 ### Function Visualizer
 ```javascript
 const commonFunctions = {
  linear: (x, m, b) => m * x + b,
  quadratic: (x, a, b, c) => a * x * x + b * x + c,
  cubic: (x, a) => a * x * x * x,
  exponential: (x, a) => Math.pow(a, x),
  logarithmic: (x, a) => Math.log(x) / Math.log(a),
  sine: (x, a) => a * Math.sin(x),
  cosine: (x, a) => a * Math.cos(x),
  absolute: (x) => Math.abs(x),
  squareRoot: (x) => Math.sqrt(x)
 };
 function plotFunction(fn, xMin, xMax, canvas) {
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  drawAxes(ctx, width, height);
  ctx.beginPath();
  ctx.strokeStyle = '#667eea';
  ctx.lineWidth = 3;
  const step = (xMax - xMin) / width;
  for (let x = xMin; x <= xMax; x += step) {
    try {
      const y = fn(x);
      if (!isNaN(y) && isFinite(y)) {
        const px = ((x - xMin) / (xMax - xMin)) * width;
        const py = height - ((y - (-10)) / 20) * height;
        if (x === xMin) ctx.moveTo(px, py);
        else ctx.lineTo(px, py);
      }
    } catch (e) {
      // Skip invalid points
    }
  }
  ctx.stroke();
 }
 ```
 ### Domain & Range Finder
 ```javascript
 function analyzeFunctionDomainRange(type, params) {
  const analysis = {
    type: type,
    params: params
  };
  switch(type) {
    case 'linear':
      analysis.domain = '(-∞, ∞)';
      analysis.range = '(-∞, ∞)';
      break;
    case 'quadratic':
      const a = params.a;
      const vertex = -params.b / (2 * a);
      const vertexY = a * vertex * vertex + params.b * vertex + params.c;
      analysis.domain = '(-∞, ∞)';
      analysis.range = a > 0 ? `[${vertexY.toFixed(2)}, ∞)` :
                                `(-∞, ${vertexY.toFixed(2)}]`;
      analysis.vertex = { x: vertex, y: vertexY };
      break;
    case 'squareRoot':
      analysis.domain = '[0, ∞)';
      analysis.range = '[0, ∞)';
      break;
    case 'logarithmic':
      analysis.domain = '(0, ∞)';
      analysis.range = '(-∞, ∞)';
      break;
  }
  return analysis;
 }
 ```
 ## Systems of Equations
 ### Graphical Solution
 ```javascript
 function solveSystemGraphically(eq1, eq2, canvas) {
  // eq1 and eq2 are linear equations in form {m: slope, b: intercept}
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  drawAxes(ctx, width, height);
  // Plot first equation
  ctx.strokeStyle = '#667eea';
  ctx.lineWidth = 3;
  ctx.beginPath();
  for (let x = -10; x <= 10; x += 0.1) {
    const y = eq1.m * x + eq1.b;
    const px = (x + 10) * (width / 20);
    const py = height - ((y + 10) * (height / 20));
    if (x === -10) ctx.moveTo(px, py);
    else ctx.lineTo(px, py);
  }
  ctx.stroke();
  // Plot second equation
  ctx.strokeStyle = '#FF6347';
  ctx.beginPath();
  for (let x = -10; x <= 10; x += 0.1) {
    const y = eq2.m * x + eq2.b;
    const px = (x + 10) * (width / 20);
    const py = height - ((y + 10) * (height / 20));
    if (x === -10) ctx.moveTo(px, py);
    else ctx.lineTo(px, py);
  }
  ctx.stroke();
  // Find intersection
  // eq1.m * x + eq1.b = eq2.m * x + eq2.b
  // (eq1.m - eq2.m) * x = eq2.b - eq1.b
  const x = (eq2.b - eq1.b) / (eq1.m - eq2.m);
  const y = eq1.m * x + eq1.b;
  // Mark intersection
  const px = (x + 10) * (width / 20);
  const py = height - ((y + 10) * (height / 20));
  ctx.fillStyle = '#FFD700';
  ctx.beginPath();
  ctx.arc(px, py, 10, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = '#333';
  ctx.font = 'bold 16px Arial';
  ctx.fillText(`(${x.toFixed(2)}, ${y.toFixed(2)})`, px + 15, py - 15);
  return { x, y };
 }
 ```
 ## Polynomials
 ### Polynomial Evaluator
 ```javascript
 function evaluatePolynomial(coefficients, x) {
  // coefficients = [a0, a1, a2, ...] for a0 + a1*x + a2*x^2 + ...
  let result = 0;
  let term = 1;
  const terms = [];
  for (let i = 0; i < coefficients.length; i++) {
    const value = coefficients[i] * term;
    result += value;
    terms.push({
      coefficient: coefficients[i],
      power: i,
      value: value,
      display: i === 0 ? `${coefficients[i]}` :
               i === 1 ? `${coefficients[i]}x` :
               `${coefficients[i]}x^${i}`
    });
    term *= x;
  }
  return {
    x: x,
    result: result,
    terms: terms,
    polynomial: formatPolynomial(coefficients)
  };
 }
 function formatPolynomial(coefficients) {
  return coefficients.map((c, i) => {
    if (c === 0) return '';
    if (i === 0) return `${c}`;
    if (i === 1) return `${c}x`;
    return `${c}x^${i}`;
  }).filter(t => t).join(' + ');
 }
 ```
 ## Interactive Elements
 ### Slider for Coefficients
 ```javascript
 function createCoefficientSliders(equation) {
  const sliders = {};
  const params = ['a', 'b', 'c'];
  params.forEach(param => {
    const slider = document.createElement('input');
    slider.type = 'range';
    slider.min = -10;
    slider.max = 10;
    slider.step = 0.1;
    slider.value = equation[param] || 0;
    slider.addEventListener('input', () => {
      equation[param] = parseFloat(slider.value);
      updateGraph();
      updateEquationDisplay();
    });
    sliders[param] = slider;
  });
  return sliders;
 }
 ```
 ## Summary
 Algebra patterns provide:
 - Visual equation solving with balance scales
 - Interactive function graphing
 - Step-by-step solutions
 - Real-time parameter manipulation
 - Geometric representations of algebraic concepts
 These tools make abstract algebra concrete and interactive!
--- a/skills/math-teacher/references/basic_math.md
+++ b/skills/math-teacher/references/basic_math.md
@@ -0,0 +1,370 @@
 # Basic Math Reference
 Elementary mathematics concepts for interactive playgrounds.
 ## Arithmetic Operations
 ### Addition
 ```javascript
 // Visual addition with counting blocks
 function visualAdd(a, b) {
  return {
    result: a + b,
    visualization: `${'🟦'.repeat(a)} + ${'🟨'.repeat(b)} = ${'🟩'.repeat(a + b)}`
  };
 }
 ```
 ### Multiplication
 ```javascript
 // Array/grid visualization
 function visualMultiply(rows, cols) {
  let grid = '';
  for (let i = 0; i < rows; i++) {
    grid += '⬜'.repeat(cols) + '\n';
  }
  return {
    result: rows * cols,
    grid: grid,
    explanation: `${rows} rows × ${cols} columns = ${rows * cols} squares`
  };
 }
 ```
 ## Fractions
 ### Visual Representation
 ```javascript
 function drawFraction(numerator, denominator, canvas) {
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  const sliceWidth = width / denominator;
  for (let i = 0; i < denominator; i++) {
    ctx.fillStyle = i < numerator ? '#FF6347' : '#DDD';
    ctx.fillRect(i * sliceWidth, 0, sliceWidth - 2, height);
  }
 }
 ```
 ### Equivalent Fractions
 ```javascript
 function findEquivalent(numerator, denominator, multiplier) {
  return {
    original: `${numerator}/${denominator}`,
    equivalent: `${numerator * multiplier}/${denominator * multiplier}`,
    explanation: `Multiply both by ${multiplier}`
  };
 }
 function simplify(numerator, denominator) {
  const gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
  const divisor = gcd(numerator, denominator);
  return {
    original: `${numerator}/${denominator}`,
    simplified: `${numerator / divisor}/${denominator / divisor}`,
    divisor: divisor
  };
 }
 ```
 ## Geometry
 ### Area Calculations
 ```javascript
 // Rectangle
 function rectangleArea(length, width) {
  return {
    area: length * width,
    perimeter: 2 * (length + width),
    visualization: drawRectangle(length, width)
  };
 }
 // Circle
 function circleArea(radius) {
  return {
    area: Math.PI * radius * radius,
    circumference: 2 * Math.PI * radius,
    diameter: 2 * radius
  };
 }
 // Triangle
 function triangleArea(base, height) {
  return {
    area: 0.5 * base * height,
    explanation: 'Half of base × height'
  };
 }
 ```
 ### Angle Visualizer
 ```javascript
 function drawAngle(degrees, canvas) {
  const ctx = canvas.getContext('2d');
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const radius = 100;
  // Draw angle arc
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, degrees * Math.PI / 180);
  ctx.lineTo(centerX, centerY);
  ctx.closePath();
  ctx.fillStyle = 'rgba(102, 126, 234, 0.3)';
  ctx.fill();
  ctx.strokeStyle = '#667eea';
  ctx.lineWidth = 3;
  ctx.stroke();
  // Label
  ctx.fillStyle = '#333';
  ctx.font = '20px Arial';
  ctx.fillText(`${degrees}°`, centerX + 50, centerY - 50);
 }
 ```
 ## Number Patterns
 ### Sequences
 ```javascript
 // Arithmetic sequence
 function arithmeticSequence(start, difference, terms) {
  const sequence = [];
  for (let i = 0; i < terms; i++) {
    sequence.push(start + (i * difference));
  }
  return {
    sequence: sequence,
    rule: `Start at ${start}, add ${difference} each time`,
    next: start + (terms * difference)
  };
 }
 // Geometric sequence
 function geometricSequence(start, ratio, terms) {
  const sequence = [];
  for (let i = 0; i < terms; i++) {
    sequence.push(start * Math.pow(ratio, i));
  }
  return {
    sequence: sequence,
    rule: `Start at ${start}, multiply by ${ratio} each time`,
    next: start * Math.pow(ratio, terms)
  };
 }
 ```
 ## Time & Money
 ### Clock
 ```javascript
 function drawClock(hours, minutes) {
  // Draw clock face with hands
  const hourAngle = (hours % 12) * 30 + minutes * 0.5;
  const minuteAngle = minutes * 6;
  return {
    hourAngle: hourAngle,
    minuteAngle: minuteAngle,
    timeString: `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
  };
 }
 ```
 ### Money
 ```javascript
 function calculateChange(paid, cost) {
  const change = paid - cost;
  const bills = {
    '20': Math.floor(change / 20),
    '10': Math.floor((change % 20) / 10),
    '5': Math.floor((change % 10) / 5),
    '1': Math.floor(change % 5)
  };
  return {
    change: change.toFixed(2),
    breakdown: bills,
    visualization: visualizeChange(bills)
  };
 }
 ```
 ## Interactive Elements
 ### Number Line
 ```javascript
 function drawNumberLine(min, max, highlight, canvas) {
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  const y = height / 2;
  // Draw line
  ctx.strokeStyle = '#333';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(20, y);
  ctx.lineTo(width - 20, y);
  ctx.stroke();
  // Draw numbers
  const range = max - min;
  const step = (width - 40) / range;
  for (let i = min; i <= max; i++) {
    const x = 20 + (i - min) * step;
    // Tick mark
    ctx.beginPath();
    ctx.moveTo(x, y - 10);
    ctx.lineTo(x, y + 10);
    ctx.stroke();
    // Number label
    ctx.fillStyle = i === highlight ? '#FF6347' : '#333';
    ctx.font = i === highlight ? 'bold 20px Arial' : '16px Arial';
    ctx.textAlign = 'center';
    ctx.fillText(i, x, y + 30);
    // Highlight
    if (i === highlight) {
      ctx.beginPath();
      ctx.arc(x, y, 8, 0, Math.PI * 2);
      ctx.fillStyle = '#FF6347';
      ctx.fill();
    }
  }
 }
 ```
 ### Counting Blocks
 ```javascript
 function drawCountingBlocks(number, canvas) {
  const ctx = canvas.getContext('2d');
  const blockSize = 40;
  const gap = 10;
  const blocksPerRow = 10;
  for (let i = 0; i < number; i++) {
    const row = Math.floor(i / blocksPerRow);
    const col = i % blocksPerRow;
    const x = col * (blockSize + gap);
    const y = row * (blockSize + gap);
    // Draw block
    ctx.fillStyle = '#667eea';
    ctx.fillRect(x, y, blockSize, blockSize);
    ctx.strokeStyle = '#333';
    ctx.strokeRect(x, y, blockSize, blockSize);
    // Number in block
    ctx.fillStyle = 'white';
    ctx.font = 'bold 20px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(i + 1, x + blockSize / 2, y + blockSize / 2);
  }
 }
 ```
 ## Word Problems
 ### Template System
 ```javascript
 const wordProblemTemplates = {
  addition: [
    "🍎 Sarah has {a} apples. Her friend gives her {b} more. How many apples does Sarah have now?",
    "🚗 There are {a} cars in the parking lot. {b} more cars arrive. How many cars are there in total?",
    "⭐ Tom collected {a} stars. He then collected {b} more stars. How many stars does Tom have?"
  ],
  subtraction: [
    "🍪 Mom baked {a} cookies. The family ate {b} cookies. How many cookies are left?",
    "🎈 There were {a} balloons at the party. {b} balloons popped. How many balloons remain?",
    "💰 You have ${a}. You spend ${b}. How much money do you have left?"
  ],
  multiplication: [
    "📦 Each box contains {a} toys. You have {b} boxes. How many toys do you have in total?",
    "🌳 Each tree has {a} apples. There are {b} trees. How many apples are there?",
    "👥 Each team has {a} players. There are {b} teams. How many players in total?"
  ],
  division: [
    "🍕 You have {a} pizza slices to share equally among {b} friends. How many slices does each friend get?",
    "🎁 {a} presents need to be distributed equally to {b} children. How many presents per child?",
    "📚 {a} books are arranged into {b} equal stacks. How many books in each stack?"
  ]
 };
 function generateWordProblem(type, difficulty) {
  const template = wordProblemTemplates[type][
    Math.floor(Math.random() * wordProblemTemplates[type].length)
  ];
  const range = difficulty === 'easy' ? 10 : difficulty === 'medium' ? 50 : 100;
  const a = Math.floor(Math.random() * range) + 1;
  const b = Math.floor(Math.random() * range) + 1;
  const problem = template.replace('{a}', a).replace('{b}', b);
  const answer = calculateAnswer(type, a, b);
  return { problem, answer, a, b };
 }
 function calculateAnswer(type, a, b) {
  switch(type) {
    case 'addition': return a + b;
    case 'subtraction': return a - b;
    case 'multiplication': return a * b;
    case 'division': return Math.floor(a / b);
  }
 }
 ```
 ## Game Mechanics
 ### Points System
 ```javascript
 const scoring = {
  correct: {
    first_try: 10,
    second_try: 7,
    third_try: 5,
    with_hint: 3
  },
  streak: {
    multiplier: (streak) => Math.min(1 + (streak * 0.1), 3.0)
  },
  speed: {
    bonus: (seconds) => seconds < 5 ? 5 : seconds < 10 ? 3 : 0
  }
 };
 function calculatePoints(attempt, streak, seconds, usedHint) {
  let basePoints = scoring.correct.first_try;
  if (usedHint) basePoints = scoring.correct.with_hint;
  else if (attempt === 2) basePoints = scoring.correct.second_try;
  else if (attempt >= 3) basePoints = scoring.correct.third_try;
  const streakMultiplier = scoring.streak.multiplier(streak);
  const speedBonus = scoring.speed.bonus(seconds);
  return Math.floor(basePoints * streakMultiplier) + speedBonus;
 }
 ```
 ## Summary
 These basic math patterns provide:
 - Visual representations for concrete understanding
 - Interactive manipulatives for hands-on learning
 - Gamification elements for engagement
 - Progressive difficulty scaffolding
 - Clear explanations with every calculation
 Use these as building blocks for creating engaging math playgrounds!
--- a/skills/math-teacher/references/calculus.md
+++ b/skills/math-teacher/references/calculus.md
@@ -0,0 +1,565 @@
 # Calculus Reference
 Advanced calculus concepts with interactive visualizations.
 ## Derivatives
 ### Derivative Calculator
 ```javascript
 // Numerical derivative using limit definition
 function numericalDerivative(f, x, h = 0.0001) {
  return (f(x + h) - f(x - h)) / (2 * h);
 }
 // Common derivatives
 const derivatives = {
  power: (n) => (x) => n * Math.pow(x, n - 1),
  exponential: (a) => (x) => a * Math.pow(Math.E, a * x),
  logarithmic: (x) => 1 / x,
  sine: (x) => Math.cos(x),
  cosine: (x) => -Math.sin(x),
  tangent: (x) => 1 / Math.pow(Math.cos(x), 2)
 };
 ```
 ### Tangent Line Visualizer
 ```javascript
 function drawTangentLine(f, x0, canvas) {
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  // Calculate derivative at x0
  const slope = numericalDerivative(f, x0);
  const y0 = f(x0);
  // Draw function
  ctx.strokeStyle = '#667eea';
  ctx.lineWidth = 3;
  ctx.beginPath();
  for (let x = -5; x <= 5; x += 0.1) {
    const y = f(x);
    const px = (x + 5) * (width / 10);
    const py = height - ((y + 5) * (height / 10));
    if (x === -5) ctx.moveTo(px, py);
    else ctx.lineTo(px, py);
  }
  ctx.stroke();
  // Draw tangent line
  ctx.strokeStyle = '#FF6347';
  ctx.lineWidth = 2;
  ctx.beginPath();
  for (let x = -5; x <= 5; x += 0.1) {
    const y = y0 + slope * (x - x0); // Point-slope form
    const px = (x + 5) * (width / 10);
    const py = height - ((y + 5) * (height / 10));
    if (x === -5) ctx.moveTo(px, py);
    else ctx.lineTo(px, py);
  }
  ctx.stroke();
  // Mark point of tangency
  const px0 = (x0 + 5) * (width / 10);
  const py0 = height - ((y0 + 5) * (height / 10));
  ctx.fillStyle = '#FFD700';
  ctx.beginPath();
  ctx.arc(px0, py0, 8, 0, Math.PI * 2);
  ctx.fill();
  // Display slope
  ctx.fillStyle = '#333';
  ctx.font = 'bold 16px Arial';
  ctx.fillText(`Slope = ${slope.toFixed(3)}`, 20, 30);
  ctx.fillText(`f'(${x0.toFixed(2)}) = ${slope.toFixed(3)}`, 20, 50);
  return { slope, y0, x0 };
 }
 ```
 ### Secant Line Animation
 ```javascript
 function animateSecantToTangent(f, x0, canvas) {
  const ctx = canvas.getContext('2d');
  let h = 2; // Start with h = 2
  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Draw function
    drawFunction(f, canvas);
    // Calculate secant slope
    const y0 = f(x0);
    const y1 = f(x0 + h);
    const slope = (y1 - y0) / h;
    // Draw secant line
    drawSecantLine(x0, y0, x0 + h, y1, canvas);
    // Display values
    ctx.fillStyle = '#333';
    ctx.font = 'bold 16px Arial';
    ctx.fillText(`h = ${h.toFixed(4)}`, 20, 30);
    ctx.fillText(`Secant slope = ${slope.toFixed(4)}`, 20, 50);
    if (h > 0.0001) {
      h *= 0.95; // Gradually decrease h
      setTimeout(animate, 50);
    } else {
      ctx.fillText('→ Tangent line!', 20, 70);
      const derivative = numericalDerivative(f, x0);
      ctx.fillText(`Derivative = ${derivative.toFixed(4)}`, 20, 90);
    }
  }
  animate();
 }
 ```
 ### Rate of Change Explorer
 ```javascript
 function exploreRateOfChange(scenario, canvas) {
  // Scenarios: distance-time → velocity, velocity-time → acceleration, etc.
  const scenarios = {
    position: {
      f: (t) => 5 * t * t, // Position function
      derivative: 'Velocity',
      units: 'm/s',
      explanation: 'How fast position changes = velocity'
    },
    velocity: {
      f: (t) => 10 * t, // Velocity function
      derivative: 'Acceleration',
      units: 'm/s²',
      explanation: 'How fast velocity changes = acceleration'
    },
    population: {
      f: (t) => 1000 * Math.exp(0.1 * t), // Exponential growth
      derivative: 'Growth Rate',
      units: 'people/year',
      explanation: 'How fast population changes = growth rate'
    }
  };
  const s = scenarios[scenario];
  const ctx = canvas.getContext('2d');
  // Draw both function and derivative
  drawTwoGraphs(s.f, (x) => numericalDerivative(s.f, x), canvas);
  return s;
 }
 ```
 ## Integrals
 ### Riemann Sum Visualizer
 ```javascript
 function drawRiemannSum(f, a, b, n, method, canvas) {
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  const dx = (b - a) / n;
  let sum = 0;
  // Draw function
  ctx.strokeStyle = '#667eea';
  ctx.lineWidth = 3;
  ctx.beginPath();
  for (let x = a; x <= b; x += 0.01) {
    const y = f(x);
    const px = ((x - a) / (b - a)) * width;
    const py = height - (y / 10) * height;
    if (x === a) ctx.moveTo(px, py);
    else ctx.lineTo(px, py);
  }
  ctx.stroke();
  // Draw rectangles
  for (let i = 0; i < n; i++) {
    const x = a + i * dx;
    let sampleX;
    switch(method) {
      case 'left':
        sampleX = x;
        break;
      case 'right':
        sampleX = x + dx;
        break;
      case 'midpoint':
        sampleX = x + dx / 2;
        break;
      case 'trapezoid':
        // Will handle separately
        break;
    }
    if (method !== 'trapezoid') {
      const height_rect = f(sampleX);
      sum += height_rect * dx;
      // Draw rectangle
      const px = ((x - a) / (b - a)) * width;
      const pw = (dx / (b - a)) * width;
      const ph = (height_rect / 10) * height;
      ctx.fillStyle = 'rgba(102, 126, 234, 0.3)';
      ctx.fillRect(px, height - ph, pw, ph);
      ctx.strokeStyle = '#667eea';
      ctx.strokeRect(px, height - ph, pw, ph);
    }
  }
  // Display sum
  ctx.fillStyle = '#333';
  ctx.font = 'bold 18px Arial';
  ctx.fillText(`Rectangles: ${n}`, 20, 30);
  ctx.fillText(`Approximate Area: ${sum.toFixed(4)}`, 20, 55);
  return sum;
 }
 function animateRiemannIncrease(f, a, b, canvas) {
  let n = 1;
  function animate() {
    const sum = drawRiemannSum(f, a, b, n, 'midpoint', canvas);
    if (n < 100) {
      n++;
      setTimeout(animate, 100);
    } else {
      // Show exact integral
      const exact = exactIntegral(f, a, b);
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#FF6347';
      ctx.font = 'bold 18px Arial';
      ctx.fillText(`Exact Area: ${exact.toFixed(4)}`, 20, 80);
    }
  }
  animate();
 }
 ```
 ### Area Under Curve
 ```javascript
 function calculateDefiniteIntegral(f, a, b, method = 'simpson') {
  const n = 1000; // Number of subdivisions
  const h = (b - a) / n;
  let sum = 0;
  switch(method) {
    case 'simpson':
      // Simpson's Rule (most accurate)
      sum = f(a) + f(b);
      for (let i = 1; i < n; i++) {
        const x = a + i * h;
        sum += (i % 2 === 0 ? 2 : 4) * f(x);
      }
      sum *= h / 3;
      break;
    case 'trapezoidal':
      sum = (f(a) + f(b)) / 2;
      for (let i = 1; i < n; i++) {
        sum += f(a + i * h);
      }
      sum *= h;
      break;
    case 'midpoint':
      for (let i = 0; i < n; i++) {
        sum += f(a + (i + 0.5) * h);
      }
      sum *= h;
      break;
  }
  return sum;
 }
 ```
 ### Accumulation Function
 ```javascript
 function drawAccumulationFunction(f, a, canvas) {
  // Draw A(x) = ∫[a to x] f(t) dt
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  // Original function f
  ctx.strokeStyle = '#667eea';
  ctx.lineWidth = 2;
  ctx.beginPath();
  for (let x = -5; x <= 5; x += 0.1) {
    const y = f(x);
    const px = (x + 5) * (width / 10);
    const py = height / 2 - y * 20;
    if (x === -5) ctx.moveTo(px, py);
    else ctx.lineTo(px, py);
  }
  ctx.stroke();
  // Accumulation function A(x)
  ctx.strokeStyle = '#FF6347';
  ctx.lineWidth = 3;
  ctx.beginPath();
  for (let x = -5; x <= 5; x += 0.1) {
    const y = calculateDefiniteIntegral(f, a, x);
    const px = (x + 5) * (width / 10);
    const py = height / 2 - y * 20;
    if (x === -5) ctx.moveTo(px, py);
    else ctx.lineTo(px, py);
  }
  ctx.stroke();
  // Labels
  ctx.fillStyle = '#333';
  ctx.font = '16px Arial';
  ctx.fillText('f(x) - Original function', 20, 30);
  ctx.fillStyle = '#FF6347';
  ctx.fillText('A(x) = ∫f(t)dt - Accumulation', 20, 55);
 }
 ```
 ## Limits
 ### Limit Visualizer
 ```javascript
 function visualizeLimit(f, a, canvas) {
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  // Draw function
  ctx.strokeStyle = '#667eea';
  ctx.lineWidth = 3;
  ctx.beginPath();
  let leftLimit = null;
  let rightLimit = null;
  for (let x = -5; x <= 5; x += 0.01) {
    if (Math.abs(x - a) > 0.001) { // Skip the point
      const y = f(x);
      if (isFinite(y)) {
        const px = (x + 5) * (width / 10);
        const py = height / 2 - y * 20;
        if (x === -5) ctx.moveTo(px, py);
        else ctx.lineTo(px, py);
        // Track limits
        if (x < a && x > a - 0.1) leftLimit = y;
        if (x > a && x < a + 0.1) rightLimit = y;
      }
    }
  }
  ctx.stroke();
  // Mark point of interest
  const px = (a + 5) * (width / 10);
  const py_left = height / 2 - leftLimit * 20;
  const py_right = height / 2 - rightLimit * 20;
  // Open circles for limit points
  ctx.strokeStyle = '#FF6347';
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.arc(px, py_left, 6, 0, Math.PI * 2);
  ctx.stroke();
  // Display limit values
  ctx.fillStyle = '#333';
  ctx.font = 'bold 16px Arial';
  ctx.fillText(`lim (x→${a}⁻) = ${leftLimit?.toFixed(3)}`, 20, 30);
  ctx.fillText(`lim (x→${a}⁺) = ${rightLimit?.toFixed(3)}`, 20, 55);
  const limitExists = Math.abs(leftLimit - rightLimit) < 0.01;
  if (limitExists) {
    ctx.fillStyle = '#4CAF50';
    ctx.fillText(`Limit exists: ${leftLimit.toFixed(3)}`, 20, 80);
  } else {
    ctx.fillStyle = '#FF6347';
    ctx.fillText('Limit does not exist', 20, 80);
  }
  return { leftLimit, rightLimit, limitExists };
 }
 ```
 ### Interactive Epsilon-Delta
 ```javascript
 function visualizeEpsilonDelta(f, a, L, epsilon, canvas) {
  const ctx = canvas.getContext('2d');
  // Draw function
  drawFunction(f, canvas);
  // Draw epsilon band
  const py_upper = height / 2 - (L + epsilon) * 20;
  const py_lower = height / 2 - (L - epsilon) * 20;
  ctx.fillStyle = 'rgba(255, 99, 71, 0.2)';
  ctx.fillRect(0, py_upper, width, py_lower - py_upper);
  // Find delta
  let delta = 0.1;
  for (let d = 0.01; d < 5; d += 0.01) {
    const y_left = f(a - d);
    const y_right = f(a + d);
    if (Math.abs(y_left - L) < epsilon && Math.abs(y_right - L) < epsilon) {
      delta = d;
    } else {
      break;
    }
  }
  // Draw delta interval
  const px_left = (a - delta + 5) * (width / 10);
  const px_right = (a + delta + 5) * (width / 10);
  ctx.fillStyle = 'rgba(102, 126, 234, 0.2)';
  ctx.fillRect(px_left, 0, px_right - px_left, height);
  // Labels
  ctx.fillStyle = '#333';
  ctx.font = 'bold 16px Arial';
  ctx.fillText(`ε = ${epsilon.toFixed(3)}`, 20, 30);
  ctx.fillText(`δ = ${delta.toFixed(3)}`, 20, 55);
  ctx.fillText(`For |x - ${a}| < δ, |f(x) - ${L}| < ε`, 20, 80);
  return delta;
 }
 ```
 ## Optimization
 ### Critical Points Finder
 ```javascript
 function findCriticalPoints(f, a, b) {
  const points = [];
  const step = (b - a) / 1000;
  for (let x = a; x <= b; x += step) {
    const derivative = numericalDerivative(f, x);
    // Check if derivative is close to zero
    if (Math.abs(derivative) < 0.01) {
      const secondDerivative = numericalDerivative(
        (t) => numericalDerivative(f, t),
        x
      );
      points.push({
        x: x,
        y: f(x),
        type: secondDerivative < 0 ? 'local maximum' :
              secondDerivative > 0 ? 'local minimum' :
              'inflection point',
        derivative: derivative,
        secondDerivative: secondDerivative
      });
    }
  }
  return points;
 }
 function visualizeOptimization(f, a, b, canvas) {
  const ctx = canvas.getContext('2d');
  // Draw function
  drawFunction(f, canvas);
  // Find and mark critical points
  const criticalPoints = findCriticalPoints(f, a, b);
  criticalPoints.forEach(point => {
    const px = (point.x + 5) * (width / 10);
    const py = height / 2 - point.y * 20;
    // Different colors for different types
    ctx.fillStyle = point.type.includes('maximum') ? '#4CAF50' :
                    point.type.includes('minimum') ? '#FF6347' :
                    '#FFD700';
    ctx.beginPath();
    ctx.arc(px, py, 8, 0, Math.PI * 2);
    ctx.fill();
    // Label
    ctx.fillStyle = '#333';
    ctx.font = '12px Arial';
    ctx.fillText(`${point.type}`, px + 10, py - 10);
    ctx.fillText(`(${point.x.toFixed(2)}, ${point.y.toFixed(2)})`,
                 px + 10, py + 5);
  });
  return criticalPoints;
 }
 ```
 ## Related Rates
 ### Related Rates Visualizer
 ```javascript
 function visualizeRelatedRates(scenario, rate, time, canvas) {
  const scenarios = {
    ladder: {
      // Ladder sliding down wall
      length: 10, // Ladder length
      rate: rate, // dx/dt (horizontal speed)
      draw: function(t) {
        const x = rate * t;
        const y = Math.sqrt(this.length * this.length - x * x);
        const dy_dt = -(x * rate) / y; // dy/dt calculated
        drawLadder(x, y, canvas);
        return { x, y, dx_dt: rate, dy_dt };
      }
    },
    balloon: {
      // Expanding balloon
      rate: rate, // dr/dt (radius growth rate)
      draw: function(t) {
        const r = 1 + rate * t;
        const V = (4/3) * Math.PI * r * r * r;
        const dV_dt = 4 * Math.PI * r * r * rate; // dV/dt
        drawBalloon(r, canvas);
        return { r, V, dr_dt: rate, dV_dt };
      }
    }
  };
  return scenarios[scenario].draw(time);
 }
 ```
 ## Summary
 Calculus patterns provide:
 - Visual derivative calculations with tangent lines
 - Riemann sum animations showing integral approximation
 - Limit visualization with epsilon-delta
 - Critical point finding for optimization
 - Related rates scenarios with animations
 These tools make abstract calculus concepts concrete and interactive!
--- a/skills/math-teacher/references/gamification.md
+++ b/skills/math-teacher/references/gamification.md
@@ -0,0 +1,635 @@
 # Gamification Reference
 Game mechanics, reward systems, and engagement techniques for math learning.
 ## Points System
 ### Base Points
 ```javascript
 const POINTS = {
  // Correctness
  CORRECT_FIRST_TRY: 10,
  CORRECT_SECOND_TRY: 7,
  CORRECT_THIRD_TRY: 5,
  CORRECT_WITH_HINT: 3,
  // Exploration
  TRY_DIFFERENT_VALUE: 2,
  DISCOVER_PATTERN: 15,
  FIND_SPECIAL_CASE: 20,
  // Speed
  SPEED_BONUS_5SEC: 5,
  SPEED_BONUS_10SEC: 3,
  SPEED_BONUS_30SEC: 1,
  // Completion
  COMPLETE_LEVEL: 50,
  COMPLETE_CHALLENGE: 100,
  PERFECT_SCORE: 200,
  // Daily
  DAILY_LOGIN: 10,
  DAILY_CHALLENGE: 25
 };
 ```
 ### Multipliers
 ```javascript
 function calculateMultiplier(state) {
  let multiplier = 1.0;
  // Streak multiplier
  if (state.streak >= 3) multiplier += 0.5;
  if (state.streak >= 5) multiplier += 0.5;
  if (state.streak >= 10) multiplier += 1.0;
  // Difficulty multiplier
  multiplier *= {
    'easy': 1.0,
    'medium': 1.5,
    'hard': 2.0,
    'expert': 3.0
  }[state.difficulty] || 1.0;
  // Level multiplier
  multiplier *= (1 + (state.level * 0.1));
  return Math.min(multiplier, 5.0); // Cap at 5x
 }
 ```
 ### Total Score Calculation
 ```javascript
 function awardPoints(basePoints, state) {
  const multiplier = calculateMultiplier(state);
  const speedBonus = calculateSpeedBonus(state.timeSpent);
  const total = Math.floor(basePoints * multiplier) + speedBonus;
  return {
    base: basePoints,
    multiplier: multiplier,
    speedBonus: speedBonus,
    total: total,
    breakdown: `${basePoints} × ${multiplier.toFixed(1)} + ${speedBonus}`
  };
 }
 function calculateSpeedBonus(seconds) {
  if (seconds < 5) return POINTS.SPEED_BONUS_5SEC;
  if (seconds < 10) return POINTS.SPEED_BONUS_10SEC;
  if (seconds < 30) return POINTS.SPEED_BONUS_30SEC;
  return 0;
 }
 ```
 ## Achievements
 ### Achievement Definitions
 ```javascript
 const ACHIEVEMENTS = {
  first_steps: {
    id: 'first_steps',
    name: '🌟 First Steps',
    description: 'Complete your first problem',
    condition: (stats) => stats.problemsCompleted >= 1,
    points: 10,
    rarity: 'common'
  },
  hot_streak: {
    id: 'hot_streak',
    name: '🔥 Hot Streak',
    description: 'Get 5 correct answers in a row',
    condition: (stats) => stats.currentStreak >= 5,
    points: 25,
    rarity: 'uncommon'
  },
  speed_demon: {
    id: 'speed_demon',
    name: '⚡ Speed Demon',
    description: 'Solve 10 problems in under 5 seconds each',
    condition: (stats) => stats.fastSolves >= 10,
    points: 50,
    rarity: 'rare'
  },
  perfectionist: {
    id: 'perfectionist',
    name: '💯 Perfectionist',
    description: 'Get 100% on a challenge',
    condition: (stats) => stats.perfectScores >= 1,
    points: 100,
    rarity: 'epic'
  },
  math_master: {
    id: 'math_master',
    name: '🏆 Math Master',
    description: 'Reach 1000 total points',
    condition: (stats) => stats.totalPoints >= 1000,
    points: 200,
    rarity: 'legendary'
  },
  explorer: {
    id: 'explorer',
    name: '🔍 Explorer',
    description: 'Try 50 different values',
    condition: (stats) => stats.valuesExplored >= 50,
    points: 30,
    rarity: 'uncommon'
  },
  pattern_finder: {
    id: 'pattern_finder',
    name: '🧩 Pattern Finder',
    description: 'Discover 5 mathematical patterns',
    condition: (stats) => stats.patternsFound >= 5,
    points: 75,
    rarity: 'rare'
  },
  night_owl: {
    id: 'night_owl',
    name: '🦉 Night Owl',
    description: 'Practice after midnight',
    condition: (stats) => stats.lateNightSessions >= 1,
    points: 15,
    rarity: 'common'
  },
  early_bird: {
    id: 'early_bird',
    name: '🐦 Early Bird',
    description: 'Practice before 6 AM',
    condition: (stats) => stats.earlyMorningSessions >= 1,
    points: 15,
    rarity: 'common'
  },
  week_warrior: {
    id: 'week_warrior',
    name: '📅 Week Warrior',
    description: 'Practice 7 days in a row',
    condition: (stats) => stats.dailyStreak >= 7,
    points: 150,
    rarity: 'epic'
  }
 };
 ```
 ### Achievement Checker
 ```javascript
 function checkAchievements(stats, unlockedAchievements) {
  const newAchievements = [];
  for (const [id, achievement] of Object.entries(ACHIEVEMENTS)) {
    if (!unlockedAchievements.includes(id)) {
      if (achievement.condition(stats)) {
        newAchievements.push(achievement);
        unlockedAchievements.push(id);
      }
    }
  }
  return newAchievements;
 }
 ```
 ### Achievement Display
 ```javascript
 function showAchievementPopup(achievement) {
  const popup = document.createElement('div');
  popup.className = 'achievement-popup';
  popup.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, ${getRarityColor(achievement.rarity)});
    color: white;
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    animation: slideIn 0.5s ease, pulse 0.5s ease 0.5s;
    z-index: 1000;
    font-weight: bold;
    min-width: 250px;
  `;
  popup.innerHTML = `
    <div style="font-size: 2em; text-align: center;">${achievement.name}</div>
    <div style="margin-top: 10px; text-align: center;">${achievement.description}</div>
    <div style="margin-top: 10px; text-align: center; font-size: 1.5em;">
      +${achievement.points} points
    </div>
  `;
  document.body.appendChild(popup);
  // Play sound
  playAchievementSound(achievement.rarity);
  // Remove after 4 seconds
  setTimeout(() => {
    popup.style.animation = 'slideOut 0.5s ease';
    setTimeout(() => popup.remove(), 500);
  }, 4000);
 }
 function getRarityColor(rarity) {
  const colors = {
    common: '#909090, #606060',
    uncommon: '#4CAF50, #388E3C',
    rare: '#2196F3, #1565C0',
    epic: '#9C27B0, #6A1B9A',
    legendary: '#FFC107, #F57C00'
  };
  return colors[rarity] || colors.common;
 }
 ```
 ## Progress Tracking
 ### Stats Structure
 ```javascript
 const playerStats = {
  // Basic counts
  problemsAttempted: 0,
  problemsCompleted: 0,
  correctAnswers: 0,
  incorrectAnswers: 0,
  // Streaks
  currentStreak: 0,
  longestStreak: 0,
  dailyStreak: 0,
  // Performance
  averageTime: 0,
  fastestTime: Infinity,
  fastSolves: 0,
  perfectScores: 0,
  // Exploration
  valuesExplored: 0,
  patternsFound: 0,
  // Points & Level
  totalPoints: 0,
  level: 1,
  pointsToNextLevel: 100,
  // Time tracking
  totalTimeSpent: 0,
  sessionsCount: 0,
  lastSessionDate: null,
  lateNightSessions: 0,
  earlyMorningSessions: 0,
  // Achievements
  achievementsUnlocked: [],
  achievementPoints: 0
 };
 ```
 ### Level System
 ```javascript
 function calculateLevel(points) {
  // Level 1: 0-100 points
  // Level 2: 100-300 points
  // Level 3: 300-600 points
  // Formula: points_needed = 100 * level * (level + 1) / 2
  let level = 1;
  let pointsNeeded = 100;
  let totalPointsForLevel = 0;
  while (points >= totalPointsForLevel + pointsNeeded) {
    totalPointsForLevel += pointsNeeded;
    level++;
    pointsNeeded = 100 * level;
  }
  return {
    level: level,
    currentPoints: points,
    pointsInLevel: points - totalPointsForLevel,
    pointsToNextLevel: pointsNeeded,
    progress: (points - totalPointsForLevel) / pointsNeeded
  };
 }
 function checkLevelUp(oldPoints, newPoints) {
  const oldLevel = calculateLevel(oldPoints).level;
  const newLevel = calculateLevel(newPoints).level;
  if (newLevel > oldLevel) {
    showLevelUpAnimation(newLevel);
    return true;
  }
  return false;
 }
 ```
 ### Progress Visualization
 ```javascript
 function drawProgressBar(progress, canvas) {
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = 40;
  // Background
  ctx.fillStyle = '#E0E0E0';
  ctx.fillRect(0, 0, width, height);
  // Progress fill
  const gradient = ctx.createLinearGradient(0, 0, width * progress, 0);
  gradient.addColorStop(0, '#667eea');
  gradient.addColorStop(1, '#764ba2');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, width * progress, height);
  // Border
  ctx.strokeStyle = '#333';
  ctx.lineWidth = 2;
  ctx.strokeRect(0, 0, width, height);
  // Text
  ctx.fillStyle = '#333';
  ctx.font = 'bold 18px Arial';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(`${Math.floor(progress * 100)}%`, width / 2, height / 2);
 }
 ```
 ## Reward Animations
 ### Confetti
 ```javascript
 function createConfetti() {
  const colors = ['#FF6347', '#FFD700', '#4CAF50', '#2196F3', '#9C27B0'];
  const confettiCount = 50;
  const confetti = [];
  for (let i = 0; i < confettiCount; i++) {
    confetti.push({
      x: Math.random() * window.innerWidth,
      y: -20,
      vx: (Math.random() - 0.5) * 5,
      vy: Math.random() * 3 + 2,
      color: colors[Math.floor(Math.random() * colors.length)],
      size: Math.random() * 10 + 5,
      rotation: Math.random() * 360,
      rotationSpeed: (Math.random() - 0.5) * 10
    });
  }
  return confetti;
 }
 function animateConfetti(confetti, ctx) {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  let active = 0;
  confetti.forEach(piece => {
    piece.x += piece.vx;
    piece.y += piece.vy;
    piece.vy += 0.1; // Gravity
    piece.rotation += piece.rotationSpeed;
    if (piece.y < ctx.canvas.height) {
      active++;
      ctx.save();
      ctx.translate(piece.x, piece.y);
      ctx.rotate(piece.rotation * Math.PI / 180);
      ctx.fillStyle = piece.color;
      ctx.fillRect(-piece.size / 2, -piece.size / 2, piece.size, piece.size);
      ctx.restore();
    }
  });
  if (active > 0) {
    requestAnimationFrame(() => animateConfetti(confetti, ctx));
  }
 }
 function celebrateWithConfetti() {
  const canvas = document.createElement('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  canvas.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
  `;
  document.body.appendChild(canvas);
  const ctx = canvas.getContext('2d');
  const confetti = createConfetti();
  animateConfetti(confetti, ctx);
  setTimeout(() => canvas.remove(), 5000);
 }
 ```
 ### Score Popup
 ```javascript
 function showScorePopup(points, x, y) {
  const popup = document.createElement('div');
  popup.textContent = `+${points}`;
  popup.style.cssText = `
    position: absolute;
    left: ${x}px;
    top: ${y}px;
    color: #FFD700;
    font-size: 2em;
    font-weight: bold;
    animation: floatUp 1s ease-out forwards;
    pointer-events: none;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    z-index: 1000;
  `;
  document.body.appendChild(popup);
  setTimeout(() => popup.remove(), 1000);
 }
 // Add CSS animation
 const style = document.createElement('style');
 style.textContent = `
  @keyframes floatUp {
    from {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    to {
      transform: translateY(-100px) scale(1.5);
      opacity: 0;
    }
  }
 `;
 document.head.appendChild(style);
 ```
 ## Challenge Modes
 ### Time Attack
 ```javascript
 class TimeAttackMode {
  constructor(duration = 60) {
    this.duration = duration;
    this.timeRemaining = duration;
    this.problemsSolved = 0;
    this.totalPoints = 0;
    this.isActive = false;
  }
  start() {
    this.isActive = true;
    this.timer = setInterval(() => {
      this.timeRemaining--;
      this.updateDisplay();
      if (this.timeRemaining <= 0) {
        this.end();
      }
    }, 1000);
  }
  solve(points) {
    if (this.isActive) {
      this.problemsSolved++;
      this.totalPoints += points;
      this.generateNewProblem();
    }
  }
  end() {
    this.isActive = false;
    clearInterval(this.timer);
    this.showResults();
  }
  showResults() {
    const results = {
      problemsSolved: this.problemsSolved,
      totalPoints: this.totalPoints,
      averageTime: this.duration / this.problemsSolved,
      rating: this.calculateRating()
    };
    displayResults(results);
  }
  calculateRating() {
    if (this.problemsSolved >= 30) return '🏆 Master';
    if (this.problemsSolved >= 20) return '⭐ Expert';
    if (this.problemsSolved >= 15) return '👍 Good';
    if (this.problemsSolved >= 10) return '✓ Average';
    return '💪 Keep Practicing';
  }
 }
 ```
 ### Accuracy Challenge
 ```javascript
 class AccuracyChallenge {
  constructor(problemCount = 10) {
    this.problemCount = problemCount;
    this.currentProblem = 0;
    this.correctAnswers = 0;
    this.mistakes = 0;
    this.maxMistakes = 3;
  }
  checkAnswer(userAnswer, correctAnswer) {
    if (userAnswer === correctAnswer) {
      this.correctAnswers++;
      this.currentProblem++;
      celebrateCorrect();
      if (this.currentProblem >= this.problemCount) {
        this.complete();
      } else {
        this.nextProblem();
      }
    } else {
      this.mistakes++;
      if (this.mistakes >= this.maxMistakes) {
        this.fail();
      } else {
        showMistakeWarning(this.maxMistakes - this.mistakes);
      }
    }
  }
  complete() {
    const accuracy = (this.correctAnswers / this.problemCount) * 100;
    showCompletionScreen({
      success: true,
      accuracy: accuracy,
      perfect: accuracy === 100,
      reward: this.calculateReward(accuracy)
    });
  }
  fail() {
    showCompletionScreen({
      success: false,
      correctAnswers: this.correctAnswers,
      totalProblems: this.problemCount
    });
  }
  calculateReward(accuracy) {
    if (accuracy === 100) return 200;
    if (accuracy >= 90) return 150;
    if (accuracy >= 80) return 100;
    if (accuracy >= 70) return 75;
    return 50;
  }
 }
 ```
 ## Sound Effects
 ### Audio System
 ```javascript
 const sounds = {
  correct: 'data:audio/wav;base64,...', // Positive chime
  incorrect: 'data:audio/wav;base64,...', // Gentle buzz
  achievement: 'data:audio/wav;base64,...', // Fanfare
  levelUp: 'data:audio/wav;base64,...', // Ascending notes
  click: 'data:audio/wav;base64,...' // Click sound
 };
 function playSound(soundName) {
  if (!sounds[soundName]) return;
  const audio = new Audio(sounds[soundName]);
  audio.volume = 0.3;
  audio.play().catch(() => {
    // Ignore if user hasn't interacted yet
  });
 }
 ```
 ## Summary
 These gamification patterns provide:
 - Comprehensive points and achievement systems
 - Progressive difficulty with level systems
 - Engaging reward animations
 - Multiple challenge modes
 - Progress tracking and visualization
 - Sound effects and celebrations
 Use these to make math learning addictively fun!
--- a/skills/math-teacher/scripts/generate_game.sh
+++ b/skills/math-teacher/scripts/generate_game.sh
@@ -0,0 +1,386 @@
 #!/bin/bash
 # Math Teacher - Game Generator
 # Creates gamified math challenges with scoring and achievements
 set -e
 # Colors
 GREEN='\033[0;32m'
 BLUE='\033[0;34m'
 PURPLE='\033[0;35m'
 NC='\033[0m'
 print_success() { echo -e "${GREEN}✓ $1${NC}"; }
 print_info() { echo -e "${BLUE}ℹ $1${NC}"; }
 prompt_select() {
    local prompt="$1"
    local var_name="$2"
    shift 2
    local options=("$@")
    echo -e "${BLUE}${prompt}${NC}"
    PS3="Select (1-${#options[@]}): "
    select opt in "${options[@]}"; do
        if [ -n "$opt" ]; then
            eval "$var_name='$opt'"
            break
        fi
    done
 }
 echo ""
 echo "╔════════════════════════════════════════════════════════════╗"
 echo "║            Math Teacher - Game Generator  🎮               ║"
 echo "╚════════════════════════════════════════════════════════════╝"
 echo ""
 print_info "Step 1/3: Game Type"
 prompt_select "What type of game?" GAME_TYPE \
    "Speed Challenge (Time Attack)" \
    "Accuracy Mode (No Mistakes)" \
    "Endless Practice (Streak Building)" \
    "Boss Battle (Progressive Difficulty)"
 print_info "Step 2/3: Math Topic"
 prompt_select "Which topic?" TOPIC \
    "Mental Math" \
    "Fractions" \
    "Algebra" \
    "Geometry" \
    "Mixed Topics"
 print_info "Step 3/3: Output"
 read -p "Game name (e.g., speed-math-game.html): " OUTPUT_FILE
 OUTPUT_DIR="./math-games"
 mkdir -p "$OUTPUT_DIR"
 OUTPUT_PATH="$OUTPUT_DIR/$OUTPUT_FILE"
 print_info "🎮 Generating your math game..."
 cat > "$OUTPUT_PATH" << 'GAMEEOF'
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Math Game Challenge</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Arial Black', sans-serif;
      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }
    .game-container {
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      padding: 40px;
      border-radius: 30px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      max-width: 600px;
      width: 90%;
      text-align: center;
    }
    h1 { font-size: 3em; margin-bottom: 10px; text-shadow: 3px 3px 6px rgba(0,0,0,0.5); }
    .stats {
      display: flex;
      justify-content: space-around;
      margin: 30px 0;
      font-size: 1.5em;
    }
    .stat-box {
      background: rgba(255,255,255,0.2);
      padding: 15px 25px;
      border-radius: 15px;
    }
    .problem {
      font-size: 4em;
      margin: 40px 0;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    .answer-input {
      font-size: 2em;
      padding: 20px;
      border: none;
      border-radius: 15px;
      text-align: center;
      width: 100%;
      margin: 20px 0;
      background: white;
      color: #333;
      font-weight: bold;
    }
    .button {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      color: white;
      border: none;
      padding: 20px 40px;
      font-size: 1.5em;
      border-radius: 15px;
      cursor: pointer;
      margin: 10px;
      transition: transform 0.2s;
      font-weight: bold;
    }
    .button:hover { transform: scale(1.05); }
    .button:active { transform: scale(0.95); }
    .feedback {
      font-size: 2em;
      margin: 20px 0;
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .correct { color: #4CAF50; }
    .incorrect { color: #FF6347; }
    .timer {
      font-size: 3em;
      color: #FFD700;
      font-weight: bold;
      margin: 20px 0;
    }
    .progress-bar {
      width: 100%;
      height: 20px;
      background: rgba(255,255,255,0.2);
      border-radius: 10px;
      overflow: hidden;
      margin: 20px 0;
    }
    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #4CAF50, #8BC34A);
      transition: width 0.3s ease;
    }
    .achievement-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      background: linear-gradient(135deg, #FFD700, #FFA500);
      color: #333;
      padding: 40px;
      border-radius: 20px;
      font-size: 2em;
      font-weight: bold;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      animation: popIn 0.5s ease forwards;
      z-index: 1000;
    }
    @keyframes popIn {
      to { transform: translate(-50%, -50%) scale(1); }
    }
    .game-over {
      display: none;
      flex-direction: column;
      gap: 20px;
    }
    .final-score { font-size: 4em; color: #FFD700; }
  </style>
 </head>
 <body>
  <div class="game-container">
    <h1>🎯 Math Challenge</h1>
    <div class="stats">
      <div class="stat-box">
        <div>Score</div>
        <div id="score">0</div>
      </div>
      <div class="stat-box">
        <div>Streak</div>
        <div id="streak">0</div>
      </div>
      <div class="stat-box">
        <div>Level</div>
        <div id="level">1</div>
      </div>
    </div>
    <div id="game-area">
      <div class="timer" id="timer">60</div>
      <div class="progress-bar">
        <div class="progress-fill" id="progress"></div>
      </div>
      <div class="problem" id="problem">5 + 3 = ?</div>
      <input type="number" class="answer-input" id="answer" placeholder="Your answer...">
      <button class="button" onclick="checkAnswer()">Submit ✓</button>
      <div class="feedback" id="feedback"></div>
    </div>
    <div class="game-over" id="gameOver">
      <h2>🎉 Game Over!</h2>
      <div class="final-score" id="finalScore">0</div>
      <p id="rating"></p>
      <button class="button" onclick="restartGame()">Play Again 🔄</button>
    </div>
  </div>
  <script>
    let score = 0;
    let streak = 0;
    let level = 1;
    let currentProblem = {};
    let timeRemaining = 60;
    let gameActive = true;
    let timerInterval;
    const operators = ['+', '-', '×', '÷'];
    function generateProblem() {
      const difficulty = Math.min(level, 10);
      const range = 10 * difficulty;
      const op = operators[Math.floor(Math.random() * operators.length)];
      let num1 = Math.floor(Math.random() * range) + 1;
      let num2 = Math.floor(Math.random() * range) + 1;
      // Ensure num1 >= num2 for subtraction
      if (op === '-' && num1 < num2) [num1, num2] = [num2, num1];
      // Make division result integer
      if (op === '÷') {
        num1 = num2 * (Math.floor(Math.random() * 10) + 1);
      }
      let answer;
      switch(op) {
        case '+': answer = num1 + num2; break;
        case '-': answer = num1 - num2; break;
        case '×': answer = num1 * num2; break;
        case '÷': answer = num1 / num2; break;
      }
      currentProblem = { num1, num2, op, answer };
      document.getElementById('problem').textContent = `${num1} ${op} ${num2} = ?`;
      document.getElementById('answer').value = '';
      document.getElementById('answer').focus();
    }
    function checkAnswer() {
      if (!gameActive) return;
      const userAnswer = parseFloat(document.getElementById('answer').value);
      const feedback = document.getElementById('feedback');
      if (userAnswer === currentProblem.answer) {
        streak++;
        const points = 10 * (1 + streak * 0.1);
        score += Math.floor(points);
        feedback.innerHTML = `<span class="correct">✓ Correct! +${Math.floor(points)} points</span>`;
        if (streak % 5 === 0) {
          showAchievement(`🔥 ${streak} Streak!`);
          level++;
          document.getElementById('level').textContent = level;
        }
        updateStats();
        setTimeout(generateProblem, 500);
      } else {
        streak = 0;
        feedback.innerHTML = `<span class="incorrect">✗ Incorrect! Answer: ${currentProblem.answer}</span>`;
        updateStats();
        setTimeout(() => {
          feedback.innerHTML = '';
          generateProblem();
        }, 1500);
      }
    }
    function updateStats() {
      document.getElementById('score').textContent = score;
      document.getElementById('streak').textContent = streak;
      document.getElementById('progress').style.width = `${(score % 100)}%`;
    }
    function startTimer() {
      timerInterval = setInterval(() => {
        timeRemaining--;
        document.getElementById('timer').textContent = timeRemaining;
        if (timeRemaining <= 10) {
          document.getElementById('timer').style.color = '#FF6347';
        }
        if (timeRemaining <= 0) {
          endGame();
        }
      }, 1000);
    }
    function endGame() {
      gameActive = false;
      clearInterval(timerInterval);
      document.getElementById('game-area').style.display = 'none';
      document.getElementById('gameOver').style.display = 'flex';
      document.getElementById('finalScore').textContent = score;
      let rating;
      if (score >= 500) rating = '🏆 Math Master!';
      else if (score >= 300) rating = '⭐ Excellent!';
      else if (score >= 200) rating = '👍 Great job!';
      else if (score >= 100) rating = '✓ Good effort!';
      else rating = '💪 Keep practicing!';
      document.getElementById('rating').textContent = rating;
    }
    function restartGame() {
      score = 0;
      streak = 0;
      level = 1;
      timeRemaining = 60;
      gameActive = true;
      document.getElementById('game-area').style.display = 'block';
      document.getElementById('gameOver').style.display = 'none';
      document.getElementById('timer').style.color = '#FFD700';
      updateStats();
      generateProblem();
      startTimer();
    }
    function showAchievement(text) {
      const popup = document.createElement('div');
      popup.className = 'achievement-popup';
      popup.textContent = text;
      document.body.appendChild(popup);
      setTimeout(() => popup.remove(), 2000);
    }
    // Enter key submits answer
    document.getElementById('answer').addEventListener('keypress', (e) => {
      if (e.key === 'Enter') checkAnswer();
    });
    // Initialize
    generateProblem();
    startTimer();
  </script>
 </body>
 </html>
 GAMEEOF
 echo ""
 print_success "Game created: $OUTPUT_PATH"
 echo ""
 print_info "Game features:"
 echo "   ✓ 60-second time challenge"
 echo "   ✓ Progressive difficulty"
 echo "   ✓ Streak bonuses"
 echo "   ✓ Achievement system"
 echo "   ✓ Final score rating"
 echo ""
 print_info "🚀 Opening game in browser..."
 open "$OUTPUT_PATH"
--- a/skills/math-teacher/scripts/generate_playground.sh
+++ b/skills/math-teacher/scripts/generate_playground.sh
@@ -0,0 +1,458 @@
 #!/bin/bash
 # Math Teacher - Interactive Playground Generator
 # Creates instant, interactive math learning experiences
 set -e
 # Colors
 RED='\033[0;31m'
 GREEN='\033[0;32m'
 YELLOW='\033[1;33m'
 BLUE='\033[0;34m'
 PURPLE='\033[0;35m'
 NC='\033[0m'
 # Helper functions
 print_success() {
    echo -e "${GREEN}✓ $1${NC}"
 }
 print_error() {
    echo -e "${RED}✗ $1${NC}"
 }
 print_info() {
    echo -e "${BLUE}ℹ $1${NC}"
 }
 print_warning() {
    echo -e "${YELLOW}⚠ $1${NC}"
 }
 prompt_input() {
    local prompt="$1"
    local var_name="$2"
    local required="${3:-false}"
    while true; do
        echo -e "${BLUE}${prompt}${NC}"
        read -r input
        if [ -z "$input" ] && [ "$required" = true ]; then
            print_error "This field is required."
            continue
        fi
        eval "$var_name='$input'"
        break
    done
 }
 prompt_select() {
    local prompt="$1"
    local var_name="$2"
    shift 2
    local options=("$@")
    echo -e "${BLUE}${prompt}${NC}"
    PS3="Select (1-${#options[@]}): "
    select opt in "${options[@]}"; do
        if [ -n "$opt" ]; then
            eval "$var_name='$opt'"
            break
        else
            print_error "Invalid selection. Try again."
        fi
    done
 }
 # Banner
 echo ""
 echo "╔════════════════════════════════════════════════════════════╗"
 echo "║                                                            ║"
 echo "║         Math Teacher - Playground Generator  🎮            ║"
 echo "║                                                            ║"
 echo "╚════════════════════════════════════════════════════════════╝"
 echo ""
 # Step 1: Math Topic Level
 print_info "Step 1/5: Choose Math Level"
 prompt_select "What level?" LEVEL \
    "Elementary (Ages 6-12)" \
    "Middle School (Ages 12-15)" \
    "High School (Ages 15-18)" \
    "Advanced (College+)"
 # Step 2: Specific Topic
 print_info "Step 2/5: Choose Topic"
 case $LEVEL in
    "Elementary (Ages 6-12)")
        prompt_select "Which topic?" TOPIC \
            "Fractions" \
            "Multiplication Table" \
            "Geometry Shapes" \
            "Number Patterns" \
            "Time & Clock" \
            "Money & Change"
        ;;
    "Middle School (Ages 12-15)")
        prompt_select "Which topic?" TOPIC \
            "Linear Equations" \
            "Ratios & Proportions" \
            "Percentages" \
            "Basic Statistics" \
            "Pythagorean Theorem" \
            "Order of Operations"
        ;;
    "High School (Ages 15-18)")
        prompt_select "Which topic?" TOPIC \
            "Quadratic Functions" \
            "Trigonometry" \
            "Exponential Functions" \
            "Logarithms" \
            "Polynomial Graphs" \
            "Systems of Equations"
        ;;
    "Advanced (College+)")
        prompt_select "Which topic?" TOPIC \
            "Derivatives" \
            "Integrals" \
            "Limits" \
            "Optimization" \
            "Series & Sequences" \
            "Differential Equations"
        ;;
 esac
 # Step 3: Interaction Type
 print_info "Step 3/5: Type of Experience"
 prompt_select "What kind of playground?" INTERACTION_TYPE \
    "Visual Explorer (Manipulate and see changes)" \
    "Practice Problems (Randomized with hints)" \
    "Challenge Game (Timed with scoring)" \
    "Concept Demo (Animated explanation)" \
    "Sandbox (Open exploration)"
 # Step 4: Difficulty
 print_info "Step 4/5: Difficulty Level"
 prompt_select "Difficulty?" DIFFICULTY \
    "Easy" \
    "Medium" \
    "Hard"
 # Step 5: Output Location
 print_info "Step 5/5: Save Location"
 prompt_input "Output file name (e.g., fractions-playground.html):" OUTPUT_FILE true
 OUTPUT_DIR="./math-playgrounds"
 mkdir -p "$OUTPUT_DIR"
 OUTPUT_PATH="$OUTPUT_DIR/$OUTPUT_FILE"
 # Generate the playground HTML
 echo ""
 print_info "🎨 Generating your interactive math playground..."
 echo ""
 # Create the HTML file based on topic
 case $TOPIC in
    "Fractions")
        generate_fractions_playground
        ;;
    "Quadratic Functions")
        generate_quadratic_playground
        ;;
    "Derivatives")
        generate_derivatives_playground
        ;;
    *)
        generate_generic_playground
        ;;
 esac
 # Success message
 echo ""
 echo "╔════════════════════════════════════════════════════════════╗"
 echo "║                    🎉 Success!                             ║"
 echo "╚════════════════════════════════════════════════════════════╝"
 echo ""
 print_success "Playground created: $OUTPUT_PATH"
 print_success "Topic: $TOPIC"
 print_success "Level: $LEVEL"
 print_success "Type: $INTERACTION_TYPE"
 echo ""
 print_info "🚀 Opening playground in browser..."
 open "$OUTPUT_PATH"
 echo ""
 print_info "💡 Playground tips:"
 echo "   2. Or double-click the file"
 echo "   3. Start learning by playing!"
 echo ""
 print_info "💡 The playground includes:"
 echo "   ✓ Interactive visualizations"
 echo "   ✓ Real-time feedback"
 echo "   ✓ Gamification (points & achievements)"
 echo "   ✓ Hints and explanations"
 echo "   ✓ Mobile-friendly design"
 echo ""
 # Function implementations would go here
 # For brevity, showing one example:
 generate_generic_playground() {
    cat > "$OUTPUT_PATH" << 'EOF'
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Math Playground - TOPIC_NAME</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      color: white;
    }
    .header {
      text-align: center;
      margin-bottom: 30px;
    }
    h1 { font-size: 3em; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
    .score-board {
      background: rgba(255,255,255,0.2);
      padding: 15px 30px;
      border-radius: 20px;
      font-size: 1.5em;
      display: inline-block;
      backdrop-filter: blur(10px);
    }
    .main-content {
      background: white;
      padding: 40px;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      color: #333;
      max-width: 900px;
      width: 100%;
    }
    .visualization {
      width: 100%;
      height: 400px;
      border: 3px solid #667eea;
      border-radius: 15px;
      margin: 20px 0;
      background: #f9f9f9;
    }
    .controls {
      display: grid;
      gap: 20px;
      margin: 20px 0;
    }
    .control-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    label {
      font-weight: bold;
      font-size: 1.1em;
      color: #667eea;
    }
    input[type="range"] {
      width: 100%;
      height: 10px;
      border-radius: 5px;
      background: #ddd;
      outline: none;
      cursor: pointer;
    }
    input[type="number"], input[type="text"] {
      padding: 12px;
      font-size: 1.1em;
      border: 2px solid #667eea;
      border-radius: 10px;
      width: 100%;
    }
    button {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 15px 30px;
      font-size: 1.2em;
      border-radius: 10px;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      font-weight: bold;
    }
    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
    button:active { transform: translateY(0); }
    .explanation {
      background: #f0f7ff;
      padding: 20px;
      border-radius: 10px;
      margin: 20px 0;
      border-left: 5px solid #667eea;
      line-height: 1.8;
    }
    .achievement {
      position: fixed;
      top: 20px;
      right: 20px;
      background: gold;
      color: #333;
      padding: 20px 30px;
      border-radius: 15px;
      font-weight: bold;
      font-size: 1.2em;
      animation: slideIn 0.5s ease;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      z-index: 1000;
    }
    @keyframes slideIn {
      from { transform: translateX(400px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @media (max-width: 768px) {
      h1 { font-size: 2em; }
      .main-content { padding: 20px; }
    }
  </style>
 </head>
 <body>
  <div class="header">
    <h1>🎯 TOPIC_NAME Playground</h1>
    <div class="score-board">
      Points: <span id="points">0</span> 🌟 | Streak: <span id="streak">0</span> 🔥
    </div>
  </div>
  <div class="main-content">
    <canvas id="canvas" class="visualization"></canvas>
    <div class="controls">
      <div class="control-group">
        <label for="input1">Parameter 1:</label>
        <input type="range" id="input1" min="0" max="10" value="5" step="0.1">
        <span id="value1">5</span>
      </div>
      <div class="control-group">
        <label for="input2">Parameter 2:</label>
        <input type="range" id="input2" min="0" max="10" value="3" step="0.1">
        <span id="value2">3</span>
      </div>
      <button onclick="newProblem()">New Challenge 🎲</button>
      <button onclick="showHint()">Get Hint 💡</button>
    </div>
    <div class="explanation" id="explanation">
      Welcome to your interactive math playground! Adjust the sliders above to explore and learn.
    </div>
  </div>
  <script>
    let points = 0;
    let streak = 0;
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    // Set canvas size
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    // Event listeners
    document.getElementById('input1').addEventListener('input', update);
    document.getElementById('input2').addEventListener('input', update);
    function update() {
      const val1 = parseFloat(document.getElementById('input1').value);
      const val2 = parseFloat(document.getElementById('input2').value);
      document.getElementById('value1').textContent = val1.toFixed(1);
      document.getElementById('value2').textContent = val2.toFixed(1);
      visualize(val1, val2);
      updateExplanation(val1, val2);
    }
    function visualize(val1, val2) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // Example visualization - customize based on topic
      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2;
      // Draw based on parameters
      ctx.fillStyle = '#667eea';
      ctx.beginPath();
      ctx.arc(centerX, centerY, val1 * 20, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = '#FF6347';
      ctx.beginPath();
      ctx.arc(centerX + val2 * 30, centerY, 30, 0, Math.PI * 2);
      ctx.fill();
    }
    function updateExplanation(val1, val2) {
      const result = val1 + val2;
      document.getElementById('explanation').innerHTML = `
        <strong>Current Values:</strong><br>
        Parameter 1: ${val1.toFixed(2)}<br>
        Parameter 2: ${val2.toFixed(2)}<br>
        <strong>Result: ${result.toFixed(2)}</strong>
      `;
    }
    function newProblem() {
      awardPoints(5);
      document.getElementById('input1').value = Math.random() * 10;
      document.getElementById('input2').value = Math.random() * 10;
      update();
    }
    function showHint() {
      showAchievement('💡 Try different values and see what happens!');
    }
    function awardPoints(amount) {
      points += amount;
      streak++;
      document.getElementById('points').textContent = points;
      document.getElementById('streak').textContent = streak;
      if (streak % 5 === 0) {
        showAchievement(`🔥 ${streak} streak! Awesome!`);
      }
    }
    function showAchievement(text) {
      const achievement = document.createElement('div');
      achievement.className = 'achievement';
      achievement.textContent = text;
      document.body.appendChild(achievement);
      setTimeout(() => achievement.remove(), 3000);
    }
    // Initialize
    update();
  </script>
 </body>
 </html>
 EOF
    # Replace placeholders
    sed -i "s/TOPIC_NAME/$TOPIC/g" "$OUTPUT_PATH"
 }
 print_info "🎓 Happy learning!"
		`@@ -0,0 +1,3 @@`
							`# math-teacher`

							`Interactive math teacher that instantly generates playful, gamified learning experiences. Creates visual playgrounds, interactive artifacts, and engaging games for kids and adults to learn math concepts from basic arithmetic to advanced calculus.`