我如何将琐事测验的答案随机放置在按钮槽中

Question

因此，我正在使用琐事游戏API来为我正在编程的Web应用程序询问琐事问题。我已经想出如何将其随机化，但我不知道如何不使其重复选项。

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 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' ]);

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

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]}`
}