-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
271 lines (217 loc) · 11.9 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!doctype html>
<html lang="en">
<head>
<title>Binomial Calc</title>
<meta charset="utf-8">
<meta name="title=" content="Binomial Calc">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Use Binomial Calc to calculate the probabilities of binomial distributions and see them represented by interactve graphs">
<meta name="keywords" content="binomial, calculator, calc, statistics, stats, probability, distribution">
<meta class="meta-theme" name="theme-color" content="#ccc">
<meta class="meta-theme" name="msapplication-navbutton-color" content="#ccc">
<meta class="meta-theme" name="apple-mobile-web-app-status-bar-style" content="#ccc">
<link rel="icon" href="img/favicon.png" type="image/png" sizes="48x48">
<link rel="stylesheet" href="styles.css">
<link id="nightStyles" rel="stylesheet" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="scripts.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>
</head>
<body>
<div class="container">
<h1 class="text-center"> <img id="icon" src="img/icon-nocircle.svg" width="64px" alt="Binomial Calc icon"> Binomial Distribution Calculator</h1>
<h5>by <a href="https://justingolden.me" target="_blank">Justin Golden</a></h5>
<div class="table-responsive">
<table class="table table-striped table-bordered table-condensed">
<tr>
<td><p>Probability of success (single trial)</p></td>
<td><label for="pInput">p</label></td>
<td><input autofocus id="pInput" class="form-control" type="number" value="0.5" step=".1" min="0" max="1"><br></td>
</tr>
<tr>
<td><p>Number of trials</p></td>
<td><label for="nInput">n</label></td>
<td><input id="nInput" class="form-control" type="number" value="40" min="0" max="999"><br></td>
</tr>
<tr>
<td><p>Number of successes</p></td>
<td><label for="xInput">x</label></td>
<td><input id="xInput" class="form-control" type="number" value="18" min="0" max="999"><br></td>
</tr>
<tr>
<td><div id="errorAlert" class="alert alert-warning"><p id="errorP"></p></div></td>
<td><button class="btn btn-default" onclick="calc()" type="button">
Calculate
<i class="material-icons icon-outlined">arrow_right_alt</i>
</button></td>
<td><button id="clearButton" class="btn btn-default" type="button">
Clear
<i class="material-icons icon-outlined">clear_all</i>
</button></td>
</tr>
<tr title="Probability that number of sucesses is exactly equal to x">
<td>Binomial probability</td>
<td><label for="equalOutput" class="text-blue">P(X = x) <img class="diagram" src="img/icon-equal.png" alt="Visual representation of P(X=x)"></label></td>
<td><input id="equalOutput" class="form-control" disabled value="" type="number">
<button type="button" class="btn btn-default btn-sm copy" title="Copy">
<i class="material-icons icon-outlined">file_copy</i>
</button>
</td>
</tr>
<tr title="Probability that number of sucesses is less than x">
<td>Cumulative probability</td>
<td><label for="lessOutput" class="text-red">P(X < x) <img class="diagram" src="img/icon-less.png" alt="Visual representation of P(X<x)"></label></td>
<td><input id="lessOutput" class="form-control" disabled value="" type="number">
<button type="button" class="btn btn-default btn-sm copy" title="Copy">
<i class="material-icons icon-outlined">file_copy</i>
</button>
</td>
</tr>
<tr title="Probability that number of sucesses is greater than x">
<td>Cumulative probability</td>
<td><label for="greaterOutput" class="text-green">P(X > x) <img class="diagram" src="img/icon-greater.png" alt="Visual representation of P(X>x)"></label></td>
<td><input id="greaterOutput" class="form-control" disabled value="" type="number">
<button type="button" class="btn btn-default btn-sm copy" title="Copy">
<i class="material-icons icon-outlined">file_copy</i>
</button>
</td>
</tr>
<tr title="Probability that number of sucesses is less than or equal to x">
<td>Cumulative probability</td>
<td><label for="lessEqualOutput">P(X ≤ x) <img class="diagram" src="img/icon-less-equal.png" alt="Visual representation of P(X<=x)"></label></td>
<td><input id="lessEqualOutput" class="form-control" disabled value="" type="number">
<button type="button" class="btn btn-default btn-sm copy" title="Copy">
<i class="material-icons icon-outlined">file_copy</i>
</button>
</td>
</tr>
<tr title="Probability that number of sucesses is greater than or equal to x">
<td>Cumulative probability</td>
<td><label for="greaterEqualOutput">P(X ≥ x) <img class="diagram" src="img/icon-greater-equal.png" alt="Visual representation of P(X>=x)"></label></td>
<td><input id="greaterEqualOutput" class="form-control" disabled value="" type="number">
<button type="button" class="btn btn-default btn-sm copy" title="Copy">
<i class="material-icons icon-outlined">file_copy</i>
</button>
</td>
</tr>
<tr title="Number of combinations of x elements chosen out of n options">
<td>N Choose X</td>
<td><label for="chooseOutput"><sub>n</sub>C<sub>x</sub> <!-- <img class="diagram" src="img/icon-nchoosek.png" alt="Icon of n choose k"> --></label></td>
<td><input id="chooseOutput" class="form-control" disabled value="" type="number">
<button type="button" class="btn btn-default btn-sm copy" title="Copy">
<i class="material-icons icon-outlined">file_copy</i>
</button>
</td>
</tr>
</table>
</div>
<p id="infoP" class="text-center"></p>
</div>
<div id="piechart"></div>
<button type="button" id="downloadPieChartButton" class="btn btn-default" title="Download Pie Chart Image">
<i class="material-icons">save_alt</i>
</button>
<div id="barchart"></div>
<button type="button" id="downloadBarChartButton" class="btn btn-default" title="Download Bar Chart Image">
<i class="material-icons">save_alt</i>
</button>
<hr>
<button type="button" id="learnModalButton" class="btn btn-default btn-lg" data-toggle="modal" data-target="#learnModal" title="About binomial distributions">
<i class="material-icons">school</i>
</button>
<button type="button" id="infoModalButton" class="btn btn-default btn-lg" data-toggle="modal" data-target="#infoModal" title="Open info">
<i class="material-icons">info</i>
</button>
<button type="button" id="nightButton" class="btn btn-default btn-lg" title="Toggle night mode">
<i class="material-icons">brightness_3</i>
</button>
<button type="button" id="linkButton" class="btn btn-default btn-lg" title="Toggle link parameters">
<i class="material-icons">link_off</i>
</button>
<br><br>
<div class="sharethis-inline-share-buttons"></div>
<br>
<p>© <a href="http://rgbstudios.org" target="_blank">RGB Studios</a> <script>document.write(new Date().getFullYear() )</script> <img id="rgbIcon" src="img/rgb-icon.png" alt="RGB Studios icon"> </p>
<!-- learn modal -->
<div class="modal fade" id="learnModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title"><i class="material-icons">school</i> Binomial Distributions</h3>
</div>
<div class="modal-body">
<!-- https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference -->
<h4>Formulas</h4><br>
<p>
A binomial experiment with <b>n</b> trials, probability of success <b>p</b>, and <b>x</b> successes, has
<br><br>Binomial Probability: $$P(X = x) = _nC_x * p^x * (1 - p)^{n - x}$$
<br><br>Where "n choose x" is: $$(_nC_x) = \frac{n!}{x! (n - x)!}$$
<br>
<br><br>Mean: $$ \mu = n * p$$
<br><br>Variance: $$ \sigma = n * p * (1-p)$$
<br><br>Standard Deviation: $$ \sigma^2 = \sqrt{n * p * (1-p)}$$
</p>
<!-- <br><p><i>Note: You might also see q, which is 1-p, or you may see π used instead of p</i></p> -->
<hr><h4>Requirements</h4><br>
<p>Binomial Experiments must have:</p>
<ul>
<li><b>Trials with 2 outcomes</b> (success or failure)</li>
<li><b>Independent trials</b> (the probability of a particular outcome is constant)</li>
</ul>
<br><p><b>p</b> must be between 0 and 1, <b>n</b> and <b>x</b> must be positive integers where <b>n</b> ≥ <b>x</b></p>
<hr>
<p>Learn more on <a href="https://en.wikipedia.org/wiki/Binomial_distribution" target="_blank">Wikipedia</a>
and <a href="https://www.mathsisfun.com/data/binomial-distribution.html" target="_blank">Math is Fun</a>, or watch a <a href="https://youtu.be/8idr1WZ1A7Q" target="_blank">3Blue1Brown video</a>.</p>
<!-- Link to this modal: -->
Share the link to these formulas:<br>
<input id="learnLink" class="form-control" type="text">
<button type="button" class="btn btn-default btn-sm copy" title="Copy">
<i class="material-icons icon-outlined">file_copy</i>
</button>
</div> <!-- end modal body -->
</div>
</div>
</div> <!-- end modal -->
<!-- info modal -->
<div class="modal fade" id="infoModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title"><i class="material-icons">info</i> About</h3>
</div>
<div class="modal-body">
<p>You can use <kbd>Tab</kbd> and <kbd>Shift</kbd> + <kbd>Tab</kbd> to navigate inputs.</p>
<br><p>You can use <kbd>Enter</kbd> to calculate. Refreshes graph size if you've resized your window.</p>
<br><button class="btn btn-default" title="Open the Android app Play Store page" onclick="window.open('https://play.google.com/store/apps/details?id=org.rgbstudios.binomialdistributioncalculator')"><b> Get the Android app <i class="material-icons">android</i></b></button>
<hr>
<p>Made with <a target="_blank" href="https://developers.google.com/chart">Google Charts</a>,
<a target="_blank" href="https://material.io/icons/">Material Icons</a>,
<a target="_blank" href="https://www.mathjax.org/">MathJax</a>,
<a target="_blank" href="https://getbootstrap.com">Bootstrap</a>, and
<a target="_blank" href="http://imgbot.net">ImgBot</a></p>
<br><p>View this on <a href="https://github.com/rgbstudios/binomial-calc" target="_blank">Github</a></p>
<hr>
<button type="button" class="btn btn-default" title="Contact me" onclick="window.open('mailto:justingolden@rgbstudios.org?subject=Binomial%20Calc')">
<i class="material-icons">email</i> Contact
</button>
<button type="button" class="btn btn-default" title="Donate via PayPal" onclick="window.open('https://www.paypal.me/RGBStudios')">
<i class="material-icons">tag_faces</i> Donate
</button>
<button type="button" id="fullscreenButton" class="btn btn-default" title="Toggle fullscreen">
<i class="material-icons">fullscreen</i> Fullscreen
</button>
</div> <!-- end modal body -->
</div>
</div>
</div> <!-- end modal -->
<!-- load sharethis last -->
<script defer type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5b028bd56d6a0b001193c28c&product=inline-share-buttons' async='async'></script>
</body>
</html>