Javascript 以随机顺序显示多项选择题的答案

我需要帮助让答案以随机顺序出现在这个选择题测验中。目前，问题是随机选择的，但答案总是在同一地点。我试着遵循同样的逻辑，将一个对象的问题随机化，但当我将其应用于答案时，它不起作用

const startButton=document.getElementById（'start-btn'））
const restartButton=document.getElementById（'restart-btn'）
const nextButton=document.getElementById（'next-btn'）
const resultsButton=document.getElementById（'results-btn'）
const questionContainerElement=document.getElementById（'question-container'）
const questionElement=document.getElementById（'question'）
让answerButtonsElement=document.getElementById（'answer-buttons'））
让imageElement=document.getElementById（'image'）；
让resultElement=document.getElementById（'results'）；
让text=document.getElementById（'text'）；
const bannerelation=document.getElementById（'banner'）；
const titleElement=document.getElementById（'title'）；
让随机提问、currentQuestionIndex、随机回答；
得分；
startButton.addEventListener（'click'，StartName）
restartButton.addEventListener（'click'，StartName）
nextButton.addEventListener（'单击'，（）=>{
currentQuestionIndex++；
setNextQuestion（）；
text.classList.add（'hide'）；
})
resultsButton.addEventListener（'单击'，显示结果）
函数startName（）{
startButton.classList.add（'hide'））
shuffledQuestions=questions.sort（（）=>Math.random（）-.5）
currentQuestionIndex=0；
questionContainerElement.classList.remove（'hide'）
setNextQuestion（）；
resultElement.classList.add（'hide'）；
restartButton.classList.add（'hide'）
得分=0；
text.classList.add（'hide'）；
answerButtonsElement.classList.remove（'hide'）；
imageElement.classList.remove（'hide'）；
bannerelation.classList.add（'hide'）；
titleElement.classList.add（'hide'）；
questionElement.classList.remove（'hide'）
}
函数setNextQuestion（）{
重置状态（）
showQuestion（shuffledQuestions[currentQuestionIndex]）；
}
函数显示问题（问题）{
imageElement.src=question.img；
questionElement.innerText=question.question；
问题.答案.forEach（答案=>{
const button=document.createElement（'button'）；
setAttribute（'class'，'choice'）；
button.innerText=answer.text；
按钮。类列表。添加（'col-6'）；
如果（回答正确）{
button.dataset.correct=answer.correct；
} 
按钮。addEventListener（'mousedown'，selectAnswer）；
按钮。addEventListener（'mouseup'，disableButtons）；
AnswerButtonElement.appendChild（按钮）
})
}
函数resetState（）{
clearStatusClass（文档主体）；
nextButton.classList.add（'hide'）；
while（回答ButtonSelement.第一个孩子）{
AnswerButtonSelection.removeChild（AnswerButtonSelection.firstChild）
}
}
功能选择应答（e）{
const selectedButton=e.target；
const correct=selectedButton.dataset.correct；
text.classList.remove（'hide'）；
setStatusClass（document.body，正确）；
Array.from（answerbuttonselection.children）.forEach（button=>{
setStatusClass（按钮，按钮。数据集。正确）
})
如果（shuffledQuestions.length>currentQuestionIndex+1）{
nextButton.classList.remove（'hide'）
}否则{
resultsButton.classList.remove（'hide'）
}
如果（正确）{
得分+=33.3分；
text.innerHTML='这是正确的！'；
selectedButton.style.backgroundColor='绿色'；
}否则{
text.innerHTML='这是不正确的'；
selectedButton.style.backgroundColor='红色'；
}
}
功能禁用按钮（）{
answerButtonsElement.disabled=真；
}
功能设置StatusClass（元件，正确）{
clearStatusClass（元素）
/*如果（正确）{
element.classList.add（'correct'）
}否则{
element.classList.add（'错误'）
}*/
}
函数clearStatusClass（元素）{
element.classList.remove（'correct'）
element.classList.remove（'错误'）
}
函数showResults（）{
questionContainerElement.classList.add（'hide'）；
resultElement.classList.remove（'hide'）；
resultElement.innerHTML=`您的最终分数是${score}%！`；
resultsButton.classList.add（'hide'）；
restartButton.classList.remove（'hide'）；
questionElement.classList.add（'hide'）；
answerButtonsElement.classList.add（'hide'）；
text.classList.add（'hide'）；
}
常量问题=[
{
问题：“什么是2+2？”，
答复:[
{text:'5'，correct:false}，
{text:'9'，correct:false}，
{text:'4'，correct:true}，
{text:'3'，correct:false}
],
img:'https://upload.wikimedia.org/wikipedia/commons/a/a3/2plus2_logo.jpg'
}, 
{
问：“我们的太阳系有多少颗行星？”，
答复:[
{text:'4'，correct:false}，
{text:'8'，correct:false}，
{text:'5'，correct:false}，
{文本：“9”，正确：true}
],
img:'https://static.techspot.com/images2/news/bigimage/2019/11/2019-11-21-image-6.png'
},
{
问题：“一小时有多少秒？”，
答复:[
{text:'60'，correct:true}，
{text:'30'，correct:false}，
{text:'90'，correct:false}，
{text:'24'，correct:false}
],
img:'https://ak9.picdn.net/shutterstock/videos/27923419/thumb/7.jpg'
}
]

