Randomising the answers in a multiple choice quiz game

Question

I am making a multiple choice game using Vue and JavaScript. Questions are sourced from an API. I have displayed the questions but I am not sure how to get the answers in a random order.

At the moment the correct answers are always the first option, since in the table I have with the buttons, I bound the correct answer to the first space, and incorrect ones to the rest. I was thinking maybe making a variable array with the correct and incorrect answers in a random order but I am not entirely sure how to randomise them.

Here is the relevant 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>

I am using some bootstrap styling which is why there are some double classes and stuff. I was thinking maybe making an array with the random answer order and for the button text and function running using {{arrayName[0]}} to make it random.

Here is the relevant 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,
  }
}

IIUC then you don't actually want random, since you need to display ALL of the possible answers? — MikeB, May 02 '22 at 10:50
Instead of hardcoding s in your template you need to use [`v-for`](https://v2.vuejs.org/v2/guide/list.html) to render a four element array into four s. Shuffling an array is pretty basic and can be looked up. — , May 02 '22 at 10:53
For the actual shuffling logic, you can see [this question](https://stackoverflow.com/q/2450954/979052). Then, you can put this within a [`computed`](https://v2.vuejs.org/v2/guide/computed.html) property, and use [`v-for`](https://v2.vuejs.org/v2/guide/list.html) to render each of these answers. I've put a more detailed [code example](https://stackoverflow.com/a/72086243/979052) in an answer below. — Alicia Sykes, May 02 '22 at 11:51
@Crazy_ Puppy - Did any of the answers help you? If so, you should accept one of them, if not specify more details as to what's not clear. — Alicia Sykes, May 03 '22 at 12:17

score 0 · Accepted Answer · answered May 02 '22 at 11:44

You could use a famous algorithm called Fisher-Yates Algo to randomize items in an array extremely quickly and efficiently, if thats the route you want to take. It takes the following form:

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;
}

score 0 · Answer 2 · answered May 02 '22 at 11:49

If you create a 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.

Here's a basic example:

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

2 Answers2