我知道标题有点奇怪，但我不知道该怎么表达。我正在做的多项选择测试有一个重试按钮，如果你回答错误，如果你回答正确，则有一个下一步按钮，但后来我意识到，如果你回答错误，你实际上可以看到正确答案按钮以绿色和下次您回答时只需单击该按钮即可。所以我只希望背景和选定的按钮变成红色，如果你点击错误的按钮，其他按钮应该保持蓝色......我该怎么做？如果您回答正确，那么它可能会以现在的方式显示。如果这些都没有意义，那么请查看代码片段，我很确定它会解决问题。编辑：我更新了之前忘记更改的代码段中正确和错误的内容<!DOCTYPE html><html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script defer src="script.js"></script> <title>Quiz App</title> </head> <body> </div> <div class="container"> <div id="question-container" class="hide"> <div id="question">Question</div> <div id="answer-buttons" class="btn-grid"> <button class="btn">Answer 1</button> <button class="btn">Answer 2</button> <button class="btn">Answer 3</button> <button class="btn">Answer 4</button> </div> </div> <div class="container1"> <div id="startmsgcontainer" class="hide"></div> <div id="startmsg">Adventure Into The Human Immune System</div> </div> <div class="controls"> <button id="start-btn" class="start-btn btn">Start!</button> <button id="next-btn" class="next-btn btn hide">Next</button> <button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button> <button id="try-btn" class="try-btn btn hide">Try again!</button> </div> </div> <div class="wrapper"> <img src="img/uni.png" alt="image"> </div> <div class="hide"> <div id="imgcontainer">hello</div> <div id="image1" class="hide"> <img src="img/wantedvirus.png" alt="image1"> </div> </div> </div> <div id="particles-js"></div> <script src="particles.js"></script> <script src="app.js"></script> </body> </html>
1 回答
繁花如伊
TA贡献2012条经验 获得超12个赞
不要setStatusClass()在所有按钮上调用，只需在selectedButton.
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const image1 = document.getElementById('image1')
const answerButtonsElement = document.getElementById('answer-buttons')
const startwords = document.getElementById('startmsg')
const endbutton = document.getElementById('end-btn')
const trybutton = document.getElementById('try-btn')
const score = document.getElementById('score')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
endbutton.addEventListener('click', () => {
window.top.close()
})
trybutton.addEventListener('click', setNextQuestion)
function startGame() {
startButton.classList.add('hide')
startwords.classList.add('hide')
shuffledQuestions = questions.slice()
questionContainerElement.classList.remove('hide')
currentQuestionIndex = 0
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)
}
trybutton.classList.add('hide')
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
setStatusClass(selectedButton, correct);
if(correct){
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
endbutton.classList.remove('hide')
}
} else{
trybutton.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 1+2?',
answers: [
{ text: '3', correct: true },
{ text: '4', correct: false },
{ text: '5', correct: false },
{ text: '6', correct: false }
]
},
{
question: 'What is 2-2?',
answers: [
{ text: '0', correct: true },
{ text: '4', correct: false },
{ text: '5', correct: false },
{ text: '7', correct: false },
]
},
]
*, *::before, *::after {
box-sizing: border-box;
font-family: cursive,
'Times New Roman', Times, serif
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: 0;
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
z-index: 2;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
align-items: flex-end;
--hue: 245;
}
.start-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.end-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.try-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.container1 {
display: flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: xx-large;
padding: 10px 10px;
}
.container2 {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
top:37%;
position:absolute;
display: flex;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
.wrapper {
position: absolute;
top: 0px;
right: 0px;
}
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
<title>Quiz App</title>
</head>
<body>
</div>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="container1">
<div id="startmsgcontainer" class="hide"></div>
<div id="startmsg">Adventure Into The Human Immune System</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start!</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
<button id="try-btn" class="try-btn btn hide">Try again!</button>
</div>
</div>
<div class="wrapper">
<img src="img/uni.png" alt="image">
</div>
<div class="hide">
<div id="imgcontainer">hello</div>
<div id="image1" class="hide">
<img src="img/wantedvirus.png" alt="image1">
</div>
</div>
</div>
<div id="particles-js"></div>
<script src="particles.js"></script>
<script src="app.js"></script>
</body>
</html>
添加回答
举报
0/150
提交
取消