.container.card{
边界半径：5px；
盒影：0 10px 2px；
}
.接听按钮{
保证金：0自动；
对齐项目：居中；
字号：1rem；
显示器：flex；
证明内容：中心；
}
.col-6{
颜色：白色；
边框：1px实心hsl（变型（--色调），100%，30%）；
背景颜色：灰色；
边界半径：5px；
颜色：白色；
大纲：无；
利润率：2%；
光标：指针；
证明内容：中心；
最大宽度：30%；
高度：自动；
最小宽度：90px；
}
.btn:悬停{
边框颜色：红色！重要；
}
.btn.正确{
背景颜色：绿色；
颜色：白色；
}
.错{
背景色：红色；
颜色：白色；
}
const startButton = document.getElementById('start-btn')
const restartButton = document.getElementById('restart-btn')
const nextButton = document.getElementById('next-btn')
const resultsButton = document.getElementById('results-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
let answerButtonsElement = document.getElementById('answer-buttons')
let imageElement = document.getElementById('image');
let resultsElement = document.getElementById('results');
let text = document.getElementById('text');
const bannerElement = document.getElementById('banner');
const titleElement = document.getElementById('title');

let shuffledQuestions, currentQuestionIndex, shuffledAnswers;
let score;

startButton.addEventListener('click', startGame)
restartButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
  currentQuestionIndex++;
  setNextQuestion();
  text.classList.add('hide');

})

resultsButton.addEventListener('click', showResults)


function startGame() {
  startButton.classList.add('hide')
  shuffledQuestions = questions.sort(() => Math.random() - .5)
  currentQuestionIndex = 0;
  questionContainerElement.classList.remove('hide')
  setNextQuestion();
  resultsElement.classList.add('hide');
  restartButton.classList.add('hide')
  score = 0;
  text.classList.add('hide');
  answerButtonsElement.classList.remove('hide');
  imageElement.classList.remove('hide');
  bannerElement.classList.add('hide');
  titleElement.classList.add('hide');
  questionElement.classList.remove('hide')
}

function setNextQuestion() {
  resetState()
  showQuestion(shuffledQuestions[currentQuestionIndex]);
}

function showQuestion(question) {
    imageElement.src = question.img;
      questionElement.innerText = question.question;
      question.answers.forEach(answer => {
    const button = document.createElement('button');
    button.setAttribute('class', 'choice');
    button.innerText = answer.text;
    button.classList.add('col-6');
    if (answer.correct) {
      button.dataset.correct = answer.correct;

    } 
    button.addEventListener('mousedown', selectAnswer);

    answerButtonsElement.appendChild(button)
  })

}

function resetState() {
  clearStatusClass(document.body);
  nextButton.classList.add('hide');
  while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
  }
  answerButtonsElement.disabled = false;
}



function selectAnswer(e) {
    if(!answerButtonsElement.disabled){
  const selectedButton = e.target;
  const correct = selectedButton.dataset.correct;
  text.classList.remove('hide');
  setStatusClass(document.body, correct);
  Array.from(answerButtonsElement.children).forEach(button => {
    setStatusClass(button, button.dataset.correct)
  })
  if (shuffledQuestions.length > currentQuestionIndex + 1) {
    nextButton.classList.remove('hide')
  } else {
    resultsButton.classList.remove('hide')  
  }
    if (correct) {
        score += 33.3;
        text.innerHTML = 'That is correct!';
        selectedButton.style.backgroundColor = 'green';

    } else {
        text.innerHTML = 'That is incorrect.';
        selectedButton.style.backgroundColor = 'red';

    }
    answerButtonsElement.disabled = true;
    }

}

function setStatusClass(element, correct) {
  clearStatusClass(element)
  /*if (correct) {
    element.classList.add('correct')
  } else {
    element.classList.add('wrong')
  }*/
}

function clearStatusClass(element) {
  element.classList.remove('correct')
  element.classList.remove('wrong')
}


function showResults() {
    questionContainerElement.classList.add('hide');
    resultsElement.classList.remove('hide');
    resultsElement.innerHTML = `Your final score was ${score}%!`;
    resultsButton.classList.add('hide');
    restartButton.classList.remove('hide');
    questionElement.classList.add('hide');
    answerButtonsElement.classList.add('hide');
    text.classList.add('hide');
}


const questions = [
  {
    question: 'What is 2 + 2?',
    answers: [
      { text: '5', correct: false },
      { text: '9', correct: false },
            { text: '4', correct: true },
      { text: '3', correct: false }

    ],
        img: 'https://upload.wikimedia.org/wikipedia/commons/a/a3/2plus2_logo.jpg'
  }, 
  {
    question: 'How many planets are in our solar system?',
    answers: [
      { text: '4', correct: false },
      { text: '8', correct: false },
      { text: '5', correct: false },
      { text: '9', correct: true }
    ],
        img: 'https://static.techspot.com/images2/news/bigimage/2019/11/2019-11-21-image-6.png'
  },
  {
    question: "How many seconds are in an hour?",
    answers: [
      { text: '60', correct: true },
      { text: '30', correct: false },
      { text: '90', correct: false },
      { text: '24', correct: false }
    ],
        img: 'https://ak9.picdn.net/shutterstock/videos/27923419/thumb/7.jpg'
  }
]

let getElem = document.getElementById("answer-buttons").querySelectorAll(".choice");
   for (let i = 0; i < getElem.length; i++) {
      getElem[i].style.pointerEvents = "none";
   }