Как сделать так, чтобы ответы на викторину викторины размещались случайным образом в слотах для кнопок?

Question

Так что я использую API-интерфейсы для викторины, чтобы запрашивать вопросы по викторине для веб-приложения, которое я программирую. Я понял, как это рандомизировать, но я не могу понять, как не сделать так, чтобы варианты повторялись.

function useApiData(data){
  let answers= [data.results[0].correct_answer, data.results[0].incorrect_answers[0], data.results[0].incorrect_answers[1], data.results[0].incorrect_answers[2]]

  document.querySelector("#category").innerHTML = `Category: ${data.results[0].category}`
  document.querySelector("#difficulty").innerHTML = `Difficulty: ${data.results[0].difficulty}`
  document.querySelector("#question").innerHTML = `Question: ${data.results[0].question}`
  document.querySelector("#answer1").innerHTML = `${answers[Math.floor(Math.random()*answers.length)]}`
  document.querySelector("#answer2").innerHTML = `${answers[Math.floor(Math.random()*answers.length)]}`
  document.querySelector("#answer3").innerHTML = `${answers[Math.floor(Math.random()*answers.length)]}`
  document.querySelector("#answer4").innerHTML = `${answers[Math.floor(Math.random()*answers.length)]}`
}

Answer 1

Итак, чтобы заставить его работать так, как вы ожидали, вы должны выдвинуть каждый выбранный элемент в массиве, а затем сделать новый выбор между существующими .

Это должно быть примерно так:

function randomItemWithNoRepetition(array) {
  let copy = Array.from(array); // Create a copy of input array
  return function() {
    if (copy.length < 1) { copy = Array.from(array); } // This line exist to create copy and make a new array from actual array whenever all possible options are selected once
    const index = Math.floor(Math.random() * copy.length); // Select an index randomly
    const item = copy[index]; // Get the index value
    copy.splice(index, 1); // Remove selected element from copied array
    return item; // Return selected element
  };
}

const chooseFromArray = randomItemWithNoRepetition(['Foo', 'Bar', 'FU', 'FooBar' ]); // The input of this function should be the array of your answers. I just add dummy data as an input of function for more illustration.

document.querySelector("#answer1").innerHTML = `${chooseFromArray()}`; // "Bar"
document.querySelector("#answer2").innerHTML = `${chooseFromArray()}`; // "Foo"
document.querySelector("#answer3").innerHTML = `${chooseFromArray()}`; // "FU"
document.querySelector("#answer4").innerHTML = `${chooseFromArray()}`; // "FooBar"

Answer 2

Хороший способ рандомизации массива называется алгоритмом Фишера-Йейтса shuffle .
Вы можете использовать его следующим образом.

(Запустите фрагмент несколько раз, чтобы увидеть, что ответы расположены в случайном порядке.)

// Defines the answers and the corresponding HTML elements
let answers = ["JavaScript", "42", "Maybe", "Leroy Jenkins"];
const answerElements = [
  document.getElementById("answer1"),
  document.getElementById("answer2"),
  document.getElementById("answer3"),
  document.getElementById("answer4")
];

// Shuffles the answers
randomize(answers);

// Loops through the randomized answers
for(let i = 0; i < answers.length; i++){

  // Checks to be sure the property we're assigning to exists
  if(answerElements[i] && answerElements[i].textContent){
    
    // Assigns the string to the element's textContent property
    answerElements[i].textContent = answers[i];
  }
}

// Implements a Fisher-Yates shuffle
function randomize(array){
  for(let i = array.length - 1; i > 0; i--){
    const index = Math.floor(Math.random() * i);
    const tmp = array[index];
    array[index] = array[i];
    array[i] = tmp;
  }
}

<div id="answer1">1</div>
<div id="answer2">2</div>
<div id="answer3">3</div>
<div id="answer4">4</div>

Answer 3

Javascript массивы имеют метод с именем sort (), который сортирует все ответы, заданные указанной функцией, отрицательное число отправляет элемент обратно в массив, а положительное число отправляет его вперед, поэтому что вы можете сделать быструю функцию для случайной сортировки массива следующим образом:

function sortArrayRandomly(array) {
  return array.concat().sort(() => 0.5 - Math.random());
}

эта функция будет сортировать ваш массив в случайном порядке, затем вы можете использовать его в своем коде следующим образом:

function useApiData(data){
  let answers = sortArrayRandomly([data.results[0].correct_answer, data.results[0].incorrect_answers[0], data.results[0].incorrect_answers[1], data.results[0].incorrect_answers[2]]);

  document.querySelector("#category").innerHTML = `Category: ${data.results[0].category}`
  document.querySelector("#difficulty").innerHTML = `Difficulty: ${data.results[0].difficulty}`
  document.querySelector("#question").innerHTML = `Question: ${data.results[0].question}`
  document.querySelector("#answer1").innerHTML = `${answers[0]}`
  document.querySelector("#answer2").innerHTML = `${answers[1]}`
  document.querySelector("#answer3").innerHTML = `${answers[2]}`
  document.querySelector("#answer4").innerHTML = `${answers[3]}`
}