Exercise : Turtles All the Way Down

A well-known scientist (some say it was Bertrand Russell) once gave a public lecture on astronomy. He described how the earth orbits around the sun and how the sun, in turn, orbits around the center of a vast collection of stars called our galaxy. At the end of the lecture, a little old lady at the back of the room got up and said: What you have told us is rubbish. The world is really a flat plate supported on the back of a giant tortoise. The scientist gave a superior smile before replying, What is the tortoise standing on? You're very clever, young man, very clever, said the old lady. But it's turtles all the way down!

— Stephen Hawking, A Brief History of Time

(see also: Turtles all the way down on Wikipedia)

Exercise : Turtles All the Way Down

• We will implement a version of "turtles all the way down" in which the earth rests on the back of an elephant, which in turn rests on the back of infinite tortoises.
• The provided turtles.html contains the earth, elephant, and a single tortoise.
• Write the JavaScript code turtles.js to give the page infinitely-scrolling turtles. (sample solution)
• You will need to add a new turtle to the bottom of the page every time the user scrolls to the bottom. To add a turtle, append to document.body a new div with the class of turtle. (See next slide for more implementation details.)

Exercise : Implementation Details / Hints

Use these events and properties to help you implement your solution:

document.onscroll

An event that occurs when the user moves the scrollbar.

document.body.scrollHeight

The height of the entire web page.

window.scrollY

The number of pixels that we have currently scrolled down from the top of the page.

window.innerHeight

The height of the visible area of the page currently on-screen.

Exercise Solution

window.onload = function() {
	document.onscroll = turtles;
	turtles(); // in case window height is initially taller than animals
};

function turtles() {
	while (window.scrollY + window.innerHeight >= document.body.scrollHeight) {
		var div = document.createElement("div");
		div.className = "turtle";
		document.body.appendChild(div);
	}
}