别再做PPT了:用AI把知识点做成能拖着玩的互动网页

上个月给一群没写过代码的学员讲"机器学习怎么学东西"，我翻车了。

课前我做了一套自认为非常清楚的课件：数据进去、模型训练、结果出来，中间配了二十来页带箭头编号的流程图。讲到第三页，一个学员举手："老师，模型到底是怎么'学会'的？它在里面到底干了些什么？"

我把那一页翻回去，指着箭头从头又讲了一遍。他点点头，眼神还是空的。

下课后我又问了另外三个学员。有两个以为"训练"是我随口编的比喻，还有一个以为模型里面真的坐着个小人在改错，改着改着就改会了。

后来我把整套课件推翻重做了。换的不是讲法，是媒介。

复盘那节课，我得到一个不太舒服的结论。PPT 天生是"把你已经知道的结论排好版、展示给别人看"的工具，它的每一页都是静态的，学生能看到结果，看不到过程；能翻页，不能动手。

而"模型怎么学会的"这类问题偏偏答案本身就是过程，你把它压成一张静态图，再多的箭头也只是让图更花哨一点。

PPT 擅长陈列答案，不擅长演示过程；而学生卡住的，从来是过程。

具体到我这节课，差距摆得很清楚：

• • 流程可以用 PPT 讲
  ，因为流程是一串静态节点，画清楚就行。
• • 参数的影响力没法用 PPT 讲
  ，因为它压根没有固定答案，只有一条会随数值变化的曲线。
• • "给多少数据才算够"这类问题没法用 PPT 讲
  ，因为它没有标准解法，只有你自己试出来的手感。

第三类恰好是学员卡得最死的地方。后来做出的东西长这样，它是一个我用 AI 工具生成出来的单文件网页，双击就开，断网也能玩：

整页从上到下六块：把过程演出来的绘本动画、能拧旋钮的实验台、拖拽排序练习、术语卡、思考题、课标依据。下面挑三块最能打的展开说。

先说明门槛：看这一页不需要会写代码，做这一页同样不需要。你唯一要学会的动作，是把一段中文提示词复制进任意 AI 对话工具里。

机器学习最劝退的地方，是"训练"这两个字看不见也摸不着。所以我第一步就放弃了按幻灯片顺序往下讲，先把整个过程做成一台能播能停的动画片。

五幕分别是：收集数据、提取特征、训练模型、预测新数据、评估修正。每一幕都留了可以停下来的位置，比如播到"提取特征"就停住，问一句"如果只给它一个数字，还能分得开吗"，等有人给出答案之后再往下播。

这里有两个要求看着琐碎、现场却很要命。第一，必须有跳幕，不能自动播完。自动播完的东西，学生会当短视频刷一遍就忘；讲到第三步就停在第三步，那才叫教具。

第二，动画得是 canvas 真画出来的过程，不许拿几张静态图轮播冒充。验收方法很土：盯着画面上的计数器和数字，它们得真的在跳。

这一块我返工过两次。第一版交给我的是五张静态插图配字幕，看着很像那么回事，播起来等于翻电子书；第二次我把"用 canvas 逐帧画、不许轮播"直接写进了提示词的硬约束里，才拿到现在这版。

这一块是重点。实验台里真跑着一个逻辑回归模型，四个旋钮摆在下面，每个旋钮都对应一个能在课堂上问出口的问题：训练轮数是"练多久算够"，样本数量是"给它多少例子"，模型复杂度是"允许它把边界画得多弯"，噪声强度是"数据本身有多脏"。右边实时给出损失曲线和泛化差距。

用法简单到不需要说明书。我一般会先让大家做同一件事：把复杂度一路拧到最高，看那条边界为了穿过每一个样本点扭曲成一团。这个画面的冲击力比任何定义都管用，而且它在开课三分钟内就能发生一次。

接下来再让他们把样本数拧到最少、噪声拧到最大，右边那根泛化差距条会跟着暴涨。这就是过拟合。到这一步我通常一句话都不说，让学员自己先看十秒钟，再问他们刚才到底发生了什么。

讲十遍"过拟合是记住了噪声"，不如让学生亲手把旋钮拧到崩一次。

学员里最常见的反应有两种。一种是问"是不是我数据给得太少了"，然后自己往回拧样本数量；另一种是问"是不是它把边界画得太绕了"，然后自己去拧复杂度。这两个问题被问出来的时候，这节课最难的部分其实已经讲完了。

所以我对实验台有两条不能让的验收线。第一条，拖到底，数字必须变。我不止一次见过所谓的互动课件，滑块拉到底画面纹丝不动，只是几段预设视频来回切；学生拖两次就发现了，信任感当场归零。

第二条，每次刷新，画面必须一模一样。这听着是很技术的要求，实现方式是给随机数一个固定种子，但它对讲课的人是刚需：你不可能接受昨晚备课时演示的效果，和今天课堂上现场跑出来的不一样。

流程类的知识点最适合做成排序练习。我把监督学习的五个步骤打乱，让学生拖成正确顺序，正确顺序是：明确要解决的问题、收集并标注数据、提取特征、训练模型、用没见过的数据评估并修正。

能翻页的课件给的是别人的结论，能拧旋钮的课件给的是自己的结论。

我没有把它做成选择题。选择题允许学生靠排除法蒙对，排序却必须真的知道谁在谁前面，两种题型的通过率往往差一倍，而差距全都落在"会不会"上，不在聪不聪明上。

