scripts.js

//This function gets the X and Y coordinates of where the user clicked, relative to the image.
	function getXY(e){
		var xPosition = e.offsetX;
		var yPosition = e.offsetY;
		//Sending x and y to the server.
		sendInfoToServer(xPosition, yPosition);
	}

	//Takes the x and y coordinates passed from the getXY function and sends them to the server to determine whether or not these coordinates are correct for Waldo.
	function sendInfoToServer(x, y){
		//Making a new request.
		var xyRequest = new XMLHttpRequest();
		//This line passes our x and y coordinates into a query string that Sinatra can use and determine what to do with.
		xyRequest.open('GET', 'http://localhost:4567/puzzle01validate?xPos=' + x + '&yPos=' + y);
		//This function executes when the server responds that it received the request. It does what it is instructed to do with those coordinates.
		//Example: If a user clicks "like" on a facebook post, when the server responds that it received the request, only then will it update the like counter.
		xyRequest.onload = saveScore;
		//This line actually sends our request.
		xyRequest.send();
	}