H50 10 A50 60 P50110 P50170 Y50230 H100 10 O100 60 L100110 I100170 D100230 A100290 Y100350 DISC 3371 Final Exam FALL 2006 Parks

Name______________________________________ Last four digits Student Number___________________

var s= new Array (50);
s[0] = "Alabama";
s[1] = "Alaska";
s[2] = "Arizona";
s[3] = "Arkansas";
.
.
.
s[46] = "Washington";
s[47] = "West Virginia";
s[48] = "Wisconsin";
s[49] = "Wyoming";

1. (50 points) Assume their is a javascript array named s as shown to the left. This array contain the US 50 state names (only 8 of the 50 are shown). The array is global. In the lower left cell there is a 15 character textbox named user_txt. This textbox is contained in a form named sform. Below the textbox is a DIV block with id="s_out". As the user types a state name in the user_txt textbox, an onKeyUp function calls a javascript function named find_state (i.e., onKeyUp='find_state()' ). This function find_state:
  1. initializes a string named states_found to an empty string.
  2. retrieves the current text from the textbox named user_txt.
  3. searches the entire s array for state names that contain the value of the user_txt textbox.
  4. for each state name that contains the user_txt textbox value, create an HTML string that: (1) is a link with the href value set to the pound sign (i.e., href="#"); and (2) has onClick event that calls the function picked and passes the array index of the state as its only argument. In general, when the user_txt textbox is contained somewhere in a state name, create this string:

    <a href="#" onClick="picked( insert_the_state's_array_location_here )"> insert_state_name_here </a><br>

    For example, if user_txt is contained in the fourth state name, create the string:

    <a href="#" onClick="picked(3)">Arkansas</a><br>

    Append this string to the states_found string. Three search outcomes are possible:

    1. The states_found may be empty after the search (i.e., no state name containing the value of user_txt was found. In this case, alert the user to the spelling error and empty (i.e., blank out) the s_out DIV block.
    2. When state names are found that contain the value of user_txt, place the states_found string in the s-out DIV block (only if more than one was found).
    3. If exactly one was found, pass the array location of the state name to the picked function.

The function picked:

  1. takes the state's array location that was passed as an argument and retrieves the value from the s array.
  2. stores the state name in the user_txt textbox.
Show no HTML. Show the javascript for find_state and picked.
Type a State Name  

This is s_out DIV initially

<XML id="xml_data_island">
<greet>
<word><
<letter><val>H</val><v>50</v><h>10</h></letter>
<letter><val>A</val><v>50</v><h>60</h></letter>
<letter><val>P</val><v>50</v><h>11060</h></letter>
<letter><val>P</val><v>50</v><h>160</h></letter>
<letter><val>Y</val><v>50</v><h>210</h></letter>
</word><
<word><
<letter><val>H</val><v>100</v><h>10</h></letter>
<letter><val>O</val><v>100</v><h>60</h></letter>
<letter><val>L</val><v>100</v><h>110</h></letter>
<letter><val>I</val><v>100</v><h>160</h></letter>
<letter><val>D</val><v>100</v><h>210</h></letter>
<letter><val>A</val><v>100</v><h>260</h></letter>
<letter><val>Y</val><v>100</v><h>310</h></letter>
</word><
</greet>
</XML>
2. (50 points) An XML file is transfered within an HTML file inside a data island named "xml_data_island" (shown at the left). Its DTD is shown below:
<?xml version="1.0"?>
<!DOCTYPE greet [ <!ELEMENT greet (word+)>
<!ELEMENT word (letter+)>
<!ELEMENT letter (val,v,h) >
<!ELEMENT val (#PCDATA) >
<!ELEMENT v (#PCDATA) >
<!ELEMENT h (#PCDATA) >
]>

Write a Vbscript sub named p2 that when called parses the XML data and extracts three values from each "letter" node: (1) val (the value a single character); (2) v (the vertical distance from the top of the page); and (3) h (the horizontal distance from the left side of the page). A gif file for each letter is available (named: charA.gif; charB.gif; charC.gif; ...; charZ.gif). The sub p2 then creates a new page on-the-fly that displays the sequence of gif files that correspond to the val sequence retrieved from the XML tree. Use the values of v and h for each val to assign the Top and Left properties of absolute positioned images. Show only the VBScript for p2. TRY IT HERE