<?php session_start();
//unset($_SESSION['StartTime']);
require_once 'config.php';
$user_id = $_SESSION['User']['id'];
$PageName = "Start Test"; 
$testid = $_GET['testid'];
$deptid = $_GET['deptid'];
$courseid = $_GET['courseid'];
$sql = "SELECT * FROM tbl_result WHERE TestId='$testid' AND UserId='$user_id'";
$rncnt = getRow($sql);
if($rncnt > 0){
  echo "<script>alert('Already Given Test!');window.location.href='dashboard.php';</script>";
  exit();
}
$MainPage="Skill-Test";
$Page = "Skill-Test";
if(!isset($_SESSION['StartTime'])){
$CurrTime = date('H:i:s');
$_SESSION['StartTime'] = $CurrTime;
}
 ?>
<!doctype html>
<html lang="en" class="h-100">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="generator" content="">
   <title>Iways Skill India</title>

    <!-- manifest meta -->
    <meta name="apple-mobile-web-app-capable" content="yes">

  
    
     <link rel="stylesheet" href="testcss/css/pace.css">

    <script src="js/jquery-3.3.1.min.js"></script>

        <!-- <script type="text/javascript" src="https://demo.itest.inilabs.xyz/assets/slimScroll/jquery.slimscroll.min.js"></script> -->

        <script type="text/javascript" src="testcss/css/toastr.min.js"></script>


        <link href="testcss/css/bootstrap.min.css" rel="stylesheet">

        <link href="testcss/css/font-awesome.css" rel="stylesheet">

        <link href="testcss/css/icomoon.css" rel="stylesheet">

        <link href="testcss/css/ini-icon.css" rel="stylesheet">

        <link href="testcss/css/dataTables.bootstrap.css" rel="stylesheet">

        <link id="headStyleCSSLink" href="testcss/css/style.css" rel="stylesheet">

        <link href="testcss/css/hidetable.css" rel="stylesheet">

        <link id="headInilabsCSSLink" href="testcss/css//inilabs.css" rel="stylesheet">

        <link href="testcss/css/responsive.css" rel="stylesheet">

        <link href="testcss/css/toastr.min.css" rel="stylesheet">

        <link href="testcss/css/mailandmedia.css" rel="stylesheet">

        <link rel="stylesheet" href="testcss/css/buttons.dataTables.min.css" >

        <link rel="stylesheet" href="testcss/css/combined.css" >

        <link rel="stylesheet" href="testcss/css/checkbox.css">
<link rel="stylesheet" href="testcss/css/fuelux.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="apple-touch-icon" href="img/favicon180.png" sizes="180x180">
    <link rel="icon" href="img/favicon32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="img/favicon16.png" sizes="16x16" type="image/png">

    <!-- Material icons-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap" rel="stylesheet">

    <!-- swiper CSS -->
    <link href="vendor/swiper/css/swiper.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet" id="style">
 <script type="text/javascript">
          $(window).load(function() {
            $(".se-pre-con").fadeOut("slow");;
          });
        </script>
</head>

 <body class="skin-blue fuelux body-scroll d-flex flex-column h-100 menu-overlay" data-page="homepage" id="bodyid">
       <?php include_once 'test-sidebar.php'; ?>
       
       <?php 
$testid = $_GET['testid'];
$deptid = $_GET['deptid'];
$courseid = $_GET['courseid'];
$sql = "SELECT ts.*,td.Name As Department,tc.Name As Course FROM tbl_test_series ts 
         LEFT JOIN tbl_departments td ON ts.DeptId = td.id 
         LEFT JOIN tbl_courses tc ON ts.CourseId = tc.id WHERE ts.id='$testid'"; 
$row = getRecord($sql);
$DeptId = $row['DeptId'];
$CourseId = $row['CourseId'];
$TestDate = $row['StartDate'];
$TestName = $row['TestName'];
$EndTime = $row['Timing'];
$expiresec = $EndTime*60;

$StartDate = date('Y-m-d');
$EndDate = date('Y-m-d');
$StartTime = $_SESSION['StartTime'];
$StartTime = $StartDate . "" . $StartTime;
$time1 = strtotime($StartTime);

