carcigenicate/gist:1ea6e5ea54aa1c4c5ea4cb0747a65715

## gistfile1.txt
<html>
		<head>
			<style>
				img {
					position: absolute;
				}
				div {
					position: absolute;
					width: 500px;
					height: 500px;
				}
				#rightSide {
					left: 500px;
					border-left: 1px solid black;
				}
			</style>
		</head>
		<body onload = "generateFaces()">
			<h1>Matching Game</h1>
			<p>Click on the extra smiling face on the left.</p>
			<div id="leftSide"></div>
			<div id="rightSide"></div>
			<script>
				var numberOfFaces = 5;
				var count = 0;
				var theLeftSide = document.getElementById("leftSide");
				var theRightSide = document.getElementById("rightSide");
				var theBody = document.getElementsByTagName("body")[0];
				function generateFaces() {
					while (count < numberOfFaces) {
						newImage = document.createElement("img");
						newImage.src = "smile.png";
						newImage.style.top = Math.random() * 400;
						newImage.style.left = Math.random() * 400;
						leftSide.appendChild(newImage);
						count++;
					}
					leftSideImages = leftSide.cloneNode(true);
					leftSideImages.removeChild(leftSideImages.lastChild);
					rightSide.appendChild(leftSideImages);
				}
				theLeftSide.lastChild.onclick = function nextLevel(event) {
													removeAllFaces();
													event.stopPropagation();
													numberOfFaces += 5;
													generateFaces();
													}
				theBody.onclick = function gameOver() {
									alert("Game Over!");
									theBody.onclick = null;
									theLeftSide.lastChild.onclick = null;
									}
				function removeAllFaces(argument){
					while (theLeftSide.firstChild){
						theLeftSide.removeChild(theLeftSide.firstChild);
						}
					while (theRightSide.firstChild){
						theRightSide.removeChild(theRightSide.firstChild);
						}
				}

			</script>
		</body>
	</html>
	<html>
	<head>
	<style>
	img {
	position: absolute;
	}
	div {
	position: absolute;
	width: 500px;
	height: 500px;
	}
	#rightSide {
	left: 500px;
	border-left: 1px solid black;
	}
	</style>
	</head>
	<body onload = "generateFaces()">
	<h1>Matching Game</h1>
	<p>Click on the extra smiling face on the left.</p>
	<div id="leftSide"></div>
	<div id="rightSide"></div>
	<script>
	var numberOfFaces = 5;
	var count = 0;
	var theLeftSide = document.getElementById("leftSide");
	var theRightSide = document.getElementById("rightSide");
	var theBody = document.getElementsByTagName("body")[0];
	function generateFaces() {
	while (count < numberOfFaces) {
	newImage = document.createElement("img");
	newImage.src = "smile.png";
	newImage.style.top = Math.random() * 400;
	newImage.style.left = Math.random() * 400;
	leftSide.appendChild(newImage);
	count++;
	}
	leftSideImages = leftSide.cloneNode(true);
	leftSideImages.removeChild(leftSideImages.lastChild);
	rightSide.appendChild(leftSideImages);
	}
	theLeftSide.lastChild.onclick = function nextLevel(event) {
	removeAllFaces();
	event.stopPropagation();
	numberOfFaces += 5;
	generateFaces();
	}
	theBody.onclick = function gameOver() {
	alert("Game Over!");
	theBody.onclick = null;
	theLeftSide.lastChild.onclick = null;
	}
	function removeAllFaces(argument){
	while (theLeftSide.firstChild){
	theLeftSide.removeChild(theLeftSide.firstChild);
	}
	while (theRightSide.firstChild){
	theRightSide.removeChild(theRightSide.firstChild);
	}
	}

	</script>
	</body>
	</html>