CSE 190 M
Practice Midterm Exam 2

• 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 before you leave.
• You must show your Student ID to a TA or instructor for your 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. 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>&lt;h1&gt;</h1>

<p id="one">You only think I guessed wrong! That's what's so funny! I 
switched glasses when your back was turned!</p>

<p class="one">You fell victim to one of the 
classic blunders!</p>

<p class="one" id="two">Never get involved in<br />a land
war<a href="http://www.asia.com/">in</a>asia.</p>

<h2 class="three">Ha ha ha!</h2>

h1 {
    float: right;
    font-size: 10em;
}
h2 {
    border: 2px solid black;
    clear: both;
    font-family: monospace;
}

.one { background-color: yellow; }
#one, #two, h2 { width: 50%; }
#two {
    text-align: right;
    border: 3px solid black;
}
.three {
    border-top: none;
    border-bottom: none;
}

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. (No manual line breaks have been inserted into the text.) 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, and separate stylistic information from HTML.

Some defaults about the desired appearance:

• All text uses default sizes and fonts, except for the characters' names which are written in a sans-serif font.
• The section of dialogue is 50px from the right edge of the page and occupies 16em in width. No manual line breaks have been inserted into the text.
• The text for each character's name is bold and underlined.
• The images come from the files inigo.jpg and rugen.jpg and are drawn at their default sizes.
• Rugen's lines are colored with a background of (red=221, green=221, blue=221) or #DDDDDD. 5px separate these images from any surrounding content.
• 5px of vertical space separate each of the bulleted lines.

Mark up the text on the next page 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 page after next.

              Inigo:

              Hello. My name is Inigo Montoya. You killed
              my father. Prepare to die.



              Count Rugen:

              No!



              Inigo:

              Offer me money!  Power, too. Promise me that!



              Count Rugen:

              All that I have and more! Please!



              Inigo:

              Offer me everything I ask for!



              Count Rugen:

              Anything you want.



              Inigo:

              I want my father back, you son of a ....

3. Javascript Programming (40 points)

Write the Javascript code to add an image of a "ROUS" (rodent of unusual size) to the HTML rodentarea section below. (Assume that your code will be placed into a .js file that will be included by the HTML page.) The rodentarea is 500x500 px in size. The image comes from the file rodent.gif and is 100x100 px in size. The image is transparent other than the pixels of the rodent, so background colors behind it will show through.

Initially the image of the rodent appears at a random place within the rodentarea such that the rodent is entirely visible inside the area. When the user clicks on the rodent, the following occurs:

1. The background behind the image turns red for one second.
2. After the second has elapsed, the rodent jumps to a new random x/y position in the rodentarea, such that it is entirely visible inside the area.
3. After the rodent jumps to its new position, the background turns back to white.

#rodentarea {
    border: 5px dashed black;
    position: relative;
    width: 500px;
    height: 500px;
}

...

<div id="rodentarea"></div>

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