@extends('layouts.default')
@section('content')

<style type="text/css">
.list-margin{
	margin: 10px;

}

.infor-mation {
    max-width: 650px;
    padding: 10px;
    background: #16a085;
    border-radius: 5px;
    color: #fff;
    box-shadow: 0px 0px 30px #95a5a6;
    border: 1px solid #fff;
}
.z-answered {
    background-color: #60bae3 !important;
    color: #fff;
    border-bottom: 3px solid #000000;
}
.q-answered {
    background-color: #079452 !important;
    color: #fff;
    border-bottom: 3px solid #000000;
}
.n-answered {
    background-color: #ff0000 !important;
    color: #fff;
    border-bottom: 3px solid #000000;
}

.m-answered {
    background-color: #ff7900 !important;
    color: #fff;
    border-bottom: 3px solid #000000;
}

</style>
<div class="right_col" role="main">
  	<div class="">
	    <div class="page-title">
	      	<div class="title_left">
	        	<h3>Exam Information</h3>
	      	</div>
	    </div>
		<div class="row">
        	<div class="col-md-12 col-sm-12 col-xs-12">
            	<div class="x_panel">
	            	<div class="x_content">
						<div class="col-md-12 padd">
							<center><em><strong>Please read the following instructions carefully</strong></em></center>
						</div>
						<br>
						<div class="col-md-12 padd">
							<div style="clear: both;color: #437ba3;text-transform: uppercase;font-size: 18px;">
								General Instructions: 
							</div>
							<ol>
								<li> Examinations will be conducted during the allocated times shown in the examination timetable.</li>
								<li>The clock has been set at the server and the countdown timer at the top right corner of your screen will display the time remaining for you to complete the exam. When the clock runs out the exam ends by default - you are not required to end or submit your exam.</li>
								<br>
								<div class="col-md-12">
									<ul class="list-unstyled">
										<li>
											<span class="btn btn-primary black-background white list-margin z-answered"  >
											<i class="fa fa-eye-slash" style="padding: 0px 3px 0px 3px"></i>
											</span>
											<span class="list-margin"> You have not visited the question yet.</span>
										</li>
										<li>
											<span class="btn btn-danger list-margin n-answered">
											<i class="fa fa-times-circle-o" style="padding: 0px 3px 0px 3px"></i>
											</span>
											<span class="list-margin">You have not answered the question.</span>
										</li>
										<li>
											<span class="btn btn-success list-margin q-answered">
											<i class="fa fa-check-circle" style="padding: 0px 3px 0px 3px"></i>
											</span>
											<span class="list-margin">You have answered the question.</span> 
										</li>
										<li>
											<span class="btn btn-info list-margin m-answered">
											<i class="fa fa-flash" style="padding: 0px 5px 0px 5px"></i>
											</span>
											<span class="list-margin"> You have answered the question but have marked the question for review.</span>
										</li>
									</ul>
								</div>
							</ol>
							<div class="col-md-12">
								<div class="infor-mation">
									<div style="margin-top:10px">
										<div class="col-md-1">
											<input type="checkbox" id="exam_chkbox">
										</div>
										<div class="col-md-11">
											<label>The computer provided to me is in proper working condition. I have read and understood the instructions given above.</label>
										</div>
									</div>
									<div class="text-right">
										<a href="" onclick="isChecked(); return false;">
											<div class="btn bg-primary right"> <i class="fa fa-sign-in"></i> Start Exam</div>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
function isChecked()
{
	if(document.getElementById("exam_chkbox").checked == true){
		window.location = '