MIS 3371 Parks Spring 2018 Exam 2 Answers
Click the two buttons to execute the two solutions.
(in IE click: "VIEW", then "SOURCE" to see the code)


 1. (50 point) The textarea shown to the left contains data on the top fifty junior bowlers in the USA in the Junior Bowler Tour (JBT). The DTD for the data is shown below. 
<?xml version="1.0"?>
<!DOCTYPE juniorbowlertour [      
<!ELEMENT juniorbowlertour(bowler+)>
<!ELEMENT bowler (rank,name,info)>
<!ELEMENT rank (#PCDATA)> [50 → 1] 
<!ELEMENT name (#PCDATA)> [full name]
<!ELEMENT info (#PCDATA)> [career history]
When the "Execute p1" button is clicked, roll the XML data into a 50 row by 3 column table.

the row loop is: for (i=0 ; i < root.childNodes.length ; i++)
rank is: root.childNodes[i].childNodes[0].childNodes[0].nodeValue
name is: root.childNodes[i].childNodes[1].childNodes[0].nodeValue
info is: root.childNodes[i].childNodes[2].childNodes[0].nodeValue

Begin your code assuming root has already been defined in your code. Count the total number of times the exact string "JBT" appears inside all of the info tags. Place the resulting table in the DIV with id="p1_out" and after the end of the table show the count of "JBT" string.

Provide NO table heading row. Show only the javascript for p1.

This is the DIV with id='p1_out'

this →
is
table tags

this is
18 DIVs
in p2_out
   ↓
Num
Lock		/*-
7
home		8
↑		9
PgUp		+
4
←		56
→
1
End		2
↓		3
PgDn		Enter
0
Ins		 
 		.
Del
 2. (50 points) Create a display of a 5 row by 4 column key numeric pad layout with 18 keys. An HTML version of the key pad layout is shown to the left using an HTML table. You are to make another version using 18 DIV blocks to create the faces of the keys. Assume each DIV begins like this:

  div_start_value="<div style='outset black 2px;margin:0px;font-size:13px;position:absolute;text-align:center;background-color:rgb(127,127,127);color:white;width:40px;";

The array button_text shown below contains the 20 string elements that specify the text to appear on the button faces in the twenty possible key positions (Note: &uarr;, &darr;, &larr;, and &rarr; are the up, down, left and right arrow characters: ↑, ↓, ←, →). 

var button_text=["Num,Lock"    , "/"        , "*"        , "-"     ,
                 "7,Home"      , "8,&uarr;" , "9,PgUp"   , "+"     ,
                 "4,&larr;"    , "5"        , "6&rarr;"  , ""      ,
                 "1,End"       , "2,&darr;" , "3,PgDn"   , "Enter" ,
                 "0,Ins"       , " "        , ".,Del"    , ""       ];
  1. Start an empty string named os. Start an index named which_key at zero.
  2. Use two loops, one outer loop for the rows (0→4) and an inner loop for the columns (0→3). The inner loop will be executed twenty times.
  3. Each time through the inner loop consider the value of button_text[which key]:
    if button_text[which_key ] == "" (i.e., an empty string), do nothing (this will happen twice) otherwise
    1. add div_start_value to os
    2. if button_text[which_key] is "+" or "Enter", add "height:80px;" to os (this will happen twice)
      else add "height:40px;" to os
    3. add the top and left css values to os. Each row is to be 40 pixels tall, each column is be 40 pixels wide, start top initially at 8px, and start left at 7px on each new row.
    4. end the beginning DIV tag with the string: "'>"
    5. if button_text[which_key] contains a comma, replace the comma with "<br>"
    6. add the value of button_text[which_key] to os.
    7. add "</DIV>" to os
    8. increment which_key by one
  4. place os in the DIV with id="p2_out".
 Show no HTML. Show only the javascript for p2.
this is div with id="p2_out"