javascriptphpjquerytwitter-bootstrapcodeigniter

How to disable browser features and shortcut keys to conduct fullscreen online Exam?


I am new to OES (Online Exam System). I want to conduct an Online Examination with Secure environment that user will not be able to cheat please help do this.

I am using PHP with Codeigniter framework for back end and bootstrap, JS and JQuery for user side or front end.

I have already created a the exam module which is working fine with straight way. but I want to restrict users doing wrong ways tell me the best way to do this or suggest any link where I can get the details about.

Here is My assessment.php view file

    <?php
    $temp = "";
    $sr_no = 0;
    $assessment = $response['assessment'];
    $test_time = $this->session->userdata('test_time') * 60;
    $questions = $response['questions'];
    $total_que = count($questions);
    $i = $que_no - 1;
    $question = $questions[$i];
    $sr_no++;
    $temp.="<div class='form-group'><input  type='hidden' name='que_id' value='" . $question['que_id'] . "'>";
    if ($total_que == $que_no) {
        $i = $que_no - 1;
        $temp.="<input  type='hidden' name='que_no' value='$i'>";
    } else {
        $temp.="<input  type='hidden' name='que_no' value='$que_no'>";
    }
    $temp.="<label class='col-md-2'>Que. $que_no)</label>
                        <label class='col-md-10'>" . $question['que_dscp'] . "</label>";
    if ($question['que_type'] == "d") {
        $temp.="<div class='col-lg-9 bottom'>";
        if (isset($question['selected_options'])) {
            $temp.="<textarea style='height: 100px;' disabled name='ans_" . $question['que_id'] . "[]'  class='form-control'>" . $question['selected_options'][0] . "</textarea>";
        } else {
            $temp.="<textarea style='height: 100px;' name='ans_" . $question['que_id'] . "[]'  class='form-control'></textarea>";
        }
        $temp.="</div>";
    } else {
        foreach ($question['options'] as $option) {
            $temp.="<div class='col-lg-9 bottom'>
                        <div class='input-group'>
                            <div class='input-group-addon'>";
            if ($question['que_type'] == "ma") {
                if (isset($question['selected_options'])) {
                    if (in_array($option['option_id'], $question['selected_options'])) {
                        $temp.="<input type='checkbox' checked disabled >";
                    } else {
                        $temp.="<input type='checkbox' disabled >";
                    }
                } else {
                    $temp.="<input type='checkbox' name='ans_" . $question['que_id'] . "[]' value='" . $option['option_id'] . "'>";
                }
            } else if ($question['que_type'] == "sa") {
                if (isset($question['selected_options'])) {
                    if (in_array($option['option_id'], $question['selected_options'])) {
                        $temp.="<input type='radio' checked disabled >";
                    } else {
                        $temp.="<input type='radio' disabled >";
                    }
                } else {
                    $temp.="<input type='radio' name='ans_" . $question['que_id'] . "[]' value='" . $option['option_id'] . "'>";
                }
            }
            $temp.="</div>
                            <input type='text' readonly value='" . $option['option_dscp'] . "' class='form-control'>
                        </div>
                    </div>";
        }
    }
    $temp.="</div>";
    $temp1 = "";
    $sr_no = 0;
    foreach ($questions as $question1) {
        $sr_no++;
        $temp1.="<a href='" . base_url() . "user/assessment/index/" . $assessment['test_id'] . "/$sr_no' class='btn btn-info'>$sr_no</a> ";
    }
    ?>
    <script type="text/javascript" src="<?php echo base_url(); ?>resource/js/TimeCircles.js"></script>
    <link href="<?php echo base_url(); ?>resource/css/TimeCircles.css" rel="stylesheet">     
    <div class="container">    
        <div class="page-header center">
            <h1><?php echo $assessment['test_name']; ?> <small><?php echo $title; ?> </small></h1>
        </div>
        <?php $this->load->view('alert'); ?>
        <div class="panel panel-default col-md-4" style="padding: 0;">
            <!-- Default panel contents -->
            <div class="panel-heading">Questions Navigation</div>
            <div class="panel-body" >
                <?php echo "$temp1"; ?>
            </div>
            <div id="test_time" data-timer="<?php echo "$test_time"; ?>"></div>
        </div>
        <div class="panel panel-default col-md-8" style="padding: 0;">
            <!-- Default panel contents -->
            <div class="panel-heading">Assessment Questions</div>
            <div class="panel-body" >
                <?php echo validation_errors(); ?>
                <form id="signupform" action="<?php echo base_url(); ?>user/assessment/submit" class="form-horizontal" method="POST"> 
                    <input type="hidden" name='test_id' value='<?php echo $assessment['test_id']; ?>'>
                    <input type="hidden" name='user_id' value='<?php echo $this->session->userdata('user_id'); ?>'>
                    <?php echo "$temp"; ?>
                    <div class="form-group">
                        <!-- Button --> 
                        <div class="col-md-offset-6 col-md-6">
                            <?php
                            if ($que_no == 1) {
                                ?>
                                <a href="#" disabled class='btn btn-danger'>Previous</a>
                                <?php
                            } else {
                                ?>
                                <a href="<?php echo base_url(); ?>user/assessment/index/<?php echo $assessment['test_id']; ?>/<?php echo ($que_no - 1); ?>" class='btn btn-info'>Previous</a>
                                <?php
                            }
                            if (isset($question['selected_options'])) {
                                ?>
                                <button id="btn-signup" disabled type="submit" class="btn btn-danger"><i class="icon-hand-right"></i> &nbsp Save</button>
                                <?php
                            } else {
                                ?>
                                <button id="btn-signup" type="submit" class="btn btn-info"><i class="icon-hand-right"></i> &nbsp Save</button>
                                <?php
                            }
                            if ($total_que == $que_no) {
                                ?>
                                <a href="#" disabled class='btn btn-danger'>Next</a>
                                <?php
                            } else {
                                ?>
                                <a href="<?php echo base_url(); ?>user/assessment/index/<?php echo $assessment['test_id']; ?>/<?php echo ($que_no + 1); ?>" class='btn btn-info'>Next</a>
                                <?php
                            }
                            ?>
                        </div>
                    </div>
                    <input type="hidden" id="time_taken" name="time_taken" >
                    <div id="Countdown" style="width: 50%;"></div>
                </form>
                <a href="<?php echo base_url(); ?>user/assessment/solved/<?php echo $assessment['test_id']; ?>/<?php echo $this->session->userdata('user_id'); ?>" class='btn btn-info'>Finish Test</a>
            </div>
        </div>
    </div>
    <script>
        $("#test_time").TimeCircles();
        $("#Countdown").TimeCircles({
            "animation": "smooth",
            "bg_width": 0.8,
            "fg_width": 0.1,
            "circle_bg_color": "#60686F",
            "time": {
                "Days": {
                    "text": "Days",
                    "color": "#FFCC66",
                    "show": false
                },
                "Hours": {
                    "text": "Hours",
                    "color": "#99CCFF",
                    "show": false
                },
                "Minutes": {
                    "text": "Minutes",
                    "color": "#BBFFBB",
                    "show": true
                },
                "Seconds": {
                    "text": "Seconds",
                    "color": "#FF9999",
                    "show": true
                }
            }
        });

        $("#btn-signup").click(function() {
            $("#time_taken").val($("#Countdown").TimeCircles().getTime());
        });
    </script>
    <script type="text/javascript">
        setInterval(ajaxCall, 1000); //300000 MS == 5 minutes
        function ajaxCall() {
            var test_time=$("#test_time").TimeCircles().getTime();
            if(test_time >= 0){
                $.post("<?php echo base_url(); ?>user/assessment/set_test_time", { test_time : test_time }, function(data, status) {
                    });
            }else{
                 $.get("<?php echo base_url(); ?>user/assessment/solved/<?php echo $assessment['test_id']; ?>/<?php echo $this->session->userdata('user_id'); ?>",function(data, status) {
                       location.reload();
                    });
            }

        }
    </script>
    <script type="text/javascript">
        $(function () {
          $(document).bind('contextmenu', function (e) {
            e.preventDefault();
          });
        });
        function disableF5(e) { if ((e.which || e.keyCode) == 116 ||(e.which || e.keyCode)==8) e.preventDefault(); };
        $(document).on("keydown", disableF5);

    </script>

