I want to tick checkbox after 2 seconds but only when those checkboxes are active in carousel

Question

<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

score 0 · Accepted Answer · answered Nov 18 '20 at 08:09

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>

I want to tick checkbox after 2 seconds but only when those checkboxes are active in carousel

1 Answers1