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 the "turtles all the way down" model (commonly but falsely attributed to Hindu mythology) in which the earth rests on the back of an elephant, which in turn rests on the back of infinite tortoises.

Given turtles.html (containing the earth, elephant, and a single tortoise), write the necessary JavaScript code turtles.js to give the page infinitely-scrolling turtles as in this working example.

Exercise : Turtles All the Way Down

To solve this problem you will need to add a turtle to the bottom of the page every time the user scrolls to the bottom. You can attach an onscroll event handler to the document, so that every time the page is scrolled that event handler will be executed. You may also find these useful:

window.scrollY

The portion of the document that has scrolled off-screen above the currently-visible portion.

window.innerHeight

The height of the visible area of the document on-screen.

document.body.getHeight()

The height of the body tag (i.e., the height of the entire page, on- and off-screen). This is a Prototype function.

Exercise : Turtles All the Way Down

When the user has scrolled to the very bottom of the page, the sum of scrollY (the off-screen portion above) and innerHeight (the on-screen portion) will be equal to the height of the body. That's when you'll want to add another turtle — which will grow the body and result in more scrolling.

To add a turtle, simply append to document.body a new div with the class of turtle.

Can you fix the case where the height of the window is greater than the initial height of the animals?

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.getHeight()) {
		var div = document.createElement("div");
		div.className = "turtle";
		document.body.appendChild(div);
	}
}