<!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