<?php
/*
ob_start();
require_once('operations.php');
session_start();
$db = new Operations();
$db2 = new Operations();

$examcode = $_SESSION['examcode'];
$countExam = $db->checkExamsCode($examcode);

//echo $examcode;

//$name = $_SESSION['name'];

$db->findExamsById($examcode);

$duration = $db->duration;

$statement = $db2->getQuestionsByExamID($examcode);

$statement2 = $db2->getQuestionsByExamID($examcode);

/*

if($countExam < 1) {
  ?>
  <script>
  alert('exam code does not exist');
window.location.href='firstPageExam.php';

</script>
  <?php
}

else {

$countQuestion = $db->getCountQuestionsByExamID($examcode);

if($countQuestion < 1) {

  ?>
  <script>
  alert('questions are not ready for this exams');
window.location.href='firstPageExam.php';

</script>
  <?php
  
}

else {

 


   $db->findSubjectById($db->subject_id);

  // echo $db->subject_id;


}



}
*/
/*
if (isset($_POST['submit'])){
	
    $examcode = strtouppe(strip_tags($_POST['username']));
    
    $_SESSION["examcode"] = $examcode;
    header("Location: secondPageExam.php");

    }
    */

?>
<!--
=========================================================
* Argon Dashboard - v1.2.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard

* Copyright  Creative Tim (http://www.creative-tim.com)
* Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="cbt app">
  <meta name="author" content="Creative Tim">
  <title>CBT APP</title>
  <!-- Favicon 
  <link rel="icon" href="../assets/img/brand/favicon.png" type="image/png">
  -->
  <!-- Fonts -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
  <link rel="stylesheet" href="style.css" type="text/css"> 
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
  <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js'></script>
  <link href='https://use.fontawesome.com/releases/v5.7.2/css/all.css'>
  
  
 
 
</head>

<body class="bg-default">
  <!-- Navbar -->
  
  <!-- Main content -->
  <div style="font-weight: bold; background-color:white;" id="quiz-time-left"></div>

  <script type="text/javascript">
var max_time = <?php echo $duration ?>;
var c_seconds  = 0;


var total_seconds =60*max_time;
max_time = parseInt(total_seconds/60);
c_seconds = parseInt(total_seconds%60);
document.getElementById("quiz-time-left").innerHTML='Time Left: ' + max_time + ' minutes ' + c_seconds + ' seconds';
function init(){
document.getElementById("quiz-time-left").innerHTML='Time Left: ' + max_time + ' minutes ' + c_seconds + ' seconds';
setTimeout("CheckTime()",999);
}
function CheckTime(){
document.getElementById("quiz-time-left").innerHTML='Time Left: ' + max_time + ' minutes ' + c_seconds + ' seconds' ;
if(total_seconds <=0){
setTimeout('document.form.submit()',1);
   
    } else
    {
total_seconds = total_seconds -1;
max_time = parseInt(total_seconds/60);
c_seconds = parseInt(total_seconds%60);
setTimeout("CheckTime()",999);
}

}
init();


</script>
<style>
#quiz-time-left{
	color:black;
	padding:5px;
	font-size:18px;
	
	}
</style>



<div class="wrapper">
    <div class="wrap" id="q1">
        <div class="text-center pb-4">
            <div class="h5 font-weight-bold"><span id="number"> </span>1 of 3 </div>
        </div>
        <div class="h4 font-weight-bold"> 1. Who is the Prime Minister of India?</div>
        <div class="pt-4">
            <form> <label class="options">Rahul Gandhi <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="options">Indira Gandhi <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="options">Narendra Modi <input type="radio" name="radio" id="rd" checked> <span class="checkmark"></span> </label> <label class="options">Ram Nath Kovind <input type="radio" name="radio"> <span class="checkmark"></span> </label> </form>
        </div>
        <div class="d-flex justify-content-end pt-2"> <button class="btn btn-primary" id="next1">Next <span class="fas fa-arrow-right"></span> </button> </div>
    </div>
    <div class="wrap" id="q2">
        <div class="text-center pb-4">
            <div class="h5 font-weight-bold"> <span id="number"> </span>2 of 3 </div>
        </div>
        <div class="h4 font-weight-bold"> 2. IPV4 stand's for?</div>
        <div class="pt-4">
            <form> <label class="options">Internet Protocol <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="options">Intranet Protocol <input type="radio" name="radio" checked> <span class="checkmark"></span> </label> <label class="options">internet Protocol <input type="radio" name="radio" id="rd"> <span class="checkmark"></span> </label> <label class="options">None of the above <input type="radio" name="radio"> <span class="checkmark"></span> </label> </form>
        </div>
        <div class="d-flex justify-content-end pt-2"> <button class="btn btn-primary mx-3" id="back1"> <span class="fas fa-arrow-left pr-1"></span>Previous </button> <button class="btn btn-primary" id="next2">Next <span class="fas fa-arrow-right"></span> </button> </div>
    </div>
    <div class="wrap" id="q3">
        <div class="text-center pb-4">
            <div class="h5 font-weight-bold"> <span id="number"> </span>3 of 3 </div>
        </div>
        <div class="h4 font-weight-bold"> 3. What is the full form of CSS?</div>
        <div class="pt-4">
            <form> <label class="options">Clarity Style Sheets <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="options">Cascading Style Sheets <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="options">Confirm Style sheets <input type="radio" name="radio" id="rd" checked> <span class="checkmark"></span> </label> <label class="options">Canvas Style Sheets <input type="radio" name="radio"> <span class="checkmark"></span> </label> </form>
        </div>
        <div class="d-flex justify-content-end pt-2"> <button class="btn btn-primary mx-3" id="back2"> <span class="fas fa-arrow-left pr-2"></span>Previous </button> <button class="btn btn-primary" id="next3">Submit </button> </div>
    </div>
</div>
<div class="d-flex flex-column align-items-center">
    <div class="h3 font-weight-bold text-white">Go Dark</div> <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label>
</div>
<script>
    var q1 = document.getElementById("q1");
    var q2 = document.getElementById("q2");
    var q3 = document.getElementById("q3");
    var next1 = document.getElementById('next1')
    var back1 = document.getElementById('back1')
    var next2 = document.getElementById('next2')
    var back2 = document.getElementById('back2')
    document.addEventListener('DOMContentLoaded', function() {
        let query = window.matchMedia("(max-width: 767px)");
        if (query.matches) {
            next1.onclick = function() {
                q1.style.left = "-650px";
                q2.style.left = "15px";
            }
            back1.onclick = function() {
                q1.style.left = "15px";
                q2.style.left = "650px";
            }
            back2.onclick = function() {
                q2.style.left = "15px";
                q3.style.left = "650px";
            }
            next2.onclick = function() {
                q2.style.left = "-650px";
                q3.style.left = "15px";
            }
        } else {
            next1.onclick = function() {
                q1.style.left = "-650px";
                q2.style.left = "50px";
            }
            back1.onclick = function() {
                q1.style.left = "50px";
                q2.style.left = "650px";
            }
            back2.onclick = function() {
                q2.style.left = "50px";
                q3.style.left = "650px";
            }
            next2.onclick = function() {
                q2.style.left = "-650px";
                q3.style.left = "50px";
            }
        }
    });

    function uncheck() {
        var rad = document.getElementById('rd')
        rad.removeAttribute('checked')
    }
    document.addEventListener('DOMContentLoaded', function() {
        const main = document.querySelector('body')
        const toggleSwitch = document.querySelector('.slider')
        toggleSwitch.addEventListener('click', () => {
            main.classList.toggle('dark-theme')
        })
    })
</script>

  
</body>

</html>