quiz-app-generator

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

Safety Notice

This listing is from the official public ClawHub registry. Review SKILL.md and referenced scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "quiz-app-generator" with this command: npx skills add duzhilei951/quiz-app-generator

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,双击即可打开,无需服务器,无需联网。


交付清单

生成完成后,告知用户:

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

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

gitlab-mr-reviewer

当需要审核 GitLab 合并请求、检查 MR diff 风险、发布 GitLab 审查评论、执行 approve/request changes,或发送 MR 审查通知时使用。

Registry SourceRecently Updated
1490whrime
General

Voice Transcriber Toolkit

Voice-to-Text Transcription Toolkit - 语音识别转文字,支持Whisper/Vosk引擎,批量处理,字幕导出 | Speech recognition & transcription with Whisper/Vosk engines, batch processing, su...

Registry SourceRecently Updated
General

Gigo Lobster Taster

🦞 GIGO · gigo-lobster-taster: 正式试吃模式:跑完整评测,默认上传云端、生成个人结果页并进入排行榜。 Triggers: 试吃我的龙虾 / 品鉴我的龙虾 / lobster taste / lobster taster.

Registry SourceRecently Updated
General

Gigo Lobster Local

🦞 GIGO · gigo-lobster-local: 本地模式:跑完整评测,但不上云、不注册个人结果页,证书二维码回到官网首页。 Triggers: 本地试吃龙虾 / 离线试吃龙虾 / local lobster taste / offline lobster taste.

Registry SourceRecently Updated