Back to Details

math-teacher

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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
将数学学习转化为交互式、可视化的体验：
  • 即时生成学习场景 - 按需创建交互式HTML/JS学习工具
  • 自适应学习 - 覆盖从基础算术到高等微积分的内容
  • 可视化学习 - 图表、动画和交互式可视化效果
  • 游戏化设计 - 积分、成就、挑战和进度追踪
  • 问题驱动 - 用户提出问题，老师生成定制化学习体验
  • 趣味教学法 - 引人入胜的动画、奖励和趣味挑战
  • 无需配置 - 所有学习工具可在浏览器中独立运行

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

1. 做中学

  • Interactive manipulatives
  • Experiment with variables
  • Real-time feedback
  • Hands-on exploration
  • Visual experimentation
  • 交互式操作工具
  • 尝试变量调整
  • 实时反馈
  • 动手探索
  • 可视化实验

2. Gamification First

2. 优先游戏化

  • Points and achievements
  • Progress tracking
  • Level systems
  • Challenges and streaks
  • Leaderboards (personal bests)
  • Reward animations
  • 积分与成就
  • 进度追踪
  • 等级系统
  • 挑战与连续答题奖励
  • 排行榜（个人最佳成绩）
  • 奖励动画

3. Visual Learning

3. 可视化学习

  • Dynamic graphs and charts
  • Animated demonstrations
  • Color-coded explanations
  • Interactive diagrams
  • Step-by-step visualizations
  • 动态图表
  • 动画演示
  • 颜色编码的讲解
  • 交互式示意图
  • 分步可视化

4. Instant Gratification

4. 即时满足

  • Generate artifacts immediately
  • No setup or installation
  • Works in any browser
  • Shareable playgrounds
  • Mobile-friendly
  • 即时生成学习工具
  • 无需配置或安装
  • 可在任意浏览器中运行
  • 可分享的学习场景
  • 适配移动设备

5. Adaptive Complexity

5. 自适应难度

  • Starts simple, grows complex
  • Detects skill level
  • Progressive difficulty
  • Scaffolded learning
  • Multiple approaches
  • 从简单开始，逐步提升复杂度
  • 检测用户技能水平
  • 渐进式难度
  • 支架式学习
  • 多种学习路径

Math Topics Covered

涵盖的数学主题

Elementary (Ages 6-12)

小学阶段（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)

初中阶段（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)

高中阶段（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)

示例1：分数可视化工具（小学阶段）

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)
用户提问： "帮我理解分数"
老师生成： 交互式披萨分数可视化工具，包含：
  • 可视化披萨切片帮助理解分数
  • 交互式滑块调整分子/分母
  • 实时百分比计算
  • 带积分和成就的游戏化设计
  • 等价分数查找功能
  • 颜色编码的趣味设计
（完整实现见
/references/examples/fraction-visualizer.html
）

Example 2: Quadratic Explorer (High School)

示例2：二次函数探索工具（高中阶段）

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
用户提问： "我不懂二次函数"
老师生成： 带a、b、c系数滑块的交互式图表，展示：
  • 实时抛物线绘图
  • 顶点高亮
  • 根（x轴截距）标记
  • 对称轴
  • 判别式讲解
  • 发现特殊情况可获得积分

Example 3: Derivative Visualizer (Advanced)

示例3：导数可视化工具（进阶阶段）

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
  • 探索积分（5分）：尝试不同数值
  • 发现积分（10分）：找到特殊情况
  • 精通积分（20分）：完成挑战
  • 连续答题奖励（2倍）：连续答对
  • 速度奖励（1.5倍）：快速答对

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
  • 🌟 第一步：完成第一个问题
  • 🔥 答题连胜：连续答对5题
  • 🎯 正中靶心：挑战获得满分
  • 🏆 数学大师：累计获得1000分
  • 💡 尤里卡时刻：发现隐藏规律
  • 🚀 速度达人：5分钟内完成10题

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
  • 限时挑战：在规定时间内尽可能多答题
  • 精准模式：追求完美答案
  • 探索模式：发现规律
  • BOSS战：复杂多步骤问题
  • 每日挑战：每天新问题

Playful Learning Techniques

趣味学习技巧

1. Storytelling

1. 故事化

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

2. 视觉隐喻

Abstract concepts made concrete:
  • Derivatives = "speedometer"
  • Integrals = "area under curve"
  • Variables = "mystery boxes"
  • Functions = "magic machines"
将抽象概念具象化：
  • 导数 = "速度计"
  • 积分 = "曲线下的面积"
  • 变量 = "神秘盒子"
  • 函数 = "魔法机器"

3. Progressive Hints

3. 渐进式提示

Scaffolded support system:
  • Level 1: Gentle nudge
  • Level 2: Show strategy
  • Level 3: Step-by-step
  • Level 4: Full solution
支架式支持系统：
  • 1级：温和提示
  • 2级：展示策略
  • 3级：分步指导
  • 4级：完整解答

4. Immediate Feedback

4. 即时反馈

Real-time learning loops:
  • Color-coded correctness
  • Encouraging messages
  • Error explanations
  • Try-again suggestions
