robynitp/index.html

## index.html
<!DOCTYPE HTML>
<html>
 <head>
	<title>Hello World</title>
	<!-- the jquery script from the internet -->
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<!-- your custom javascript -->
  	<script src="onescript.js"></script>
  	<!-- CSS : look at this file to see how things are styled-->
  	<link rel="stylesheet" type="text/css" href="mystyle.css">

 <body>
 	<p>An adventure</p>
  	<button id="myButton">Click me</button>

  	<div id="part1" class="adventure-part">
  		Hello! This is your first task
  	</div>
  	<div id="part2" class="adventure-part">
  		Good job! Now for your 2nd task.
  	</div>
  	<div id="part3" class="adventure-part">
  		Time to start part 3
  	</div>

 </body>
</html>

## mystyle.css
.adventure-part{
	/* start with everything hidden, using CSS display property */
	display:none;
	/* border, margin, etc. */
	border:1px solid #349829;
	margin: 10px;
	padding: 30px;
}

#part1{
	/*start with part 1 visible */
	display:block;
}

## onescript.js
$( document ).ready(function() { // wait for the document to load
	// --- ALL your code goes inside here --- //

	// keep track of which part of the adventure we're on
	var currentPart = 1;
	// you'll eventually need to know which part is the last one
	var totalParts = 3;

	// set an event listener on the button with id "myButton"
	// Documentation: http://api.jquery.com/click/
	$('#myButton').click(myClickFunction);

	function myClickFunction(){
		/*
		   Note:
		   .hide() and .show() in are easy ways in jquery to control the CSS display property
		   See the CSS file to see how display:none and display:block work

		   Documentation:
		   http://api.jquery.com/show/
		   http://api.jquery.com/hide/
		   (scroll down to the example in both these jquery doc pages)

		   http://learnlayout.com/display.html
		*/

		// first hide ALL the parts -- everything with a class called 'adventure-part'
		$('.adventure-part').hide();

		// move to the next part
		currentPart++;

		// the ids of the divs are 'part1', 'part2', etc.
		// make the part name selector  ( '#part1', '#part2', etc)
		var partname = '#part'+currentPart; // will produce '#part2', for example

		// Show ONLY the current part
		$(partname).show(); // this is the equivalent of writing $('#part2').show() for example.
	}


}); // end document ready
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Hello World</title>
	<!-- the jquery script from the internet -->
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<!-- your custom javascript -->
	<script src="onescript.js"></script>
	<!-- CSS : look at this file to see how things are styled-->
	<link rel="stylesheet" type="text/css" href="mystyle.css">

	<body>
	<p>An adventure</p>
	<button id="myButton">Click me</button>

	<div id="part1" class="adventure-part">
	Hello! This is your first task
	</div>
	<div id="part2" class="adventure-part">
	Good job! Now for your 2nd task.
	</div>
	<div id="part3" class="adventure-part">
	Time to start part 3
	</div>

	</body>
	</html>
	.adventure-part{
	/* start with everything hidden, using CSS display property */
	display:none;
	/* border, margin, etc. */
	border:1px solid #349829;
	margin: 10px;
	padding: 30px;
	}

	#part1{
	/start with part 1 visible /
	display:block;
	}
	$( document ).ready(function() { // wait for the document to load
	// --- ALL your code goes inside here --- //

	// keep track of which part of the adventure we're on
	var currentPart = 1;
	// you'll eventually need to know which part is the last one
	var totalParts = 3;

	// set an event listener on the button with id "myButton"
	// Documentation: http://api.jquery.com/click/
	$('#myButton').click(myClickFunction);

	function myClickFunction(){
	/*
	Note:
	.hide() and .show() in are easy ways in jquery to control the CSS display property
	See the CSS file to see how display:none and display:block work

	Documentation:
	http://api.jquery.com/show/
	http://api.jquery.com/hide/
	(scroll down to the example in both these jquery doc pages)

	http://learnlayout.com/display.html
	*/

	// first hide ALL the parts -- everything with a class called 'adventure-part'
	$('.adventure-part').hide();

	// move to the next part
	currentPart++;

	// the ids of the divs are 'part1', 'part2', etc.
	// make the part name selector ( '#part1', '#part2', etc)
	var partname = '#part'+currentPart; // will produce '#part2', for example

	// Show ONLY the current part
	$(partname).show(); // this is the equivalent of writing $('#part2').show() for example.
	}



	}); // end document ready