-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathUntitled1.html
84 lines (77 loc) · 2.95 KB
/
Untitled1.html
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
<title>Patient Questionnaire</title>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themes/formatting.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type='text/javascript' src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
</head>
<body>
<div data-role="page" id="WelcomePage" data-theme="a">
<div data-role="header">
<h1>Reaction time</h1>
</div>
<div data-role="main" class="ui-content">
<div id="rt"> <!-- Green Button --> </div>
<div id="display_rt">
<!--<button data-bind="click: clickMe" type="button">Click Me!</button>-->
</div>
</div> <!--main content-->
<div data-role="footer" data-position="fixed">
<h2>© Edinburgh University 2014</h2>
</div>
</div>
<script>
var done = false;
var t0;
var t1;
var rt;
var attempts=0;
var avgRt=0;
var timeOut;
var viewModel = {
numberOfClicks: ko.observable(0),
clickMe: function() {
$("#display_rt").html("Your Reaction time was " + rt + "milliseconds.");
// alert("Your Reaction time was..." + (t1 - t0) + " milliseconds.");
}
};
ko.applyBindings(viewModel);
$("#rt").on('mousedown touchstart', function(e) {
e.preventDefault();
t0='';
var rand = Math.random() * 5 + 2;
timeOut= setTimeout(function() {
$("#rt").css("background-image", "url('themes/myImages/RT_ButtonRedStop.png')");
t0 = Date.now(); //start counting from when the button turns red
done = true;
}, rand * 1000);
$("#rt").on('mouseup touchend', function() {
if (!done)
{
clearTimeout(timeOut);
//alert("You raised your finger too early! \nWait for the button to turn RED, try again.");
}else //if timeout completed
{
t1 = Date.now(); //stop counting when finger lifted.
rt=t1-t0;
attempts = attempts+1;
avgRt=(avgRt+rt)/attempts;
$("#rt").css("background-image", "url('themes/myImages/RT_ButtonGreenPush.png')");
$("#display_rt").html("Your Reaction time was " + rt + " ms. Your average is " + avgRt + " ms." );
done=false
}
});
});
//setTimeout() method executes a function once an interval of time has ellapsed,
//but the function shouldn't run if the user has already raised their finger, this is why
//the green box randomly turned red, a previous touch had activated the timer, and the timer
//wasn't cancelled when the user lifted their finger prematuraley,(i.e. before the timeout/before
//it turned red)
</script>
</body>
</html>