鼠標離開窗口警報彈出 - Moodle

我開發了一個在線考試，使用PHP編寫的Moodle軟件。現在，我想通過生成mouserover彈出窗口來限制正在進行測試而無法導航到其他選項卡或其他窗口的人員。鼠標離開窗口警報彈出 - 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的實際源代碼中？

謝謝。

來源

2016-02-09 Sai Dutt Mekala

如果代碼正常工作，將其添加到任何地方是您的test.php或負責加載測試的PHP腳本。

或者，將其添加到頁面的頁腳，然後用'js-test'作爲類包裝測試HTML容器。如果該類存在，則加載該腳本。

來源

2016-02-09 06:52:03 Lukas

不知道我是否正確地理解你的要求，但我想試圖重建場景......請檢查下面的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; 
}

JQ UERY

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

來源

2016-02-09 09:54:07 RRR

好的，謝謝您的代碼...但如果嵌入該代碼在Moodle的實際代碼 –

發生在頭段jQuery代碼 – RRR

鼠標離開窗口警報彈出 - Moodle

回答

相關問題