CSE 190 M, Spring 2008
Midterm Key

1. HTML/CSS Interpreting

2. HTML/CSS Programming

<div id="main">
    <h1> <span class="highlight">Wikipedia - Geneva</span> </h1>
    <p>Geneva is the second-most populous city in ...</p>
    <img src="switzerland.png" alt="Switzerland" />
    <p>Geneva is widely regarded as a global city, ...</p>
    <p>Geneva is also the name of Geneva Francine Stepp, ...</p>
    <ul>
        <li>a desktop wallpaper</li>
        <li>the subject of a recent midterm exam</li>
    </ul>
</div>
<div id="info">
    <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>
</div>

/* CSS code */
body {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    font-family: "Verdana", sans-serif;
    font-size: 14pt;
}

.highlight {
    background-color: yellow;
    border: 5px solid orange;
}

#main {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

#main img {
    float: left;
    margin-right: 1em;
}

#info {
    border: 5px solid red;
    font-size: 9pt;
    padding: 1em;
    position: absolute;
    right: 1em;
    top: 1em;
    width: 20%;
}

#info li {
    font-style: italic;
}

3. Javascript Programming

window.onload = function() {
    var imgs = $$("#pics > img.geneva");
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = imgClick;
    }
};

function imgClick() {
    this.remove();
    $("favorites").appendChild(this);
    
    var li = document.createElement("li");
    li.innerHTML = "Moved " + this.src + " to favorites.";
    $("actions").appendChild(li);
}