How do i keep a bootstrap carousel from going to the next slider until the a particular event on the previous slider occurs

Question

This is my html and javascript code.

<div id = "myCarousel" class = "carousel slide" data-interval="false">

   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
      <li data-target = "#myCarousel" data-slide-to = "3"></li>
      <li data-target = "#myCarousel" data-slide-to = "4"></li>
      <li data-target = "#myCarousel" data-slide-to = "5"></li>
      <li data-target = "#myCarousel" data-slide-to = "6"></li>
      <li data-target = "#myCarousel" data-slide-to = "7"></li>
      <li data-target = "#myCarousel" data-slide-to = "8"></li>
      <li data-target = "#myCarousel" data-slide-to = "9"></li>
      <li data-target = "#myCarousel" data-slide-to = "10"></li>
      <li data-target = "#myCarousel" data-slide-to = "11"></li>
      <li data-target = "#myCarousel" data-slide-to = "12"></li>
      <li data-target = "#myCarousel" data-slide-to = "13"></li>
      <li data-target = "#myCarousel" data-slide-to = "14"></li>
      <li data-target = "#myCarousel" data-slide-to = "15"></li>
      <li data-target = "#myCarousel" data-slide-to = "16"></li>
      <li data-target = "#myCarousel" data-slide-to = "17"></li>
      <li data-target = "#myCarousel" data-slide-to = "18"></li>
      <li data-target = "#myCarousel" data-slide-to = "19"></li>
      <li data-target = "#myCarousel" data-slide-to = "20"></li>


   </ol>  


   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide1.JPG" alt = "slide">
      </div>
      <div class = "item">
          <img src = "includes/modules/sliders/Business_planning_for_success/Slide2.JPG" alt = "slide">
      </div>
      <div class = "item">
          <img src = "includes/modules/sliders/Business_planning_for_success/Slide3.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide4.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide5.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide6.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide7.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide8.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide9.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide10.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide11.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide12.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide13.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide14.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide15.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide16.JPG" alt = "slide">
      </div>
      <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide17.JPG" alt = "slide">
      </div>
     <!--  <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide18.JPG" alt = "slide">
      </div> -->

      <!-- <div class = "item">
         <img src = "includes/modules/sliders/Business_planning_for_success/Slide20.JPG" alt = "slide">
      </div> -->
     the "questions" slider starts here
       <div class = "item">

               <img src="../../images/top.jpg">
                <div class="col-sm-4" style="color:black;">
                                   <div class="">
                                       <div><img src="../../images/Slide18.png" width="300" height="150"></div>
                                   </div>
                                   <strong>Scenario</strong>
                                   <div style="color: #990000;">
                                       <div><p>Siphelele's Sweets produces and sells fudge bars in Alexandra, Johannesburg.</p>
                                       <ul>
                                         <li>Each fudge bar is sold at R15</li>
                                         <li>Her variable costs per fudge bar amount to R5</li>
                                         <li>Siphelele's Sweets expects fixed costs of R30 000 for the year ending 31 Dec, 2016</li>
                                       </ul>
                                       </div>
                                   </div>

                               </div>

               <div class="col-sm-4">
               <table width="734" style="margin-left:10px color:black;">
               <form name="test1" action="" >

                <tr><td height="30" width="578"><label>Questions</label></td></tr>


               <div>
               <tr><td height="30" width="578"><label>a.How many bars does Siphelele have to sell to break even?

               </label>
               <ul class="nostyle">
                <li><input name="q2" type="radio" value="2000" /> <label>2000</label></li>
               <li><input name="q2" type="radio" value="3000" /> <label>3000</label></li>
               <li><input name="q2" type="radio" value="1500" /> <label>1500</label></li>
               <li><input name="q2" type="radio" value="250" /> <label>250</label></li>
               </ul>
               </td></tr>
               </div>
               <div>
               <tr><td height="30" width="578"><label>b.What is the break even point in sales given your first answer?


               </label>
               <ul class="nostyle">
                <li><input name="q3" type="radio" value="30000" /> <label>30000</label></li>
               <li><input name="q3" type="radio" value="3750" /> <label>3750</label></li>
               <li><input name="q3" type="radio" value="45000" /> <label>45000</label></li>
               <li><input name="q3" type="radio" value="22500" /> <label>22500</label></li>
               </ul>
               </td></tr>
               </div>
               <a  class="btn" href="javascript:submitForm();">Check</a>
               </form>

               </table>
               </div>
               <img src="../../images/down.jpg">

      </div>

the next slider should not load untill the questions are correctly answered

<script language="JavaScript">
  function submitForm()
  { 
       if ((document.test1.q2[0].checked == false)&&(document.test1.q2.value == "")){
       alert ("Please answer question a");
       return;
       }

     if (( document.test1.q2.value != "3000")){
       alert ("Oops incorrect answer , please try question a again");
       return;
       }

     if ((document.test1.q3[0].checked == false)&&(document.test1.q3.value == "")){
       alert ("Please answer question b");
       return;
       }

     if ((document.test1.q3.value != "45000")){
       alert ("Oops incorrect answer , please try question b again");
       return;
       }

       else{    

             $("#myCarousel").carousel('next');


     }

  }
 </script>



   </div>

   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>

   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <input type = "button" class = "btn-sm prev-slide" onclick="slide()" value = "Previous Slide">
      <input type = "button" class = "btn-sm next-slide" onclick="slide()" value = "Next Slide">

      <script type="text/javascript">

      function correct_answer() {
            // Cycles to the next item
          $(".next-slide").click(function() {
             $("#myCarousel").carousel('next');
          });
      }

      function slide() {

      // Cycles to the previous item
      $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev');
      });

      // Cycles to the next item
      $(".next-slide").click(function() {
         $("#myCarousel").carousel('next');
      });

   };
</script>

is there a way i can surpress a slider from lodading untill a person answers the questions correctly?

Answer 1

First, disable the auto cycling of carousel:

$("#myCarousel").carousel("pause");

and when the user clicks on the prev next buttons, first validate if form is filled properly or not:

function isFormOk() {
   // your logic
}

// Cycles to the next item
$(".next-slide").click(function() {
   if (isFormOk()) {
       $("#myCarousel").carousel('next');
   }
});