
<?php

echo $total_question;
if (isset($_SESSION['pageload']) && $_SESSION['pageload'] < $total_question) {
    $_SESSION['pageload'] = $_SESSION['pageload'] + 1;
    $i = $_SESSION['pageload'];
}
//elseif (isset($_SESSION['pageload']) && $_SESSION['pageload'] == $total_question) {
//    unset($_SESSION['pageload']);}
else {

    $_SESSION['pageload'] = 0;
    $i = $_SESSION['pageload'];
}
?>

<div class="col-md-9 column">

    <h1 class="page-header">Start Quiz</h1>
    <p>

    </p>





    <div class="nav nav-pills navbar-right">
        <div style="color:green;font-size: 40px;" class="stopwatch"></div>
    </div>

    <h4>Question option:</h4><br/><br/>


    <?php
    if (($question[$i]->question_details == '')) {
        redirect('public_quiz/quiz_result');
    }
    
    echo $i;
    ?>



    <div role="tabpanel" id="myDiv">

        <form action="<?php echo base_url(); ?>public_quiz/quiz_marking" method="post" name="quiz_form" enctype="multipart/form-data">

            <h2> <?php echo $i + 1 ?> )  <?php echo $question[$i]->question_details ?> </h2>
            <input type="hidden" name="points_per_answer" value="<?php echo $question[$i]->points_per_answer ?>" >
<?php
foreach ($options[$question[$i]->question_id] as $v_option) {
    echo '<h4>';

    $v = $v_option->question_option_id;
    echo "<input type='hidden' name='option_id[]' value='$v_option->question_option_id'>";
    echo " <input type='radio' name='status[]' id='route'   value='$v'>";

    echo ' ' . $v_option->question_option;
    echo '</h4>';
}
?>    





            <div class="checkbox col-sm-6" >
                <button type="submit" id="submit" class="btn btn-success" >Submit</button>
                <!--<button type="reset" class="btn btn-info">Reset</button>-->
            </div>

            <br/><br/>
            <!--  Stop watch extra code   -->

            <!--        <nav class="controls">
                                    <a href="#" class="button" onClick="Stopwatch.start();">Start</a>
                                    <a href="#" class="button" onClick="Stopwatch.lap();">Lap</a>
                                    <a href="#" class="button" onClick="Stopwatch.stop();">Stop</a>
                                    <a href="#" class="button" onClick="Stopwatch.restart();">Restart</a>
                            </nav>-->

<!--<table class="results"></table>-->
            <!--  End of Extra code-->


        </form>






    </div>

    <!-- Auto reload -->
    <script type="text/javascript">
        var timeout = setTimeout("location.reload(true);", 9000);
        function resetTimeout() {
            clearTimeout(timeout);
            timeout = setTimeout("location.reload(true);", 9000);
        }
    </script>
    <!-- Auto reload END -->

    <!-- script for stop watch begin -->

    <script type="text/javascript">
        var Stopwatch = (function () {
            var s;
            return {
                settings: {
                    stop: 0,
                    sw: document.querySelectorAll(".stopwatch")[0],
                    results: document.querySelectorAll(".results")[0],
                    mills: 0,
                    secs: 59,
                    mins: 0,
                    i: 1,
                    times: ["00:00:00"],
                    clearButton: "<a href=\"#\" class=\"button\" onClick=\"Stopwatch.clear();\">Clear</a>"
                },
                init: function () {
                    s = this.settings;
                    setInterval(this.timer, 1);
                },
                clear: function () {
                    s.i = 1,
                            s.times = ["00:00:00"],
                            s.results.innerHTML = s.clearButton;
                },
                lap: function () {
                    if (s.i === 1) {
                        s.results.innerHTML = s.clearButton;
                    }
                    s.times.push(("0" + s.mins).slice(-2) + ":"
                            + ("0" + s.secs).slice(-2) + ":"
                            + ("0" + s.mills).slice(-2));
                    var diffTime = ("0" + Math.floor(s.times[s.i].split(":")[0]
                            - s.times[s.i - 1].split(":")[0])).slice(-2)
                            + ":"
                            + ("0" + Math.floor(s.times[s.i].split(":")[1]
                                    - s.times[s.i - 1].split(":")[1])).slice(-2)
                            + ":"
                            + ("0" + (s.times[s.i].split(":")[2]
                                    - s.times[s.i - 1].split(":")[2])).slice(-2);
                    s.results.innerHTML = s.results.innerHTML + "<tr><td>"
                            + s.times[s.i] + "</td><td>"
                            + diffTime + "</td></tr>";
                    s.i++;
                },
                restart: function () {
                    s.mills = 0,
                            s.secs = 0,
                            s.mins = 0;
                    this.start();
                },
                start: function () {
                    s.stop = 0;
                },
                stop: function () {
                    s.stop = 1;
                },
                timer: function () {
                    if (s.stop === 0) {
                        if (s.mills === 200) {
                            s.secs--;
                            s.mills = 0;
                        }
                        if (s.secs === 60) {
                            s.mins--;
                            s.secs = 0;
                        }
                        s.sw.innerHTML = ("0" + s.mins).slice(-2) + ":"
                                + ("0" + s.secs).slice(-2) + ":"
                                + ("0" + s.mills).slice(-2);
                        s.mills++;
                    }
                }
            };
        })();
        Stopwatch.init();


    </script> 
    <!--stop watch end -->



</div>








