第 13 课 数学课件一：函数图像实验室与参数滑杆
本课定位
把抽象的函数变化变成学生可以拖拽、观察、比较的可视化实验。
本课技术框架
- Canvas / SVG 图像绘制
- 滑杆控件
- 函数参数可视化
- 图像联动
学习目标
- 完成一个函数图像互动实验室
- 让学生看到参数变化如何影响图像
- 把数学讲解从“静态图”升级到“可操作模型”
课前准备
- 准备一个函数专题，如二次函数、一次函数、指数函数
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 展示函数图像随滑杆变化的效果 | 展示函数图像随滑杆变化的效果 |
| 10-20 分钟 | 讲解数学课件里的交互价值：看见变化而不是记结果 | 讲解数学课件里的交互价值：看见变化而不是记结果 |
| 20-40 分钟 | 用 Codex 生成函数图像实验室 | 用 Codex 生成函数图像实验室 |
| 40-55 分钟 | 学员替换成自己的函数专题和课堂问题 | 学员替换成自己的函数专题和课堂问题 |
| 55-60 分钟 | 现场试讲一个参数变化问题 | 现场试讲一个参数变化问题 |
核心讲授点
- 数学课件最强的优势之一就是把“变化”做出来
- 滑杆、图像、文字解释三者一起出现时，学生理解会更稳
- 老师要学会把问题也嵌进课件，而不是只有图像
课堂案例
二次函数顶点与开口方向实验页
通过拖动 a、b、c 参数，让学生直观看到图像变化规律。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“数学课件一：函数图像实验室与参数滑杆”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中数学八年级
- 课题：二次函数 y = ax² + bx + c
- 教学目标：通过拖动 a、b、c 参数理解开口方向、顶点位置和与 y 轴交点变化
- 页面需求：参数滑杆、实时图像、关键点说明、教师追问区
- 课堂问题：a 改变时图像怎样变化？c 改变时与 y 轴交点怎样变化？
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中数学八年级
- 课题：二次函数 y = ax² + bx + c
- 教学目标：通过拖动 a、b、c 参数理解开口方向、顶点位置和与 y 轴交点变化
- 页面需求：参数滑杆、实时图像、关键点说明、教师追问区
- 课堂问题：a 改变时图像怎样变化？c 改变时与 y 轴交点怎样变化？
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 3：升级成更完整的课堂版
text
请把这个课件再补完整一点，增加更清楚的课堂流程、互动环节和适合投屏的样式。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中数学八年级
- 课题：二次函数 y = ax² + bx + c
- 教学目标：通过拖动 a、b、c 参数理解开口方向、顶点位置和与 y 轴交点变化
- 页面需求：参数滑杆、实时图像、关键点说明、教师追问区
- 课堂问题：a 改变时图像怎样变化？c 改变时与 y 轴交点怎样变化？
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js本课交付物
- 一份函数图像实验室课件
创意扩展
- 加入“猜一猜图像会怎么变”模式
- 加入不同函数的切换页