鼠标离开窗口警报弹出窗口--Moodle

Mouse Leaving the window alert Pop-Up--Moodle

本文关键字：窗口 --Moodle 离开 开窗口 鼠标      更新时间：2023-09-26

我使用用PHP编写的Moodle软件开发了一个在线考试。现在，我想通过生成 mouserover 弹出窗口来限制正在参加考试的人，使其无法导航到其他选项卡或其他窗口。

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

<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 的实际源代码的何处？

谢谢。

不知道

我是否正确理解了您的要求，但我尝试重新创建场景......请检查下面的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;
}

简讯

    $(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/

如果代码工作正常，请将其添加到您的测试或负责加载测试的 PHP 脚本.php或一些 PHP 脚本。

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

相关文章：