<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000">
<div class="carousel-inner">
<div class="item active" >
<h4>
<span class="answer"><%=questions[0].getText()%></span>
<div>
<br>
<% for(QuestionAnswer answer:questions[0].getQuestionAnswersSet())
{
%>
<input type="checkbox" class="answercheck <%= answer.getCorrect()==true? "checked":"unchecked" %>" />
<span class="answer"><%= answer.getText()%></span>
<br>
<%
}
%>
<br>
</div>
</h4>
</div>
<%
for(int i=1;i<questions.length;i++)
{
%>
<div class="item ">
<h4>
<span class="answer"><%=questions[i].getText()%></span>
<div>
<br>
<%
for(QuestionAnswer answer:questions[i].getQuestionAnswersSet())
{
%>
<input type="checkbox" class="answercheck <%= answer.getCorrect()==true? "checked":"unchecked" %>" />
<span class="answer"><%= answer.getText()%></span>
<br>
<%
}
%>
<br>
</div>
</h4>
</div>
<%
}
%>
</div>
</div>
<% } %>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
setTimeout(function(){ $(".checked" ).attr('checked', true)},2000);
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
I have used Jsp and Jquery. What is happening here is after 2 seconds, when the first question answers get clicked. The other question answers also ticked in a carousel which will come after 4 seconds as mentioned in data-interval
I want when the question display at that time only after 2 seconds my correct answer checkbox should get checked and it should apply to all the questions which are in the carousel item
You can use setInterval
this will get called every 2 sec
then inside this you just need to make the checkbox
checked true where class
is active(currently displaying slide) and remove checked
true from other checkboxes.
Demo Code:
$(document).ready(function()
{
$('#myCarousel').carousel()
setInterval(function() {
//remove checked
$("#myCarousel").find(".checked").attr('checked', false)
//add checked true to only active class
$("#myCarousel").find(".active .checked").attr('checked', true)
}, 2000);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000">
<div class="carousel-inner">
<div class="carousel-item active">
<h4>
<span class="answer">Somethings...</span>
<div>
<br>
<input type="checkbox" class="answercheck checked" />
<span class="answer">A</span>
<input type="checkbox" class="answercheck" />
<span class="answer">B</span>
<input type="checkbox" class="answercheck" />
<span class="answer">C</span>
<br>
<br>
</div>
</h4>
</div>
<div class="carousel-item">
<h4>
<span class="answer">Somethings... 2</span>
<div>
<br>
<input type="checkbox" class="answercheck" />
<span class="answer">A</span>
<input type="checkbox" class="answercheck" />
<span class="answer">B</span>
<input type="checkbox" class="answercheck checked" />
<span class="answer">C</span>
<br>
<br>
</div>
</h4>
</div>
<div class="carousel-item">
<h4>
<span class="answer">Somethings... 3</span>
<div>
<br>
<input type="checkbox" class="answercheck " />
<span class="answer">A</span>
<input type="checkbox" class="answercheck checked" />
<span class="answer">B</span>
<input type="checkbox" class="answercheck" />
<span class="answer">C</span>
<br>
<br>
</div>
</h4>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>