blob: b4bbbc547ec69a3ad8556ae899160b41e80182fa (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<!doctype html>
<html>
<head>
<title>Dragover repeating</title>
<style type="text/css">
div:first-child {
height: 100px;
width: 100px;
background: orange;
display: inline-block;
}
div:first-child + div {
height: 100px;
width: 100px;
background: blue;
display: inline-block;
}
</style>
<script type="text/javascript">
window.onload = function () {
var numsecs = 5, maxpolltime = 0.550, minpolltime = 0.150;
var blue = document.getElementsByTagName('div')[1], p = document.getElementsByTagName('p')[0];
var numfired = 0, readytocount = false;
document.getElementsByTagName('div')[0].ondragstart = function (e) {
e.dataTransfer.effectAllowed = 'all';
e.dataTransfer.setData('text','dummy text');
};
blue.ondrop = function (e) {
e.preventDefault();
};
blue.ondragover = function (e) {
e.preventDefault();
if( readytocount ) { numfired++; }
};
blue.ondragenter = function (e) {
e.preventDefault();
p.innerHTML = 'Keep the mouse perfectly still...';
//give the tester a second to get ready
setTimeout(function () {
readytocount = true;
numfired = 0;
p.innerHTML = 'Keep the mouse perfectly still for '+numsecs+' seconds';
var countsecs = numsecs;
var intr = setInterval(function () {
countsecs--;
if( countsecs ) {
p.innerHTML = 'Keep the mouse perfectly still for '+countsecs+' seconds';
} else {
clearInterval(intr);
var passed = numfired >= Math.floor( numsecs / maxpolltime ) && numfired <= Math.floor( numsecs / minpolltime );
document.getElementsByTagName('p')[0].innerHTML = ( passed ? 'PASS' : 'FAIL' ) +
'<br><br>(Fired ' + numfired + ' times in ' + numsecs + ' seconds, must be between ' +
Math.floor( numsecs / maxpolltime ) + ' and ' + Math.floor( numsecs / minpolltime ) + ')<br>You can release the drag now';
}
},1000);
},1000);
};
};
</script>
</head>
<body>
<div draggable="true"></div>
<div></div>
<p>Drag the orange square over the blue square, then keep the mouse perfectly still until the result appears.</p>
<noscript><p>Enable JavaScript and reload</p></noscript>
</body>
</html>
|
