MIS 3371 FALL 2015 FINAL PARKS

Arrange Some *.gif Files in a Square Grid
Black if Row number is Odd & the Column Number is Even
Black if Row number is Even & the Column Number is Odd
Black if Both Even
Black if Both Odd
Number of gifs in each grid row and column

Below is the DIV block with id="p1_out"

1. (50 points) In a form named f1 shown to the left are: four radio buttons (with no names); a textbox named n.There is also a DIV block shown with id="p1_pout". The radio buttons have no values clauses. All the radios have onclick events:
   the 1st one has the event: onclick="p1(0)"
   the 2nd one has the event: onclick="p1(1)"
   the 3rd one has the event: onclick="p1(2)"
   the 4th one has the event: onclick="p1(3)"
The function p1 appears as: function p1(n) and is passed a value (0,1,2 or 3 which is stored in the variable n) when a user clicks one of the four radio buttons. Thus in p1, n=0 if the user clicks the 1st radio, and n=1 if the user clicks the 2nd radio, etc.

A function has been pre-written named even: This function appears like this: function even(x). This function returns a value of true if the value passed to the function (i.e., x) is an even number. It returns the value false is the number passed to it (i.e., x) is an odd number. The function p1:

  1. Makes a square grid of gif image files. The value of the textbox named n defines the number of rows in the grid AND the number of columns in the grid.
  2. the gif files are either black (src="black1x1.gif") or white (src="white1x1.gif")
    if the 1st radio was clicked, gifs in odd grid rows and even grid columns are black;
    if the 2nd radio was clicked, gifs in even grid rows and odd grid are black;
    if the 3rd radio was clicked, gifs in even grid rows and even grid columns are black;
    if the 4th radio was clicked, gifs in odd grid and odd grid columns are black;
    otherwise the gif is white.
  3. Each gif is ten pixels tall and 10 pixels wide. All gifs are ten pixels apart.
  4. The grid begins at top:20px and left:20px;
  5. place the gif images in the DIV block with id="p1_out".
Notes:
In an if statement, the "!" means "not". (e.g., using the even function provided:
   if ( even(row) ) would be true if the row was even, false if row was odd, but
   if ( !even(row) ) would be false if the row was even, true if row was odd)
Assume the rows of the grid begin numbering at 0 and the columns begin numbering at 0.
There is NO table -- just gif images arranged in rows and columns in the DIV block using absolute positioning.

Show NO HTML. Show only the javascript for p1.

2015 Upcoming/Pending Mayoral Elections
Data from: www.usmayors.org/elections

2. (50 points) The XML data contained in the textarea shown to the left is named ta and is in a form named f2. The DTD for the XML is shown to the left. The javascript code below loads the data from the textarea into the XML DOM (do not write these lines):

     mdata=document.f2.ta.value;
     parser = new DOMParser();
     xmldoc = parser.parseFromString(mdata,"text/xml");
     var root=xmldoc.documentElement;

  1. Create a table with six columns
  2. the first row spans six columns and contains the centered string: "2015 Upcoming/Pending Mayoral Elections"
  3. Each statename appears in bold on a row by itself with colspan='6' with a background-color of LightGray
  4. On the next row place a column heading row (this row's value is stored a variable named colhead) colhead is predefined -- do not write this value -- just use it
  5. Each city appears on a row with six columns. Use the 6 values of: cityname;mayor;pop;date;winner;notes
  6. At the end of the table, show the count the number mayoral elections (i.e., the count of city tags)
  7. Additionally show the average population (sum of the values of pop divided by the city count)
NOTES:
The state loop is: for (i=0;i < root.childNodes.length ;i++)
The statename is: root.childNodes[i].childNodes[0].childNodes[0].nodeValue
The city loop is: for (j=1;j < root.childNodes[i].childNodes.length ;j++)
The six column values for city are:
   root.childNodes[i].childNodes[j].childNodes[k].childNodes[0].nodeValue
where the column loop is: for (k=0; k < 6 ;k++)

Show NO HTML. Show only the javascript for p2.

This is the p2_out DIV block