Here is My home.php view file from where I redirect user to assessment.php

<?php
$temp = "";
$sr_no = 0;
foreach ($assessments as $assessment) {
    $solved = $assessment['solved'];
    $test_id = $assessment['test_id'];
    $test_name = $assessment['test_name'];
    $status = $assessment['status'];
    if ($status == "1") {
        $status = "Active";
    } else {
        $status = "InActive";
    }
    $sr_no++;
    $temp.="<tr>
                <td></td>
                <td>$sr_no</td>
                <td>$test_name</td>
                <td>$status</td>";
                 if($solved=="0"){
                    $temp.="<td><a target='_blank' class='btn btn-info' onClick='return confirm(\"Are you sure want to Start Assessment...!\");' href='javascript:window.open(\"".base_url()."user/assessment/index/$test_id\",\"User Assessment\", \"titlebar=no,toolbar=no,menubar=no,width=screen.width,height=screen.height,fullscreen=yes\");' title='Take Test'>Take Test</a></td>";     
                 }else if($solved=="1"){
                    $temp.="<td><a class='ml10' href='".base_url()."user/assessment/view/$test_id' title='View'>
                    <i class='glyphicon glyphicon-search'></i></a></td>";
                 }   
        $temp.="</tr>";
}
?>
<link rel="stylesheet" href="<?php echo base_url(); ?>resource/css/bootstrap-table.css">
<div class="container">    
    <div class="page-header center">
        <h1>User Assessment System! User Dashboard <small><?php echo $title; ?> </small></h1>
    </div>
    <?php $this->load->view('alert'); ?>
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">Manage Assessment</div>
        <div class="panel-body" >
            <!-- Table -->
            <table class="table" id="userstable" data-toggle="table" data-pagination="true"  data-show-refresh="true" data-export-types="{'pdf','xml','joson','png','excel'}" data-show-export="true" data-show-toggle="true" data-show-columns="true" data-search="true">
                <thead>
                    <tr>
                        <th data-field="state" data-checkbox="true"></th>
                        <th>#</th>
                        <th data-field="que_dscp" data-sortable="true">Assessment Name</th>
                        <th data-field="status" class="text-center">Status</th>
                        <th data-field="ques" class="text-center">Start/View Test</th>
                    </tr>
                </thead>
                <tbody>
                    <?php echo "$temp"; ?>
                </tbody>
            </table><br>
        </div>
    </div>
