📖 简介

这是一个基于现代Web技术开发的交互式数学教学工具，专门用于可视化证明完全平方公式 (a + b)² = a² + 2ab + b²。工具采用SVG动态绘图技术，将代数表达式精确对应到几何图形的面积分割中，通过色彩区分、实时参数调节和动画演示，帮助用户建立"数形结合"的直观理解。界面采用现代化设计风格，支持响应式布局，完美适配各种设备。

🎯 主要功能

1. 实时参数调节

   • 双滑动条控制：可精确调整边长a（1-5cm）和边长b（1-5cm）
   • 步进精度0.5cm，支持连续动态变化
   • 数值实时显示，公式同步更新计算结果

2. 可视化图形生成

   • 动态绘制边长为(a+b)的大正方形
   • 自动分割为四个区域：a²（红色）、b²（蓝色）、2ab（绿色）
   • 精确的面积比例和几何分割

3. 显示模式切换

   • 面积显示：控制四个区域的色块填充
   • 标签显示：显示边长标注(a/b)和面积标注(a²/ab/b²)
   • 网格显示：叠加底纹网格辅助观察比例

4. 动画演示系统

   • 一键播放构建过程动画
   • 分步骤展示：空图形→添加标签→填充色块
   • 动画时长约4.5秒，循环播放

5. 快速操作

   • 重置：一键恢复默认参数(a=3cm, b=2cm)
   • 随机示例：自动生成1-5cm范围内的随机参数组合
   • 所有按钮带视觉反馈效果

6. 公式同步显示

   • 主公式区清晰展示标准形式
   • 动态计算区显示当前数值代入后的完整推导过程
   • 自动计算总面积并显示单位(cm²)

🎓 适用场景

最佳使用时机：在讲解完基本公式后，用于深化理解；或在学生出现困惑时，作为可视化突破工具。

📋 使用说明

1. 启动工具

   • 用现代浏览器打开

2. 调节参数观察

   • 拖动"边长a"滑动条：观察左侧红色正方形和整体图形的变化
   • 拖动"边长b"滑动条：观察右下角蓝色正方形和整体图形的变化
   • 注意观察绿色矩形的形状变化及其面积占比

3. 理解构成关系

   • 查看右侧信息面板的颜色说明：

     • 🔴 红色区域 = a²
     • 🔵 蓝色区域 = b²
     • 🟢 绿色区域 = 2ab（两个矩形）
   • 对照图形与公式，理解每个代数项对应的几何部分

4. 使用显示控制

   • 点击"显示面积"按钮：切换色块填充，可专注观察轮廓
   • 点击"显示标签"按钮：切换文字标注，可用于测试记忆
   • 点击"显示网格"按钮：开启网格辅助观察精确比例

5. 动画演示（推荐首次使用）

   • 点击"开始动画"按钮
   • 观察图形从无到有的构建过程：

     1. 首先出现空的大正方形
     2. 然后显示a/b边长标注
     3. 最后填充四个区域的色块
   • 动画结束后自动恢复可操作状态

6. 探索与验证

   • 点击"随机示例"生成不同参数组合
   • 手动调节至课本例题的数值进行验证
   • 尝试找出a=b时的特殊图形情况

7. 教学应用建议

   • 课堂导入：先展示动画，引发学生思考"大正方形如何分割"
   • 探究学习：让学生自己调节参数，猜测并验证面积关系
   • 总结归纳：关闭面积显示，让学生根据图形写出公式