-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
73 lines (70 loc) · 4.71 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="jquery.js"></script>
<script src="chart.js"></script>
</head>
<body>
<div id="sim-container">
<canvas id="sim-canvas"><p>Your browser is not up to date.</p></canvas>
</div>
<div id="chart-container">
<canvas id="chart-canvas"><p>Your browser is not up to date.</p></canvas>
</div>
<div id="ui-container">
<div class="header-container top-header">
<p><div class="tooltip material-icons">info<span class="tooltiptext"> This is the total number of subjects in the simulation. Each dot represents a single person. </span></div> Population: <span id="population-disp"></span></p>
</div>
<div class="header-container top-header">
<p><div class="tooltip material-icons">info<span class="tooltiptext"> This is the number of separted boxes the population can roam within. Each box represents people that you may come into contact with on a daily basis such as your immediate family or roomate. </span></div> Number of families: <span id="family-disp"></span></p>
</div>
<br>
<br>
<input type="range" min="1" max="300" value="100" class="slider" id="population-slider">
<input type="range" min="1" max="9" value="1" class="slider" id="family-slider">
<br>
<div class="header-container">
<p><div class="tooltip material-icons">info<span class="tooltiptext"> This is the probability that a person will become infected for each second within an infected individual's transmission range. This represents how effectively hygienic the population is, i.e., handwashing, covering sneezes, etc. </span></div> Infectivity: <span id="infectivity-disp"></span>%</p>
</div>
<div class="header-container">
<p><div class="tooltip material-icons">info<span class="tooltiptext"> This is the radius around an individual where other could become infected. This represents the pathogen's means of propogation, i.e., sneezes, physical contact, etc. </span></div> Transmission radius: <span id="radius-disp"></span> inches</p>
</div>
<br>
<br>
<input type="range" min="1" max="100" value="10" class="slider" id="infectivity-slider">
<input type="range" min="2" max="50" value="20" class="slider" id="radius-slider">
<br>
<div class="header-container">
<p><div class="tooltip material-icons">info<span class="tooltiptext"> This is the probability that an individual will restrain itself from moving within another individual's transmission radius. This represents maintaining a safe distance between people. </span></div> Interpersonal social distancing: <span id="distancing-disp"></span>%</p>
</div>
<div class="header-container">
<p><div class="tooltip material-icons">info<span class="tooltiptext"> This is the probability that an individual will restrain itself from visiting individuals outside of its family group. This represents meeting family or friends that you would not normally come into contact with on a daily basis. </span></div> Interfamilial social distancing: <span id="family-distancing-disp"></span>%</p>
</div>
<br>
<br>
<input type="range" min="0" max="100" value="0" class="slider" id="distancing-slider">
<input type="range" min="0" max="100" value="100" class="slider" id="family-distancing-slider">
<br>
<div class="header-container">
<p><div class="tooltip material-icons">info<span class="tooltiptext"> This is the probability that an individual will restrain itself from visiting a common meeting area. This represents staying away from location with high foot traffic such as stores, trains, etc. </span></div> Common zone avoidance: <span id="meeting-distancing-disp"></span>%</p>
</div>
<div class="header-container">
<p><div class="tooltip material-icons">info<span class="tooltiptext"> This is the amount of time it take an individual to recover from an infection and become immune. </span></div> Duration: <span id="duration-disp"></span> seconds</p>
</div>
<br>
<br>
<input type="range" min="0" max="100" value="100" class="slider" id="meeting-distancing-slider">
<input type="range" min="3" max="59" value="15" class="slider" id="duration-slider">
<br>
<center>
<button id="pause-button" disabled><i class="material-icons">pause</i></button>
<button id="play-button"><i class="material-icons">play_arrow</i></button>
<button id="reset-button"><i class="material-icons">replay</i></button>
</center>
</div>
<script src="virusSim.js"></script>
</body>
</html>