</div>
<script src="<?php echo base_url(); ?>resource/js/bootstrap-table.js"></script>
<!-- put your locale files after bootstrap-table.js -->
<script src="<?php echo base_url(); ?>resource/js/bootstrap-table-en-US.js"></script>

Solution

  • There is absolutely no way for you to restrict someone in a location not controlled by you.
    No matter what you do to my browser or even my operating system, I can always just use a second computer, or my phone, or have a book lying around, or a sheet of paper, or a friend who knows stuff.

    The only way to detect such a thing would be a camera filming the user the entire time.
    In addition to that, you'd have to film the screen - with a camera too, not via a screen recorder, because otherwise I might just use a virtual machine for the exam, in which the browser is in full screen all the time, but I can just alt-Tab out of the VM and do whatever I want, while a screen recorder will just see the inside of the VM.

    So you cannot actually restrict the user - the only thing you can try is to surveil them.
    That would require at the very least one microphone and two cameras, probably more - one to film the screen (so that you can actually recognise something afterwards) and the rest to film the user and his entire possible field of view (don't forget the ceiling, there could be writing or something). The microphone, of course, is to make sure the user has no audible input during the exam - this also implies that they must not wear headphones, otherwise they might make use of some sound-based interface.
    For example, I imagine a service which, upon activation by hotkey, opens an invisible browser window, captures your keyboard input, conducts a Google search upon hitting Return, lets you navigate via the arrow keys/Return/Tab/Backspace/Esc and reads to you any text that you "select".
    I believe on OS X, one would only need to find a way to make windows invisible - then they could activate Voice over, set their start page to Google and create a service with Automator that opens a new browser window (invisibly), to which they can then assign a hotkey.
    Also, all recordings should be transmitted in real time, otherwise the user has a chance to tamper with them.

    Now that I wrote this I realise that this is probably more of a question for Information Security.