alexpelan · February 5, 2017 02:26
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Tiny Turtle</title>
  <script src="https://toolness.github.io/tiny-turtle/tiny-turtle.js"></script>
 </head>
 <body>
    <h1>Tiny Turtle</h1>
    <canvas></canvas>
    <button class="change-color">Change color</button>
 </body>
 </html>
diff --git a/popcode.json b/popcode.json
 {"enabledLibraries":["jquery"]}
diff --git a/script.js b/script.js
 // Tiny Turtle Setup. Avoid modifying these lines of code!
 var adjCanvasSize = document.getElementsByTagName('canvas')[0];
 adjCanvasSize.width  = 400;
 adjCanvasSize.height = 400;
 TinyTurtle.apply(window);

 // Start here

 // 1. Define a variable named sideLength and set it to 90

 // 2. This value for a right angle is wrong - fix it so the
 //    variable 'rightAngle' is equal to the number of degrees
 //    in a right angle.
 var rightAngle = 100;
 penStyle = 'red';

 // 3. We want to draw a square. Finish this code that
 //    draws the first side of the square so we get a 
 //    complete square. You should only use variables
 //    as arguments to the functions
 forward(sideLength);
 right(rightAngle);

 // 4. This code changes the color of the square to blue 
 //    when the button is clicked. Change the code so it 
 //    changes the color to green instead.
 $(".change-color").click(function() {
    penStyle = "blue";
 });

 // 5. YOU DO: Draw another shape with 5 or more sides.
 //    You can only pass variables as arguments - there should
 //    not be any numbers. The shape can look however you want
 //    it to - so you may need several variables.
 //    penUp() and penDown() may be helpful if you want to move
 //    the pen to your starting place.
diff --git a/styles.css b/styles.css
 canvas {
    border: 1px solid black;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Tiny Turtle</title>
	<script src="https://toolness.github.io/tiny-turtle/tiny-turtle.js"></script>
	</head>
	<body>
	<h1>Tiny Turtle</h1>
	<canvas></canvas>
	<button class="change-color">Change color</button>
	</body>
	</html>
	// Tiny Turtle Setup. Avoid modifying these lines of code!
	var adjCanvasSize = document.getElementsByTagName('canvas')[0];
	adjCanvasSize.width = 400;
	adjCanvasSize.height = 400;
	TinyTurtle.apply(window);

	// Start here

	// 1. Define a variable named sideLength and set it to 90

	// 2. This value for a right angle is wrong - fix it so the
	// variable 'rightAngle' is equal to the number of degrees
	// in a right angle.
	var rightAngle = 100;
	penStyle = 'red';

	// 3. We want to draw a square. Finish this code that
	// draws the first side of the square so we get a
	// complete square. You should only use variables
	// as arguments to the functions
	forward(sideLength);
	right(rightAngle);

	// 4. This code changes the color of the square to blue
	// when the button is clicked. Change the code so it
	// changes the color to green instead.
	$(".change-color").click(function() {
	penStyle = "blue";
	});

	// 5. YOU DO: Draw another shape with 5 or more sides.
	// You can only pass variables as arguments - there should
	// not be any numbers. The shape can look however you want
	// it to - so you may need several variables.
	// penUp() and penDown() may be helpful if you want to move
	// the pen to your starting place.