```
var questlist=[];
while (questlist.length<3){
var nextnumb=Math.floor(Math.random()*3)+1;
var check=questlist.includes(nextnumb);
if (check==false){
questlist.push(nextnumb);
}
}
console.log(questlist);
var i=0;
$(".start").click(function(){
$(".q"+questlist[i]).removeClass("hide");
$(".start").addClass("hide");
});
$(".next").click(function(){
$("body").removeAttr("class");
$(".q"+questlist[i]).addClass("hide");
i++;
$(".q"+questlist[i]).removeClass("hide");
$(".next").addClass("hide");
console.log(questlist[i]);
});
$(document).on("click",".submit", answer);
function answer() {
if ($(".true").is(":checked")){
$("body").attr("class","true");
$(".next").removeClass("hide");
}else if ($(".false").is(":checked")){
$("body").attr("class","false");
}else{
alert("chose the answer");
}
}
``````
.true{
background-color: lightgreen;
}
.false{
background-color: red;
}
.hide{
display: none;
}
``````
<body>
<button type="button" class="start" name="btn-start">Start</button>
<div class="container">
<div class="question q1 hide">2+2
<div class="answer an1">
<input type="radio" name="q1" class="ans false">1
<input type="radio" name="q1" class="ans true">4
<input type="radio" name="q1" class="ans false">3
<input type="radio" name="q1" class="ans false">2<br>
<button type="submit" name="Submit" class="submit">Submit</button>
<button type="button" class="next hide" name="next">Next</button>
</div>
</div>
<div class="question q2 hide">2+3
<div class="answer an2">
<input type="radio" name="q2" class="ans false">1
<input type="radio" name="q2" class="ans false">4
<input type="radio" name="q2" class="ans true">5
<input type="radio" name="q2" class="ans false">2<br>
<button type="submit" name="Submit" class="submit">Submit</button>
<button type="button" class="next hide" name="next">Next</button>
</div>
</div>
<div class="question q3 hide">2+4
<div class="answer an3">
<input type="radio" name="q3" class="ans true">6
<input type="radio" name="q3" class="ans false">4
<input type="radio" name="q3" class="ans false">3
<input type="radio" name="q3" class="ans false">2<br>
<button type="submit" name="Submit" class="submit">Submit</button>
<button type="button" class="next hide" name="next">Next</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="quiz.js"></script>
</body>
```In first number the answer function is normal, but when it comes to next question, if i select the wrong answer, after i chose true answer in the first number, the body still turn to green and next button still appear. And when i reload the html the radio button is still checked, why all of that happen?
The reason it happens is, that you are trying to get the class true, inside your if statement. jQuery will try to get the first element with the class true every time. therefore it will always check only the first element with the class true. One way to solve it is to detect the click event parent and find the child with the class true, and validate by this child.
function answer(e) {
let rightAnswer = $(e.target).parent().find('.true')
if (rightAnswer.is(":checked")){
$("body").attr("class","true");
$(".next").removeClass("hide");
}else if ($(".false").is(":checked")){
$("body").attr("class","false");
}else{
alert("chose the answer");
}
}