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

• You have 55 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 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 . 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>
</div>

<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
</p>

<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.

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:

• The overall page's text uses a 14pt Verdana font. The page has an overall background of bg.jpg, located in the same folder as the page; the background should appear only once and should not repeat.
• The text in the page's main h1 heading has a yellow background and a solid 5px-thick orange border.
• The main section of page content is half as wide as the browser window and centered horizontally in the window. The text uses the default left-alignment.
• The image of the Swiss flag, switzerland.png, has 1em of horizontal space between itself and nearby text. Text wraps around the image as necessary.
• The area on the right about "Geneva, the name" appears 1em from the page's top/right corner. Its width should be 1/5 of the width of the overall browser window. It has a solid 5px-thick red border. Text in that part of the page uses a 9pt font. 1em separates the section's border from the content inside the section. The items in the bulleted list in this section are in italic.

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.

    <h1>
        Wikipedia - Geneva
    </h1>



    <p>
        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.
    </p>



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



    <p>
        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.
    </p>



    <p>
        Geneva is also the name of Geneva Francine Stepp, an adorable
        baby also seen as:
    </p>
    


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



    <h1>Geneva, the name</h1>



    <p>
        (f) English

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



    <p>
        Similar names:
    </p>



    <ul>
        <li>Jenna</li>
        <li>Jennifer (Jenny)</li>
        <li>Genevieve</li>
        <li>Genevive</li>
    </ul>

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:

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

<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" />
</div>

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

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

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

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

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

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.)