纯前端答题闯关需用变量严格跟踪 currentLevel，禁用按钮防重复提交，用 display 切换题块，data-correct 存答案，Date.now() 计算倒计时并监听 visibilitychange，checkIfPassed 在判分回调末尾调用，结果页带参数，移动端加 viewport 和 label 包裹 radio。

如何用纯 HTML + CSS + JavaScript 实现答题闯关逻辑

纯前端实现答题闯关，关键不在“页面多炫”，而在「状态可控」和「流程不跳脱」。不需要框架，但必须手动维护当前关卡、答题记录、倒计时和判定逻辑。最常出问题的是：用户反复点击、答案未锁定就翻页、上一题选中状态残留到下一题。

• currentLevel 必须用变量（而非仅靠 DOM class）严格跟踪，避免 DOM 操作延迟导致状态错位
• 每道题提交后立即禁用所有选项按钮（button.disabled = true），防止重复提交
• 不要用 location.href 或 history.pushState 切题——用 display: none / block 切换题块更可控
• 正确答案建议写在每个题块的 data-correct="B" 属性里，比硬编码进 JS 更易维护

倒计时 + 自动提交怎么防失效

浏览器标签页切走或系统休眠时，setInterval 会暂停或严重滞后，导致倒计时不准甚至漏触发提交。不能只依赖前端计时。

• 用 Date.now() 记录开始时间，每次 tick 重新计算剩余毫秒，而非累减固定值
• 在 visibilitychange 事件中检测页面是否可见：document.hidden === false 才继续倒计时
• 倒计时归零时，不仅要自动提交，还要强制清空用户已选但未确认的答案（input:checked 设为 checked = false）
• 别用 setTimeout 做单次倒计时——它不可取消；改用 clearTimeout + 递归 setTimeout，方便中途重置

提交后如何判断通关并跳转结果页

通关不是“答完最后一题”就结束，而是“最后一题提交且判定完成”。常见错误是监听了按钮点击就跳转，但此时 JS 还没跑完判分逻辑，score 还是旧值。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 把通关判断封装成函数，例如 checkIfPassed()，只在该题的异步判定回调末尾调用
• 若使用 Promise 封装判分（比如对接简单 API），确保 .then() 里才检查总分和关卡数
• 跳转前加 100ms 微延迟（setTimeout(() => { location.href = 'result.html' }, 100)），避开 Vue/React 类库可能的异步队列干扰（哪怕你没用框架，有些浏览器扩展也会注入脚本）
• 结果页 URL 建议带参数，如 result.html?score=80&levels=5，方便后续统计，也避免刷新丢失数据

移动端点透、缩放、横屏适配避坑点

答题页在手机上点选卡顿、误触、字太小，往往不是样式问题，而是基础 meta 和事件处理没到位。

立即学习“前端免费学习笔记（深入）”；

• 必须加这行：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，否则 iOS Safari 双击放大、长按选字都会干扰答题
• 选项按钮用 <label> 包裹 <input type="radio">，而不是只给 input 加 click 事件——iOS 上 input 的 click 有 300ms 延迟
• 禁止双指缩放：除了 meta，还要加 touch-action: manipulation 到 body 和题块容器
• 横屏时题干文字溢出？给 .question-text 加 word-break: break-word 和 overflow-wrap: break-word，比单纯设 font-size 更可靠

实际做下来，最难缠的不是功能实现，是用户各种“非常规操作”：连点跳题、切后台再切回、手滑选错立刻返回、网络波动下提交卡住……这些没法靠代码完全预防，但加一层“操作锁”（如 isSubmitting 标志位）和明确的 UI 反馈（按钮变灰+文字变“提交中…”），能挡住八成误操作。