刷题网页生成器

生成适合学生使用的交互式刷题单文件 HTML 网页应用，支持练习、考试、背题、错题重练四种模式，零外部依赖，可直接部署到服务器。哪怕用户没有明确叫出本技能的名字，只要提到"帮我把这些题做成刷题网页"、"生成一个考试页面"、"制作交互式题目"、"把题库做成 HTML"、"给学生做一个测试工具"，就应当立即使用本技能。如果用户同时描述了美观、交互等要求，请隐式结合 frontend-dev 技能的视觉审美标准来生成输出。

duzhilei951@duzhilei951

Install

openclaw skills install @duzhilei951/quiz-app-generator

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

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 是中央处理器，是计算机的核心...

解析后的内部数据：