Skip to content

Instantly share code, notes, and snippets.

@mbmjertan

mbmjertan/Galton.html Secret

Created Sep 12, 2020
Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<title>Galton board</title>
<style>
body{
font-family: 'Helvetica', 'Roboto', 'Arial', sans-serif;
}
.interface{
position: fixed;
top: 20px;
left: 1080px;
}
.bin{
width: 70px;
height: 900px;
border-left: 3px solid black;
border-right: 3px solid black;
border-bottom: 3px solid black;
display: inline-block;
position: fixed;
bottom: 3px;
word-break: break-all;
}
#bin1{
left: 0;
}
#bin2{
left: 80px;
}
#bin3{
left: 160px;
}
#bin4{
left: 240px;
}
#bin5{
left: 320px;
}
#bin6{
left: 400px;
}
#bin7{
left: 480px;
}
#bin8{
left: 560px;
}
#bin9{
left: 640px;
}
#bin10{
left: 720px;
}
#bin11{
left: 800px;
}
#bin12{
left: 880px;
}
#bin13{
left: 960px;
}
.bin span{
position: absolute;
bottom: 0;
right: 0;
}
</style>
<script>
function dropBeans(){
for(var i=0;i<document.querySelector('#numberOfBeans').value;i++){
var dropIn = selectBin();
document.querySelector('#bin'+dropIn).children[0].innerHTML = document.querySelector('#bin'+dropIn).children[0].innerHTML + '*';
}
}
function selectBin(){
var position=1;
for(var k=0;k<12;k++){
position+=Math.trunc((Math.random()+0.5));
}
return position;
}
</script>
</head>
<body>
<div class="bin" id="bin1">
<span></span>
</div>
<div class="bin" id="bin2">
<span></span>
</div>
<div class="bin" id="bin3">
<span></span>
</div>
<div class="bin" id="bin4">
<span></span>
</div>
<div class="bin" id="bin5">
<span></span>
</div>
<div class="bin" id="bin6">
<span></span>
</div>
<div class="bin" id="bin7">
<span></span>
</div>
<div class="bin" id="bin8">
<span></span>
</div>
<div class="bin" id="bin9">
<span></span>
</div>
<div class="bin" id="bin10">
<span></span>
</div>
<div class="bin" id="bin11">
<span></span>
</div>
<div class="bin" id="bin12">
<span></span>
</div>
<div class="bin" id="bin13">
<span></span>
</div>
<div class="interface">
<h1>A simple bean machine</h1>
<label for="numberOfBeans">Number of beans</label>
<input type="number" value="1" id="numberOfBeans">
<br>
<input type="button" onclick="dropBeans()" value="Drop beans">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment