第 21 课 游戏化课件设计：积分、任务、关卡与班级挑战
本课定位
让老师掌握游戏化并不是“做游戏”，而是把任务、反馈、阶段目标和奖励节奏引入课件。
本课技术框架
- 积分系统
- 关卡结构
- 任务卡
- 排行榜与成就 UI
学习目标
- 理解游戏化课件的核心设计要素
- 把一个现有课件改造成闯关或挑战模式
- 学会为不同学科设计合适的游戏机制
课前准备
- 带来一个已有练习页或题库页
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 展示游戏化课件前后差异 | 展示游戏化课件前后差异 |
| 10-20 分钟 | 讲积分、任务、关卡、奖励和反馈的设计原则 | 讲积分、任务、关卡、奖励和反馈的设计原则 |
| 20-40 分钟 | 用 Codex 给现有课件加游戏化机制 | 用 Codex 给现有课件加游戏化机制 |
| 40-55 分钟 | 学员按学科决定适合自己的游戏化方式 | 学员按学科决定适合自己的游戏化方式 |
| 55-60 分钟 | 分享“为什么这套机制不会喧宾夺主” | 分享“为什么这套机制不会喧宾夺主” |
核心讲授点
- 游戏化不是做得热闹，而是让学生愿意持续参与
- 最适合老师先做的机制通常是积分、任务和回合挑战
- 不同学科适合不同游戏节奏，不能机械套同一模板
课堂案例
语数英通用闯关框架
把同一套关卡骨架用于古诗词、单词和配平方程，让老师理解跨学科复用。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“游戏化课件设计：积分、任务、关卡与班级挑战”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 适用学科：语文、数学、英语、物理、化学通用
- 示例主题：期中复习班级 Boss 战
- 关卡结构：基础关 -> 进阶关 -> Boss 战 -> 结算页
- 页面需求：关卡地图、积分、限时挑战、排行榜、教师控制面板
- 本次要做的课件：一个跨学科可复用的游戏化骨架
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 适用学科：语文、数学、英语、物理、化学通用
- 示例主题：期中复习班级 Boss 战
- 关卡结构：基础关 -> 进阶关 -> Boss 战 -> 结算页
- 页面需求：关卡地图、积分、限时挑战、排行榜、教师控制面板
- 本次要做的课件：一个跨学科可复用的游戏化骨架
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 3：升级成更完整的课堂版
text
请把这个课件再补完整一点，增加更清楚的课堂流程、互动环节和适合投屏的样式。
请直接把课件做出来。
这次课件的要求如下：
- 适用学科：语文、数学、英语、物理、化学通用
- 示例主题：期中复习班级 Boss 战
- 关卡结构：基础关 -> 进阶关 -> Boss 战 -> 结算页
- 页面需求：关卡地图、积分、限时挑战、排行榜、教师控制面板
- 本次要做的课件：一个跨学科可复用的游戏化骨架
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js本课交付物
- 一个游戏化课件模块
创意扩展
- 班级 boss 战
- 小组合作挑战
- 闯关地图