- name
- quiz-app-generator
- description
- 生成适合学生使用的交互式刷题单文件 HTML 网页应用，支持练习、考试、背题、错题重练四种模式，零外部依赖，可直接部署到服务器。哪怕用户没有明确叫出本技能的名字，只要提到"帮我把这些题做成刷题网页"、"生成一个考试页面"、"制作交互式题目"、"把题库做成 HTML"、"给学生做一个测试工具"，就应当立即使用本技能。如果用户同时描述了美观、交互等要求，请隐式结合 frontend-dev 技能的视觉审美标准来生成输出。
Quiz App Generator — 刷题网页生成器
核心目标
将用户提供的任意格式题目，生成一个功能完整、视觉精美、可直接部署的单文件 .html 刷题应用，让学生可以通过沉浸式的交互体验完成对题目的熟悉和记忆。
第一步：解析题目输入
用户提供的题目往往格式不规整（从 Word 拷贝、截图、临时笔记等），请主动、智能地解析结构，不需要要求用户二次整理格式。
解析完成后，在内部将题目转化为以下标准数据结构：
[
{
"id": 1,
"type": "single",
"question": "题目文字",
"options": ["A. 选项一", "B. 选项二", "C. 选项三", "D. 选项四"],
"answer": "A",
"explanation": "解析文字，说明为什么 A 正确..."
}
]type 支持：single（单选）、multiple（多选）、judge（判断题）、qa（简答）。如无解析内容，explanation 可留空字符串，不影响功能。
如果用户处于框架讨论阶段没有提供真实题目，请主动构造 4~6 道带有代表性的示例题目用于演示和测试。
第二步：生成单文件 HTML 应用
基于下方所有规范，从零编写并输出为一个完整的 .html 文件（写入到用户指定位置，或 quiz-output.html）。
规范一：四种核心模式（必须全部实现）
| 模式 | 交互要点 |
|---|---|
| 刷题模式（Practice） | 做一题即时显示该题答案和解析；可前后翻页；已答题目标记状态（对/错/未答） |
| 考试模式（Exam） | 全程隐藏答案；答完离开后点击"交卷"统一出成绩与考试报告（含得分、正确率、错题列表） |
| 背题模式（Memorization） | 直接展示所有题目和高亮正确答案与完整解析，便于快速复习记忆 |
| 错题本与重刷（Error Book） | 自动汇总刷题/考试模式中做错的题目；支持"一键只刷错题"进入专项练习循环 |
四种模式通过顶部或侧边的 Tab / 导航切换，切换时有平滑过渡动画。
规范二：题库数据必须置于代码最顶部
生成的 HTML 文件中，所有题目数据必须提取为一个独立的 JS 常量，放在 <script> 块的第一行，形如：
const QUESTION_BANK = [ /* ... 题目数据 ... */ ];这样做的目的是：即便完全不懂代码的老师，用记事本打开文件后也可以直接定位到最上方修改题目文字、增删选项，而不会破坏下方的逻辑代码。
规范三：学习进度持久化与可迁移
- 利用
localStorage在本地保存错题记录和历史成绩，刷新页面不丢失。 - 页面内必须提供"导出学习记录"（下载为 JSON 文件）和"导入记录"（拖拽或文件选择）功能，方便学生在不同设备之间转移进度。
- 这解决了纯前端应用的核心痛点：在机房做题、在家继续、换电脑复习，数据都能无缝延续。
规范四：绝对零外部依赖
不引入任何外部 CDN 链接（无 Bootstrap、无 Tailwind CDN、无 Vue/React CDN、无 Google Fonts 链接）。原因是学生可能在局域网、无网络的机房使用，外部依赖会导致样式崩坏或加载失败。
所有 CSS、JS、字体（使用系统字体栈）、图标（使用内联 SVG）全部内联在唯一的 .html 文件中。
规范五：高级视觉与顺滑微交互
参考 frontend-dev 技能的审美标准，不要使用浏览器默认样式。具体要求：
- 色彩：背景使用带灰度的深色或浅色系，避免纯黑/纯白。正确反馈用低饱和绿色，错误反馈用低饱和红/橙色，绝不使用原色。
- 卡片排版：题目以卡片形式展示，有内边距、圆角、细腻的阴影层次感。
- 交互反馈：答对时选项区域出现绿色渐变 + 小勾动画；答错时答题区轻微"抖动"（CSS
shake动画），同时标红所选项并绿色高亮正确项，然后自动展开解析。 - 模式切换：界面切换时使用淡入淡出过渡，不要生硬跳变。
- 响应式：在手机、平板、桌面端均能完好显示，卡片宽度自适应。
示例：题目数据与输出格式
输入示例（用户粘贴的原始文本）：
1. 下列哪个是计算机的核心部件？
A 显示器 B CPU C 键盘 D 打印机
答案：B 解析：CPU 是中央处理器，是计算机的核心...解析后的内部数据：
{"id":1,"type":"single","question":"下列哪个是计算机的核心部件？","options":["A. 显示器","B. CPU","C. 键盘","D. 打印机"],"answer":"B","explanation":"CPU 是中央处理器，是计算机的核心..."}输出： 一个单文件 quiz-output.html，双击即可打开，无需服务器，无需联网。
交付清单
生成完成后，告知用户：
- 文件保存位置
- 如何在浏览器中打开
- 如何通过记事本修改题目（找到文件顶部的
QUESTION_BANK） - 如何导出/导入学习记录