$EndTime = date("H:i:s",strtotime($StartTime." +".$EndTime." minutes"));
$EndTime = $EndDate . "" . $EndTime;
$time2 = strtotime($EndTime);

$Curr_time = date('Y-m-d H:i:s');
$currenttime = strtotime(date('Y-m-d H:i:s'));

$remaingtime = abs($time2 - $currenttime);
                
?>   
        <main class="flex-shrink-0 main has-footer" style="padding-bottom: 1px;">
        <!-- Fixed navbar -->
       <header class="header">
            <div class="row">
                <div class="col-auto px-0">
                    <button class="menu-btn btn btn-40 btn-link" type="button">
                        <span class="material-icons">menu</span>
                    </button>
                </div>
                <div class="text-left col align-self-center" style="padding-left: 0px;">
                    <a class="navbar-brand" href="#">
                        <h5 class="mb-0"><?php echo $TestName;?></h5>
                    </a>
                </div>
                  <div class="ml-auto col-auto pl-0" style="padding-right: 45px;">
                  <span class=" btn btn-40 btn-link" id="timer" class="timer" style="font-size: 20px;"></span>
                </div>
            </div>
        </header>
           <div class="wrapper row-offcanvas row-offcanvas-left">
    
        <aside class="right-side" style="margin-left: 1px;">
            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <style type="text/css">
    .fuelux .wizard .step-content {
        border: 0px;
    }
</style>

 

<input type="hidden" id="time1" value="<?php echo $time1; ?>">
<input type="hidden" id="time2" value="<?php echo $time2; ?>">
<input type="hidden" id="expiresec" value="<?php echo $expiresec;?>">
<input type="hidden" id="remaingsec" value="<?php echo $remaingtime;?>">

<div class="row">

      
    <div class="col-sm-7 fu-example section">

        <div class="box outheBoxShadow wizard" data-initialize="wizard" id="questionWizard">

            <div class="box-header bg-white">
                 <h2 style="color:red;text-align: center;display: none;" id="error_msg">Your Exam Time End! Please Submit Test...</h2>
            </div>

            <div class="steps-container">
                <ul class="steps hidden" style="margin-left: 0">
                    <?php 
$i = 1;
 $sql2 = "SELECT * FROM tbl_question_answer WHERE TestSeriesId='$testid' ORDER BY QueNo ASC";
 $rncnt2 = getRow($sql2);
$row2 = getList($sql2);
foreach($row2 as $result){
?>   
                                                <li data-step="<?php echo $i;?>" <?php if($i==1){?> class="active" <?php } else{?> class="" <?php } ?>></li>
                                                <?php $i++;} ?>
                                            
                                    </ul>
            </div>

            <form id="answerForm" action="save-test-result.php" method="POST" enctype="multipart/form-data" autocomplete="off">
                <input type="hidden" name="GroupId" id="GroupId" value="<?php echo $_GET['Type']; ?>">
                <input type="hidden" name="CatId" id="CatId" value="<?php echo $_GET['catid']; ?>">
                 <input type="hidden" name="DeptId" id="DeptId" value="<?php echo $_GET['deptid']; ?>">
                <input type="hidden" name="CourseId" id="CourseId" value="<?php echo $_GET['courseid']; ?>">
<input type="hidden" name="TotQues" id="TotQues" value="<?php echo $rncnt2; ?>">
 <input type="hidden" name="TestId" id="TestId" value="<?php echo $testid; ?>">
   <input type="hidden" name="TestDate" id="TestDate" value="<?php echo $TestDate; ?>">
   <input type="hidden" name="StudId" id="StudId" value="<?php echo $_SESSION['User']['id']; ?>">
   <input type="hidden" name="action" value="submit">
                <div class="box-body step-content showopts">
                    <input style="display:none" type="text" name="studentfinishstatus">
                  
                  <?php 
