CSE 190 M, Spring 2007

Final Exam
Name: ___________________________________________

Student ID #: ___________________

You have 120 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!

Problem Description Earned Max

1 HTML/CSS 20
2 Javascript/DOM 20
3 Ajax/XML 20
5 PHP 20
4 SQL 20
X Extra Credit +1
TOTAL 100

1 of 9
1. HTML/CSS Interpreting (20 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 . Assume that
stickman.png is a generic picture of a stick man.

HTML
<h1>Scene</h1> <h1>#7</h1>

<div id="a">Elizabeth: Captain Barbosa, I am here to negotiate

the cessation of hostilities against Port Royal.</div>

<div>Barbossa: <img src="stickman.png" alt="stick man" />

There are a lot of long words in there,
Miss.<br />What is it that you want?</div>

<div class="b">
<div class="c">Elizabeth: I want you to leave</div>
<div class="c">and never come back.</div>
</div>

<div class="c" id="d">Barbossa: I'm disinclined to acquiesce

to your request. Means &quot;no.&quot;</div>

CSS
img { vertical-align: top; width: 10em; height: 10em; }
#a { border: 2px solid black; float: left;
padding-right: 3em; width: 33%; }
.a #a { background-color: yellow; }
.b div { display: inline; }
.c, .b { text-decoration: underline; }
.c > .b { background-color: yellow; }
.d { float: right; }

2 of 9
2. Javascript/DOM (20 points)
Write the Javascript code to accompany the following HTML code, so that when the Delete button is clicked, any
button whose text value is divisible by the number written in the text field is removed from the page. You may assume
that a valid number has been typed in the text field. The HTML code is the following:

<div id="q2controls">
Divisible by:
<input type="text" id="divisor" />
<button id="del">Delete</button>
</div>

<div id="q2buttons">
Click a button:
<button>11</button> <button>22</button>
<button>34</button> <button>42</button>
<button>50</button> <button>63</button>
<button>71</button> <button>85</button>
<button>94</button> <button>103</button>
</div>

Divisible by: Delete

Click a button: 11 22 34 42 50 63 71 85 94 103

For example, after typing the number 2 into the text field and pressing Delete, the following should be the page
appearance:

Divisible by: 2 Delete

Click a button: 11 63 71 85 103

3 of 9
4 of 9
3. Ajax/XML (20 points)
Write the Ajax Javascript code to fetch and display XML data from the file named movie.xml (in the same directory
as your code). This file contains lines spoken by a character in a movie. Your code should process the XML and
display the character's lines, each in its own paragraph, in the format shown below. Assume that the code will execute
on an HTML page containing a div with the CSS ID of q3html, and insert the paragraphs into this div.
The XML data will be in a format that matches the following abbreviated example:

<character name="Captain Jack Sparrow" actor="Johnny Depp" />

<line time="02:55">Captain Jack Sparrow, if you please, sir.</line>
<line time="3:21">I'm in the market as it were.</line>
...
<line time="2:41:38">On deck, you scabrous dogs! Man the braces!
Let down and haul to run free. Now... bring me that horizon. And
really bad eggs? Drink up, me 'earties, yo ho.</line>
</character>

For the XML data above, your code would produce the following content on the HTML page:
You may assume that your page already contains the following code from lecture and the slides:

function ajaxHelper(url, fn)

5 of 9
4. PHP (20 points)
Write PHP code that processes the following form:

<form action="solution/q4.php" method="post">

<fieldset>
<input type="text" name="name" /> Name<br />
<input type="text" name="pw" /> Password<br />
<input type="text" name="cc" /> Credit Card Number<br />
<input type="submit" />
</fieldset>
</form>

(Onscreen, the form looks like this:)

Name
Password
Credit Card Number
Submit Query
Your code should examine the name, password, and credit card number submitted, and verify that they are valid. A
valid name is any non-empty string. A valid password is any string that is at least 6 characters long. A valid credit card
number contains exactly 16 digits. Optionally, the credit card number can contain dashes between some or all groups
of four digits. No other characters may be part of a credit card number. For example, the following are some examples
of valid and invalid credit card numbers:
Valid Invalid
1234567812345678 2457.1543.4367.4093
2457-1543-4367-4093 foo1234567812345678
39485098-81902375 12345678123456789
9834-34256678-9827 1234-5678-1234-5678-
12-34-56-78-12-34-56-78
Your PHP code's output should be a level 1 heading stating whether the data was valid or invalid, followed by a
paragraph containing the data itself separated by commas. Replace the password by a string of * characters of
equivalent length. Strip any dashes out of the credit card number while displaying it. For example, here are some
outputs of your script for various form input:
Form Input Output
Marty Successful.
booyah!
1234-5678-1234-5678 Marty, *******, 1234567812345678
Kenneth Denied! Invalid data.
hulk
11112222-33334444 Kenneth, ****, 1111222233334444
Jeff Denied! Invalid data.
quailman
4321-4321x-4321-43210 Jeff, ********, 43214321x432143210

Use regular expressions for pattern matching and replacement. Assume that the page begins with some introductory
HTML content stored in the file q4top.html and some ending content stored in the file q4bottom.html, both of
which you must place into your page.

6 of 9
7 of 9
5. SQL (20 points)
Write an SQL query that will return the names of all characters that appeared in two or more of the Pirates of the
Caribbean movies; that is, movies whose name contains the substring "Pirates of the Caribbean". Ensure that the
results are returned in alphabetical order. If it helps you, you may assume that the character is played by the same actor
in both movies. The following is a subset of the results returned:

+----------------------------+
| Anamaria |
| Bad Pirate |
| Barbossa |
| Bo'sun |
| Butler |
| Captain Jack Sparrow |
...
| Young Elizabeth |
| Young Will |
+----------------------------+
73 rows in set (53.41 sec)

Recall that the imdb database contains the following tables:

Actor Movie Cast
id fname lname gender id name year aid mid Role
433259 William Shatner M 112290 Fight Club 1999 433259 313398 James T. Kirk
797926 Britney Spears F 209658 Pi 2000 433259 407323 T.J. Hooker
831289 Jenny Weaver F 210511 Memento 2000 797926 342189 Herself
... ... ...

8 of 9
X. Extra Credit (+1 point)
Write a haiku related to CSE 190M. A haiku is a Japanese poem made of three lines with 5, 7, and 5 syllables
respectively. For example, the following is a haiku about Java:

public class Marty

public static void Booyah
System out println

(Any reasonable attempt at a haiku will get the +1 point.)

9 of 9