<link href="<?php echo base_url(); ?>assets/front/css/vendor/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- <link href="<?php echo front_css(); ?>css/style.css" rel="stylesheet" type="text/css"/> -->
<script src="<?php echo front_css(); ?>js/bootstrap.bundle.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<?php

 $this->db->limit(10);
 $this->db->order_by('rand()');
 $qall = $this->db->get('exam_questions')->result();

   ?>
<script type="text/javascript">
   function googleTranslateElementInit() {
     new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
   }
</script>
<div class="loader" style="display:none"></div>
   <div class="container" style="color:#666;font-weight:bold;">
      <div class="row background p-3">
         <input type=hidden name="dur" id="dur" value="60" >
         <input type=hidden id="examid" value="<?php echo $auth_id; ?>" >
         <!-- startime -->
         <input type=hidden name="starttime" id="start" >
         <!-- endtime -->
         <input type=hidden name="endtime" id="end" >
         <input type=hidden name="totq" id="totq" value="10">
         <table border="3" width="100%" cellpadding="6" cellspacing="4" class="">
            <tr>
               <td rowspan="2"><img width="100" src="<?php echo base_url(); ?><?php echo $app_setting->app_sticky_logo; ?>" alt="<?php echo $app_setting->app_name; ?>" title="" /></td>
               <td><span>Date :</span> <span class="regno"><?=date('d/m/Y')?> &nbsp;</span></td>
               <td><span>No of Questions :</span> <span class="regno">20</span></td>
               <td rowspan="2" width="15%" style="background: #ff660b;" class="text-center">
                  <div><i style="color:#fff" class="fa fa-clock-o" aria-hidden="true"></i></div>
                  <span style="color:#fff" id="count" > 00:00:00</span>
               </td>
            </tr>
            <tr>
               <td><span>Duration :</span> <span class="regno">60 min </span></td>
               <td>
                  <div id="google_translate_element"></div>
               </td>
            </tr>
         </table>
      </div>
   </div>
<!-- End header -->
   <div class="container mt-3">
      <div class="row">
         <div class="col-md-8 col-lg-8 col-sm-8 home_about_txt " 
            style="border-right:1px solid #ddd;">
            <div class="col-md-12" style="height:360px;overflow:auto;">
               <?php 
                  $i=1; 
                  
                  $hideQuestion='';
                  
                  foreach($qall as $k) {
                      if($i != 1){
                          $hideQuestion='display:none';
                      }
                      ?>
               <div class="row background question<?=$i?>" style="<?=$hideQuestion?>">
                  <div class="col-md-12 mt-3" style="font-family:arial;border-right:1px solid #ddd;height:500px;overflow:auto;">
                     <div class="loading">
                        
                        <h6 class="" ><b style="background: #218838;color:#fff;padding: 5px;padding-top: 15px;">Q <?=$i?></b></h6>
                        <p class="mt-4" style="color:#000;font-weight: 700" id="questionbody<?=$k->q_id;?>">
                           <?=$k->q_question;?>
                        </p>
                        <br>
                        <div class="form-group group-data">
                           <input type="radio"  name="ans<?=$i?>" class="<?=$k->q_id;?>" value="a"> 
                           <label class="control-label" > <span class="ans">A</span> <?=trim($k->q_ans_a);?> </label>
                        </div>
                        <div class="form-group group-data">
                           <input type="radio"  name="ans<?=$i?>" class="<?=$k->q_id;?>" value="b"> 
                           <label class="control-label" > <span class="ans">B</span> <?=trim($k->q_ans_b);?></label>
                        </div>
                        <?php 
                           if(!empty($k->q_ans_c) && !empty($k->q_ans_d)){
                               ?>
                        <div class="form-group group-data">
                           <input type="radio" name="ans<?=$i?>" class="<?=$k->q_id;?>" value="c"> 
                           <label class="control-label"  > <span class="ans">C</span> <?=trim($k->q_ans_c);?> </label>
                        </div>
                        <div class="form-group group-data">
                           <input type="radio" name="ans<?=$i?>" class="<?=$k->q_id;?>" value="d"> 
                           <label class="control-label">  <span class="ans">D</span> <?=trim($k->q_ans_d);?></label>
                        </div>
                        <?php
                           }
                           ?>
                     </div>
                  </div>
               </div>
               <?php //} ?>
               <?php $i++;  } ?>
            </div>
            <script type="text/javascript">
               $('input:radio').click(function() { 
                 var name_d = $(this).attr('name'); 
                 qw = $('input[type=radio][name='+name_d+']').attr('class'); 
                 $("#q"+qw).removeClass('btn-inverse');
                   $("#q"+qw).removeClass('btn-danger');
                   $("#q"+qw).addClass('btn-success');
               }); 
            </script>
            <div class="col-md-12 background mt-3 p-3">
               <!-- org qno: -->
               <input type="hidden" name="currentQuestion" id="currentQuestion"/>
               <!-- sno -->
               <input type="hidden" name="currentQuestionno" id="currentQuestionno"/>
               <button class="btn btn-info" style="background: #ff660b;border-color: #ff660b;" id="prev">Previous</button>
               <button class="btn btn-success" id="next">Next</button>
               <button class="btn btn-danger pull-right" id="endexam">End Exam</button>
            </div>

         </div>
         <div class="col-md-4 col-lg-4 col-sm-4 home_about_txt" style="border-right:1px solid #ddd;">
            <div style="background: #ccf;">
               <div class="p-4" style="height:340px;overflow:auto;">
                  <h5 style="color: #000;">Question Pellette</h5>
                  <hr style="color: #fff;" />
                  <?php 
                     $j=1;
                      foreach($qall as $q){
                     ?>
                  <button class="btn btn-inverse question-btn"   id="q<?=$q->q_id; ?>" style="width:15%;;font-size:1em;align:center; margin: 7px;"><?=$j?></button>
                  <?php  
                     $j++; 
                     }
                     ?>
               </div>

               <div class="p-4">
                  <hr>
                  <button class="btn btn-dark btn-rounded btn-sm"></button> <small class="text-muted">Not visited</small>
                  <button class="btn btn-success btn-rounded btn-sm"></button> <small class="text-muted">Answered</small>
                  <button class="btn btn-danger btn-rounded btn-sm"></button> <small class="text-muted">Unanswered</small>
               </div>
            </div>
         </div>
      </div>
   </div>
