AI案例分享:三步做一个能互动的课件

下课前十分钟，有的老师会问一句：还有没听明白的吗。教室里静得很，没人举手也没人摇头。可一到作业和考试，那个讲过三四遍的概念，该错的还是错。

我是小黑，见字如面。这样的场面，当老师的都不陌生，我自己也遇到过：课上讲得很细，学生还是没什么反应。这类知识点多半有个共同点，就是看不见，比如一个过程怎么一步步发生，一个公式里参数一动结果往哪边拐，或者一个结构内部到底长什么样。老师在 PPT 上把它拆成一页页静态图，配着讲解往下翻，讲得越细，学生越搭不出画面。投影给的是结果，中间那段路怎么走，学生没走过。

学生一直站在外面看，看得再久也搭不出画面。让他们自己点一下、拖一下、输个数，那个过程才可能在脑子里立起来。

这就说到了交互式课件。它的样子不用想得太复杂，学生能在页面上动手做四件事就算数：点一下、拖一下、填个空、拿到反馈。点一个选项或者填一个答案，它会立刻给出对错；拖一个部件或者改一个参数，画面会随着学生的操作实时变化。这几种动作，正好补上静态课件缺的那一环，把老师讲的过程交到学生手上。

做它也不需要什么专业工具。下面这条路线，全程用 AI 生成代码，一行代码都不用写。

整条路只有三步：跟 AI 说清要做什么，让它生成一段网页代码；把这段代码存成一个网页文件；把这个文件打开，让学生动手去点。从头到尾，没有一个环节要用到专业软件。

步骤就这么简单。改成 html 之后，它就是一个独立的小网页，拷到教室电脑上，双击就能打开，不用装插件。至于能不能断网用，要看生成时有没有用到需要联网的东西，不少 AI 生成的网页会顺带连上在线的字体和音效，这种情况断网就会缺东西。最稳的办法是生成完先断网测一遍，能正常打开，才说明它能离线用。学生把这个文件拷到自己电脑上，一样能玩。

三步走下来，最花时间的从来不是操作。难的是第一步，跟 AI 说的那句话写不清楚，后面两步再顺也白搭。

提示词写得笼统，AI 给的东西就笼统。到底要写多细，拿一条真实的提示词当范本，它做的是一个英语单词连连看游戏网页：界面要卡通风格，背景音乐欢快，单词来自课本前三个单元，点单词能听发音，连对有奖励音效，连错有提示。

这条提示词好在哪，拆开看，它把六件事说全了。前面那句话，六件其实都交代到了。

六件事里，最容易被漏掉的是内容从哪来、错了怎么办这两条。很多老师写提示词，只说一句"帮我做一个某某交互网页"，别的就不提了。结果生成出来的东西，动画是有的，但内容跟课上讲的对不上，反馈也糊弄，还得自己一条条改。

这两条为什么非说不可？因为大模型的通用知识里不包含某门课的具体内容，不说清内容从哪来，它就容易编得跟教学进度对不上，最后还得自己返工。错了怎么办也一样，AI 默认给的反馈往往比较简单，写清楚该怎么反馈，它才会在错的地方多给一句提示，而不是冷冰冰弹一个叉。

这套写法不挑学科。数学课把函数图像做成参数可调的页面，学生拖动系数，抛物线张口的大小跟着变，抽象的对应关系就成了眼前能看见的变化。工科课把一台设备的运行过程做成能拆能拼的模型，学生拖动部件看它怎么组合、怎么运转，课上讲不清的内部结构，变成了手上能摆弄的东西。文科课把一段历史做成情境选择题，学生选完看到一段分析，知道自己错在哪一步的判断上。动作不一样，思路是一样的：做什么，内容从哪来，点了会怎样，错了怎么办，风格什么样，氛围什么样，六件事说清楚。

到这里，方法其实就一件事，把那六件事写清楚。至于先说哪一件、用什么语气说，没有标准答案，AI 都能听懂。真正决定成品好不好的，是写提示词的人对这节课的了解程度，这一层替不了。