推荐将题目统一存为JS对象数组，每道题含id、type、question、options、answer等字段，支持单选、多选、填空等类型，校验逻辑统一收口于checkAnswer函数，通过data-index管理题号，避免DOM硬编码和状态丢失。
直接用原生 HTML + JavaScript 就能做出轻量、可离线运行的答题闯关活动页面，不需要框架或后端——关键在于状态管理别丢、题干和选项结构别嵌套过深、跳转逻辑别写死。
怎么组织题目数据结构才不容易乱
题目如果硬编码在 HTML 里，改十道题就得翻十次 <div>，维护成本高。推荐把题目统一放在一个 JS 对象数组里，每道题是独立对象：
<pre class="brush:php;toolbar:false;">const questions = [
{
id: 1,
type: "single", // single / multiple / fill
question: "HTML 中定义超链接的标签是？",
options: ["<code><p></code>", "<code><a></code>", "<code><div></code>", "<code><span></code>"],
answer: [1], // 索引从 0 开始，单选就一个数，多选是数组
explanation: "a 标签用于创建超链接"
},
{
id: 2,
type: "fill",
question: "HTML5 新增的语义化标签有 <code><header></code>、<code><nav></code> 和 ______（填一个即可）",
answer: ["main", "section", "article", "aside", "footer"],
caseSensitive: false
}
];</pre>
<p>这样后续加题、改答案、配解析都只动数据，不碰 DOM 操作逻辑。</p>
<ul>
<li>别用 <code>name 或 id 属性存题号——容易和表单冲突，统一走 JS 数据索引
answer 必须是数组，哪怕只选一个，否则判断逻辑要分支处理answer 设为字符串数组，支持多个等效答案，校验时用 some() 匹配怎么让“下一题”按钮真正知道当前在哪一题
靠全局变量 currentQuestionIndex 记录位置最简单，但容易被意外修改。更稳的做法是：每次渲染题目时，把当前索引存在按钮的 data-index 上，点击时读它，而不是靠闭包或计时器推算。
立即学习“前端免费学习笔记（深入）”；
function renderQuestion(index) {
const q = questions[index];
document.querySelector("#question-text").textContent = q.question;
const nextBtn = document.querySelector("#next-btn");
nextBtn.dataset.index = index + 1; // 下一题的索引
nextBtn.disabled = false;
}
常见错误是点太快导致 index 被覆盖，或没清空上一题用户选择就进下一题——务必在 renderQuestion 开头重置所有选项的 checked 和 value。
- 不要用
setTimeout延迟跳转来“防连点”，用户可能真想快点过题；用disabled = true+ 渲染完成再启用更可靠 - 如果允许回退，别用
history.back()，它会绕过你的状态管理；单独存一份userAnswers数组，按索引取
怎么判断填空题/多选题对错而不写一堆 if
不同题型校验逻辑差异大，硬写条件分支容易漏。建议统一收口到一个 checkAnswer(q, userValue) 函数，内部按 q.type 分发：
function checkAnswer(q, userValue) {
if (q.type === "single") {
return userValue === q.answer[0];
}
if (q.type === "multiple") {
return arraysEqual(userValue.sort(), q.answer.sort()); // userValue 是选中项索引数组
}
if (q.type === "fill") {
const input = String(userValue).trim();
return q.answer.some(ans =>
q.caseSensitive ? input === ans : input.toLowerCase() === ans.toLowerCase()
);
}
}
注意：填空题用户可能多打空格或大小写不一致，必须做 trim() 和大小写归一化；多选题比较前一定要 sort()，否则 [0,2] 和 [2,0] 判为不同。
- 别在 HTML 里用
required验证填空题——它只管非空，不管内容是否正确 - 多选题的用户输入是“哪些选项被勾选”，不是“用户填了什么文字”，所以传入的是索引数组，不是文本值
怎么防止用户用 DevTools 直接看答案
完全防不住，但可以提高门槛：答案别明文写在 HTML 的 data-answer 里，也不要在控制台打印完整 questions 数组。把答案映射关系混淆一下，比如用位运算或简单偏移：
// 存储时 const storedAnswer = q.answer.map(i => i ^ 3); // 异或混淆 // 校验时 const realAnswer = storedAnswer.map(i => i ^ 3);
这不是加密，只是让随手搜 "answer" 的人看不到原始值。真要防作弊，得上后端判题——但那就不是纯 HTML 活动页的范畴了。
最容易被忽略的是：本地存储的答题记录（如 localStorage.setItem("score", score)）能被手动篡改。如果分数要导出或展示，一定在最后提交时用 JS 重新遍历 userAnswers 实时计算，别信任何存下来的中间值。
