第 8 课 数据驱动课件：题库、错题、排行榜与学习记录
本课定位
让老师理解：只要有题库、记录和统计，课件就会开始长出“教学反馈感”和“学习轨迹感”。
本课技术框架
- JSON 数据
- 本地存储 LocalStorage
- 排行榜与记录界面
- 统计展示
学习目标
- 会在课件中使用简单数据结构
- 实现错题记录、积分或学习轨迹中的一项
- 让课件从静态页面升级为可留痕的工具
课前准备
- 准备一个题目集或课堂答题规则
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 展示有无学习记录的课件差别 | 展示有无学习记录的课件差别 |
| 10-20 分钟 | 讲 JSON、LocalStorage 和统计展示在课件中的作用 | 讲 JSON、LocalStorage 和统计展示在课件中的作用 |
| 20-40 分钟 | 用 Codex 为已有互动页增加记录能力 | 用 Codex 为已有互动页增加记录能力 |
| 40-55 分钟 | 学员实现错题本、排行榜或学习进度条中的一个 | 学员实现错题本、排行榜或学习进度条中的一个 |
| 55-60 分钟 | 展示并讲解教学价值 | 展示并讲解教学价值 |
核心讲授点
- 数据不是为了复杂，而是为了帮助老师看到“学生刚才经历了什么”
- 最适合老师先做的数据能力，是记录、回顾和鼓励，而不是庞大的后台系统
- 本地记录就已经足够支持大量课堂场景
课堂案例
英语单词闯关排行榜
通过积分、正确率和进度条，让课件形成持续激励效果。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“数据驱动课件：题库、错题、排行榜与学习记录”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中英语七年级
- 课题：校园问路词汇闯关
- 词汇清单：library, science building, turn left, go straight, next to
- 需要记录：答题次数、正确率、最近一次错题、班级排行榜
- 本次要做的课件：使用 JSON 和 LocalStorage 的课堂互动页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中英语七年级
- 课题：校园问路词汇闯关
- 词汇清单：library, science building, turn left, go straight, next to
- 需要记录：答题次数、正确率、最近一次错题、班级排行榜
- 本次要做的课件：使用 JSON 和 LocalStorage 的课堂互动页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 3：升级成更完整的课堂版
text
请把这个课件再补完整一点，增加更清楚的课堂流程、互动环节和适合投屏的样式。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中英语七年级
- 课题：校园问路词汇闯关
- 词汇清单：library, science building, turn left, go straight, next to
- 需要记录：答题次数、正确率、最近一次错题、班级排行榜
- 本次要做的课件：使用 JSON 和 LocalStorage 的课堂互动页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js本课交付物
- 一份带学习记录或排行榜的课堂互动页
创意扩展
- 做一个班级闯关墙
- 为数学每日一题增加成长轨迹