-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (116 loc) · 4.37 KB
/
index.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ThreeSecondGame</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="c3-0.7.20/c3.css" rel="stylesheet">
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="c3-0.7.20/c3.min.js"></script>
<script type="text/javascript">
let targetTime = 3;
let running = false;
let startTime = Date.now();
let storedTimes = [];
let detailsOn = false;
let chartOn = false;
function startStop(){
if (running == false){
document.getElementById("theButton").innerHTML = "Stop";
running = true;
startTime = Date.now();
}
else {
document.getElementById("theButton").innerHTML = "Start";
running = false;
let elapsedTime = (Date.now() - startTime)/1000;
document.getElementById("timeShown").innerHTML = elapsedTime.toString();
storedTimes.push(elapsedTime);
if (elapsedTime > targetTime + .5 || elapsedTime < targetTime-.5){
document.getElementById("timeShown").setAttribute("style","color:red");
}
else if (elapsedTime > targetTime + .2 || elapsedTime < targetTime - .2){
document.getElementById("timeShown").setAttribute("style","color:black");
}
else if (elapsedTime == targetTime) {
document.getElementById("timeShown").setAttribute("style","color:green");
}
else{
document.getElementById("timeShown").setAttribute("style","color:blue");
}
}
}
function createChart(){
if (chartOn == false){
chartOn = true;
let times = ['Times'];
for (i in storedTimes){
times.push(storedTimes[i]);
}
chart = c3.generate({
bindto: '#chart',
data: {
columns: [
times,
]
}
});
chart.show()
}
else{
chartOn = false;
chart.hide();
}
}
function dButton(){
if (detailsOn == false){
detailsOn = true;
calculateAvgTime();
}
else {
detailsOn = false;
clearDetails();
}
}
function calculateAvgTime() {
if (storedTimes.length != 0) {
let total = 0;
let min = storedTimes[0];
let max = storedTimes[0];
for (i in storedTimes) {
total += storedTimes[i];
if (min > storedTimes[i]){
min = storedTimes[i];
}
if (max < storedTimes[i]){
max = storedTimes[i];
}
}
total = total / storedTimes.length;
document.getElementById("Mean").innerHTML = "Average: " + total.toString();
document.getElementById("Minimum").innerHTML = "Min: " + min.toString();
document.getElementById("Maximum").innerHTML = "Max: " + max.toString();
}
}
function clearDetails(){
document.getElementById("Mean").innerHTML = "";
document.getElementById("Minimum").innerHTML = "";
document.getElementById("Maximum").innerHTML = "";
}
</script>
<button id="theButton" type="button" class="btn btn-primary btn-lg" onclick="startStop()">Start</button>
<h2 id="timeShown" >
0.000
</h2>
<button id="chartButton" onclick="createChart()">Show Chart</button>
<button id="detailsButton" onclick="dButton()">Details</button>
<div id="chart"></div>
<div id="details">
<h3 id="Mean"></h3>
<h3 id="Minimum"></h3>
<h3 id="Maximum"></h3>
</div>
</body>
</html>