$i = 1;
$sql2 = "SELECT * FROM tbl_question_answer WHERE TestSeriesId='$testid' ORDER BY QueNo ASC";
$rncnt2 = getRow($sql2);
$row2 = getList($sql2);
foreach($row2 as $result){
?>                           
 <input type="hidden" name="id[<?php echo $result["id"]; ?>]" value="<?php echo $result["id"]; ?>">
    <input type="hidden" name="subid[<?php echo $result["id"]; ?>]" value="<?php echo $result["SubjectId"]; ?>">
    <input type="hidden" value="<?php echo $result["Answer"]; ?>" name="CorrectAns[<?php echo $result["id"]; ?>]"> 
                <div class="clearfix step-pane sample-pane " data-questionID="<?php echo $result["id"]; ?>" data-step="<?php echo $i;?>">
                   <div class="question-body">
                     <label class="lb-title">Question <?php echo $i;?> of <?php echo $rncnt2;?></label>
                    <label class="lb-content" style="font-size: 12px;"> <p><p><?php echo $result['Question']; ?></p></p><p><br></p></label>
                    <label class="lb-mark" style="font-size: 14px;"> 1 Mark </label>
                   </div>
                <div class="question-answer" id="step<?php echo $i;?>">
                    <table class="table">
                    <tr>
                        <td>
                        <input id="option1<?php echo $result["id"]; ?>" value="1" type="radio" name="Options[<?php echo $result["id"]; ?>]">
                        <label for="option1<?php echo $result["id"]; ?>">
                        <span class="fa-stack radio-button">
                        <i class="active fa fa-check"></i>
                        </span>
                        <span style="font-size: 12px;"><?php echo $result['Option1']; ?></span>
                         <input type="hidden" name="Option11[<?php echo $result["id"]; ?>]" value="<?php echo $result["Option1"]; ?>">
                    </td>
                    </tr>
                    <tr>
                    <td>
                    <input id="option2<?php echo $result["id"]; ?>" value="2" name="Options[<?php echo $result["id"]; ?>]" type="radio">
                    <label for="option2<?php echo $result["id"]; ?>">
                    <span class="fa-stack radio-button">
                    <i class="active fa fa-check"></i>
                    </span>
                    <span style="font-size: 12px;"><?php echo $result['Option2']; ?></span>
                    </td>
                     <input type="hidden" name="Option22[<?php echo $result["id"]; ?>]" value="<?php echo $result["Option2"]; ?>">
                </tr>
                <tr>
                    <td>
                    <input id="option3<?php echo $result["id"]; ?>" value="3" name="Options[<?php echo $result["id"]; ?>]" type="radio">
                    <label for="option3<?php echo $result["id"]; ?>">
                    <span class="fa-stack radio-button">
                    <i class="active fa fa-check"></i>
                    </span>
                   <span style="font-size: 12px;"><?php echo $result['Option3']; ?></span>
                    <input type="hidden" name="Option33[<?php echo $result["id"]; ?>]" value="<?php echo $result["Option3"]; ?>">
                </td>
                </tr>
                <tr>
                <td>
                <input id="option4<?php echo $result["id"]; ?>" value="4" name="Options[<?php echo $result["id"]; ?>]" type="radio">
               <label for="option4<?php echo $result["id"]; ?>">
              <span class="fa-stack radio-button">
               <i class="active fa fa-check"></i>
             </span>
             <span style="font-size: 12px;"><?php echo $result['Option4']; ?></span>
             <input type="hidden" name="Option44[<?php echo $result["id"]; ?>]" value="<?php echo $result["Option4"]; ?>"> 
            </td>
          </tr>
          <tr></tr>
                                    </table>
                                </div>
                            </div>
                            <?php $i++;} ?>
                                                        
                                                        
                                                        
                                            <div class="question-answer-button">
                    <button class="btn oe-btn-answered btn-prev" type="button" name="" id="prevbutton" disabled>
                        <i class="fa fa-angle-left"></i>  Prev               </button>
                    
                    <button class="btn oe-btn-answered btn-next" type="button" name="" id="nextbutton" data-last="Finish ">
                        Next  <i class="fa fa-angle-right"></i>
                    </button>
                    
                    <button class="btn oe-btn-notvisited" type="button" name="" id="reviewbutton">
                        Review                   </button>

                    

                 

                    <button class="btn oe-btn-notanswered btn-finish" type="button" name="" id="finishedbutton" onclick="finished()">
                        Finish                    </button>
                        
                        <button class="btn oe-btn-notvisited" type="button" name="" id="clearbutton" style="width: 35px;">
                        X              </button>

                </div>
            </div>
            </form>
        </div>
    </div>

    <div class="col-sm-2">
        <div class="row">
           
            <div class="col-sm-12">
                <div class="box outheBoxShadow">
                    <div class="box-body outheMargAndBox">
                       <!--  <div class="box-header bg-white">
                            <h3 class="box-title fontColor">
                                2nd Semester 3                                <br>
                            </h3>
                        </div> -->

    <div class="box-body margAndBox" style="">
  

                            <nav aria-label="Page navigation">
                              <!--   <h2>Summary</h2> -->
                                <ul class="examQuesBox text">
                                    <li style="line-height: 40px;"><a class="answered" id="summaryAnswered" href="#" style="line-height: 10px !important;width: 30px;height: 30px;">0</a>&nbsp; Answered</li>
                                    <li style="line-height: 40px;"><a class="marked" id="summaryMarked" href="#" style="line-height: 10px !important;width: 30px;height: 30px;">0</a> &nbsp;Marked</li>
                                    <li style="line-height: 40px;"><a class="notanswered" id="summaryNotAnswered" href="#" style="line-height: 10px !important;width: 30px;height: 30px;">0</a> &nbsp;Not Answered</li>
                                    <li style="line-height: 40px;"><a class="notvisited" id="summaryNotVisited" href="#" style="line-height: 10px !important;width: 30px;height: 30px;">0</a>&nbsp;Not Visited</li>
                                </ul>
                            </nav>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

    <!--<div class="footer">
        <div class="row no-gutters justify-content-center">
              <div class="question-answer-button">
                  <div class="row">
            <div class="col-auto" style="width: 65px;">
                <button class="btn oe-btn-answered btn-prev" type="button" name="" id="prevbutton" disabled>
                        <i class="fa fa-angle-left"></i>  Prev               </button>
            </div>
           
       
            <div class="col-auto" style="width: 65px;">
                <button class="btn oe-btn-answered btn-next" type="button" name="" id="nextbutton" data-last="Finish ">
                        Next  <i class="fa fa-angle-right"></i>
                    </button>
                    
            </div>
            
            <div class="col-auto" style="width: 72px;">
                <button class="btn oe-btn-notvisited" type="button" name="" id="reviewbutton">
                        Review                   </button>
            </div>
            
            <div class="col-auto" style="width: 65px;">
              <button class="btn oe-btn-notanswered btn-finish" type="button" name="" id="finishedbutton" onclick="finished()">
                        Finish                    </button>
                        
            </div>
            
             <div class="col-auto" style="width: 65px;">
                <button class="btn oe-btn-notvisited" type="button" name="" id="clearbutton" style="width: 35px;">
                        X              </button>

                        
            </div>
            </div>