三个细节值得抄。判定只给提示，不给答案：做错的卡片标红，反馈写"这一步应该发生在拿到数据之后"，而不是直接告诉他是第几步；一上来就给答案，学生就不会再去想第二步。

第二，鼠标拖、卡片上的上下箭头、键盘方向键，三种都得能用。理由很现实，站在投影教室的讲台上你不一定够得到那个鼠标，而触摸一体机上的拖拽又常常很难操作，必须有按钮兜底。

第三，别做计分和排名。有排名的练习，学生做完就去关心别人几分；没有排名的练习，他才会回头看自己为什么会错。

顺带说一句，全班都做对并不是浪费时间。它是最好的收尾，学生会带着"我已经会了"的确定感离开教室，而这种确定感很难靠坐着听讲得到。

术语卡的原则只有一条：白话在前，术语在后。每张卡先用一句人话解释，再给出专业名词。比如"损失"这张卡正面写"模型这次猜错了多少"，背面才标 loss；"过拟合"正面写"把练习题背得一字不差，换个数字就不会做了"。先看到这些句子，再看到术语，学生才不会当场放弃。

六张卡不是越多越好。一张卡只解决一个词，如果你写完发现还得再解释一个新词，说明这张卡本身就写复杂了。

收尾放一句话结论、一道没有标准答案的思考题，外加留给讲师自己的三行备注：这页替代原来哪一页 PPT、学生最容易卡在哪、现场要提醒什么。

引用课标时一定注明出处。我这一页引用的是信息技术课标里关于数据与算法的部分，为了确认条目原文我专门回去查了一遍；查到的才标出处，没查到的宁可不写。千万别凭记忆编号，课是要拿给教研组看的。

做出来不等于会上。我现在把它切成三段：前 15 分钟放绘本动画，只播不解释，让学员先在脑子里自己搭出一个流程；中间 20 分钟给实验台，分小组互相出题，看谁能把对方的参数组合拧崩；最后 10 分钟做排序练习，这时候基本全班都能做对，因为答案他们刚刚亲手试过一遍。

如果课时只有 20 分钟，那就只留实验台，动画和排序都砍掉。三个模块里实验台的独立教学价值最高，砍到只剩它，这节课依然成立。

分组人数也有讲究，建议两到三人一组。超过四人就会变成一个人动手、三个人围观，实验台的作用当场减半，这一点我在两个不同规模的班上都验证过。

顺序不能反过来。先讲定义再练，学员会拿着结论去套实验；先让他们试一遍再讲，他们会带着疑问来听你的定义，这两种课堂气氛完全不一样。

这一整页是在 WorkBuddy 里用一条任务生成的，给它一个参考样例、指定主题，让它照着这套结构做整页：

真正的资产是下面这段提示词，精简版我直接贴出来：

最后三条约束是少返工的关键。 尤其"不许引用 CDN"这条，教室和报告厅常常是内网，一个依赖了外部样式库的网页现场打开就是一堆没排版的纯文字，你根本来不及补救。

生成完别急着上讲台，按这四条验收一遍。完整八项清单在资料包里，这里挑最容易被糊弄过去的四条：

断网还能不能玩：拔掉网线双击打开，页面要是塌成一堆没排版的文字，说明它偷用了网上的样式库。

动画是不是真的在动：盯着看 5 秒。不少稿子会悄悄把 canvas 动画换成一张静态图。

实验台是不是真的在算：把任意一个滑块拖到底，数字必须跟着变，而且刷新之后结果要一致。

▲▼ 和键盘方向键能不能用：只有鼠标能拖的稿子，投影教室里基本没人操作得了。

一是加随堂小测。在收尾前插三道单选，要求选错时提示错在哪个概念而不是只显示"错误"，选对时解释另外三个为什么错。

二是把动画导出成 GIF，发群里当预习材料。浏览器无头模式可以连着截一串图再合成 GIF，关键参数是那个"虚拟时间预算"，它可以让浏览器把动画快进到指定时刻再截图，不用真的干等动画播完。命令我放进资料包了。

三是同一套骨架换学科。函数、孟德尔杂交、串并联电路、供需曲线、化学反应速率都能直接复用，判断标准只有一条：20 秒内能试出两种结果。如果一个实验调半天才有一次变化，那还不如回去讲图。

最后说边界，省得你白干一场。

知识点本身没有可拧的参数时，别硬塞实验台。纯记忆类的内容加一个滑块，学生只会把它当成装饰。

时间少于两小时别动手。这不是五分钟出活的差事，你得留出至少一轮返工的时间。

只讲一次的公开课也不必投入。性价比靠复用摊薄，同一个知识点要讲三遍以上，或者要给整个教研组当共享教具，才划算。

还有一种情况：你自己对这个知识点也没把握。互动页会把你的漏洞放大，因为学员的每一种拧法你都得当场接住，这种时候老实按讲义讲更安全。

最后一条最容易被忽略，务必留一份静态版兜底。多媒体教室永远有你没预想到的情况，投影接不上、浏览器版本太老、触控失灵，这时候一份 PDF 能救整堂课。

你手上有哪个知识点，讲了三遍学员还在礼貌地笑？评论区说说，我看看哪几个最适合改成模板。

写这一篇时，我把能复用的部分全部整理成了文档：可以直接抄的完整提示词（含那些最省返工的硬约束）、给看不懂代码的人用的八项验收清单、三个进阶玩法里的具体命令与学科对照表，加上这一整套的最终成品文件，合成了一份资料包：

点此领取：AI互动课件资料包