-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
54 lines (50 loc) · 4.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monty Hall Problem Simulation</title>
<link rel="stylesheet" href="montyhall.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-bar">
<li class="headingt">
Monty Hall Problem<br>Simulation
</li>
<li class="sliderContainer">
<input type="range" value="3" min="3" max="slidermax" id="slider">
<span id="output"></span>
<!-- <img src="scale.svg" alt="" class="c-bar_line-img"> -->
</li>
<li class="refreshbox">
<div class="refresh">
<svg class="icon" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m23.8995816 10.3992354c0 .1000066-.1004184.1000066-.1004184.2000132 0 0 0 .1000066-.1004184.1000066-.1004184.1000066-.2008369.2000132-.3012553.2000132-.1004184.1000066-.3012552.1000066-.4016736.1000066h-6.0251046c-.6025105 0-1.0041841-.4000264-1.0041841-1.00006592 0-.60003954.4016736-1.00006591 1.0041841-1.00006591h3.5146443l-2.8117154-2.60017136c-.9037657-.90005932-1.9079498-1.50009886-3.0125523-1.90012523-2.0083682-.70004614-4.2175733-.60003954-6.12552305.30001977-2.0083682.90005932-3.41422594 2.50016478-4.11715481 4.5002966-.20083682.50003295-.80334728.80005275-1.30543933.60003954-.50209205-.10000659-.80334728-.70004613-.60251046-1.20007909.90376569-2.60017136 2.71129707-4.60030318 5.12133891-5.70037568 2.41004184-1.20007909 5.12133894-1.30008569 7.63179914-.40002637 1.4058578.50003296 2.7112971 1.30008569 3.7154812 2.40015819l3.0125523 2.70017795v-3.70024386c0-.60003955.4016736-1.00006591 1.0041841-1.00006591s1.0041841.40002636 1.0041841 1.00006591v6.00039545.10000662c0 .1000066 0 .2000132-.1004184.3000197zm-3.1129707 3.7002439c-.5020921-.2000132-1.1046025.1000066-1.3054394.6000396-.4016736 1.1000725-1.0041841 2.200145-1.9079497 3.0001977-1.4058578 1.5000989-3.5146444 2.3001516-5.623431 2.3001516-2.10878662 0-4.11715482-.8000527-5.72384938-2.4001582l-2.81171548-2.6001714h3.51464435c.60251046 0 1.0041841-.4000263 1.0041841-1.0000659 0-.6000395-.40167364-1.0000659-1.0041841-1.0000659h-6.0251046c-.10041841 0-.10041841 0-.20083682 0s-.10041841 0-.20083682 0c0 0-.10041841 0-.10041841.1000066-.10041841 0-.20083682.1000066-.20083682.2000132s0 .1000066-.10041841.1000066c0 .1000066-.10041841.1000066-.10041841.2000132v.2000131.1000066 6.0003955c0 .6000395.40167364 1.0000659 1.0041841 1.0000659s1.0041841-.4000264 1.0041841-1.0000659v-3.7002439l2.91213389 2.8001846c1.80753138 2.0001318 4.31799163 3.0001977 7.02928871 3.0001977 2.7112971 0 5.2217573-1.0000659 7.1297071-2.9001911 1.0041841-1.0000659 1.9079498-2.3001516 2.4100418-3.7002439.1004185-.6000395-.2008368-1.2000791-.7029288-1.3000857z" transform=""/></svg>
</div>
</li>
</div>
<!-- <div class="controls">
<label for="doorCount">Number of Doors: </label>
<input type="range" id="doorCount" min="3" max="20" value="3" />
<span id="doorCountDisplay">3</span>
</div>
-->
<div class="maincontent">
<div class="door-container" id="doorContainer"></div>
<div class="textcontainer">
<button class="expand-button" onclick="toggleText()">Explanation</button>
<div class="text-content">
<!-- The content you want to reveal goes here -->
<p>
Switching the door increases your chances of finding the coin!<br><br>
Why? Initially, the chance of finding the coin behind your first chosen door was only 1/<span class="door-number"></span>. In contrast, the chance that the coin was behind any one of the other <span class="door-number-minus-one"></span> doors was <span class="door-number-minus-one"></span>/<span class="door-number"></span>. After eliminating all but one of these other doors, the probability of the coin being behind the remaining unchosen door is now higher than your original door, making it the statistically better choice to switch!
<br><br>Therefore, after switching, the probability of finding the coin is <span class="door-number-minus-one"></span>/<span class="door-number"></span>
</p>
</div>
</div>
</div>
<script src="montyhall.js"></script>
</body>
</html>