</div>

            
            
        </div>
    </div>-->

<input type="hidden" id="PrevId">
<script type="text/javascript">
function clickQues(){
    $('#bodyid').removeClass('menu-open');
}
    $('#reviewbutton').on('click', function () {
        marked = 1;
        $('#questionWizard').wizard('next');
    });

    $('#clearbutton').on('click', function () {
        clearAnswer();
    });

    $('#questionWizard').on('actionclicked.fu.wizard', function (evt, data) {

        totalQuestions = parseInt(totalQuestions);
        var steps = 0;
        if(data.direction == "next") {
            steps = data.step+1;
        } else {
            steps = data.step-1;
        }
        //alert(steps);alert(totalQuestions);
        if(steps == totalQuestions) {
            $('#nextbutton').removeClass('oe-btn-answered');
            $('#nextbutton').addClass('oe-btn-notanswered');
            $('#nextbutton i').remove();
            $('#finishedbutton').hide();
        } else if(steps == totalQuestions+1) {
            finished();
        } else {
            $('#nextbutton').removeClass('oe-btn-notanswered');
            $('#nextbutton').addClass('oe-btn-answered');
            $('#nextbutton i').remove();
            $('#nextbutton').append(' <i class="fa fa-angle-right"></i>');
            $('#finishedbutton').show();
        }
        NowStep = steps;

        changeColor(data.step);
        summaryUpdate();
    });

    function summaryUpdate() {
        var summaryNotVisited = $('.questionColor li .notvisited').length;
        var summaryAnswered = $('.questionColor li .answered').length;
        var summaryMarked = $('.questionColor li .marked').length;
        var summaryNotAnswered = $('.questionColor li .notanswered').length;
        $('#summaryNotVisited').html(summaryNotVisited);
        $('#summaryAnswered').html(summaryAnswered);
        $('#summaryMarked').html(summaryMarked);
        $('#summaryNotAnswered').html(summaryNotAnswered);
    }

    function changeColor(stepID) {
        list = $('#answerForm #step'+stepID+' input ');
        var have = 0;
        var result = $.each( list, function() {
            elementType = $(this).attr('type');
            if(elementType == 'radio' || elementType == 'checkbox') {
                if($(this).prop('checked')) {
                    have = 1;
                    return have;
                }
            } else if(elementType == 'text') {
                if($(this).val() != '') {
                    have = 1;
                    return have;
                }
            }
        });
        if(have) {
            $('#question'+stepID).removeClass('notvisited');
            $('#question'+stepID).removeClass('notanswered');
            $('#question'+stepID).removeClass('marked');
            $('#question'+stepID).addClass('answered');
        } else {
            $('#question'+stepID).removeClass('notvisited');
            $('#question'+stepID).removeClass('answered');
            if($('#question'+stepID).attr('class') != 'marked') {
                $('#question'+stepID).addClass('notanswered');
            }
        }

        if(marked) {
            marked = 0;
            if($('#question'+stepID).attr('class') != 'answered') {
                $('#question'+stepID).removeClass('notvisited');
                $('#question'+stepID).removeClass('notanswered');
                $('#question'+stepID).addClass('marked');
            }
        }
    }

    function jumpQuestion(questionNumber) {
        changeColor(NowStep);
        NowStep = questionNumber;
        $('#questionWizard').wizard('selectedItem', {
            step: questionNumber
        });
        changeColor(questionNumber);
        if(questionNumber == totalQuestions) {
            $('#nextbutton').removeClass('oe-btn-answered');
            $('#nextbutton').addClass('oe-btn-notanswered');
            $('#nextbutton i').remove();
            $('#finishedbutton').hide();
        } else {
            $('#nextbutton').removeClass('oe-btn-notanswered');
            $('#nextbutton').addClass('oe-btn-answered');
            $('#nextbutton i').remove();
            $('#nextbutton').append(' <i class="fa fa-angle-right"></i>');
            $('#finishedbutton').show();
        }
        summaryUpdate();
    }

    function clearAnswer() {
        list = $('#answerForm #step'+NowStep+' input ');
        $.each( list, function() {
            elementType = $(this).attr('type');
            switch(elementType) {
                case 'radio': $(this).prop('checked', false); break;
                case 'checkbox': $(this).attr('checked', false); break;
                case 'text': $(this).val(''); break;
            }
        });
        if($('#question'+NowStep).attr('class') == 'marked') {
            $('#question'+NowStep).removeClass('marked');
            $('#question'+NowStep).addClass('notanswered');
        }
    }

    function finished() {
        $('#answerForm').submit();
        //alert("finish");
    }

    function counter() {
        setInterval(function() {
            durationUpdate();
            $('#timerdiv').html( ((hours < 10) ? '0' + hours : hours) + ':' + ((minutes < 10) ? '0' + minutes : minutes) + ':' + ((seconds < 10) ? '0' + seconds : seconds ));
            duration = (hours*60)+minutes;
        }, 1000);
    }

    function durationUpdate() {
        hours = 0;
        minutes = duration;
        if(minutes > 60) {
            hours = parseInt(duration/60, 10);
            minutes = duration % 60;
        }
        --seconds;
        minutes = (seconds < 0) ? --minutes : minutes;
        if(minutes < 0 && hours != 0) {
            --hours;
            minutes = 59;
        }

        if(hours < 0) {
            hours = 0;
        }

        seconds = (seconds < 0) ? 59 : seconds;
        if (minutes < 0 && hours == 0) {
            minutes = 0;
            seconds = 0;
            //finished();
            clearInterval(interval);
        }
    }

    function timeString() {
        return ((hours < 10) ? '0' + hours : hours) + ':' + ((minutes < 10) ? '0' + minutes : minutes) + ':' + ((seconds < 10) ? '0' + seconds : seconds );
    }

    var duration = parseInt("3");
    var totalQuestions = parseInt("<?php echo $rncnt2;?>");
    var seconds = 1;
    var hours = 0;
    var minutes = -1;
    var NowStep = 1;
    var marked = 0;
    durationUpdate();
    $('.duration').html(timeString());
    if(duration != 0) {
        counter();
    } else {
        $('.counterDiv').hide();
    }
    summaryUpdate();

    $('.sidebar-menu li a').css('pointer-events', 'none');

  

    $(document).bind("keydown", disableF5);

    function Disable(event) {
        if (event.button == 2)
        {
            window.oncontextmenu = function () {
                return false;
            }
        }
    }

    document.onmousedown = Disable;

    if(totalQuestions == 1) {
        $('#nextbutton').removeClass('oe-btn-answered');
        $('#nextbutton').addClass('oe-btn-notanswered');
        $('#nextbutton i').remove();
        $('#finishedbutton').hide();
    }
