Quiz App Generator — 刷题网页生成器#

核心目标#

将用户提供的任意格式题目，生成一个功能完整、视觉精美、可直接部署的单文件 .html 刷题应用，让学生可以通过沉浸式的交互体验完成对题目的熟悉和记忆。

---

第一步：解析题目输入#

用户提供的题目往往格式不规整（从 Word 拷贝、截图、临时笔记等），请主动、智能地解析结构，不需要要求用户二次整理格式。

解析完成后，在内部将题目转化为以下标准数据结构：

json

[
  {
    "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> 块的第一行，形如：

js

const QUESTION_BANK = [ /* ... 题目数据 ... */ ];

这样做的目的是：即便完全不懂代码的老师，用记事本打开文件后也可以直接定位到最上方修改题目文字、增删选项，而不会破坏下方的逻辑代码。

规范三：学习进度持久化与可迁移#

• 利用 localStorage 在本地保存错题记录和历史成绩，刷新页面不丢失。
• 页面内必须提供"导出学习记录"（下载为 JSON 文件）和"导入记录"（拖拽或文件选择）功能，方便学生在不同设备之间转移进度。
• 这解决了纯前端应用的核心痛点：在机房做题、在家继续、换电脑复习，数据都能无缝延续。

规范四：绝对零外部依赖#

不引入任何外部 CDN 链接（无 Bootstrap、无 Tailwind CDN、无 Vue/React CDN、无 Google Fonts 链接）。原因是学生可能在局域网、无网络的机房使用，外部依赖会导致样式崩坏或加载失败。

所有 CSS、JS、字体（使用系统字体栈）、图标（使用内联 SVG）全部内联在唯一的 .html 文件中。

规范五：高级视觉与顺滑微交互#

参考 frontend-dev 技能的审美标准，不要使用浏览器默认样式。具体要求：

• 色彩：背景使用带灰度的深色或浅色系，避免纯黑/纯白。正确反馈用低饱和绿色，错误反馈用低饱和红/橙色，绝不使用原色。
• 卡片排版：题目以卡片形式展示，有内边距、圆角、细腻的阴影层次感。
• 交互反馈：答对时选项区域出现绿色渐变 + 小勾动画；答错时答题区轻微"抖动"（CSS shake 动画），同时标红所选项并绿色高亮正确项，然后自动展开解析。
• 模式切换：界面切换时使用淡入淡出过渡，不要生硬跳变。
• 响应式：在手机、平板、桌面端均能完好显示，卡片宽度自适应。

---

示例：题目数据与输出格式#

输入示例（用户粘贴的原始文本）：

text

1. 下列哪个是计算机的核心部件？
A 显示器  B CPU  C 键盘  D 打印机
答案：B  解析：CPU 是中央处理器，是计算机的核心...

解析后的内部数据：

json

{"id":1,"type":"single","question":"下列哪个是计算机的核心部件？","options":["A. 显示器","B. CPU","C. 键盘","D. 打印机"],"answer":"B","explanation":"CPU 是中央处理器，是计算机的核心..."}

输出： 一个单文件 quiz-output.html，双击即可打开，无需服务器，无需联网。

---

交付清单#

生成完成后，告知用户：

1. 文件保存位置
2. 如何在浏览器中打开
3. 如何通过记事本修改题目（找到文件顶部的 QUESTION_BANK）
4. 如何导出/导入学习记录