 <div class="edu-breadcrumb-area">
   <div class="container">
          <div class="breadcrumb-inner">
              <div class="page-title">
                  <h1 class="title">Free Quiz</h1>
              </div>
              <ul class="edu-breadcrumb">
                  <li class="breadcrumb-item"><a href="<?php echo base_url(); ?>">Home</a></li>
                  <li class="separator"><i class="icon-angle-right"></i></li>
                  <li class="breadcrumb-item active" aria-current="page">Free Quiz</li>
              </ul>
          </div>
      </div>
      <ul class="shape-group">
          <li class="shape-1">
              <span></span>
          </li>
          <li class="shape-2 scene"><img data-depth="2" src="<?php echo front_css(); ?>images/about/shape-13.png" alt="shape"></li>
          <li class="shape-3 scene"><img data-depth="-2" src="<?php echo front_css(); ?>images/about/shape-15.png" alt="shape"></li>
          <li class="shape-4">
              <span></span>
          </li>
          <li class="shape-5 scene"><img data-depth="2" src="<?php echo front_css(); ?>images/about/shape-07.png" alt="shape"></li>
      </ul>
  </div>

  <div class="gap-bottom-equal edu-about-area about-style-2 mt-5">
      <div class="container edublink-animated-shape">
          <div class="row g-5 align-items-center">
              <div class="col-lg-7">
                  <div class="about-image-gallery">
                      <img class="main-img-1" src="<?php echo front_css(); ?>images/about/about-03.webp" alt="About Image">
                      <div class="author-box" data-parallax='{"x": 0, "y": -120}'>
                          <div class="inner">
                              <div class="thumb">
                                  <img src="<?php echo front_css(); ?>images/about/shape-03.png" alt="Shape Image">
                              </div>
                             
                          </div>
                      </div>
                      <div class="award-status bounce-slide">
                          <div class="inner">
                              <div class="icon">
                                  <i class="icon-30"></i>
                              </div>
                              <div class="content">
                                  <h6 class="title">20K+</h6>
                                  <span class="subtitle">Student Take Free Quiz</span>
                              </div>
                          </div>
                      </div>
                      <ul class="shape-group">
                          <li class="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                              <img data-depth="2" src="<?php echo front_css(); ?>images/about/shape-38.png" alt="Shape">
                          </li>
                          <li class="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                              <img data-depth="-2" src="<?php echo front_css(); ?>images/about/shape-37.png" alt="Shape">
                          </li>
                          <li class="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                              <img data-depth="1.8" src="<?php echo front_css(); ?>images/about/shape-04.png" alt="Shape">
                          </li>
                      </ul>
                  </div>
              </div>
              <div class="col-lg-5">
                  <div class="about-content">
                      <div class="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                          <h2 class="title">Instructions</h2>
                          <span class="shape-line"><i class="icon-19"></i></span>
                      </div>
                      <ul class="features-list" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                          <li>The Test is Starts when you click the "CONFIRM & START" Button</li>
                          <li>There are total 1 Paragraph
                          </li>
                          <li>When your exam starts, you will see END EXAM Button</li>
                          <li>If you want to leave before Exam End, click on END EXAM</li>
                          <li>Do not use BACK button of browser, use buttons on the applicaiton only</li>
                          <li>Click on "CONFIRM & START" when you are ready to begin</li>
                      </ul>
                      <div class="banner-btn sal-animate" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
                             <a href="#" class="edu-btn confirm">Confirm & Start<i class="icon-4"></i></a>
                         </div>
                  </div>
              </div>
          </div>
          <ul class="shape-group">
              <li class="shape-1 circle scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                  <span data-depth="-2.3"></span>
              </li>
          </ul>
      </div>
  </div>

<script type="text/javascript">
$(".confirm").click(function(){
     // alert("btn click");
   var url = "<?php echo base_url(); ?>quiz";
   var eid = $("#eid").val();
   var params =  'top=0, left=0';
   params += ', width='+screen.width+', height='+screen.height+',statusbar=no,toolbar=no,location=no,directories=no,menubar=no,resizable=no';
   params += ', scrollbars=no, status=no, fullscreen=yes,maximize=yes';
   window.open(url+"/<?php echo $auth_id; ?>","_blank",params);
   
});


</script>
<style type="text/css">
.red {
  font-size: 14px;
  color: red;
  font-family: Arial,ubuntu;
  font-weight: bold;
}
</style>