实时学习循环：
  • 颜色编码的正确性标识
  • 鼓励性信息
  • 错误讲解
  • 重试建议

5. Celebration Animations

5. 庆祝动画

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
每个生成的学习工具都遵循以下模式：
  • 包含标题和积分显示的头部
  • 可视化展示区域（画布、SVG或HTML元素）
  • 交互式控件（滑块、输入框、按钮）
  • 带实时反馈的讲解部分
  • 游戏化元素（积分、成就、连胜）
  • 包含内联CSS和JavaScript的独立HTML文件
  • 适配手机/平板/桌面的响应式设计
  • 趣味、多彩的动画样式

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
✅ 可视化：图表、动画、示意图 ✅ 交互式：滑块、输入框、按钮 ✅ 响应式：适配手机/平板/桌面 ✅ 游戏化：积分、成就、反馈 ✅ 教育性：清晰的讲解 ✅ 可访问性：键盘导航、ARIA标签 ✅ 独立性：无外部依赖

Usage Patterns

使用模式

Pattern 1: Concept Explanation

模式1：概念讲解

User: "Explain [concept]" Teacher: Generates interactive visualization + step-by-step guide
用户： "讲解[概念]" 老师： 生成交互式可视化+分步指南

Pattern 2: Practice Problems

模式2：练习题目

User: "Give me practice problems for [topic]" Teacher: Creates randomized problem generator with hints
用户： "给我[主题]的练习题" 老师： 创建带提示的随机题目生成器

Pattern 3: Visual Understanding

模式3：可视化理解

User: "Show me [concept] visually" Teacher: Builds animated demonstration with controls
用户： "可视化展示[概念]" 老师： 构建带控件的动画演示

Pattern 4: Challenge Mode

模式4：挑战模式

User: "Challenge me on [topic]" Teacher: Creates timed quiz game with leaderboard
用户： "挑战我关于[主题]的内容" 老师： 创建带排行榜的限时答题游戏

Pattern 5: Exploration

模式5：探索模式

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)
  • Canvas绘图：使用HTML5 Canvas API绘制图表和可视化效果
  • 实时更新：监听用户输入的事件监听器
  • 动画循环：使用RequestAnimationFrame实现流畅动画
  • 响应式设计：CSS Grid、Flexbox和媒体查询
  • 无依赖：纯HTML/CSS/JavaScript（无需库）

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
所有资料均在
/references
目录下：
  • basic_math.md - 小学阶段概念和技巧
  • algebra.md - 代数模式和公式
  • geometry.md - 几何原理和可视化
  • calculus.md - 导数、积分、极限
  • statistics.md - 概率和数据分析
  • gamification.md - 游戏机制和奖励系统

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
所有脚本均在
/scripts
目录下：
  • generate_playground.sh - 创建交互式数学学习场景
  • generate_game.sh - 构建游戏化数学挑战
  • generate_quiz.sh - 创建自适应答题系统

Implementation Approach

实现方法

IMPORTANT: When this skill is invoked, use the Bash tool to execute the appropriate script.
重要提示： 调用该技能时，请使用Bash工具执行相应脚本。

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.
  1. 通用数学游戏/挑战： 使用
    generate_game.sh
    bash
    bash /Users/jamesrochabrun/Desktop/skills/skills/math-teacher/scripts/generate_game.sh
  2. 交互式学习场景： 使用
    generate_playground.sh
    bash
    bash /Users/jamesrochabrun/Desktop/skills/skills/math-teacher/scripts/generate_playground.sh
  3. 答题系统： 使用
    generate_quiz.sh
    （若存在）
    bash
    bash /Users/jamesrochabrun/Desktop/skills/skills/math-teacher/scripts/generate_quiz.sh
请勿在技能加载时自动调用这些脚本 - 这会导致Bash安全错误。请始终显式使用Bash工具运行它们。

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
❌ 仅展示公式而无上下文 ❌ 内容过于文本化 ❌ 假设用户有前置知识 ❌ 忽略游戏化设计 ❌ 忽视视觉型学习者 ❌ 让内容显得 intimidating ❌ 使用枯燥的学术语气 ❌ 依赖外部库

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
初学者：
"我想学习乘法"
生成：交互式乘法表网格游戏，包含点击揭示卡片、进度追踪和成就徽章
中级学习者：
"帮我理解勾股定理"
生成：可视化直角三角形构建工具，可拖动顶点，查看a²、b²、c²正方形和动画证明
进阶学习者：
"展示如何优化函数"
生成：带梯度下降可视化的3D曲面图、可调整学习率和路径追踪

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!
该技能通过以下方式改变数学教育：
  • 即时参与 - 即时生成学习场景
  • 可视化学习 - 图表、动画、交互式示意图
  • 游戏化 - 积分、成就、挑战
  • 自适应难度 - 从小学到进阶阶段
  • 独立性 - 所有学习工具可独立运行
  • 趣味性 - 有趣、多彩、有奖励
  • 高效性 - 通过实践和探索学习
“数学应该是一场冒险，而不是负担。” 🚀
使用方式： 提出任意数学问题，请求讲解某个概念，或者说“教我[主题]”，即可获得即时的交互式学习体验！