在多项选择问答游戏中随机选择答案

Question

我正在使用 Vue 和 JavaScript 制作多项选择游戏。问题来自 API。我已经显示了问题，但我不确定如何以随机顺序获得答案。

目前正确答案总是第一个选项，因为在 table 我有按钮，我将正确答案绑定到第一个 space，而不正确的答案绑定到休息。我在想也许可以用随机顺序制作一个包含正确和错误答案的变量数组，但我不完全确定如何随机化它们。

这里是相关的HTML:

<button type="button" class="btn" @click="getQ" @click="result = ''">Get Question</button>
    <p class="question">{{question}}</p>
    <table width="100%" height="50%">
      <tr>
        <td width="50%">
          <button type="button" class="btn" class="button" @click="checkAnswer(correctAnswer)">{{correctAnswer}}</button>
        </td>
        <td width="50%">
          <button type="button" class="btn" class="button" @click="checkAnswer(incorrectAnswer)">{{incorrectAnswers[0]}}</button>
        </td>
      </tr>
      <tr>
        <td width="50%">
          <button type="button" class="btn" class="button" @click="checkAnswer(incorrectAnswer)">{{incorrectAnswers[1]}}</button>
        </td>
        <td width="50%">
          <button type="button" class="btn" class="button" @click="checkAnswer(incorrectAnswer)">{{incorrectAnswers[2]}}</button>
        </td>
      </tr>
    </table>
    <p>{{result}}</p>

我正在使用一些 bootstrap 样式，这就是为什么有一些双类之类的东西。我在想也许用随机答案顺序制作一个数组，并为按钮文本和函数运行使用 {{arrayName[0]}} 使其随机。

这里是相关的JavaScript:

let question = Vue.ref('');
let incorrectAnswers = Vue.ref([]);
let correctAnswer = Vue.ref('');
let result = Vue.ref('');
 
// Methods
let getQ = async function() {
  let response = await fetchURL('https://the-trivia-api.com/api/questions?categories=film_and_tv&limit=1&region=AU');
  this.correctAnswer = response[0].correctAnswer
  this.incorrectAnswers = response[0].incorrectAnswers
  this.question = response[0].question
}

let checkAnswer = function(clicked) {
  if (clicked === correctAnswer.value) { // checks if the button that was clicked is the same as the answers value
    this.result = "Correct!"; //if it does, result changes to Correct!
  } else {
    this.result = "Incorrect!"; //if the answer is incorrect, result changes to Incorrect!
  }
}

// Return variables, computed properties and methods
  return {
    correctAnswer, incorrectAnswers, question, result,
    getQ, checkAnswer,
  }
}

Answer 1

您可以使用一种名为 Fisher-Yates Algo 的著名算法来极其快速有效地随机化数组中的项目，如果这是您想要采用的路线。它采用以下形式：

function shuffle(array) {
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}

Answer 2

如果创建 computed property, containing the shuffled version of your answers array, you can then use v-for to render each of these answers. For the actual shuffling logic, you can see this question.

这是一个基本示例：

computed: {
  answers() {
  return this.answers
    .map(value => ({ value, sort: Math.random() }))
    .sort((a, b) => a.sort - b.sort)
    .map(({ value }) => value);
  }, 
},

<td v-for="(answer, index) in answers" :key="index">
  <button type="button" class="btn" class="button" @click="checkAnswer(answer)">{{ answer }}</button>
</td>

在多项选择问答游戏中随机选择答案

Randomising the answers in a multiple choice quiz game

javascript

vue.js