html如何做一个测试题交换页面

最省事方案是用 fetch 加载 questions.json，需本地服务器避免 cors；题库扁平结构，localstorage 存新题并校验字段；渲染用 template 标签防 xss，导出用 blob 限数量。

用 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 就能干净地生成题目列表。关键不是“怎么炫”，而是“换题不重刷整个页面”。用 <template></template> 预定义结构，每次克隆、填值、插入，比拼接字符串安全。

容易踩的坑：直接 innerHTML = '<div>'+ question + '</div>' 会执行 XSS（比如题目里含 <script></script>），哪怕内部用也得转义。

• 选项循环用 options.map((opt, i) => `<label><input type="radio" name="q${id}" value="${i}">${opt}</label>`)
• 渲染前对 question 和 options 做 opt.replace(/&/g, '&').replace(/, ' 简单转义
• 别给每道题加独立事件监听器，用事件委托：监听 document 的 change，再用 e.target.closest('[data-question-id]') 判定来源

导出题目为 JSON 文件需用 Blob + a.download

用户想把本地存的题打包带走？不能靠 console.log(JSON.stringify(…)) 让人手抄。得生成可下载的文件。

性能影响：大题库（>1000 题）生成 Blob 可能卡顿，建议加 loading 状态，且限制导出上限（比如最多 500 道）。

• 核心三步：构造 new Blob([jsonStr], {type: 'application/json'}) → URL.createObjectURL(blob) → <a href="url" download="questions.json"></a> 触发下载
• IE 不支持 Blob，但 IE 已淘汰；若真要兼容，改用 data:text/json;charset=utf-8, URL 方案（有长度限制）
• 导出前检查 localStorage 是否为空，避免下个空文件还带 bom 头

真正麻烦的是题目格式统一——有人加图片 base64，有人写 LaTeX，有人混用全角标点。交换页面能跑起来不难，难的是两边题库字段对得上、渲染不崩、答案逻辑一致。这些细节比技术选型更耗时间。