CSE 190 M
Practice Midterm Exam 1

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. If you don't feel confident drawing different fonts, indicate a serif font with your normal handwriting and a monospace font with a squiggled underline like this. You can indicate a background coloring by shading lightly with your pencil, or by drawing repeated diagonal lines behind the affected area like this. Assume that stickman.png is an image of a stick man (draw it yourself) that is about 3-4 times as tall as a standard line of text.


HTMLCSS
<h1 id="foo">heading</h1>
<p>A paragraph</p>
<p class="foo">Here is a picture
of a stick man: <img src="stickman.png"
alt="stick man" /> I love stick
men <br />because they are so great.</p>

<h2>A second heading</h2>
<p id="bar">Another paragraph</p>
h1 {
    text-align: center;
    font-size: 300%;
}
h2 {
    font-family: monospace;
    border: 2px dashed black;
    border-bottom: none;
}
.foo { border: 2px solid black; }
#foo { background-color: yellow; }
#bar, .bar { width: 2em; }

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

Some defaults about the desired appearance:


VADER

If you only knew the power of the dark side. Obi-Wan never told you what happened to your father.

LUKE

He told me enough! It was you who killed him.

VADER

No. I am your father.

LUKE

No. No. That's not true! That's impossible!

VADER

Search your feelings. You know it to be true.


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




            VADER

            If you only knew the power of the dark side.
            Obi-Wan never told you what happened to your father.

            LUKE

            He told me enough! It was you who killed him.

            VADER

            No. I am your father.

            LUKE

            No. No. That's not true! That's impossible!

            VADER

            Search your feelings. You know it to be true.

3. Javascript Programming (40 points)

Write the Javascript code to fill the selection box below with the following five choices: Garfield, Odie, Nermal, Pooky, and Jon. When the selected item in the box changes, the image below the selection box changes to display a picture of the character. The images are located in the images/ subfolder from the web page and are saved in JPG format with file names matching the character names. For example, the image of Pooky is stored in images/pooky.jpg. Initially, Garfield should be selected and garfield.jpg should be shown.

<select id="characters" size="5"></select>
<p><img id="comic" src="" /></p>

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



Write your Javascript code below. Assume that the code will be placed into a .js file that will be included by the HTML document.