HTML测试题切换页面实现方法

本文介绍了一个纯前端实现的测试题交换页面方案，无需后端支持，仅用HTML、CSS和JavaScript即可完成题目展示、切换、答题、本地存储新题及JSON导出等核心功能；重点强调了规避file://协议导致的CORS错误（需借助轻量服务器）、采用扁平化题库结构、利用localStorage安全暂存用户题目、通过template标签防XSS渲染、以及合理限制导出题量等实战要点，直击学生间快速共享与协作出题的真实痛点——技术不炫但稳定可靠，细节扎实才能让题库真正“交换”起来。

用 fetch 加载题库 JSON 最省事

浏览器里做题交换页面，本质是“展示别人出的题 + 提交自己出的题”，不需要后端也能跑起来。最直接的方式就是把题目存成 questions.json 文件，用 fetch 拉进来渲染。别碰本地 file:// 协议——它会触发 CORS 阻止读取，必须起个最小服务器（比如 npx serve 或 VS Code Live Server 插件）。

常见错误现象：net::ERR_FILE_PROTOCOL 或 Access to fetch at 'file:///...' has been blocked。这不是代码写错了，是浏览器策略卡死的。

• 题库结构建议扁平：每个题用 id、question、options（数组）、answer 字段，别嵌套太深
• 加载失败时加个 catch，至少提示“题目加载失败，请刷新”而不是白屏
• 如果题量超 50 道，考虑分页或懒加载，否则首次渲染卡顿明显

用 localStorage 临时存用户新题，不依赖后端

用户点“提交新题”，你不需要立刻发到服务器——先存在 localStorage 里，下次打开还能看到。这比硬推 API 稳定得多，尤其适合离线演示或小范围交换。

使用场景：学生之间传一个 HTML 文件，各自添加题目，再合并 JSON 手动更新。

• 存之前校验必填字段：question 非空、options 至少两个、answer 在选项索引范围内
• 用 JSON.stringify 存，别直接存对象，否则取出来是 [object Object]
• localStorage 容量约 5–10MB，但单条题数据别超过 1KB，避免撑爆或序列化失败

渲染选择题用 template 标签 + innerHTML 足够用

不用 React/Vue，纯 HTML 就能干净地生成题目列表。关键不是“怎么炫”，而是“换题不重刷整个页面”。用