最近公司内部有一份《装配工艺标准》的培训 PDF，需要组织员工进行考试摸底。如果去买现成的考试系统或者用问卷平台，不仅有些大材小用，而且 UI 也很难深度定制。
于是我萌生了一个想法：能不能完全借助 AI，零成本手搓一个纯前端的“单网页在线考试系统”？
在不断调优和深挖的过程中，我不仅搞定了一个极简的考试页面，还顺藤摸瓜研究了“问卷星”、“腾讯问卷”背后的底层架构。今天就把这套折腾的过程和干货分享给大家。
一、 极简主义：一个 HTML 文件搞定一场考试
一开始，我想象的在线考试系统必须得有“前端 + 数据库 + 后台 Java/Node.js”。但实际上，如果只是一场小型的内部培训测验，一个纯原生的单 HTML 文件就足够了。
1. 架构思路：纯前端判卷
我将题目数据（单选、多选、正确答案）以 JSON 格式直接“硬编码”写在 JavaScript 里。 用户打开网页后，手机或电脑的 CPU 就成了“阅卷老师”。交卷的瞬间，JS 会在本地比对用户的选择与正确答案数组，并立即渲染出得分、红绿错题高亮和解析反馈。全程 0 延迟，且不需要任何服务器算力。
2. UI 风格的迭代
最初我设计了一个工业风的单题翻页模式，但发现对于正式考试来说过于花哨。最后我把它重构成了**“传统 A4 试卷模式”**：极简白底黑字，所有人一眼就能看懂，一口气从头做到尾再交卷，体验非常丝滑。
🎁 附送：AI 自动生成试卷的高级 Prompt 如果你也想一键生成这种单文件考试页面，不要随便跟 AI 聊，直接用我总结的这套 Prompt 模板（复制这段话发给 AI，把资料扔给它即可）：
“你是一个出题专家。请根据我提供的【学习资料】，提取核心知识点，生成一份包含15道题（单选+多选）的在线 HTML 测试卷。要求：单文件纯原生实现、传统A4纸试卷排版、交卷前进行未答题校验、交卷后输入框设为 disabled，并在错题下方显示红色解析，正确选项高亮为绿色。多选判分必须进行数组全等比对…”
二、 进阶难题：没有后台，怎么收集员工成绩？
单网页确实爽，但问题来了：员工做完题，数据一刷新就没了。既然不想写后端代码，又需要记录“姓名、部门、得分”，怎么办？
这里就涉及到了现代前端开发中非常有用的 Serverless（无服务器架构）思想。
我的解决方案是：接入 Webhook 或第三方表单接口（如 Formspree）。
在试卷的顶部加上姓名和部门的必填项。在用户点击“交卷”算出总分后，加上下面这段简单的 fetch 代码：
const reportData = {
"姓名": userName,
"部门": userDept,
"得分": score + "分",
"交卷时间": new Date().toLocaleString()
};
// 发送到钉钉群机器人、飞书机器人或免费表单接口
fetch("https://你的webhook地址", {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(reportData)
}).then(res => console.log("成绩上传成功！"));这样，员工每次交卷，成绩就会自动推送到部门的钉钉/企业微信群里，或者自动汇总成一份在线 Excel。完美实现了零部署、零服务器费用的数据闭环。
三、 降维打击：我的单网页 vs 腾讯问卷，差距在哪？
做完这个小工具后，我陷入了思考：这种 SPA（单页应用）与市面上成熟的“腾讯问卷”、“问卷星”到底有什么本质区别？
如果把做考卷比作“吃饭”，我的单文件网页是**“自热米饭”（食材和加热包全在本地），而腾讯问卷则是去“大型连锁餐厅”**。
核心架构区别如下：
| 维度 | 我的单文件考试系统 (Client-side) | 腾讯问卷类系统 (B/S 后端架构) |
|---|---|---|
| 判卷大脑 | 前端/本地计算：答案写在JS里，本地 CPU 瞬间判分。 | 后端/云端计算：前端不知答案，用户选项传给服务器后由云端判分。 |
| 防作弊机制 | 较弱。懂技术的人按 F12 查看源码就能找到 correct: [2] 提前知道答案。 | 极强。正确答案锁在云端数据库，只要服务器不被黑，绝对安全。 |
| 运行抗压能力 | 无限抗压。把 HTML 发在群里，10万人同时做题也不会宕机（因为耗费的是个人的手机算力）。 | 需要强大的服务器集群支撑，大型统考高峰期容易出现服务器卡顿。 |
| 适用场景 | 企业内部轻量培训、知识竞答、课后自测练习。 | 正规防作弊考试、需要复杂的统计表盘和后台可视化的场景。 |
四、 站在巨人的肩膀上：优秀的开源问卷考试系统推荐
虽然单文件能解决轻量级需求，但如果你的公司需要一套完整的“可以拖拽出题、自动判分、拥有题库管理、数据大屏”的系统，千万不要自己从零开发，去开源社区“抄作业”才是王道。
我在调研后，整理了目前行业内最顶级的 4 个开源表单/考试系统，强烈推荐给做开发和架构的朋友们：
-
卷王 (SurveyKing) 🏆（强烈推荐） 国产开源之光！ 它不仅能做问卷，还内置了极其专业的考试模块和错题本功能。 技术栈：Vue3 + Java (Spring Boot)。中文文档写得极好，尤其是它提供的数据库架构图，非常适合作为学习 B/S 问卷系统的范本。
-
Tduck (填鸭表单) **UI 体验最接近“腾讯问卷”**的一个项目。它的后台拖拽编辑器（Form Builder）做得非常商业化，适合想在公司内部快速搭建表单收集平台的团队。
-
Formbricks 全球最火的前沿架构项目。如果你是纯前端/全栈 JavaScript 开发者，一定要看它。采用 Next.js + TailwindCSS + Prisma，代码质量和设计感都是国际一流水准。
-
SurveyJS 它不是一个完整的系统，而是一个**“纯前端问卷渲染引擎”**。它教你如何把一段 JSON 数据，变成兼容 Vue/React 的完美问卷。学会了它，你就懂得了表单页面的底层渲染逻辑。
写在最后
折腾完，然后让Gemini 写了一下发到这里了。