如何将JSON文件用作Web应用数据库，实现随机词汇问答功能？

一、将JSON作为问答数据源关联Web应用 #

1. 设计JSON数据结构 #

先定义清晰的JSON结构，每条数据包含目标词汇、正确答案，以及可选的干扰项池（若无需自动生成干扰项）。示例结构：

[
  {
    "word": "abate",
    "correctAnswer": "to become less intense or widespread",
    "distractors": [
      "to increase rapidly",
      "to ignore completely",
      "to approve officially"
    ]
  },
  // 更多词汇条目...
]

2. 加载JSON数据到Web应用 #

用浏览器原生的fetch API在应用初始化时加载JSON文件，替换原代码中硬编码的questions数组。结合现有代码逻辑，修改初始化流程：

// 加载JSON数据源
async function loadVocabData() {
  const res = await fetch('./vocabQuestions.json');
  return await res.json();
}

// 初始化应用
async function init() {
  // 替换原硬编码的questions数组
  questions = await loadVocabData();
  currentQuestionIndex = Math.floor(Math.random() * questions.length);
  displayQuestion();
}

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', init);

注意：JSON文件要放在项目根目录或对应路径下，本地开发时建议用Live Server类工具，避免跨域问题。

二、批量生成选项与自动洗牌 #

1. 自动生成干扰项（避免手动编写） #

针对1000个词汇的规模，通过从其他词汇的正确答案中随机选取的方式生成干扰项，无需手动编写。写一个函数自动组合正确答案+3个随机干扰项：

// 生成当前词汇的4个选项（正确答案+3个随机干扰项）
function buildOptions(allVocab, currentItem) {
  // 收集所有正确答案，排除当前条目的正确答案
  const allAnswers = allVocab.map(item => item.correctAnswer).filter(ans => ans !== currentItem.correctAnswer);
  // 随机选3个不重复的干扰项
  const distractors = [];
  while (distractors.length < 3) {
    const randomIdx = Math.floor(Math.random() * allAnswers.length);
    const candidate = allAnswers[randomIdx];
    if (!distractors.includes(candidate)) distractors.push(candidate);
  }
  // 组合正确答案和干扰项后洗牌
  return shuffleOptions([currentItem.correctAnswer, ...distractors]);
}

2. 公平洗牌算法（替代随机排序） #

用Fisher-Yates洗牌算法实现公平的选项打乱，比array.sort(() => Math.random() - 0.5)更可靠：

// Fisher-Yates洗牌算法
function shuffleOptions(options) {
  const shuffled = [...options];
  for (let i = shuffled.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
  }
  return shuffled;
}

3. 批量生成完整JSON文件 #

如果只有词汇和正确释义的列表（比如一个txt文件），可以用Python脚本批量生成带干扰项的JSON，彻底解放手动劳动：

import json
import random

# 读取词汇列表（假设vocab.txt每行格式：词汇 正确释义）
vocab_items = []
with open('vocab.txt', 'r', encoding='utf-8') as f:
    for line in f:
        word, answer = line.strip().split(' ', 1)
        vocab_items.append({"word": word, "correctAnswer": answer})

# 为每个条目生成干扰项
all_answers = [item["correctAnswer"] for item in vocab_items]
for item in vocab_items:
    # 从其他答案中随机选3个作为干扰项
    distractors = random.sample([ans for ans in all_answers if ans != item["correctAnswer"]], 3)
    item["distractors"] = distractors

# 保存为JSON文件
with open('vocabQuestions.json', 'w', encoding='utf-8') as f:
    json.dump(vocab_items, f, indent=2)

4. 整合到现有答题逻辑 #

修改原代码中的displayQuestion函数，用自动生成的选项替换硬编码内容：

function displayQuestion() {
  const currentItem = questions[currentQuestionIndex];
  // 生成并洗牌选项
  const options = buildOptions(questions, currentItem);
  // 更新DOM元素
  questionElement.textContent = currentItem.word;
  option1.textContent = options[0];
  option2.textContent = options[1];
  option3.textContent = options[2];
  option4.textContent = options[3];
  // 记录当前正确答案用于判断
  currentCorrectAnswer = currentItem.correctAnswer;
}

内容的提问来源于stack exchange，提问作者Vlad M