刷题网页生成器

v1.0.0

生成适合学生使用的交互式刷题单文件 HTML 网页应用,支持练习、考试、背题、错题重练四种模式,零外部依赖,可直接部署到服务器。哪怕用户没有明确叫出本技能的名字,只要提到"帮我把这些题做成刷题网页"、"生成一个考试页面"、"制作交互式题目"、"把题库做成 HTML"、"给学生做一个测试工具",就应当立即使用本技能...

0· 98·0 current·0 all-time

Install

OpenClaw Prompt Flow

Install with OpenClaw

Best for remote or guided setup. Copy the exact prompt, then paste it into OpenClaw for duzhilei951/quiz-app-generator.

Previewing Install & Setup.
Prompt PreviewInstall & Setup
Install the skill "刷题网页生成器" (duzhilei951/quiz-app-generator) from ClawHub.
Skill page: https://clawhub.ai/duzhilei951/quiz-app-generator
Keep the work scoped to this skill only.
After install, inspect the skill metadata and help me finish setup.
Use only the metadata you can verify from ClawHub; do not invent missing requirements.
Ask before making any broader environment changes.

Command Line

CLI Commands

Use the direct CLI path if you want to install manually and keep every step visible.

OpenClaw CLI

Bare skill slug

openclaw skills install quiz-app-generator

ClawHub CLI

Package manager switcher

npx clawhub@latest install quiz-app-generator
Security Scan
VirusTotalVirusTotal
Benign
View report →
OpenClawOpenClaw
Benign
high confidence
Purpose & Capability
Name and description match the SKILL.md: producing a single-file interactive quiz HTML app. The declared footprint (no binaries, no env vars, no install, instruction-only) is proportional to that purpose.
Instruction Scope
SKILL.md stays focused on parsing user-provided questions and producing a full .html file with four modes, inline assets, and top-level QUESTION_BANK. Two items to note: (1) it asks the agent to 'proactively parse messy inputs' (Word copy, screenshots) which implies OCR/formatting heuristics but does not instruct use of external tools — this is reasonable but may require follow-up with the user about input format (images need OCR). (2) it implicitly references combining with a separate frontend-dev skill for aesthetics without declaring that dependency; this is scope creep but not a security issue.
Install Mechanism
No install spec or code files are present; the skill is instruction-only, which minimizes installation risk.
Credentials
No environment variables, credentials, or config paths are requested. The main privacy/security consideration is that the generated .html will embed correct answers and (if used) exported student progress JSON in plain text, which is expected behavior for an offline single-file quiz app but could leak exam answers if published.
Persistence & Privilege
The skill requests that the generated app persist progress to localStorage and support import/export — this is appropriate for the app's functionality and does not change agent privileges. Also the SKILL.md wording about 'immediately use this skill whenever certain phrases are mentioned' is a usage preference and not an actual platform-level privilege (the skill is not marked always:true).
Assessment
This skill is coherent and doesn't request secrets or installs, but review these points before use: 1) The produced HTML will include QUESTION_BANK with answer keys and explanations in plain JS at the top — do NOT distribute that file to students if you need to prevent answer leakage; consider generating a separate 'exam' build that omits answers. 2) The app persists progress to localStorage and supports import/export JSON; treat exported files as potentially sensitive student data. 3) If your source material contains images (screenshots of questions), clarify whether you want the agent to OCR them — SKILL.md expects the agent to 'intelligently parse' messy input but provides no OCR instructions. 4) SKILL.md suggests combining with a 'frontend-dev' aesthetic standard; if you care about a particular look, provide explicit style guidance or request an alternative (plain CSS) so the agent doesn't call other skills. 5) Confirm where you want the file saved and test the generated HTML locally before deploying to students. If any of these behaviors are unacceptable (e.g., you need an exam distribution without embedded answers), ask the skill to produce a variant that strips answers or locks the exam mode.

Like a lobster shell, security has layers — review code before you run it.

latestvk978n2h25sj237khhr8avj27q98451hc
98downloads
0stars
1versions
Updated 3w ago
v1.0.0
MIT-0

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. 如何导出/导入学习记录

Comments

Loading comments...