javascript - 如何禁用浏览器功能和快捷键以进行全屏在线考试？

Question

我是 OES(在线考试系统)的新手。我想在用户无法作弊的安全环境下进行在线考试请帮忙做这件事。

我正在使用 PHP 和 Codeigniter 框架用于后端和 Bootstrap ，JS 和 JQuery 用于用户端或前端。

我已经创建了一个可以直接正常工作的考试模块。但我想限制用户做错事告诉我最好的方法或建议我可以获得详细信息的任何链接。

这是我的assessment.php View 文件

    <?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>

这是我的 home.php View 文件，我从那里将用户重定向到 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>

Answer 1

您绝对没有办法限制某人在不受您控制的位置。
无论您对我的浏览器或什至是我的操作系统做什么，我总是可以使用第二台计算机或我的手机，或者身边有一本书，一张纸，或者一个懂事的 friend 。

检测此类事件的唯一方法是用摄像头全程拍摄用户。
除此之外，你还必须拍摄屏幕 - 也用相机，而不是通过屏幕录像机，否则我可能只是使用虚拟机进行考试，其中浏览器一直处于全屏状态，但我只需按 alt-Tab 键退出 VM 并执行任何我想做的事情，而屏幕录像机只会看到 VM 的内部。

因此您实际上不能限制用户 - 您唯一可以尝试的就是监视他们。
这至少需要一个麦克风和两个摄像头，可能更多 - 一个用于拍摄屏幕(以便您之后可以真正识别出一些东西)，其余的用于拍摄用户及其整个可能的视野(不要忘记天花板，可能有文字或其他东西)。当然，麦克风是为了确保用户在考试期间没有声音输入——这也意味着他们不能戴耳机，否则他们可能会使用一些基于声音的界面。
例如，我想象一个服务，在通过热键激活后，打开一个不可见的浏览器窗口，捕获你的键盘输入，在点击 Return 时进行谷歌搜索，让你通过箭头键/返回/Tab/Backspace/Esc 并朗读您“选择”的任何文本。
我相信在 OS X 上，人们只需要找到一种使窗口不可见的方法 - 然后他们可以激活旁白，将他们的起始页设置为 Google 并使用 Automator 创建一个服务来打开一个新的浏览器窗口(不可见)，然后他们可以分配一个热键。
此外，所有录音都应实时传输，否则用户有机会篡改。

既然我写了这篇文章，我意识到这可能更像是一个关于 Information Security 的问题。 .