在测验 Vue.js 中混合答案顺序答案

【问题标题】：Mix order of answers in quiz Vue.js在测验 Vue.js 中混合答案顺序
【发布时间】：2021-06-12 12:46:36
【问题描述】：

是否可以在 Vue.js 中混合答案顺序？现在设置第一个答案是正确的，2个错误答案是第二个和第三个。有什么解决办法吗？

HTML：

<input placeholder="Question..." v-model="questionIn" type="text" />
<br />
<input placeholder="Right Answer..." v-model="answercorrectIn" type="text" />
<br />
<input placeholder="Bad Answer..." v-model="answerfalse1In" type="text" />
<br />
<input placeholder="Bad Answer..." v-model="answerfalse2In" type="text" />
<br />

这里是 JS Vue：

    addQuestion()
        {
            if ((this.questionIn != "") && (this.answercorrectIn != "") && (this.answerfalse1In != "") && (this.answerfalse2In != ""))
            {
                this.questions.push(
                {
                    question: this.questionIn,
                    answers:
                    [
                        { id: 0, answer: this.answercorrectIn, correct: false },
                        { id: 1, answer: this.answerfalse1In, correct: false },
                        { id: 2, answer: this.answerfalse2In, correct: false }
                    ],
                    correct: [0],
                    false: [1, 2],

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

你可以shuffleaddQuestion()中的答案：

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    const temp = array[i]
    array[i] = array[j]
    array[j] = temp
  }
}

export default {
  methods: {
    addQuestion() {
      if (/* ok to add */) {
        this.questions.push({
          question: this.questionIn,
          answers: shuffleArray([
            { id: 0, answer: this.answercorrectIn, correct: false },
            { id: 1, answer: this.answerfalse1In, correct: false },
            { id: 2, answer: this.answerfalse2In, correct: false }
          ]),
          correct: [0],
          false: [1, 2],
        })
      }
    }
  }
}

demo

【讨论】：

【解决方案2】：

在一个非常好的 vue.js 教程中查看这个 "shuffle answers" 部分，她正在使用 lodash shuffle function 实现您所需要的。

您可以看到该功能的完整实现以及您应该处理的所有情况。

【讨论】：