以随机顺序显示多项选择测验的答案

Question

我需要帮助让这个多项选择测验的答案随机出现。 目前，问题是随机选择的，但答案总是在同一个地方。 我试图遵循从一个对象中随机化问题的相同逻辑，但是当我将它应用于答案时它不起作用。

 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); button.addEventListener('mouseup', disableButtons); answerButtonsElement.appendChild(button) }) } function resetState() { clearStatusClass(document.body); nextButton.classList.add('hide'); while (answerButtonsElement.firstChild) { answerButtonsElement.removeChild(answerButtonsElement.firstChild) } } function selectAnswer(e) { 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'. } } function disableButtons() { 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' } ]

 .container.card { border-radius: 5px; box-shadow: 0 0 10px 2px; }.answer-buttons { margin: 0 auto; align-items: center; font-size: 1rem; display: flex; justify-content: center; }.col-6 { color: white; border: 1px solid hsl(var(--hue), 100%, 30%); background-color: grey; border-radius: 5px; color: white; outline: none; margin: 2%; cursor: pointer; justify-content: center; max-width: 30%; height: auto; min-width: 90px; }.btn:hover { border-color: red;important. }.btn:correct { background-color; green: color; white. }.btn:wrong { background-color; red: color; white. },start-btn. ,next-btn. ,results-btn. :restart-btn { font-size; 100%: font-weight; bold. }:controls { justify-content; right: align-items; right. }:hide { display; none: } #image { max-width; 40%: padding; 10px: box-shadow; 0 0 10px 2px: height; auto: margin; 5% auto 0 auto: border-radius; 6%: min-width; 350px: } #question { font-family, Arial, Helvetica; sans-serif: font-size. 1;2rem: margin; 2% auto -2% auto. }:col { margin; 0 auto. }:text { margin-top; 2%. }:results { text-align; center: margin; 3% auto: } #restart-btn { margin; 2% auto: } #banner { margin; 2% auto: max-width; 70%: height; auto, } #results-btn: #next-btn { } #title { font-size; 200%: } #footer { color, rgb(237, 29; 36); }

 <div class="container card text-center mx-auto"> <div id="question-container" class="row hide"> <div id="question" class="col">Question</div> </div> <div id="image-container" class="row text-center"> <img id ="image" class="text-center image hide"/> </div> <div class="row"> <p id="text" class="col text text-center"></p> </div> <div id="answer-buttons" class="row answer-buttons hide mx-2 mt-1"></div> <div id="results" class="results hide row"> <p class="col">Congratulations!</p> </div> <div class="controls row d-flex"> <button id="start-btn" class="start-btn btn col col-2 mb-5">Start</button> <button id="restart-btn" class="restart-btn btn hide col col-2" onclick="restartQuiz()">Restart Quiz</button> <button id="next-btn" class="next-btn btn hide col col-2 my-2">Next</button> <button id="results-btn" class="results-btn btn hide col col-2 my-2">Get Results!</button> </div> </div>

https://jsfiddle.net/Al_byte/szb5d1h6/

Answer 1

您不是在禁用按钮，而是在禁用包含按钮的 div。

按照代码的思路，您可以检查 div 是否被禁用并阻止选择元素的功能。

小提琴： https ://jsfiddle.net/toh0v6w9/1/

我已经删除了 mouseButton up 事件上的 disableButtons 函数，在 selectAnswer 中设置了 disabled attr 并在 resetState 中重置了 disabled attr

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

Answer 2

我可以通过使用 ID 访问父 div 并使用querySelectorAll()访问所有子元素，然后使用“pointer-events: none;”禁用所有按钮样式来实现它。此属性定义元素是否反应指针事件。

我在function selectAnswer(e)中添加了代码

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

有小提琴链接https://jsfiddle.net/Arpit09/yhf5sx2u/13/

让我知道这是否对您有帮助