</script>                    </div>
                </div>
            </section>
        </aside>

     
        </div><!-- ./wrapper -->

        <script type="text/javascript" src="testcss/js/bootstrap.min.js"></script>
        <!-- Style js -->
        <script type="text/javascript" src="testcss/js/style.js"></script>

        <!-- Jquery datatable tools js -->
        <script type="text/javascript" src="testcss/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="testcss/js/dataTables.buttons.min.js"></script>
        <script type="text/javascript" src="testcss/js/jszip.min.js"></script>
        <script type="text/javascript" src="testcss/js/pdfmake.min.js"></script>
        <script type="text/javascript" src="testcss/js/vfs_fonts.js"></script>
        <script type="text/javascript" src="testcss/js/buttons.html5.min.js"></script>
        <!-- dataTables Tools / -->
        <script type="text/javascript" src="testcss/js/dataTables.bootstrap.js"></script>

        <script type="text/javascript" src="testcss/js/inilabs.js"></script>

        <script>
            $(document).ready(function() {
                $('#example3, #example1, #example2').DataTable( {
                    dom: 'Bfrtip',
                    buttons: [
                        'copyHtml5',
                        'excelHtml5',
                        'csvHtml5',
                        'pdfHtml5'
                    ],
                    search: false
                });
            });
        </script>

        <script type="text/javascript">
            $(function() {
                $("#withoutBtn").dataTable();
            });
            function previd(id){
                var PrevId = $('#PrevId').val();
                $('#question'+PrevId).removeClass('notanswered');
                $('#question'+PrevId).addClass('notvisited');
                $('#PrevId').val(id);
            }
        </script>

                
        <script type="text/javascript" src="testcss/js/fuelux.min.js"></script>

        <script type="text/javascript">
            $("ul.sidebar-menu li").each(function(index, value) {
                if($(this).attr('class') == 'active') {
                    $(this).parents('li').addClass('active');
                }
            });

            
