CSE 190 M
Practice Midterm Exam 2

Name: ___________________________________________
 
Student ID #: ___________________

Good luck!

ProblemDescription EarnedMax
1 HTML/CSS Interpreting     30
2 HTML/CSS Programming     30
3 Javascript Programming    40
TOTAL  100

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 this. You can indicate a background coloring by shading lightly or by drawing repeated diagonal lines like this.


HTML
<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>
CSS
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:



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: