I am trying to highlight my selected answer.
I mean that all the answers I chose in each question will be highlighted in blue color. But as you can see in my code, when I select another answer in other question, the highlight of the previous question will be disappeared. How can I fix that?
Thanks so much
function openPresent(event) {
const answer = document.querySelectorAll(".option");
for (let i = 0; i < answer.length; i ) {
answer[i].style.backgroundColor = originalAnswerArray[i];
}
const input = event.currentTarget.querySelector("input")
input.checked = true;
event.currentTarget.style.backgroundColor = "blue";
}
const answer = document.querySelectorAll(".option");
let i;
let originalAnswerArray = [];
for (i = 0; i < answer.length; i ) {
originalAnswerArray.push(answer[i].getAttribute("name"));
answer[i].addEventListener("click", openPresent);
}#attempt-quiz,
#review-quiz {
width: 700px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
#attempt-quiz p,
#review-quiz p {
margin: 30px 0 30px 0;
}
form {
cursor: pointer;
width: 700px;
margin: 30px 0 30px 0;
}
.option,
.review-answer {
border-top: 1px solid white;
border-bottom: 1px solid white;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
width: auto;
padding: 15px;
background-color: #f1f1f1;
position: relative;
}
.option:hover {
background-color: #ddd;
}
label {
margin-left: 15px;
}<section id="attempt-quiz">
<div id="quiz" class="hidden">
<p><strong> Question 1 of 10</strong></p>
<p>Question 1</p>
<form name="ques01">
<div class="option">
<input type="radio" name="question1" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question1" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question1" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question1" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 2 of 10</strong></p>
<p>Question 2</p>
<form name='ques02'>
<div class="option">
<input type="radio" name="question2" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question2" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question2" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question2" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 3 of 10</strong></p>
<p>Question 3</p>
<form name="ques03">
<div class="option">
<input type="radio" name="question3" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question3" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question3" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question3" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 4 of 10</strong></p>
<p>Question 4</p>
<form name="ques04">
<div class="option">
<input type="radio" name="question4" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question4" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question4" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question4" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 5 of 10</strong></p>
<p>Question 5</p>
<form name="ques05">
<div class="option">
<input type="radio" name="question5" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question5" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question5" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question5" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 6 of 10</strong></p>
<p>Question 6</p>
<form name="ques06">
<div class="option">
<input type="radio" name="question6" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question6" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question6" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question6" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 7 of 10</strong></p>
<p>Question 7
</p>
<form name="ques07">
<div class="option">
<input type="radio" name="question7" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question7" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question7" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question7" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 8 of 10</strong></p>
<p>Question 8</p>
<form name="ques08">
<div class="option">
<input type="radio" name="question8" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question8" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question8" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question8" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 9 of 10</strong></p>
<p>Question 9</p>
<form name="ques09">
<div class="option">
<input type="radio" name="question9" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question9" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question9" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question9" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 10 of 10</strong></p>
<p>Question 10</p>
<form name="ques10">
<div class="option">
<input type="radio" name="question10" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question10" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question10" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question10" value="option 4">
<label>option 4</label><br>
</div>
</form>CodePudding user response：
You should use the "this" keyword. for more information. please see the link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
For more clarification, I have wrote a sample code:
function openPresent(event) {
const input = this.querySelector("input")
const name = input.getAttribute("name")
input.checked = true;
const otherAnswer = document.querySelectorAll(`[name="${name}"]`)
for (i = 0; i < otherAnswer.length; i ) {
otherAnswer[i].parentElement.style.backgroundColor = "#f1f1f1";
}
this.style.backgroundColor = "blue";
}
const answer = document.querySelectorAll(".option");
for (i = 0; i < answer.length; i ) {
answer[i].addEventListener("click", openPresent);
}#attempt-quiz,
#review-quiz {
width: 700px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
#attempt-quiz p,
#review-quiz p {
margin: 30px 0 30px 0;
}
form {
cursor: pointer;
width: 700px;
margin: 30px 0 30px 0;
}
.option,
.review-answer {
border-top: 1px solid white;
border-bottom: 1px solid white;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
width: auto;
padding: 15px;
background-color: #f1f1f1;
position: relative;
}
.option:hover {
background-color: #ddd;
}
label {
margin-left: 15px;
}<section id="attempt-quiz">
<div id="quiz" class="hidden">
<p><strong> Question 1 of 10</strong></p>
<p>Question 1</p>
<form name="ques01">
<div class="option">
<input type="radio" name="question1" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question1" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question1" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question1" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 2 of 10</strong></p>
<p>Question 2</p>
<form name='ques02'>
<div class="option">
<input type="radio" name="question2" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question2" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question2" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question2" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 3 of 10</strong></p>
<p>Question 3</p>
<form name="ques03">
<div class="option">
<input type="radio" name="question3" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question3" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question3" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question3" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 4 of 10</strong></p>
<p>Question 4</p>
<form name="ques04">
<div class="option">
<input type="radio" name="question4" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question4" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question4" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question4" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 5 of 10</strong></p>
<p>Question 5</p>
<form name="ques05">
<div class="option">
<input type="radio" name="question5" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question5" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question5" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question5" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 6 of 10</strong></p>
<p>Question 6</p>
<form name="ques06">
<div class="option">
<input type="radio" name="question6" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question6" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question6" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question6" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 7 of 10</strong></p>
<p>Question 7
</p>
<form name="ques07">
<div class="option">
<input type="radio" name="question7" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question7" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question7" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question7" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 8 of 10</strong></p>
<p>Question 8</p>
<form name="ques08">
<div class="option">
<input type="radio" name="question8" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question8" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question8" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question8" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 9 of 10</strong></p>
<p>Question 9</p>
<form name="ques09">
<div class="option">
<input type="radio" name="question9" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question9" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question9" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question9" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 10 of 10</strong></p>
<p>Question 10</p>
<form name="ques10">
<div class="option">
<input type="radio" name="question10" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question10" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question10" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question10" value="option 4">
<label>option 4</label><br>
</div>
</form>CodePudding user response：
It's a bit tricky but you can do it even with CSS only. I changed a bit the HTML structure but IT WORKS.
#attempt-quiz,
#review-quiz {
width: 700px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
#attempt-quiz p,
#review-quiz p {
margin: 30px 0 30px 0;
}
form {
cursor: pointer;
width: 700px;
margin: 30px 0 30px 0;
}
.option,
.review-answer {
border-top: 1px solid white;
border-bottom: 1px solid white;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
width: auto;
padding: 15px;
background-color: #f1f1f1;
position: relative;
}
.option:hover {
background-color: #ddd;
}
label {
margin-left: 15px;
}
/**/
.option {
position: relative;
padding: 0;
}
.option input[type="radio"] {
position: absolute;
left: 10px;
top: 15px;
}
.option label {
flex-grow: 1;
padding: 15px 40px;
margin: 0;
}
.option input[type="radio"]:checked label {
background: blue;
color: white;
}<section id="attempt-quiz">
<div id="quiz" class="hidden">
<p><strong> Question 1 of 10</strong></p>
<p>Question 1</p>
<form name="ques01">
<div class="option">
<input type="radio" id="q1o1" name="question1" value="option 1">
<label for="q1o1">option 1</label>
</div>
<div class="option">
<input type="radio" id="q1o2" name="question1" value="option 2">
<label for="q1o2">option 2</label>
</div>
<div class="option">
<input type="radio" id="q1o3" name="question1" value="option 3">
<label for="q1o3">option 3</label>
</div>
<div class="option">
<input type="radio" id="q1o4" name="question1" value="option 4">
<label for="q1o4">option 4</label>
</div>
</form>
<p><strong> Question 2 of 10</strong></p>
<p>Question 2</p>
<form name='ques02'>
<div class="option">
<input type="radio" id="q2o1" name="question2" value="option 1">
<label for="q2o1">option 1</label>
</div>
<div class="option">
<input type="radio" id="q2o2" name="question2" value="option 2">
<label for="q2o2">option 2</label>
</div>
<div class="option">
<input type="radio" id="q2o3" name="question2" value="option 3">
<label for="q2o3">option 3</label>
</div>
<div class="option">
<input type="radio" id="q2o4" name="question2" value="option 4">
<label for="q2o4">option 4</label>
</div>
</form>
</div>
</section>CodePudding user response：
You code problem is that it is selecting all .option instead from the selected question due to which only one of the all checked option has background color.
Here I first created class="plzSelectMe" for the form and select the options from the clicked form(question) . And add a background-color to it
const answerForm = document.querySelectorAll(".plzSelectMe");
let j;
for (j = 0; j < answerForm.length; j ) {
answerForm[j].addEventListener("click", function() {
const answer = this.querySelectorAll(".option");
for (let i = 0; i < answer.length; i ) {
var radio = answer[i].querySelector("input")
if (radio.checked) {
answer[i].style.backgroundColor = "blue";
} else {
answer[i].style.backgroundColor = "";
}
}
})
}#attempt-quiz,
#review-quiz {
width: 700px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
#attempt-quiz p,
#review-quiz p {
margin: 30px 0 30px 0;
}
.plzSelectMe {
border: 2px solid red
}
form {
cursor: pointer;
width: 700px;
margin: 30px 0 30px 0;
}
.option,
.review-answer {
border-top: 1px solid white;
border-bottom: 1px solid white;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
width: auto;
padding: 15px;
background-color: #f1f1f1;
position: relative;
}
.option:hover {
background-color: #ddd;
}
label {
margin-left: 15px;
}<section id="attempt-quiz">
<div id="quiz" class="hidden">
<p><strong> Question 1 of 10</strong></p>
<p>Question 1</p>
<form name="ques01" class="plzSelectMe">
<div class="option">
<input type="radio" name="question1" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question1" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question1" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question1" value="option 4">
<label>option 4</label><br>
</div>
</form>
<p><strong> Question 2 of 10</strong></p>
<p>Question 2</p>
<form name='ques02' class="plzSelectMe">
<div class="option">
<input type="radio" name="question2" value="option 1">
<label><div >option 1 </div></label><br>
</div>
<div class="option">
<input type="radio" name="question2" value="option 2">
<label>option 2</label><br>
</div>
<div class="option">
<input type="radio" name="question2" value="option 3">
<label>option 3</label><br>
</div>
<div class="option">
<input type="radio" name="question2" value="option 4">
<label>option 4</label><br>
</div>
</form>
</div>
</section>