编写扣子技能实现自动分析交互式网页数据

原创：信息教与学
时间：2026年2月6日 22:16
地区：广东

在上一篇推文 AI制作交互式网页（三）：答题类交互式网页使用问题与解决方案 中，我们聚焦答题类交互式网页的使用痛点，解决了防作弊、时间控制、作答缓存等核心问题，让AI制作的答题网页真正适配初中信息课的机房场景。

然而，很多老师在使用过程中发现了一些新问题：

即便网页功能再完善，学生的答题数据也无法回收和分析，更不能统计正确率、分析错题分布。

网页学生用得很开心，但我怎么知道他们学到了什么？

简而言之，交互式网页只实现了 “交互”，却没发挥出 “数据驱动教学” 的价值。

QuickForm 就是专为这个场景打造的解决方案。今天这篇内容，我们就从 “是什么、怎么用、怎么用得更省心” 三个维度，把交互式网页的数据回收与分析讲透，让 AI 制作的网页从 “能用、好用” 升级为 “能沉淀数据、能指导教学”。

文章封面图

QuickForm 是什么？

说到 “数据回收”，很多人的第一反应是：

“要不要搭数据库？要不要写后端？要不要部署服务器？”

这一步，往往直接劝退了 90% 的人。

QuickForm 的价值，恰恰就在这里。

QuickForm 是一个”只管接收和存储数据”的轻量级数据回收系统，由温州科技高级中学 AI科创中心联合温州大学开发，想要详细了解的老师可以移步谢作如老师的文章 QuickForm教师版开源了！（关于QuickForm的问与答）。

它的 核心特点 是：

  • 不要求你懂后端

  • 不限制你用什么前端技术

  • 不关心你的网页是AI写的还是手写的

你只需要做一件事：

把数据，用 POST 请求，提交到它给你的接口地址。

就这么简单。

如何使用QuickForm？

大家可以根据自己的需求选择 公网快速使用、本地部署使用、本地临时使用（推荐）。

场景一：公网快速使用

免部署，适合快速使用、回收非隐私数据

公网版无需搭建服务器，直接用现成的接口即可，步骤如下：

  1. 注册并登录 QuickForm 公网平台
    官网地址：https://quickform.cn/

公网快速使用说明

  1. 获取 QuickForm 接口 URL
    创建一个数据回收任务，系统会自动生成专属的接口地址URL，例如：
    https://quickform.cn/api/submit/xxx；

获取接口URL步骤 创建任务接口

如果想要创建更多任务，可以在右上角”个人设置”中提交教师身份认证，通过后，可以创建无限个任务。

  1. 集成提交代码到网页
    在 AI 制作的交互式网页中，添加一段 JavaScript 提交代码，核心是调用 QuickForm 的 API，将采集到的数据以 JSON 格式提交；
    这一环节可以参考平台提供的提示词由 AI代劳。

JavaScript提交代码

  1. 测试数据提交
    打开网页完成交互，提交数据后，在 QuickForm 后台查看是否成功接收。

测试数据提交界面

  1. 数据分析
    平台支持数据导出，也可以参考平台提供的数据分析提示词生成数据分析报告。另外，由于直接访问接口地址即可查看所有提交数据，所以也可以借助这个数据来源生成实时数据分析大屏。

数据分析界面1 数据分析界面2 数据分析界面3

场景二：本地部署使用

需要服务器，适合大规模校内使用、回收隐私数据

建议参考伍老师的这篇文章 傻瓜式本地部署QuickForm全流程，讲得很详细。这个教师版，打包好的，无源码，如果使用后觉得还不错可以部署开源的校园版，具体看这一篇文章 我们为QuickForm起草了一份特立独行的合作协议。

部署完成后使用方法与公网使用一致。内置了一个管理员账号：wst，密码：quickform，当然你也可以另外注册一些账号再使用。

场景三：本地临时使用（推荐）

一键启动免安装，适合频繁临时使用、回收隐私数据

打包程序下载地址：
https://my.feishu.cn/drive/folder/Q0FUf5KnLlQHJRdqyprck8YTnre

下载完成后，哪节课需要用到数据回收就提前启动，也很方便。

用 Skills 解决QuickForm的”最后一公里”

到这里，很多老师可能会遇到一些新的问题：

  • 知道要回收数据，但不知道该采集哪些维度，比如答题网页应该采集正确率、答题时间等等，那么体验实践类的网页应该采集什么数据呢？

  • 知道要提交数据，但不知道怎么设计合理的 JSON 数据结构，字段不全分析不了，字段太多又冗余。

  • 就算搞定了数据提交，如何快速衔接已经设计的数据结构做实时可视化分析大屏呢？

为了解决上面这些问题，我把完整流程封装成了一个 Skill：交互式网页数据回收。

Skills即技能，最近国内外都挺火的，和工作流相似又有所区别，详细见 一文带你看懂，火爆全网的Skills到底是个啥。

Skills介绍封面

这个 Skill 的核心目标 只有一个：

把”交互式网页 → 数据结构设计 → QuickForm接口接入 → 实时数据分析大屏”这条链路，一次性跑通。

这个 Skill 解决了哪些问题：

  • 分析网页类型（答题类 / 教学活动类）

  • 设计合理的数据采集策略

  • 生成清晰可解释的数据结构

  • 自动修改网页，加入QuickForm数据提交逻辑

  • 生成实时数据分析大屏

除此之外，这个 Skill 还能帮助 你：

  • 自动识别并询问你是否需要采集学生个人信息；

  • 对于教学活动类网页，从专家的角度设计数据采集维度；

  • 生成的实时数据分析大屏与上传网页风格保持一致；

  • 生成网页后对代码生成质量进行验证，确保网页正常运行。

使用方法：

这个 skill我已经上架在扣子的技能商店并且设置 开源 了，大家可以自行体验，或者复制到个人空间再优化改进。

Skill使用说明

  1. 直接打开这个技能，点击使用
    https://www.coze.cn/?skill_share_pid=7598218594635366446

  2. 在新对话中使用该技能，只需要上传你的交互式网页文件和 QuickForm上生成数据接口地址即可开始。

tips：扣子现在暂时不支持上传 html文件，你可以先将网页文件扩展名修改为txt再上传！

案例分享

案例分享插图

  1. 《物联数据需采集》巩固练习题
    https://www.coze.cn/s/cVQC87LrgS4/

  2. 模拟直播网络搭建
    https://www.coze.cn/s/QsrxfJpz-8Y/

模拟直播网络搭建案例

  1. MQTT通信机制模拟
    https://www.coze.cn/s/k19E3f3_U5c/

MQTT通信机制模拟案例

总结

回顾整个系列，四篇推文，是一条非常清晰的路径：

1️⃣ AI 帮你做出网页
2️⃣ 免费部署，让它跑起来
3️⃣ 优化交互，让学生愿意用
4️⃣ 回收数据 + 分析效果

AI 制作交互式网页解决了 “从 0 到 1 做网页” 的问题，QuickForm 则补上了 “数据回收” 的基础环节，而 Skills 更是解决了 “数据采集策略设计 + 分析落地” 的最后一公里问题。

当数据开始流动，你就会发现：网页不再是”展示工具”,而是变成了 可反馈、可迭代、可评估的教学工具。这，才是 AI 制作交互式网页真正值得投入的地方。

作者：信息教与学
原文链接： https://mp.weixin.qq.com/s/SpDw1uDx3LD91hAGhNP9xw