<script type="text/javascript">
   var baseurl = "<?php echo base_url(); ?>";
</script>
<script src="<?php echo front_css(); ?>js/exam.js"></script> 
<style type="text/css">
body
{
   background-color: #f1f2f7;
}
.background
{
   background-color: #fff;
   border: 1px solid #d4d4d4;
}
.question_bg
{
   padding-top: 20px;
   padding-left: 40px;
}
.background-d
{
   background-color: #fff;
   border: 1px solid #d4d4d4;
}
.background-c
{
   background-color: #fff;
   border: 1px solid #d4d4d4;
   height: 100%;
}
.question-btn
{
   background-color: #000;
   color: #fff;
}
.btn-success {
  color: #fff!important;
  background-color: #218838!important;
  border-color: #1e7e34!important;
}
.btn-danger {
  color: #fff;
  background-color: #c82333!important;
  border-color: #bd2130!important;
}
#count
{
   font-size: 40px;
   font-weight: 700;
}
.fa
{
   font-size: 50px;
}
.group-data
{
   background-color: #dedede;
   padding: 7px;
   padding-left: 20px;
   padding-top: 12px;
}
.ans {
  background-color: #ff660b;
  padding: 5px;
  margin-right: 10px;
  margin-left: 10px;
  border: 2px solid #ff660b;
  color: #fff;
}
.form-group {
  margin-bottom: .5rem;
}
.loader{
  position: fixed;
  background: 50% 50% no-repeat rgb(0,0,0, 0.37);
  width: 100%;
  height: 100%;
  z-index: 9999;
}
@keyframes spinner {
  to {transform: rotate(360deg);}
}
.loader:before {
  content: '';
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 4px solid #fff;
  border-top-color: #333;
  z-index: 9999;
  animation: spinner .6s linear infinite;
}
.goog-te-banner-frame
{
   display: none;
}
#google_translate_element span
{
   display: none!important;
}
#google_translate_element  .goog-te-gadget
{
   color: #fff!important;
}
#google_translate_element .goog-te-gadget select
{
   padding: 10px;
}
</style>