punit-kulal · March 5, 2017 04:11
diff --git a/Match_Game.html b/Match_Game.html
 <html>
 <head>
 	<title>assesmentp2</title>
 	<style>
 	div { position: absolute; height: 500px;width: 500px;}
 	#right { left: 500px;
 		border-left: 1px solid black;}
 	img{position: absolute;}
 	</style>
 	<script>
 	var no_of_images,gamemode=true;
 	var leftside,rightside,thebody;
 	function start_game(){
 		thebody = document.getElementsByTagName("BODY")[0];	
 		leftside = document.getElementById("left");
 		rightside = document.getElementById("right");
 		create_images(5);
 	}	
 	function create_images(parameter) {
 		if(gamemode)
 		{	
 			no_of_images = parameter;
 			var count =0;
 			while (count<no_of_images)
 			{
 				random_top = Math.floor(Math.random()*400);
 				random_right= Math.floor(Math.random()*400);
 				var image_node = document.createElement("img");
 				image_node.setAttribute("src","http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png");
 				image_node.style.top = random_top+"px";
 				image_node.style.left = random_right+"px";
 				leftside.appendChild(image_node);
 				setevent(count,image_node);
 				count++;
 			}
 			var clone = leftside.cloneNode(true);
 			rightside.appendChild(clone);
 			var last = rightside.firstChild.lastChild;
 			rightside.firstChild.removeChild(last);
 			thebody.addEventListener("click",bodyclick);
 		}
 	}
 	function setevent(count,image_node){
 		if (count==no_of_images-1)
 		{
 			image_node.addEventListener("click",correctanswer);
 		}
 		else
 		image_node.addEventListener("click",wronganswer);	


 	}
 	function bodyclick(){
 		alert("Clcik on the correct face ");
 	}
 	function correctanswer(){
 		event.stopPropagation();
 		alert("Your clicked the right picture");
 		clear_node();
 		thebody.removeEventListener("click",bodyclick);
 		create_images(no_of_images+5);

 	}
 	function wronganswer(){
 		event.stopPropagation();
 		alert("Sorry,Game over");
 		clear_node();
 		gamemode = false;
 	}
 	function clear_node()
 	{
 		while(leftside.firstChild)
 		{
 			leftside.removeChild(leftside.firstChild);
 		}
 		while(rightside.firstChild)
 		{
 			rightside.removeChild(rightside.firstChild);
 		}

 	}
 	</script>
 </head>
 <body onload="start_game()">
 	<h1>Matching Game</h1>
 	<p>Click on the extra image from the left side</p>
 	<div id="left"></div>
 	<div id="right"></div>
 </body>
 </html>
	<html>
	<head>
	<title>assesmentp2</title>
	<style>
	div { position: absolute; height: 500px;width: 500px;}
	#right { left: 500px;
	border-left: 1px solid black;}
	img{position: absolute;}
	</style>
	<script>
	var no_of_images,gamemode=true;
	var leftside,rightside,thebody;
	function start_game(){
	thebody = document.getElementsByTagName("BODY")[0];
	leftside = document.getElementById("left");
	rightside = document.getElementById("right");
	create_images(5);
	}
	function create_images(parameter) {
	if(gamemode)
	{
	no_of_images = parameter;
	var count =0;
	while (count<no_of_images)
	{
	random_top = Math.floor(Math.random()*400);
	random_right= Math.floor(Math.random()*400);
	var image_node = document.createElement("img");
	image_node.setAttribute("src","http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png");
	image_node.style.top = random_top+"px";
	image_node.style.left = random_right+"px";
	leftside.appendChild(image_node);
	setevent(count,image_node);
	count++;
	}
	var clone = leftside.cloneNode(true);
	rightside.appendChild(clone);
	var last = rightside.firstChild.lastChild;
	rightside.firstChild.removeChild(last);
	thebody.addEventListener("click",bodyclick);
	}
	}
	function setevent(count,image_node){
	if (count==no_of_images-1)
	{
	image_node.addEventListener("click",correctanswer);
	}
	else
	image_node.addEventListener("click",wronganswer);


	}
	function bodyclick(){
	alert("Clcik on the correct face ");
	}
	function correctanswer(){
	event.stopPropagation();
	alert("Your clicked the right picture");
	clear_node();
	thebody.removeEventListener("click",bodyclick);
	create_images(no_of_images+5);

	}
	function wronganswer(){
	event.stopPropagation();
	alert("Sorry,Game over");
	clear_node();
	gamemode = false;
	}
	function clear_node()
	{
	while(leftside.firstChild)
	{
	leftside.removeChild(leftside.firstChild);
	}
	while(rightside.firstChild)
	{
	rightside.removeChild(rightside.firstChild);
	}

	}
	</script>
	</head>
	<body onload="start_game()">
	<h1>Matching Game</h1>
	<p>Click on the extra image from the left side</p>
	<div id="left"></div>
	<div id="right"></div>
	</body>
	</html>