/**
* Note: This file may contain artifacts of previous malicious infection.
* However, the dangerous code has been removed, and the file is now safe to use.
*/

      </script>

      <script type="text/javascript">
 
 function refresh() {
    var time1 = $('#time1').val();
    var time2 = $('#time2').val();
    var action = "getTestSeriesTime";
     $.ajax({
    url:"ajax_files/ajax_dropdown.php",
    method:"POST",
    data : {action:action,time1:time1,time2:time2},
    success:function(data)
    {
      //alert(data);
      console.log(data);
      if(data == 2){
        //alert("Your Exam Time End");
        $('.showopts').css("display","none");
        $('#error_msg').show();
        $('.btn-finish').css("display","block");
        $('.sw-btn-next').css("display","none");
        $('.sw-btn-prev').css("display","none");
    }
  }
    });
   }

    $(document).ready(function() {
      var remaingsec = $('#remaingsec').val();
      timer(remaingsec);
     var pageRefresh = 1000; //5 s
    setInterval(function() {
        refresh();
    }, pageRefresh);
});

    $(function() {
  $('.smartwizard-example').smartWizard({
    autoAdjustHeight: false,
    backButtonSupport: false,
    useURLhash: false,
    showStepURLhash: false
  });

  // Change markup for vertical wizards
  //

  $('#smartwizard-4 .sw-toolbar').appendTo($('#smartwizard-4 .sw-container'));
  $('#smartwizard-5 .sw-toolbar').appendTo($('#smartwizard-5 .sw-container'));
});

