纯前端答题闯关需用变量严格跟踪 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 还是旧值。
- 把通关判断封装成函数，例如
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></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 反馈（按钮变灰+文字变“提交中…”），能挡住八成误操作。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
