University of Washington, CSE 190 M, Spring 2008
Lab 6: Midterm Review (Thursday, May 8, 2008)

The purpose of this lab is to practice sample midterm problems — with pencil and paper — in preparation for the midterm exam on Friday, May 9, 2008.
You probably won't have enough time to finish all of the exercises; finish as much as you can within the allotted time.

Lab 6: Midterm Review

The midterm exam will consist of three (3) problems:

1. HTML/CSS Interpreting (30 points). This problem will focus on your ability to render some HTML and CSS code. You will be given a snippet of HTML and some CSS which styles it, and you will be asked to draw on your exam paper a representation of how the browser would render it.
2. HTML/CSS Programming (30 points). This problem will focus on your ability to write HTML and CSS code to produce a given outcome. You will be given a screenshot of a portion of a web page, and you will be asked to mark up some given text with HTML, and add CSS styles that will produce the given result.
3. JavaScript Programming (40 points). This problem will focus on your ability to write JavaScript code. You will be given a description and/or demo of a simple behavior or output to reproduce using JavaScript.

Resources

• Your friends & neighbors! This is your chance to talk amongst yourselves and discuss your solutions to the problems. (Of course, you won't be able to do this on the exam!)
• Your TA! If you run into trouble, raise your hand and ask your TA, and they will be able to point you in the right direction. (Again, you won't be able to do this on the exam!)
• Try not to use your computer! You won't have one on the exam, so try to practice without it. If you want to check your work, feel free to do so if you finish before the end of class or on your own at home.

1. HTML/CSS Interpreting (30 points)

Draw a picture of how the following HTML and CSS code will look when the browser renders it onscreen. Indicate any non-default font with a squiggled underline like . You can indicate a background coloring by shading lightly or by drawing repeated diagonal lines like .

<h1 id="foo">Yes, mothers,</h1>
<p>new improved <em>Whizzo</em></p>
<p class="foo">butter containing
   &lt;10% more less&gt;</p>
<p class="baz">is <span id="baz">absolutely
   indistinguishable</span> from a dead crab.</p>
<p>Remember, buy <em class="bar">Whizzo</em>
   butter and<br />go to<strong id="bar">HEAVEN!</strong></p>

h1 {
   float: right;
   width: 50%;
   margin: 0em;
   font-size: 500%;
}
em {
   font-size: 200%;
   font-weight: bold;
}

.baz {
   clear: both;
   text-align: center;
}
#bar { font-size: 300%; }
#foo { border: solid 2px black; }
.foo, #bar {
   background-color: yellow;
}
#baz { border: dashed 2px black; }

Draw your solution to problem 1 below.

2. HTML/CSS Programming (30 points)

Write the XHTML and CSS code necessary to recreate the following appearance onscreen, between but not including the thick black lines. Assume that the code you're writing will be placed inside the body of the page. Part of your grade comes from choosing appropriate tags to match the semantics of the content. You should also write valid code that would pass the W3C validators.

Some defaults about the desired appearance:

• All text uses default sizes and font families, except in the second list (described below).
• The box is positioned 20% from the left of the page and has a background color of (red=255, green=250, blue=205) or #fffacd
• There is 10px between the edge of the box and the content within the box.
• There is no padding or margin separating the title, NOBODY expects the Spanish Inquisition! from its surrounding contents.
• The image of the Spanish Inquisition comes from the file group.jpg, and it is 300px in height.
• The items of the second list alternate between font sizes of 150% and 200%.

Mark up the following text with your HTML tags. If a tag can't physically be written in the space provided, write it in the margins and draw an arrow to where it should be inserted in the text.

NOBODY expects the Spanish Inquisition!



Our three weapons are


Fear,

Surprise, and

Ruthless efficiency...and

An almost fanatical devotion to the Pope....


Our four... no...

Amongst our weapons... Amongst our weaponry...

are such elements as


Fear,

Surprise...


I'll come in again.

Write your CSS code below.

3. Javascript Programming (40 points)

The Ministry of Silly Walks is building their internet presence, and needs your help. They are working on a Silly Walker, which has the sole purpose of displaying an interactive animation of a man performing a silly walk. This animation is contained in sillywalks.gif, which looks like this:

This image is 210px tall and 1050px wide, and contains 7 frames, each 150px apart (i.e. the first frame is 0px away from the left edge of the image, the second frame is 150px away, the third is 300px away, and so on).

The Silly Walker currently consists of the following XHTML and CSS code:

<input id="backwards" type="checkbox" />
<label for="backwards">Walk Backwards</label>
<div id="walker"></div>

#walker {
  background-image: url(sillywalks.gif);
  height: 210px;
  width: 150px;
}

Currently, it only displays the first frame of the animation. Write the JavaScript code to complete the Silly Walker, such that the walker div displays the next frame in the animation when clicked, wrapping back to the first frame if necessary. If the checkbox labeled "Walk Backwards" is checked, display the previous frame instead (again wrapping to the last frame if necessary).

Walk Backwards

Write your solution to problem 3 below. Assume that your code will be placed into a .js file that will be included by the HTML page.