Vue简易测验应用选项无法重复选中修复及题目随机排序实现咨询

问题1：选项选中逻辑异常修复 #

根因 #

• 所有题目的单选框name属性绑定的是选项键值（a/b/c/d），浏览器中相同name的单选框全局互斥，所以第一题选了a之后，其他题的a选项都无法被选中。
• 单选框的id与label的for属性也复用了选项键值，id全局重复会导致label点击关联失效。

修复代码 #

替换模板中选项循环部分的代码即可：

<label
  class="answer"
  :for="`q_${domandaCorrente}_opt_${index}`"
  v-for="(risposta, index) in domande[domandaCorrente].risposte"
  :key="`q_${domandaCorrente}_opt_${index}`"
  :class="{
    'hover border-grey': domandaScelta == '',
    'bg-red': domandaScelta == index,
    'bg-green':
      index == domande[domandaCorrente].rispostaCorretta &&
      domandaScelta != '',
  }"
>
  <input
    type="radio"
    :name="`q_${domandaCorrente}_options`"
    :id="`q_${domandaCorrente}_opt_${index}`"
    class="hidden"
    :value="index"
    @change="select($event)"
  />
  {{ risposta }}
</label>

问题2：实现题目随机排序 #

实现方案 #

1. 抽离原始题库为固定常量，避免打乱后丢失原始数据
2. 使用Fisher-Yates洗牌算法实现无偏差的数组随机排序
3. 组件初始化和点击重新加载时，调用洗牌函数生成随机顺序的题目列表

修复后的script代码 #

// 原始固定题库
const originalDomande = [
  {
    domanda: "Quante champions ha vinto il Milan?",
    risposte: { a: "2", b: "5", c: "7", d: "10" },
    rispostaCorretta: "c",
  },
  {
    domanda: "Quante champions ha vinto l'Inter?",
    risposte: { a: "1", b: "5", c: "7", d: "10" },
    rispostaCorretta: "a",
  },
  {
    domanda: "Quante champions ha vinto la Juve?",
    risposte: { a: "2", b: "5", c: "7", d: "10" },
    rispostaCorretta: "a",
  },
]

// Fisher-Yates 洗牌函数
function shuffleArray(arr) {
  const newArr = [...arr]
  for (let i = newArr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    ;[newArr[i], newArr[j]] = [newArr[j], newArr[i]]
  }
  return newArr
}

export default {
  name: "App",
  data() {
    return {
      domandaCorrente: 0,
      correct: 0,
      wrong: 0,
      domandaScelta: "",
      domande: [], // 存储随机排序后的题目
    };
  },
  created() {
    // 组件加载时打乱题目顺序
    this.domande = shuffleArray(originalDomande)
  },
  methods: {
    select(e) {
      this.domandaScelta = e.target.value;
      if(this.domandaScelta == this.domande[this.domandaCorrente].rispostaCorretta) {
        this.correct++
      } else {
        this.wrong++
      }
    },
    nextQuestion() {
      this.domandaScelta = ""
      this.domandaCorrente++
    },
    showResult() {
      this.domandaCorrente++
    },
    reload() {
      this.domandaCorrente = 0
      this.domandaScelta = ""
      this.wrong = 0
      this.correct = 0
      // 重新开始时再次打乱题目顺序
      this.domande = shuffleArray(originalDomande)
    }
  },
  components: {},
};

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