Javascript 如何将随机多项选择代码的脚本代码转换为设置顺序?
我正在制作这个教育资源,供老师教授有关人类免疫系统的知识,我一直在思考如何更改代码,以便能够按照顺序显示问题,因为问题现在是随机的。还有另一个css网页格式代码,但那只是按钮样式和页面布局。代码如下:Javascript 如何将随机多项选择代码的脚本代码转换为设置顺序?,javascript,html,Javascript,Html,我正在制作这个教育资源,供老师教授有关人类免疫系统的知识,我一直在思考如何更改代码,以便能够按照顺序显示问题,因为问题现在是随机的。还有另一个css网页格式代码,但那只是按钮样式和页面布局。代码如下: const startButton = document.getElementById('start-btn') const nextButton = document.getElementById('next-btn') const questionContainerElement = docu
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
function startGame() {
startButton.classList.add('hide')
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove('hide')
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
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
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 {
startButton.innerText = 'Restart'
startButton.classList.remove('hide')
}
}
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')
}
const questions = [
{
question: 'What is 2 + 2?',
answers: [
{ text: '4', correct: true },
{ text: '22', correct: false }
},
{
question: 'What is 2 + 2?',
answers: [
{ text: '4', correct: true },
{ text: '22', correct: false }
]
},
]
改变
到
“如何更改此代码,以便有一个显示问题的顺序”请参见elaborate@StefanAvramovic现在如果我开始测验,问题不是按特定顺序给出的,而是随机的。我希望问题每次都以相同的顺序出现。我该怎么做?第一步:你知道上面代码的哪一部分是随机的吗?thx我会接受这个答案。。。只是在等计时器
shuffledQuestions = questions.sort(() => Math.random() - .5)
shuffledQuestions = questions.slice()