I have developed an online exam using the Moodle software which is written in PHP. Now I want to restrict the person who is taking the test without being able to navigate to other tabs or other windows by generating a mouserover pop-up.
Following is the I have a code for the alert pop-up when the user leaves the window:
<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>Is there a possibility to restrict the user with this code and in that case where to append this code to the moodle's actual source code??
Thanks.
</div>
If the code works properly, add it anywhere is your test.php or some PHP script responsible for loading tests.
Or, add it to the footer of the page, and wrap the test HTML container with 'js-test' as a class. If the class exists, load the script.
dont know whether i understood your requirement properly but i tried tried to recreate the scenario... Kindly check below jsfiddle (I have used jQuery and 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