课件介绍
“自行车里的数学”是一款讲解齿轮比的交互课件：
•屏幕中间是自行车的前齿轮、后齿轮、链条和车轮
•学生拖动踏板转动前齿轮，链条带动后齿轮和车轮严格联动
•齿轮严格按齿数绘制，可以一个齿一个齿地数
•可调前后齿数、车轮半径，齿轮比实时显示
•自带随机测试：求距离 / 求圈数 / 求齿数 / 求齿轮比，自动判分并给出完整解析
适用年级：六年级下册“自行车里的数学”。教程最后说明如何换学科、改难度。
— — —
Step 1 打开AI工具
选其中一个即可：
•豆包：https://www.doubao.com（免费，有代码预览功能）
•DeepSeek：https://chat.deepseek.com（免费）
推荐豆包：生成HTML代码后可以直接在豆包里预览效果，不用先保存文件。
— — —
Step 2 复制提示词发给AI
把下面这段完整复制，粘贴到对话框发送：
你是一个资深的前端开发工程师和数学教育专家。请帮我编写一个单文件（HTML+CSS+JS）的互动大屏教学课件网页，主题是人教版六年级下册"自行车里的数学"，用来讲解齿轮比。
这是一款专为教室触摸大屏设计的物理模拟课件。学生用手拖动自行车踏板，带动前齿轮、链条、后齿轮和车轮一起转动，从而直观理解"齿轮比"和"前轮转几圈、后轮转几圈"的关系。
请严格遵循以下需求开发：
【1. 全局与布局】
- 单文件格式：所有 HTML、CSS、JS 写在一个文件中，能直接在浏览器打开。
- 防误触：禁用文本选中（user-select:none），禁用手势缩放（touch-action）。
- 整体浅蓝色背景，圆润可爱的无衬线字体，适合小学课堂大屏。
- 顶部 Header：左侧标题"�� 自行车里的数学"和"六年级下册·齿轮比"标签；右侧四个实时数据卡片：前齿轮转过的圈数、后齿轮转过的圈数、链条走过的齿数、前进距离（cm）。
- 主体分为左侧"舞台"（占大部分宽度，用 canvas 绘制）和右侧"控制面板"（约330px宽）。
【2. 舞台：自行车齿轮传动（核心，用 canvas 绘制）】
- 画一个前齿轮（粉色，位于右侧，较大）、一个后齿轮（蓝色，位于左侧，较小）、一条链条把两者连接（用两圆的外公切线画上下两段直链+两端包绕弧，链条上有链节小圆点）、一个车轮（与后齿轮同轴，画外胎和辐条）。
- 前齿轮上画一根曲柄和一个粉色的踏板，这是拖动手柄；踏板周围有虚线光环提示可以拖。
- 严格啮合（最重要）：齿轮必须严格按齿数画出齿廓（n齿就画n个齿，能一个一个数）。后齿轮的转角 = 前齿轮转角 ×（前齿数 ÷ 后齿数），保证"链条走过的齿数对前后齿轮相等"。车轮与后齿轮同轴同步转动。每个齿轮高亮一个齿、车轮上画一个红点，方便数转了几齿、几圈。
【3. 交互：拖动驱动】
- 学生在前齿轮附近按下并拖动（鼠标或触摸），根据手指相对前齿轮中心的角度变化来转动前齿轮，链条、后齿轮、车轮严格联动。要支持触摸事件，手感流畅。
- 提供"自动转一圈（前齿轮）"按钮（带缓动动画）和"归零"按钮。
【4. 右侧控制面板（两个标签页：调节 / 测试）】
调节页：
- 前齿轮齿数滑块（28～52）、后齿轮齿数滑块（11～28）、车轮半径滑块（20～40 cm）。
- 一个齿轮比展示框：实时显示"齿轮比 = 前齿数 ÷ 后齿数"的数值，以及"前齿轮转1圈，后齿轮转 X 圈"。
- 四个开关：链条上色（高亮一节）、显示齿数标签、显示车轮、放大数齿格（开启后齿轮放大、隐藏车轮，方便数齿）。
测试页：
- 随机出题，四种题型轮换：求前进距离、求后齿轮圈数、求后齿数（已知齿轮比反推）、求齿轮比。
- 用一个 3×4 的数字键盘输入答案（含清空、删除键），按钮要大、有阴影和下压效果。
- 提交后判对错：答对撒彩带、显示"�� 恭喜你，回答正确！"并自动展开完整解题过程；答错提示正确答案并展示解析。
- 解析要给出公式、车轮周长计算、逐步推导。距离统一用厘米，圆周率 π 取 3.14。
- 距离类答案允许一定误差（约1%容差）即判对，避免四舍五入误判。
- 顶部显示本节得分和已答题数。
【5. 数据口径】
- 车轮周长 = 2 × 3.14 × 半径。
- 前进距离 = 后齿轮圈数 × 车轮周长 = (前齿数÷后齿数) × 前齿轮圈数 × 车轮周长。
- 所有显示和判分都按这套公式，确保和课本一致。
请直接输出包含全部代码的单个 HTML 文件，不要省略，确保可以直接在浏览器中运行，获得完整的视觉与交互体验。
⚠️ 注意：提示词要完整复制，不要漏掉任何部分，否则功能可能不完整。尤其是“严格啮合”那一条，是这个课件最关键的地方。
— — —
Step 3 保存HTML文件
① 复制AI生成的全部代码（以 <!DOCTYPE html> 开头）
② 打开记事本（Windows）或文本编辑器（Mac）
③ 粘贴代码进去
④ 另存为，文件名：自行车里的数学.html，编码选 UTF-8
⑤ 双击文件，用浏览器打开即可使用
��豆包用户可以直接点代码框右上角“预览”，不用保存就能看效果。
— — —
Step 4 如果效果不对，这样让AI改
AI第一次生成不一定完美，常见的几个问题，可以直接把下面的话发给它继续改：
齿轮数不出来 / 齿画得不准：
“齿轮请严格按齿数绘制齿廓，前48齿就要画出48个清晰可数的齿；后齿轮转角必须等于前齿轮转角乘以（前齿数÷后齿数），保证链条走过的齿数前后相等。”
拖不动 / 触摸屏没反应：
“请给前齿轮的踏板加上鼠标和触摸两套拖动事件（mousedown/mousemove/mouseup 和 touchstart/touchmove/touchend），根据手指相对前齿轮中心的角度变化来转动。”
链条没贴在齿轮上：
“链条请用前后两个齿轮节圆的外公切线画上下两段，再用包绕弧连接，让链条紧贴齿轮外缘。”
— — —
Step 5 换学科 / 改难度
同样的“可拖动+实时数据+随机出题”做法，换个主题给AI说一句就行：
钟表里的齿轮（讲转速比）
“请把主题改成钟表里的齿轮，前齿轮带动后齿轮，讲时针、分针、秒针之间的转速比，数据改成各指针转过的圈数。”
圆的周长与车轮滚动
“请增加一个模式：让车轮在地面上滚动，显示滚一圈前进的距离等于车轮周长，帮助学生理解周长。”
增加题目数量与难度
“请把测试题的齿数范围扩大，并增加两步计算的综合题，例如先求齿轮比再求前进多个来回的总距离。”
— — —
Step 6 课堂使用方法
① 电脑连接投影仪或触摸大屏
② 浏览器打开HTML文件，按 F11 全屏
③ 先让学生上台拖动踏板，观察前后齿轮转的圈数
④ 打开“放大数齿格”，带全班一起数：前轮转几齿、后轮转几齿
⑤ 调不同齿数，让学生猜后轮转几圈，再验证
⑥ 最后切到“测试”，分组抢答，当堂巩固
建议：先“玩”5分钟建立直观，再讲公式，最后10分钟测试巩固。
— — —
��这个课件怎么用在比赛里
① 信息素养活动·课件赛道（9月1-20日）
把课件文件 + 教学设计说明打包提交，完全符合“交互式教学软件”的定义。
② 信息素养活动·微课赛道（9月1-20日）
微课设计：开头讲齿轮比教学难点（1分钟）→ 中间展示学生拖齿轮、数齿格的画面（3分钟）→ 结尾总结AI辅助教学效果（2分钟）。
③ 人工智能案例·用AI赛道（省级6月30日截止）
痛点：齿轮比抽象，黑板讲学生看不见齿数与圈数的对应。
解法：用AI做可拖动的齿轮模拟器，让学生亲手转、亲眼数。
效果：抽象变直观，理解速度和准确率提升。
→ 三件事都有，就是一个完整的AI应用案例！
④ 精品课比赛
把课堂上学生拖齿轮、数齿格、当堂答题的画面录入精品课视频，体现“技术运用”维度的真实教学价值。
