答题卡必须用布局，每题一行，题号列固定宽，单选name统一为"q{n}"，JS校验漏答并聚焦提示，打印时用内联样式和@media print确保PDF正确。

答题卡表格结构必须用 而不是 div 布局

浏览器对

的行列语义支持更稳定，尤其在打印、缩放或屏幕阅读器下，

模拟的“表格”容易错行、丢失题号关联。考试场景下，题号与选项的物理对齐是刚需，不能依赖 CSS Grid/Flex 模拟。

实操建议：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 每道题用一个

，题干放

，选项用嵌套的 或同一行多个 ，避免文字长度影响对齐

单选题选项必须用 并共享 name

常见错误是给每道题的 radio 设置不同 name（如 name="q1"、name="q2"），这会导致同一题内可多选——浏览器只按 name 分组，不是靠位置或 class。

正确做法：

• 第 n 题所有选项的 name 统一为 "q{n}"，例如第 3 题：四个
• 每个选项加 value（如 "A"、"B"），后端或 JS 取值时直接读 element.value
• 不要用 id 替代 name 控制单选逻辑；id 只用于绑定 ，提升点击体验

提交前必须用 JS 校验是否漏答，而非仅靠 required

required 对 radio 无效（浏览器不校验 radio 组是否至少选一个），且无法区分“未作答”和“选了空值”。漏答检测必须手动实现。

实操建议：

• 遍历所有 name 以 "q" 开头的 radio 组：document.querySelectorAll('input[type="radio"][name^="q"]')
• 对每组用 Array.from(group).some(r => r.checked) 判断是否有选中项
• 漏答时聚焦第一个未答的题号单元格（tr），而不是弹 alert——避免考生反复点确定却不知哪题漏了
• 禁用提交按钮并添加提示文案，例如在表格下方插入：
  第 7、12 题未作答

导出为 PDF 时表格会变形？关键在 @media print 和内联样式

浏览器默认打印样式会重置表格边框、字体大小、甚至折叠空行，导致答题卡页码错乱或选项挤成一团。

解决要点：

• 所有样式尽量用内联 style，避免外部 CSS 在打印时被忽略
• 强制打印时显示边框：

（推荐后者，扁平且易维护） 禁止合并单元格（colspan/rowspan）来对齐选项——会导致导出 PDF 时错位、选中逻辑混乱 题号列固定宽度，如

1.

，并在 @media print 中补全：td, th { border: 1px solid #000; }

禁用分页断行：tr { page-break-inside: avoid; }，否则一道题被切到两页

字体统一用 font-family: "SimSun", "Times New Roman", serif;，避免宋体在 PDF 中渲染异常

复杂点在于不同浏览器对 @media print 解析差异大，Chrome 最可靠，Edge 和 Safari 偶尔忽略 page-break-inside——得额外给每道题的

加 style="break-inside: avoid;" 才保险。