<?php defined('BASEPATH')or exit("NO DIRECT ACCESS iS ALLOWED");?>

<style>

.quiz_header{
	background-repeat: no-repeat;
    background-image: url(<?=base_url('assets/easy-admin/images/quiz-nexts.png');?>);
    background-size: cover;
    background-position: inherit;
}
#clockdiv {
    margin-top: 12px;
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 12px;
}
.card_quiz{
margin-top: 29px!important;

}
.ins {
    font-size: 13px;
    margin-left: 16px;
    color: #46a86b;
}
.media-left{
	padding: 2px 16px;
    color: #fff;
    background-color: #899197;
}
.media-lefts{
	padding: 2px 16px;
    color: #000;

}
.media_quiz{
	margin-top: -11px;
}
.mb_quiz{
	margin-top: 6px;
    font-size: 19px;
    text-transform: capitalize;
    margin-bottom: 3px;
}
 .btn_start{
    text-transform: capitalize;
   ackground-color: #ffa600!important;
    border-color: #ffa600!important;
    padding: 3px 5px !important;
    color: #fff!important;
    font-size: 12px;
    font-weight: 100;

 }
 .send_quiz{
	    vertical-align: text-bottom;
    font-size: 17px;
 }
 .card_header{
	   /*  border-bottom: 1px solid rgba(0,0,0,.2)!important;*/
 }
 .mb_quizs {
    margin-top: 8px;
    font-size: 15px;
    /* text-transform: capitalize; */
    margin-bottom: 4px;
}


/* This css is for normalizing styles. You can skip this. */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


.form-group_quiz {
  position: relative;
  cursor: pointer;
}

.form-group_quiz {
     display: block;
    margin-bottom: 3px;
}

.form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.label_quiz {
    font-size: 14px;
    color: #fff;
	margin: 0 0 4px 0;
}
.new{
	    margin-top: -15px;
}

.btn-githubs{
	background-color: #428bca;
    border-color: rgb(66, 139, 202);
}
.questions {
    /* background: #6591EC; */
    color: #000;
    /* font-size: 14px; */
    padding: 0px 0px;
    font-weight: 300;
    margin: 0 0px 10px;
    position: relative;
}




.questions:after {
    left: auto;
    right: 30px;
    background-position: -10px 0;
}
.float_right {
    margin-top: -5px;
    float: right;
}
  .total_nos{
  margin: 0;
    line-height: 24px;
    padding: 0;
    margin-top: 17px;
    font-size: 14px;
}

  .float_left{
	float:right;
}
#footer{
	display:none;
}
#header{
	display:none;
}
 .btn_start{
	margin-top: 13px;
    border: none;
    float: right;
    background-image: -webkit-linear-gradient( 63deg, rgb(86, 123, 163) 0%, rgb(86, 123, 163) 100%);
    text-transform: capitalize;
    ackground-color: #ffa600!important;
    /* border-color: #ffa600!important; */
    padding: 6px 7px !important;
    color: #fff!important;
    font-size: 14px;
    font-weight: 100;
}


 .online_test{
	font-family: cursive;
    text-align: center;
    color: #ff6605;
}
 .card_quiz_body{
	 padding: 20px 0px 0px 5px!important;
 }
 .card-footer1_login{
	     padding: 4px 5px;
 }




.sandyCounter{
	display: inline-block;
    color: #ffff;
    font-weight: 700;
}

.SCDateComponent--months{
	display:none;
}
.SCDateComponent--weeks{
	display:none;
}
.SCDateComponent--days{
	display:none;
}.SCDateComponent--hours{
	display:none;
}
.card_header1{
	margin-top:25px;
}

</style>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3" style="margin-top:0%;">
<div class="" style="margin-top:9px;">
<div class="float_right">
						<span style="color:#fff;">1/<?=count($list);?> </span>
						</div>

                 <div id="container_counter">
			<div id="cercleContainer">
				<!--<div id="cercle"></div>-->
				<div id="cercleContent">
					<div id="sandyCountdown">

						<img src="https://thewowwatches.com/wp-content/uploads/2018/09/clock-in-gif.gif"  id="sandyCanvas" class="sandyWatch"style="width:35px; height:35px;margin-top:-5px;">
						<div id="sandyCounter" class="sandyCounter">

							<span class="SCDateComponent SCDateComponent--minutes" ></span> :
							<span class="SCDateComponent SCDateComponent--seconds"></span>


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

			</div>
		</div>

