第 18 课 物理课件二：光学、电学与交互式仿真板

本课定位

围绕光学和电学的空间关系，把光线路径、电路连接和实验装置拆成互动板。

本课技术框架

• SVG 路径
• 交互式示意图
• 状态切换
• 仿真板 UI

学习目标

• 建立一个光学或电学的交互式课件板
• 让学生通过点击或切换理解实验装置变化
• 为后续 3D / 摄像头课件埋下空间交互基础

课前准备

• 准备一个光学、电学或实验装置主题

课堂流程（60 分钟）

时间	环节	讲师动作
0-10 分钟	展示光路 / 电路交互板	展示光路 / 电路交互板
10-20 分钟	讲解示意图、状态切换和解释文本配合方式	讲解示意图、状态切换和解释文本配合方式
20-40 分钟	用 Codex 构建仿真板页面	用 Codex 构建仿真板页面
40-55 分钟	学员替换成自己的实验装置结构	学员替换成自己的实验装置结构
55-60 分钟	互评是否有助于学生理解装置关系	互评是否有助于学生理解装置关系

核心讲授点

• 很多理科难点来自“关系看不见”，课件可以让关系显形
• 光路和电路课件尤其适合做状态切换和步骤演示
• 老师要把实验步骤写进课件，而不是只展示最终图

课堂案例

凸透镜成像与串并联电路交互板

演示两个最适合做交互仿真的物理场景。

Codex 提示词

提示词 1：直接生成第一版课件

请直接帮我生成一版“物理课件二：光学、电学与交互式仿真板”相关的可运行课件，不要只给页面策划或设计说明。

请直接把课件做出来。

这次课件的要求如下：
- 学科：初中物理八年级
- 课题：凸透镜成像 + 串并联电路
- 教学目标：通过状态切换理解物距、像距变化以及电路连接差异
- 页面需求：交互式示意图、状态按钮、中文解释区、实验步骤模式
- 本次要做的课件：光学和电学仿真板

请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js

提示词 2：补互动和老师控制

请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。

请直接把课件做出来。

这次课件的要求如下：
- 学科：初中物理八年级
- 课题：凸透镜成像 + 串并联电路
- 教学目标：通过状态切换理解物距、像距变化以及电路连接差异
- 页面需求：交互式示意图、状态按钮、中文解释区、实验步骤模式
- 本次要做的课件：光学和电学仿真板

请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js

提示词 3：升级成更完整的课堂版

请把这个课件再补完整一点，增加更清楚的课堂流程、互动环节和适合投屏的样式。

请直接把课件做出来。

这次课件的要求如下：
- 学科：初中物理八年级
- 课题：凸透镜成像 + 串并联电路
- 教学目标：通过状态切换理解物距、像距变化以及电路连接差异
- 页面需求：交互式示意图、状态按钮、中文解释区、实验步骤模式
- 本次要做的课件：光学和电学仿真板

请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js

本课交付物

• 一份光学 / 电学交互课件板

创意扩展

• 加入“错误连接演示”页
• 做实验器材拖拽拼装版本

相关素材

• physics-optics-outline.txt

建议搭配案例

• 案例 8 物理光学 / 电学交互仿真板