借助大模型设计交互式课件

摘要：生成式人工智能（GenAI）为教育信息化提供了新的技术范式，借助大模型，教师只需用自然语言描述需求，就能够得到可直接运行的交互式课件代码。本文针对教师在交互式课件开发中面临的技术壁垒，通过三个真实开发案例，演示了大模型如何将编程门槛降低到“说话级操作”，为AI赋能教育提供了可复用的技术路径。

关键词：生成式人工智能；交互式课件；AI赋能

中图分类号：G434  文献标识码：A  论文编号：1674-2117（2025）07-0000-03

问题提出：当教师遇上代码，大模型能架起桥梁吗？

“王老师花了三小时搜索抛物线动画模板，最后只能对着不兼容的Flash文件叹气。”“李老师用PPT制作的随机点名系统，每次重启都会重置数据”。……这些场景折射出教师群体在课件开发中的真实困境。几乎每一位中小学教师都表示“迫切需要交互式课件但缺乏开发能力”，但编程的高门槛让他们知难而退。

当GPT-4能写出媲美程序员的代码，当Midjourney能根据文字生成设计图，一个问题自然浮现：AI能否帮助教师跨越技术鸿沟？经过一段时间的实践，笔者发现大模型在课件开发领域展现出惊人潜力——不需要记忆编程语法，甚至不用安装特定编程软件，就能获得定制化的交互式课件。

技术解码：为什么HTML成为交互课件的最佳载体？

大模型生成Python、JavaScript等代码早已不是新闻，但真正的突破在于运行环境的平民化。笔者测试了多种编程语言后发现，HTML+CSS+JavaScript的组合具有独特优势：①零安装，任何浏览器都能直接运行；②可视化，所见即所得的界面开发；③跨平台，手机、平板、电脑全兼容；④轻量化，单个文件即可承载完整功能。

以课堂上常用的“随机点名”功能为例，只需向大模型输入如下的提示词：

请生成网页，实现点击按钮随机显示学生姓名功能，学生名单包含张三、李四等名字，要求界面美观，包含开始/停止按钮。

AI会自动生成完整代码文件，当复制到记事本文件后，教师只需将扩展名改为“.html”即可双击运行，效果如图1所示。在上公开课时，教师只要提早把学生名字输入就能使用了。经过测试，DeepSeek、Kimi、豆包、智谱清言、通义千问等大模型生成的代码，都能够做到一次性运行成功。

实战记录：三个交互式课件的开发日记

案例1：随机点名系统进化史

教师可以不断给大模型提出新的要求，如在第一次生成的网页中，“学生名字”的变换比较慢，而且有两个按钮（一个就够了），如果更换班级使用，还要修改源代码加入新的名字。面对这些缺陷，可以继续提出要求：

请增加跑马灯动画效果，用一个按钮切换状态，按空格键也能“开始”并“停止”，姓名显示区域直径200像素，使用渐变背景。在下方出现文本框，由用户输入姓名，姓名之间用空格分隔。

经过不断“提示”，生成的代码就比较人性化了，效果也更加酷炫（如图2）。需要强调的是，不同的大模型生成代码的能力不同，同样的提示词得到的代码和效果都不一样。即使是同一个大模型，生成的代码效果也是随机的，要耐心调试。

案例2：智能命题批改系统

小学生需要锻炼口算能力，之前都是让家长出题，最后批改的时候也很花时间。于是，可以给大模型这样的提示词，生成一个学生自己出题给自己练习的小网页：

请帮我生成可以自动出题并且批改的网页，输入题目的数量（默认5道），点击“确定”后生成。点击“提交”则自动改卷，显示得分（100分制）。试题内容是100以内的加减题。注意，不能出现负数，也不能超过100。

生成的网页课件能够随机命题、自动判题，如图3所示。

案例3：抛物线演示

在物理课上，关于公式的可视化演示是最常见的。那么教师可以编写提示词，制作一个“抛物线演示”课件。笔者特意把描述改为“愤怒的小鸟”场景，用发射力度来代替“初始速度”，大模型也能准确理解，并生成代码（如图4）。

需要说明的是，制作这个课件需要较多时间。大模型生成的代码总是出现各种错误，如在画布上没有出现动画效果。不过经过不断的反馈，最终得到的效果还是令人满意的：能够记录每一次的操作。这些数据可以用来验证计算，也可以形成一个数据集，用于机器学习方面的研究。

高手秘籍：让AI听懂用户需求的秘诀

在借助大模型编写交互式课件的过程中，核心的能力在于能够准确描述自己的需求，同时能清晰地了解网页的能力，即哪些能做到，哪些不能做到。前者需要教师不断提升自己的表达能力，做到无歧义。后者则需要多了解一些底层原理，如读一些计算机科普书籍，多使用一些交互网页课件。例如，不能要求点击网页按钮就关闭某一台电脑的电源，也不能期望网页上随意调用大模型的能力等。

虽然大模型的能力在不断升级，它也越来越懂用户，但有些技巧还是需要掌握，这样可以让大模型赋能编写程序的工作更加轻松。为此，笔者总结了以下三个秘诀：

①与其用语言描述，不如提供界面。

在提示词中提供准确而细致的描述，本来是基础条件，如下面这段提示：

创建包含以下元素的HTML界面：三个输入文本框，分别为输入电压（Vin）、电阻（R1）、电阻（R2）；1个“计算”按钮；输出文本框（Vout），为输出电压。应用分压公式：Vout=Vin*R2/（R1+R2）。CSS 美化布局。

但实际上，如果能提供一张图，效果会更好。这个图可以用截图、界面设计工具绘制甚至手绘等方式提供。例如，笔者提供了一张程序的截图，附上一句很简单的提示词“这是一个程序的截图，请用HTML语言，编写一个类似功能的交互网页”。通过大模型就能得到想要的代码，如图5所示。

②多用专业名词，准确表达意图。

计算机有计算机的术语，尤其是编程方面的术语，经过数十年的积累，基本上已经形成规范。大模型能很好地理解这些类似于“行业黑话”的术语。例如，前面提示词中的“HTML”“文本框”“CSS”都是专用名词。当然，大模型也在进化，现在也能理解用户的错误表达，如文字框。即使不说美化，可能也会输出美化后的HTML代码。

③提供核心代码，要求完善功能。

信息技术教师经常需要让大模型编写Python代码。而对于一些新出现的库，大模型如果没有学习过（指训练数据中没有收录），可能提供的代码看起来整整齐齐，实际上并不能使用。遇到这种情况，就需要先提供核心代码，再让大模型去完善功能。这种思路就如同找医生看病，需要提供之前的病历一样，因为AI并非万能。

未来图景：当每位教师都拥有“技术魔法”

当技术门槛消失，教师在AI赋能的过程中可以回归教育本质，关注教育自身。程序本是人与计算机的沟通语言，掌握编程相当于多了一种表达能力。当然，除了网页这一类型外，教师们还有更多的选择，如使用数学动画神器Manim，使用Python、Processing等。在教师培训中，笔者不止一次地听到教师们在感慨“这就像有个听话的程序员住在电脑里”。或许这就是AI赋能教育的终极形态——没有炫技，只有恰到好处的融入。