</div>				<div class="online_quiz">
						<h1 class="online_test"> Mock Test</h1>
						</div>

						<?php 
								if(!empty($list))
								{
								$i = 1;
								$a = 0;
								foreach($list as $res):
								//echo "<pre>"; print_r($res);die;
							?>
						<div class="card1 quiz_question animated slideInLeft mysection" style = "display:<?php if($i != 1){ echo "none";} ?>" >
							
                            <div class="card-header1 card_header1">
                                <div class="media align-items-center">
                                    <div class="questions"><?php echo $i;?>. <?php echo $res->que; ?>?</div>
                                </div>
                            </div>
                            <div class="card-body card_quiz_body">
									<div class="new">
									<form action="<?php echo site_url('Student/quiz_iframe');?>" method="post" id="quiz">
										<div class="form-group  form-group_quiz" style="padding: 5px 8px;background: #dddddd; border-radius: 1px 12px;">
										<input type="checkbox" id="html">
										<label for="html" class="label_quiz" style="color: #000;"><?php echo $res->option_1;?></label>
										</div>
										<div class="form-group form-group_quiz" style="padding: 5px 8px;background: #dddddd; border-radius: 1px 12px;">
										<input type="checkbox" id="css">
										<label for="css" class="label_quiz" style="color: #000;"><?php echo $res->option_2;?></label>
										</div>
										<div class="form-group form-group_quiz" style="padding: 5px 8px;background: #dddddd; border-radius: 1px 12px;">
										<input type="checkbox" id="css">
										<label for="css" class="label_quiz" style="color: #000;"><?php echo $res->option_3;?></label>
										</div>
										<div class="form-group form-group_quiz" style="padding: 5px 8px; background: #10c888;  border-radius: 1px 12px;">
										<input type="checkbox" id="javascript">
										<label for="javascript" class="label_quiz"><?php echo $res->option_4;?></label>
										</div>
										<input type = "hidden" name = "totq" id = "totq" value = "<?php echo $a; ?>">
									</form>
									</div>
                            </div>
								
                             <div class="card-footer1_login">
							<!--  <input type="button" name="next"  value="Prev «" class="btn btn-rounded  btn_yellow btn_start btn-githubs">
							 <input type="button" name="next"  value="Next »" class="btn btn-rounded  btn_yellow btn_start btn-githubs">-->

                                <!--<a href="" class="btn btn-rounded pull-right btn_yellow btn_start btn-githubs">Submit Test
								<i class="material-icons btn__icon--right send_quiz">send</i></a>-->

                              <a href="" class="btn btn_start next" id="next_btns">Next
								<i class="material-icons btn__icon--right send_quiz">send</i></a>


						   </div>
						   
                        </div>
						<?php $i++; $a++; endforeach;} ?>

</div>



</div>
</div>
	
<script type="text/javascript">
var count = 1;
jQuery('.next').click(function(){
   jQuery(this).parent().hide().next().show();
   count++;
   var datacount = jQuery('.mysection').length;
   jQuery('#mytotq').text(datacount);
   if(count > datacount)
   {
	   jQuery('#mynotfound').show();
   }
   if(count == datacount)
   {
	   jQuery('#submitbtn').show();
	   jQuery('.next').hide();
   }
});
</script>
<script>
function startTimer(duration, display) {
    var start = Date.now(),
        diff,
        minutes,
        seconds;
    function timer() {
        diff = duration - (((Date.now() - start) / 1000) | 0);
		minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        display.textContent = minutes + ":" + seconds; 
        if (diff <= 0) {
			clearInterval(tt);
			jQuery('.next').hide()
        }
    };
    timer();
   var tt = setInterval(timer, 1000);
   jQuery('#submitbtn').on('click',function(){
	   clearInterval(tt);
	   var time = jQuery('#time').text();
	   localStorage.setItem("t1",time);
   });
}
function onTimer() {
    var fiveMinutes = 60 * 60,
	display = document.querySelector('#time');
	startTimer(fiveMinutes, display);
};
</script>