mbmjertan/Galton.html Secret

## Galton.html
<!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>
	<!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>