Question

我使用用PHP编写的Moodle软件开发了在线考试。现在，我想通过生成鼠标驱动器弹出窗口来限制正在进行测试的人，而无法导航到其他选项卡或其他窗口。

以下是我在用户离开窗口时有警报弹出窗口的代码：

<html>
<head>
<script type="text/javascript">
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}
addEvent(window,"load",function
(e)
 {
    addEvent(document, "mouseout", function
(e)
 {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;
        if (!from || from.nodeName == "HTML") {
            // stop your drag event here
            // for now we can just use an alert
            alert("Your Test will close in 10 secs unless you return to the page ");
        }
    });
});
</script>
</head>
<body></body>
</html>

是否有可能使用此代码限制用户，在这种情况下，将此代码附加到moodle的实际源代码？

感谢。

Answer 1

不知道我是否理解你的要求，但我试图重新创建场景......请检查下面的jsfiddle（我使用过jQuery和jQuery UI）

<强> HTML

 <div class="exam">
  SOME TEXT
</div>

<div id="dialog" title="Basic dialog">
  <p>Your Test will close in <span class="time"></span> secs unless you return to the page</p>
</div>

<强> CSS

 body {
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    font-size: 62.5%;
}

.exam {
  height: 500px;
  width: 100%;
  border: 1px solid #ccc;
  background: #549bed;
}

<强> JQUERY

    $(document).ready(function() {
   $('.exam').on('mouseout', function() {

     $("#dialog").dialog("open");
     // loop time
     $('.time').text('10');
     (function myLoop(i) {

       setTimeout(function() {

         // To check whether OK button on dialog was clicked
         $('.ui-dialog-buttonset').click(function() {

           $(this).data('clicked', true);
         });

          // To check whether 'X' button on dialog was clicked
         $('.ui-dialog-titlebar-close').click(function() {

           $(this).data('clicked', true);
         });

         // storing button click status
         var clckd = $('.ui-dialog-buttonset').data('clicked');
         var xclckd = $('.ui-dialog-titlebar-close').data('clicked');
         console.log(clckd);

         // exiting the loop if 'OK' or 'X' button is clicked
         if (clckd || xclckd) {
           $('.ui-dialog-buttonset').data('clicked', false); // resetting 'OK' button status
           $('.ui-dialog-titlebar-close').data('clicked', false); // resetting 'X' button status
           return;

         }
         if (--i) myLoop(i);
         $('.time').text(i); //  decrement i and call myLoop again if i > 0

         // If user has not come back
         if (i == 0) {
           alert('sorry exam closed'); //code for ending exam
         }

       }, 1000)

     })(10);

     // End loop time



   });



   $('.exam').on('mouseenter', function() {

     $("#dialog").dialog("close");
     $('.time').text('10');
   });

   $(function() {
     $("#dialog").dialog({
       autoOpen: false,
       show: {
         effect: "blind",
         duration: 1000
       },
       hide: {
         effect: "explode",
         duration: 1000
       },
       modal: true,
       buttons: {
         Ok: function() {
           $(this).dialog("close");
         }
       }
     }); // dialog.dialog
   }); // function dialog
 }); // Document ready

https://jsfiddle.net/7oec0v5t/2/

Answer 2

如果代码正常工作，可以在test.php或负责加载测试的PHP脚本的任何地方添加。

或者，将其添加到页面的页脚，并使用“js-test”作为类包装测试HTML容器。如果该类存在，请加载脚本。

鼠标离开窗口提醒Pop-Up - Moodle

2 个答案: