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

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

---

在上一篇推文 [AI制作交互式网页（三）：答题类交互式网页使用问题与解决方案](https://mp.weixin.qq.com/s?__biz=MzE5ODQyODg4Mg==&mid=2247483984&idx=1&sn=222d629e22dbacc02a8d6235986aa9f7&scene=21#wechat_redirect) 中，我们聚焦答题类交互式网页的使用痛点，解决了防作弊、时间控制、作答缓存等核心问题，让AI制作的答题网页真正适配初中信息课的机房场景。

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

> 即便网页功能再完善，学生的答题数据也无法回收和分析，更不能统计正确率、分析错题分布。
> 
> 网页学生用得很开心，但我怎么知道他们学到了什么？

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

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

![文章封面图](../images/skill01/image_01.gif)

---

## QuickForm 是什么？

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

> "要不要搭数据库？要不要写后端？要不要部署服务器？"

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

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

QuickForm 是一个"**只管接收和存储数据**"的轻量级数据回收系统，由温州科技高级中学 AI科创中心联合温州大学开发，想要详细了解的老师可以移步谢作如老师的文章 [QuickForm教师版开源了！（关于QuickForm的问与答）](https://mp.weixin.qq.com/s?__biz=Mzg2MzU1ODY1OQ==&mid=2247484618&idx=1&sn=a78c08e75e89469e16383727bade93f9&scene=21#wechat_redirect)。

它的 **核心特点** 是：

> - **不要求你懂后端**
> - **不限制你用什么前端技术**
> - **不关心你的网页是AI写的还是手写的**

你只需要做一件事：

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

就这么简单。

---

## 如何使用QuickForm？

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

### 场景一：公网快速使用

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

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

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

![公网快速使用说明](../images/skill01/image_04.jpg)

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

![获取接口URL步骤](images/image_06.jpg)
![创建任务接口](../images/skill01/image_07.jpg)

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

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

![JavaScript提交代码](../images/skill01/image_09.jpg)

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

![测试数据提交界面](../images/skill01/image_10.png)

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

![数据分析界面1](../images/skill01/image_11.jpg)
![数据分析界面2](../images/skill01/image_12.jpg)
![数据分析界面3](../images/skill01/image_13.jpg)

---

### 场景二：本地部署使用

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

建议参考伍老师的这篇文章 [傻瓜式本地部署QuickForm全流程](https://mp.weixin.qq.com/s?__biz=Mzg4MDczMzg3Ng==&mid=2247487431&idx=1&sn=950b47ff61d105d317066b73498b2df9&scene=21#wechat_redirect)，讲得很详细。这个教师版，打包好的，无源码，如果使用后觉得还不错可以部署开源的校园版，具体看这一篇文章 [我们为QuickForm起草了一份特立独行的合作协议](https://mp.weixin.qq.com/s?__biz=Mzg2MzU1ODY1OQ==&mid=2247484645&idx=1&sn=626b0273d6a756439dc9df799c6b6524&scene=21#wechat_redirect)。

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

---

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

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

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

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

---

## 用 Skills 解决QuickForm的"最后一公里"

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

- 知道要回收数据，但不知道该采集哪些维度，比如答题网页应该采集正确率、答题时间等等，那么体验实践类的网页应该采集什么数据呢？
- 知道要提交数据，但不知道怎么设计合理的 JSON 数据结构，字段不全分析不了，字段太多又冗余。
- 就算搞定了数据提交，如何快速衔接已经设计的数据结构做实时可视化分析大屏呢？

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

Skills即技能，最近国内外都挺火的，和工作流相似又有所区别，详细见 [一文带你看懂，火爆全网的Skills到底是个啥。](https://mp.weixin.qq.com/s?__biz=MzIyMzA5NjEyMA==&mid=2647678672&idx=1&sn=c3510896d2de19b5c5ab6805c27182e5&scene=21#wechat_redirect)

![Skills介绍封面](../images/skill01/image_14.jpg)

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

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

这个 Skill 解决了哪些问题：

> - 分析网页类型（答题类 / 教学活动类）
> - 设计合理的数据采集策略
> - 生成清晰可解释的数据结构
> - 自动修改网页，加入QuickForm数据提交逻辑
> - 生成实时数据分析大屏

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

> - **自动识别并询问你是否需要采集学生个人信息；**
> - **对于教学活动类网页，从专家的角度设计数据采集维度；**
> - **生成的实时数据分析大屏与上传网页风格保持一致；**
> - **生成网页后对代码生成质量进行验证，确保网页正常运行。**

### 使用方法：

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

![Skill使用说明](../images/skill01/image_15.jpg)

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

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

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

---

## 案例分享

![案例分享插图](../images/skill01/image_16.png)

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

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

![模拟直播网络搭建案例](../images/skill01/image_03.jpg)

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

![MQTT通信机制模拟案例](../images/skill01/image_05.jpg)

---

## 总结

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

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

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

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

---

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