mackenco/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.pgraph {
  background-color: lightgreen;
}

#p1 {
  color: red;
}

#p2 {
  color: blue;
}
</style>
</head>
<body>
  <img id="otter"
   src="http://bit.ly/RGOtter1">
  <h1 id="message">What would you like to give Mr. Otter?</h1>
  <img id="cups"
       class="choice"
       src="http://bit.ly/RG-Cups">
  <img id="ball"
       class="choice"
       src="http://bit.ly/RG-balls">
<script id="jsbin-javascript">
$("#cups").click(function() {
  $("#message").text("Mr. Otter hates this gift");
  $("#otter").attr("src", "http://bit.ly/RGOtter-2");
});

$("#ball").click(function() {
  $("#message").text("Mr. Otter loooves this gift");
  $("#otter").attr("src", "http://bit.ly/RGOtter-3");
});
</script>


<script id="jsbin-source-css" type="text/css">.pgraph {
  background-color: lightgreen;
}

#p1 {
  color: red;
}

#p2 {
  color: blue;
}

</script>

<script id="jsbin-source-javascript" type="text/javascript">$("#cups").click(function() {
  $("#message").text("Mr. Otter hates this gift");
  $("#otter").attr("src", "http://bit.ly/RGOtter-2");
});

$("#ball").click(function() {
  $("#message").text("Mr. Otter loooves this gift");
  $("#otter").attr("src", "http://bit.ly/RGOtter-3");
});</script></body>
</html>

## jsbin.qomoji.css
.pgraph {
  background-color: lightgreen;
}

#p1 {
  color: red;
}

#p2 {
  color: blue;
}

## jsbin.qomoji.js
$("#cups").click(function() {
  $("#message").text("Mr. Otter hates this gift");
  $("#otter").attr("src", "http://bit.ly/RGOtter-2");
});

$("#ball").click(function() {
  $("#message").text("Mr. Otter loooves this gift");
  $("#otter").attr("src", "http://bit.ly/RGOtter-3");
});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.pgraph {
	background-color: lightgreen;
	}

	#p1 {
	color: red;
	}

	#p2 {
	color: blue;
	}
	</style>
	</head>
	<body>
	<img id="otter"
	src="http://bit.ly/RGOtter1">
	<h1 id="message">What would you like to give Mr. Otter?</h1>
	<img id="cups"
	class="choice"
	src="http://bit.ly/RG-Cups">
	<img id="ball"
	class="choice"
	src="http://bit.ly/RG-balls">
	<script id="jsbin-javascript">
	$("#cups").click(function() {
	$("#message").text("Mr. Otter hates this gift");
	$("#otter").attr("src", "http://bit.ly/RGOtter-2");
	});

	$("#ball").click(function() {
	$("#message").text("Mr. Otter loooves this gift");
	$("#otter").attr("src", "http://bit.ly/RGOtter-3");
	});
	</script>


	<script id="jsbin-source-css" type="text/css">.pgraph {
	background-color: lightgreen;
	}

	#p1 {
	color: red;
	}

	#p2 {
	color: blue;
	}

	</script>

	<script id="jsbin-source-javascript" type="text/javascript">$("#cups").click(function() {
	$("#message").text("Mr. Otter hates this gift");
	$("#otter").attr("src", "http://bit.ly/RGOtter-2");
	});

	$("#ball").click(function() {
	$("#message").text("Mr. Otter loooves this gift");
	$("#otter").attr("src", "http://bit.ly/RGOtter-3");
	});</script></body>
	</html>