I’m wondering how to adapt this further, when I don’t use All, it works for the first question. However, on the second question, the buttons don’t work. Using All for some reason doesn’t allow me to press the buttons at all. I do plan to add more questions to this.
I am very much a beginner at this as you can see.
document.addEventListener('DOMContentLoaded', function() {
let correct = document.querySelector('.correct');
correct.addEventListener('click', function(event) {
correct.style.backgroundColor = 'green';
document.querySelector('.feedback1').innerHTML = 'Correct!';
});
let incorrects = document.querySelectorAll('.incorrect');
for (let i = 0; i < incorrects.length; i++) {
incorrects[i].addEventListener('click', function(event) {
incorrects[i].style.backgroundColor = 'red';
document.querySelector('.feedback1').innerHTML = 'Incorrect';
});
}
});
.header {
padding: 50px;
text-align: center;
background: #20b2aa;
color: white;
font-size: 30px;
}
h1 {
padding-top: 20px;
font-size: 50px;
font-family: 'Marker Felt', fantasy;
text-align: center;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.section {
padding: 0.5rem 2rem 1rem 2rem;
}
.section:hover {
background-color: #f5f5f5;
transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}
.imgContainer {
text-align: center;
}
.imgButton {
padding: 20px;
text-align: center;
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- Body -->
<div class="header">
<h1>Flag Quiz</h1>
</div>
<div class="container">
<h2 style="padding-top: 20px;">Multiple Choice Quiz</h2>
<hr>
<div class="section">
<h3>What country is this?</h3>
<p style="font-size: 20px;">1.</p>
</div>
<div class="imgContainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Flag_of_Lithuania.svg/640px-Flag_of_Lithuania.svg.png" width="40%">
</div>
<div class="imgButton">
<button class="incorrect">Myanmar</button>
<button class="incorrect">Latvia</button>
<button class="correct">Lithuania</button>
<button class="incorrect">Italy</button>
<p class="feedback1"></p>
</div>
</div>
<div class="container">
<div class="section">
<h3>What country is this?</h3>
<p style="font-size: 20px;">2.</p>
</div>
<div class="imgContainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Bandera_de_Espa%C3%B1a.svg/1200px-Bandera_de_Espa%C3%B1a.svg.png" width="40%">
</div>
<div class="imgButton">
<button class="correct">Spain</button>
<button class="incorrect">Portugal</button>
<button class="incorrect">Mexico</button>
<button class="incorrect">China</button>
<p class="feedback1"></p>
</div>
</div>
I tried changing the correct answer checkers into the same format as the incorrect ones, however, that didn’t work.
3
Answers
Have you tried customizing the class names of the buttons belonging to the questions?
Since the Spanish buttons have the same class name, they are included in the Lithuanian question.
Since you do not apply styles ona button, you can simply use data-attributes. You also can select them in CSS with
[data-answer="correct"]
. Personally I would rename them instead of usingcorrect
andincorrect
and use a booleantrue
/false
.You also do not need to iterate over all the buttons but could simply use
target
to select the clicked element.I would choose event-delegation where …
one initially does register the reference of a single handler-function to each container-/parent-element which contains all of a distinct question’s answer-options/buttons …
one, within the mentioned handler-function, does query the element of the
closest
matching selector of the targeted answer-button.The handler then changes all of the related answer-buttons states, like rendering the correct feedback-text and setting certain button states like a button’s background-color and even a button element’s
disabled
state.Note
The presented implementation explicitly uses the OP’s
correct
/incorrect
class-names by additionally classifying a final answer asanswered
and providing two additional rules to it …