JavaScript嵌套JSON测验开发：获取问题与答案逻辑求助

嘿，我来帮你搞定这个测验程序的逻辑问题！首先咱们先锚定一个常见的嵌套JSON结构（如果你的结构不一样，后面可以调整遍历路径），然后一步步拆解怎么获取问题、提取选项，再处理单个选项的交互逻辑。

第一步：先明确你的嵌套JSON结构（示例） #

假设你的测验数据是这样的嵌套结构，这是很典型的测验数据格式：

const quizData = {
  quizTitle: "前端基础小测验",
  questions: [
    {
      questionId: 1,
      questionText: "JavaScript中，以下哪个不是原始数据类型？",
      options: [
        { optionId: 101, text: "String", isCorrect: false },
        { optionId: 102, text: "Number", isCorrect: false },
        { optionId: 103, text: "Object", isCorrect: true },
        { optionId: 104, text: "Boolean", isCorrect: false }
      ]
    },
    {
      questionId: 2,
      questionText: "以下哪个方法可以阻止事件冒泡？",
      options: [
        { optionId: 201, text: "preventDefault()", isCorrect: false },
        { optionId: 202, text: "stopPropagation()", isCorrect: true },
        { optionId: 203, text: "stopImmediatePropagation()", isCorrect: false },
        { optionId: 204, text: "cancelBubble()", isCorrect: false }
      ]
    }
  ]
};

第二步：获取问题与对应选项的核心逻辑 #

你之前只能用console.log看进度，那咱们先把遍历数据、提取问题和选项的逻辑理清楚，之后再把它渲染到页面上：

// 遍历所有问题，逐个处理
quizData.questions.forEach((question, questionIndex) => {
  // 获取当前问题的文本
  const currentQuestionText = question.questionText;
  console.log(`第${questionIndex + 1}题：${currentQuestionText}`);
  
  // 获取当前问题的所有选项数组
  const currentOptions = question.options;
  console.log("可选答案：");
  currentOptions.forEach((option, optIndex) => {
    console.log(`${optIndex + 1}. ${option.text}`);
  });

  // 这里调用渲染函数，把问题和选项放到页面上（后面会写这个函数）
  renderSingleQuestion(question);
});

第三步：处理单个选项的交互逻辑 #

接下来咱们把数据变成页面上可交互的元素，给每个选项绑定点击事件，处理选择后的判断、样式变化等逻辑：

// 渲染单个问题到页面
function renderSingleQuestion(question) {
  // 创建问题容器
  const questionWrapper = document.createElement("div");
  questionWrapper.className = "question-card";
  
  // 添加问题标题
  const questionTitle = document.createElement("h4");
  questionTitle.textContent = question.questionText;
  questionWrapper.appendChild(questionTitle);
  
  // 创建选项容器
  const optionsWrapper = document.createElement("div");
  optionsWrapper.className = "options-group";
  
  // 遍历选项，创建每个选项按钮
  question.options.forEach(option => {
    const optionBtn = document.createElement("button");
    optionBtn.className = "option-btn";
    optionBtn.textContent = option.text;
    
    // 给按钮绑定点击事件，处理选择逻辑
    optionBtn.addEventListener("click", () => handleOptionSelection(option, question, optionBtn));
    
    optionsWrapper.appendChild(optionBtn);
  });
  
  questionWrapper.appendChild(optionsWrapper);
  document.body.appendChild(questionWrapper);
}

// 处理选项点击后的逻辑
function handleOptionSelection(selectedOption, currentQuestion, clickedBtn) {
  // 判断是否选中正确答案
  if (selectedOption.isCorrect) {
    alert(`太棒了！第${currentQuestion.questionId}题答对了 🎉`);
    clickedBtn.style.backgroundColor = "#4CAF50";
    clickedBtn.style.color = "#fff";
  } else {
    // 找到当前问题的正确选项文本
    const correctOptionText = currentQuestion.options.find(opt => opt.isCorrect).text;
    alert(`哎呀，答错了 😅 正确答案是：${correctOptionText}`);
    clickedBtn.style.backgroundColor = "#f44336";
    clickedBtn.style.color = "#fff";
  }
  
  // 禁用当前问题的所有选项，防止重复点击
  const allOptionBtns = clickedBtn.parentElement.querySelectorAll(".option-btn");
  allOptionBtns.forEach(btn => btn.disabled = true);
}

一些额外的小提示 #

• 如果你的JSON是从后端接口异步获取的，记得把遍历和渲染逻辑放到fetch或者axios的回调/async/await里，比如：

  async function fetchQuizData() {
    const response = await fetch("/your-quiz-api-url");
    const quizData = await response.json();
    // 这里再执行上面的遍历渲染逻辑
    quizData.questions.forEach(question => renderSingleQuestion(question));
  }
  fetchQuizData();
  

• 如果你的JSON结构和示例不同（比如选项的嵌套层级更深），只需要调整question.options这个路径，改成你的实际数据路径就行。
• 可以把样式写到CSS文件里，代替直接在JS里修改样式，让代码更整洁。

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