-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
213 lines (178 loc) · 13 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
<!DOCTYPE html>
<html data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="Open online practice test featuring a massive collection of Science Olympiad fermi problems, constantly updated from the 2022-2023 and previous seasons.">
<title>Science Olympiad Fermi Practice Questions</title>
<script type="text/javascript" language="javascript" src="data.js"></script>
<script type="text/javascript" language="javascript" src="creditMap.js"></script>
<script type="text/javascript" language="javascript" src="corrections.js"></script>
<script type="text/javascript" language="javascript" src="fermi.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JV52LZ42NM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-JV52LZ42NM');
</script>
</head>
<body>
<div class="container-md text-center">
<div class="row mt-3 d-none d-md-block"></div>
<div class="mt-4 me-1 float-end">
<button id="dark-mode" class="px-2 btn btn-outline-dark border-0 btn-sm darkoff btn-top">
<i class="bi bi-moon-stars-fill"></i>
</button>
</div>
<div class="mt-4 me-1 float-end">
<button id="stats-info" class="px-2 btn btn-outline-dark border-0 btn-sm darkoff btn-top "data-bs-toggle="tooltip" data-bs-placement="bottom"
title="Visited: 0<br>
Answered: 0<br>
Points: 0<br>
Accuracy: 0" data-bs-html="true">
<i class="bi bi-bar-chart-fill"></i>
</button>
</div>
<div id="top-text" class="row me-0 ps-4 justify-content-center text-dark apply-bright-text">
<h1 class="display-4 mt-4 mb-1 ms-4 text-center">SciOly Fermi Practice</h1>
</div>
<div class="row justify-content-center text-dark apply-bright-text">
<p class="lead fw-light text-center mt-2 mb-0"> 4000+ updated fermi problem set</p>
<p class="lead fw-light text-center py-0 mb-0"> <a class="text-decoration-none" data-bs-toggle="collapse" href="#collapseExample" role="button">
More info <small><i class="bi bi-chevron-down"></i></small>
</a></p>
<div class="collapse mb-1 " id="collapseExample">
<div class="card card-body border-0 p-0 m-1 text-start" >
<p>
This website is an open source practice test for the Science Olympiad event Fermi Questions. The question bank will be constantly updated throughout the 2023-2024 season. <br>
<br>
<i>How does this practice website (and fermi estimation in general) work?</i><br>
A <b>Fermi question</b> is one where a seemingly impossible-to-calculate answer is estimated. A famous example of a Fermi question is
"How many licks does it take to get to the center of a tootsie roll pop?", where there is very little data to use and assumptions must be made.
(Scioly Wiki)<br>
<br>
This website uses the same answer and points format as outlined in the Science Olympiad rules manual.
All answers are written as the closest power of 10. For example, an estimate of 2000 would be written as 3, since 2000 = 2 x 10^3. An estimate of 5000 would be written as 4, since 5000 = 5 x 10^3 with rounding up. Scoring is based on how close your fermi answer is to the actual answer. <br>
5 points for the correct power of ten (Blue) <br>
3 points for difference of 1 (Green) <br>
1 point for difference of 2 (Yellow) <br>
0 points for difference of 3 or more (Red) <br>
<br>
<i>How does Question Search option change the UI controls?</i><br>
<b>Submit</b> - Submits your answer to the question if you put in a number. Initiates question search otherwise.</li> <br>
<b>Question Search</b> - Finds the question based on the attribution (italicized problem credits) you put in the search bar.
Right now, the attribution search crieterion must be exact, so copy-pasting is recommended.
All invitational attributions follow the same format: TOURNAMENT_NAME YEAR1-YEAR2, #QUESTION_NUMBER</li> <br>
<b>Back/Forward</b> - Go to the previous/next question in the dataset, normal mode is based on order of questions you answered</li> <br>
These changes also apply to key commands (Enter, Left Arrow, Right Arrow) <br>
<br>
<i>What are some helpful resources for starting out?</i><br>
<a href="https://scioly.org/wiki/index.php/Fermi_Questions">Scioly Wiki</a> is the best place to start<br>
<a href="https://drive.google.com/file/d/1bNZ-b92JcsdF21AEX-XSyURvzVcV1JS2/view">A Brief Introduction to Fermi Questions</a> by Caleb Chiang<br>
<br>
For information about the dataset or contributions, visit the GitHub repository <a href="https://github.com/landy8697/open-scioly-fermi">here</a>.<br>
For general questions/concerns/issues or for contributing questions contact me on Discord(Username: randomeclipse) or on the SciOly community server #fermi-questions channel <br>
</p>
</div>
</div>
</div>
<div class="row justify-content-center my-2">
<div class="col-md">
<div class="card ">
<div id="question-box" class="rounded-2 card-body text-start text-wrap text-dark apply-bright-text">
<p>Question: If every bacterium in stool produced by every person on Earth was instead a molecule of gold,
how many moles of gold would be produced in a day?
</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center my-2">
<div class="col-md">
<div id="answer-alert" class="my-0 py-0">
<div class="alert alert-info my-2" style="white-space: pre-line" role="alert"> Press button or click enter to submit
Use arrow buttons or left/right keys for navigation (only submitted questions)
</div>
</div>
<div id="change-alert" class="my-0 py-0 d-none" >
<div class="alert alert-info my-2" role="alert">
<i class="bi bi-info-circle"></i> The original answer was ___
</div>
</div>
</div>
</div>
<div class="row align-items-center justify-content-center my-1">
<div class="col-auto">
<div class="input-group mb-3">
<span id="text-entry-help" class="input-group-text text-dark apply-bright-text">Answer</span>
<input type="number" id="answer-box" placeholder="Your Fermi Answer" class="form-control text-dark apply-bright-text" value="" />
</div>
</div>
<div class="col-auto">
<div class="button-group mb-3">
<button id="submit" type="button" class="btn btn-primary btn-main text-light">Submit</button>
<div class="btn-group">
<button id="new-question" type="button" class="btn btn-success btn-main text-light pe-1 text-center">New Question</button>
<button id="dropdown" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split btn-main text-light px-1" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><button id="change-new" class="dropdown-item" type="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Get random questions">New Question</button></li>
<li><button id="change-search" class="dropdown-item" type="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find specific questions">Search Question</button></li>
<li><button id="change-corrections" class="dropdown-item" type="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Display corrections only (WIP)">Display Corrections</button></li>
</ul>
</div>
<div class="btn-group" role="group">
<button id="back" type="button" class="btn btn-outline-secondary px-2" >
<i class="bi bi-chevron-left"></i>
</button>
<button id="forward" type="button" class="btn btn-outline-secondary px-2" >
<i class="bi bi-chevron-right"></i>
</button>
</div>
</div>
</div>
<div>
</div>
</div>
<div class="row justify-content-center mb-3">
<div class="col-auto">
<button id="toggleform" type="button" class="btn btn-outline-danger mb-1" >
Change/Correct this problem
</button>
<button id="update-form-fill" type="button" class="btn btn-outline-danger mb-1" >
Update attribution
</button>
</div>
</div>
<div id= "form-div" class="d-none row">
<iframe allowtransparency="true" style="background-color: transparent;"
src="https://docs.google.com/forms/d/e/1FAIpQLScFDhEvsuNndv-dBOCi_y-N7y1h_lsP0KbZvBJeMXq7KQPVTg/viewform?embedded=true"
width="640" height="1274" frameborder="0" marginheight="0" marginwidth="0"
>Loading…</iframe>
</div>
<div class="row justify-content-center mt-3">
<p class="lead fw-light text-center mt-0 mb-0">If this project is helpful to you, please consider giving it a
<!-- Place this tag where you want the button to render. -->
<span class="mt-5">
<a class="github-button" href="https://github.com/landy8697/open-scioly-fermi" data-color-scheme="light"
data-icon="octicon-star" aria-label="Star landy8697/open-scioly-fermi on GitHub">Star</a><br></p>
</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
<script type='text/javascript'>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl, {trigger: "hover"});
})
</script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>