如何在Angular.js与JSON构建的多选测验中实现多正确答案功能

嘿，别担心问题浅显——刚接触技术的时候大家都有这样的疑问😉

先给你明确说：只改JSON肯定不够，还得调整前端的判断逻辑，不过整体改起来不难，我给你一步步拆解：

1. 先调整你的JSON数据结构 #

首先得在JSON里明确标记出所有正确答案，两种常见方式都可以：

方式一：给每个选项加isCorrect字段

这种方式直观，每个选项自己标记是否正确：

{
  "questions": [
    {
      "id": 1,
      "text": "以下哪些属于前端核心技术栈？",
      "options": [
        {"text": "HTML", "isCorrect": true},
        {"text": "CSS", "isCorrect": true},
        {"text": "Java", "isCorrect": false},
        {"text": "JavaScript", "isCorrect": true}
      ]
    }
  ]
}

方式二：单独存正确答案的集合

把正确选项的文本或索引存在一个数组里，适合选项文本不会变的场景：

{
  "questions": [
    {
      "id": 1,
      "text": "以下哪些属于前端核心技术栈？",
      "options": ["HTML", "CSS", "Java", "JavaScript"],
      "correctAnswers": ["HTML", "CSS", "JavaScript"]
    }
  ]
}

2. 修改AngularJS的判断逻辑 #

这是最关键的一步——原来的逻辑可能只判断单个选中项是否正确，现在要改成对比用户选中的所有选项和正确答案的集合是否完全匹配（既不能少选正确项，也不能多选错误项）。

对应方式一的逻辑（用isCorrect字段）

在你的控制器里写一个检查答案的函数：

$scope.checkQuizAnswer = function(currentQuestion) {
  // 1. 筛选出用户选中的选项
  const userSelected = currentQuestion.options.filter(opt => opt.selected);
  // 2. 筛选出所有正确选项
  const correctOptions = currentQuestion.options.filter(opt => opt.isCorrect);

  // 先判断数量是否一致（数量不对直接错）
  if (userSelected.length !== correctOptions.length) {
    $scope.result = "答错啦，再检查一下？";
    return false;
  }

  // 再判断每个选中的选项都是正确的
  const allMatch = userSelected.every(selected => 
    correctOptions.some(correct => correct.text === selected.text)
  );

  if (allMatch) {
    $scope.result = "答对啦！🎉";
    return true;
  } else {
    $scope.result = "答错啦，再检查一下？";
    return false;
  }
};

对应方式二的逻辑（用correctAnswers数组）

如果用的是单独存正确答案集合的结构，逻辑可以简化成对比两个数组（注意排序避免顺序影响）：

$scope.checkQuizAnswer = function(currentQuestion) {
  // 1. 获取用户选中的选项文本
  const userChoices = currentQuestion.options
    .filter((opt, index) => $scope.selectedIndexes.includes(index)) // 假设用索引绑定选中状态
    .map(opt => opt);

  // 2. 排序后对比两个数组
  const sortedUser = [...userChoices].sort();
  const sortedCorrect = [...currentQuestion.correctAnswers].sort();

  if (JSON.stringify(sortedUser) === JSON.stringify(sortedCorrect)) {
    $scope.result = "答对啦！🎉";
    return true;
  } else {
    $scope.result = "答错啦，再检查一下？";
    return false;
  }
};

3. 调整前端视图的绑定 #

确保你的多选框正确绑定到选项的选中状态，比如用ng-model：

<div ng-repeat="opt in currentQuestion.options">
  <label class="option-item">
    <input type="checkbox" ng-model="opt.selected">
    {{opt.text}}
  </label>
</div>

<button ng-click="checkQuizAnswer(currentQuestion)" class="submit-btn">提交答案</button>
<p class="result-text">{{result}}</p>

最后补充 #

为什么不能只改JSON？因为原来的代码逻辑是针对“单个正确答案”设计的，即使JSON里有多个正确标记，代码也只会判断某一个选中项是否正确，不会检查是不是所有正确项都选了，且没选错误项——这才是多选测验的核心要求嘛！

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