CSE 190 M, Spring 2007
Practice Midterm Exam

• You have 50 minutes to complete this exam.
  You may receive a deduction if you keep working after the instructor calls for papers.
• This test is open-book/notes.
• You may not use any computing devices of any kind including calculators.
• Please do not abbreviate any code on your exam.
• If you enter the room, you must turn in an exam and will not be permitted to leave without doing so.
• You must show your Student ID to a TA or instructor for your submitted exam to be accepted.

Good luck!

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. If you don't feel confident drawing different fonts, indicate a serif font with your normal handwriting and a monospace font with a squiggled underline like . You can indicate a background coloring by shading lightly with your pencil, or by drawing repeated diagonal lines behind the affected area like . Assume that stickman.png is an image of a stick man (draw it yourself) that is about 3-4 times as tall as a standard line of text.

<h1 id="foo">heading</h1>
<p>A paragraph</p>
<p class="foo">Here is a picture
of a stick man: <img src="stickman.png"
alt="stick man" /> I love stick
men <br />because they are so great.</p>

<h2>A second heading</h2>
<p id="bar">Another paragraph</p>

h1 {
  text-align: center;
  font-size: 300%;
}
h2 {
  font-family: monospace;
  border: 2px dashed black;
  border-bottom: none;
}
.foo { border: 2px solid black; }
#foo { background-color: yellow; }
#bar, .bar { width: 2em; }

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.
• The central section of dialogue is centered within the page and occupies 50% of the page width.
• The image of Vader at right comes from the file images/vader.png, and it is sized so that it occupies 20% of the page width.
• There are no margins or padding separating any text.

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. Write the CSS styles on the next page.

            VADER

            If you only knew the power of the dark side.
            Obi-Wan never told you what happened to your father.

            LUKE

            He told me enough! It was you who killed him.

            VADER

            No. I am your father.

            LUKE

            No. No. That's not true! That's impossible!

            VADER

            Search your feelings. You know it to be true.

3. Javascript Programming (40 points)

Write the Javascript code to fill the selection box below with the following five choices: Garfield, Odie, Nermal, Pooky, and Jon. When the selected item in the box changes, the image below the selection box changes to display a picture of the character. The images are located in the images/ subfolder from the web page and are saved in JPG format with file names matching the character names. For example, the image of Pooky is stored in images/pooky.jpg. Initially, Garfield should be selected and garfield.jpg should be shown.

<select id="characters" size="5"></select>
<p><img id="comic" src="" /></p>

After your Javascript code runs, the appearance and behavior should be the following:

Write your Javascript code below. Assume that the code will be placed into a .js file that will be included by the HTML document.