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

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/

我已经删除了鼠标按钮向上事件上的禁用按钮功能，在选择答案中设置了禁用的attr，并在重置状态下重置了禁用的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()访问所有子元素来实现它，然后使用"指针事件：无"禁用样式的所有按钮。此属性定义元素是否对指针事件做出反应。

我已经在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/

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