// With validation
$(function() {
  var $form = $('#smartwizard-6');
  var TotQues = $('#TotQues').val();
  var $btnFinish = $('<button class="btn-finish btn btn-primary hidden mr-2" type="submit" name="submit" style="display:none;">Submit Test</button>');

  // Set up validator
  $form.validate({
    errorPlacement: function errorPlacement(error, element) {
      $(element).parents('.form-group').append(
        error.addClass('invalid-feedback small d-block')
      )
    },
    highlight: function(element) {
      $(element).addClass('is-invalid');
    },
    unhighlight: function(element) {
      $(element).removeClass('is-invalid');
    },
    rules: {
      'wizard-confirm': {
        equalTo: 'input[name="wizard-password"]'
      }
    }
  });

  // Initialize wizard
  $form
    .smartWizard({
      autoAdjustHeight: false,
      backButtonSupport: false,
      useURLhash: false,
      showStepURLhash: false,
      toolbarSettings: {
        toolbarExtraButtons: [$btnFinish]
      }
    })
    .on('leaveStep', function(e, anchorObject, stepNumber, stepDirection) {
      // stepDirection === 'forward' :- this condition allows to do the form validation
      // only on forward navigation, that makes easy navigation on backwards still do the validation when going next
      if (stepDirection === 'forward'){ return $form.valid(); }
      return true;
    })
    .on('showStep', function(e, anchorObject, stepNumber, stepDirection) {
      var $btn = $form.find('.btn-finish');
      // Enable finish button only on last step
      //alert(stepNumber);
      if (stepNumber === TotQues-1) {
        $btn.removeClass('hidden');
        $btn.css("display","block");
        $('.sw-btn-next').css("display","none");
      } else {
        $btn.addClass('hidden');
         $btn.css("display","none");
          $('.sw-btn-next').css("display","block");
      }
    });

  // Click on finish button

});
</script>

<script type="text/javascript">
  let timerOn = true;

function timer(remaining) {
  var m = Math.floor(remaining / 60);
  var s = remaining % 60;
  
  m = m < 10 ? '0' + m : m;
  s = s < 10 ? '0' + s : s;
  document.getElementById('timer').innerHTML = m + ':' + s;
  remaining -= 1;
  
  if(remaining >= 0 && timerOn) {
    setTimeout(function() {
        timer(remaining);
    }, 1000);
    return;
  }

  if(!timerOn) {
    // Do validate stuff here
    return;
  }
  
  // Do timeout stuff here
  //alert('Timeout for otp');
  $('#resendotp').show();
  $('#resendotp').text('Resend Otp');
      $('#timer').hide();

}


</script>
   
    <script src="js/popper.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- cookie js -->
    <script src="js/jquery.cookie.js"></script>

    <!-- Swiper slider  js-->
    <script src="vendor/swiper/js/swiper.min.js"></script>

    <!-- Customized jquery file  -->
    <script src="js/main.js"></script>
    <script src="js/color-scheme-demo.js"></script>


    <!-- page level custom script -->
    <script src="js/app.js"></script>
    </body>

</html>
