CSE 190 M, Spring 2008
Midterm Exam, Friday, May 9, 2008
(with Baby Geneva Theme!)


Student ID #: ___________________
Section and/or TA: ___________________

Good luck!

ProblemDescription EarnedMax
1HTML/CSS Interpretation     30
2HTML/CSS Programming     30
3JavaScript Programming     40
XExtra Credit     +1

1. HTML/CSS Interpretation (30 points)

Draw a picture of how the following HTML and CSS code will look when the browser renders it onscreen. Indicate a background coloring by shading lightly or by drawing repeated diagonal lines like this. Draw the image geneva.jpg as a smiley face occupying roughly 20% of the page width.

<h1>Baby Geneva's Web Page</h1>

<div id="notice">
    <img src="geneva.jpg" alt="Geneva" />
    What is your name?
    <input type="text" size="20" value="Geneva" />
    <span class="notice">(Mine is cuter!)</span>

<p class="notice">I <br /> am <br /> 15 <br /> months <br /> old</p>
<p class="notice">
    My <br /> favorite <br /> toy <br /> is <br /> your <br /> cell phone

<h2>(written by Geneva, May 2008)</h2>
h1, .notice {
    text-align: center;
    border: 2px solid black;
h2 { clear: both; }

h2, #notice {
    border-top: 1px dashed black;
    border-bottom: 1px dashed black;
p.notice {
    border: 2px solid black;
    float: right;
    width: 10%;

#notice .notice {
    text-decoration: underline;

2. HTML/CSS Programming (30 points)

(This question is slightly different than the #2s on the practice exams. Please read the description carefully.)

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.

q2 appearance

NOTE: Most of the XHTML code is given to you; the code given may not be modified. The only change you may make to the provided XHTML code is that you may add any number of div and span elements, possibly with id and/or class attributes, as targets for CSS styling. Write valid code that would pass the W3C validators. Assume that the given XHTML text would appear inside the body of the page.

Details about the desired appearance:

Mark up the text on the next page with your div/span tags. If a tag can't fit in the space provided, write it in the margins and draw an arrow to where it should be inserted. Write the CSS styles on the page after next.

        Wikipedia - Geneva

        Geneva is the second-most populous city in Switzerland (after
        Zurich) and is the most populous city of Romandy (the French-
        speaking part of Switzerland). Situated where the Rhone River
        exits Lake Geneva (French Lac Leman), it is the capital of
        the Republic and Canton of Geneva.

    <img src="switzerland.png" alt="Switzerland" />

        Geneva is widely regarded as a global city, mainly because of
        the presence of numerous international organizations, including 
        the headquarters of many of the agencies of the United Nations
        and the Red Cross. It is also the place where the Geneva
        Conventions were signed, which chiefly concern the treatment
        of wartime non-combatants and prisoners of war.

        Geneva is also the name of Geneva Francine Stepp, an adorable
        baby also seen as:

    	<li>a desktop wallpaper</li>
    	<li>the subject of a recent midterm exam</li>

    <h1>Geneva, the name</h1>

        (f) English

        Possibly a shortened form of Genevive, or possibly from
        the name of the city in Switzerland.

        Similar names:

        <li>Jennifer (Jenny)</li>


3. JavaScript Programming (40 points)

Write the JavaScript code to add event behavior to the following web page. Assume that your code will be placed into a .js file that will be included in the page's header.

The page contains an area with five images of baby Geneva, and a "Favorites" area. Your code should arrange it so that when one of these five images is clicked, that image will be moved to the rightmost end of the favorites area. Also, when an image is moved, a bullet is added to the end of the actions list indicating this. The bullet's text should be, "Moved [image] to favorites." where [image] is equal to the src attribute of the image moved. (As you'll see in the output on the next page, even though the XHTML's src attribute for each image is only a filename such as geneva1.jpg, when you access this information in your code, it will be a full URL. This is expected.) Nothing should happen when the user clicks on any other content on the page, such as text or other images such as the pacifier. Assume that the user won't click on an image that is already in the Favorites.

Move images by manipulating the order of elements in the DOM tree, not by manually setting x/y positions of elements. You may use Prototype's features if you like. You may not use innerHTML on this problem, nor change any XHTML on the page; the only code you may add is JavaScript.

The following is the complete XHTML code for the body of the page:

    <img class="geneva" src="geneva_head.jpg" alt="Geneva" />
    Geneva Pics!

<div id="pics">
    <img src="pacifier.jpg" alt="pacifier" />
    <img class="geneva" src="geneva1.jpg" alt="Geneva" />
    <img class="geneva" src="geneva2.jpg" alt="Geneva" />
    <img class="geneva" src="geneva3.jpg" alt="Geneva" />
    <img class="geneva" src="geneva4.jpg" alt="Geneva" />
    <img class="geneva" src="geneva5.jpg" alt="Geneva" />

<p>Click a picture to move it to the Favorites.</p>

<fieldset id="favorites" class="geneva">
    <legend>Favorite photos:</legend>

<ul id="actions"></ul>

The following is the page's initial appearance (between the black lines):

q3 initial appearance

The page after clicking image #3, then #1, then #5 (between the black lines):

q3 second appearance

Write your code below.

X. Extra Credit (+1 points)

If you were an HTML tag, CSS property, or JavaScript object, which tag/property/object would you be and why?

(Any answer that reflects a coherent thought related to the question will get the +1 point.)