Lab 6: Midterm Sample Question Solutions

1. HTML/CSS Interpreting (30 points)

The desired rendering is as follows:

Oh, WOW, what a well designed page!!

another cow

cow

I never saw a purple cow,
I never hope to see one.
But I can tell you anyhow
I'd rather see than be one.

3. HTML/CSS Interpreting (30 points)

The solution of the rendered gradient (from gradient.js) is as follows:

window.onload = initializeBody;

function initializeBody() {
	var gradient = document.getElementById("gradient");
	for (var i = 0; i < 20; i++) {
		var square = document.createElement("div");
		var color = 255 - 10 * i;
		var xy = 10 * i;
		var size = 400 - 2 * xy;
		square.style.backgroundColor = "rgb(" +color + ", " + color + ", " + color + ")";
		square.style.width = size + "px";
		square.style.height = size + "px";
		square.style.position = "absolute";
		square.style.left = xy + "px";
		square.style.top = xy + "px";
		gradient.appendChild(square);
	}
}