MIS 3371 PARKS FINAL SPRING 2011

Click the two buttons on the exam to see the output for the two problems

Click "View", the "Source" to see the code

1. (50 points)  There are fifty-two *.png image files that represent the face images of 52 playing cards. The files are named: "1.png", "2.png",...,"52.png". Assume there is an HTML page with a DIV block with id="cout". There is also a javascript function named p1.

Assume there is a global array named cn that has 20 elements. Further assume there is a pre-written javascript function named twenty. This function populates the global cn array with twenty random integer numbers between 1 and 52, inclusive. It assures that: (a) NO integer occurs more than once; (b) the smallest possible integer is 1; and (c) the largest possible integer is 52. NO not write the function twenty, the cn array or any code to populate it.

In the function p1, you are to use the cn array created by twenty to display images for four poker hands of five cards each -- arranged in a cross pattern (see below). There are also two arrays named v_start and h_start that each contain four values as follows:
   var v_start = new Array ( 10, 60, 60,110)
   var h_start = new Array (210, 10,410,210)
The v_start array contains the vertical starting position of each of the four poker hands. The h_start array contains the horizontal starting position of each of the four poker hands. Each of the four poker hand is made up of five images:

  • each image (five of them) in each poker hand (four of them) has the same vertical position
  • each image in each poker hand are 40 pixels apart in the horizontal direction (i.e., h_start[i] , then (h_start[i]+40), then (h_start[i]+80), etc.)
  • each image is displayed by using an image filename created by:
    • using an integer from the cn array
      ( the first poker hand uses the integers from cn[0] through cn[4], the second poker hand uses the integers from cn[5] through cn[9], etc.)
    • and concatenating the integer with the string ".png"
  • each image uses height='48' as an attribute
Thus, p1: (a) executes twenty; (b) creates a string of 20 image tags with: the style attributes of: position,top and left; and the HTML attributes of: src and height; and then (c) assigns this string to the DIV block with id="cout". Show only the javascript code for p1. Show NO HTML. A black/white sample of "cout" is shown below:
 

 This is the DIV block with id="cout"

  

<XML id="ryder">
<?xml version="1.0"?>
<!DOCTYPE ryder_cup [
<!ELEMENT ryder_cup (team+)>
<!ELEMENT team (team_name,player+)>
<!ELEMENT team_name (#PCDATA)>
<!ELEMENT player (first, last, age)>
<!ELEMENT first (#PCDATA)>
<!ELEMENT last (#PCDATA)>
<!ELEMENT age (#PCDATA)>
]
<ryder_cup>
<team>
<team_name>United States Ryder Cup Team</team_name> <player><first>Phil</first> <last>Mickelson</last><age>31</age></player> <player><first>Hunter</first> <last>Mahan</last><age>29</age></player> <player><first>Bubba</first> <last>Watson</last><age>33</age></player>
. . .
<player><first>Tiger</first> <last>Woods</last><age>36</age></player> <player><first>Zach</first> <last>Johnson</last><age>37</age></player> <player><first>Stewart</first> <last>Cink</last><age>38</age></player> <player><first>Rickie</first> <last>Fowler</last><age>33</age></player>
</team>
<team>
<team_name>European Ryder Cup Team</team_name>
<player><first>Lee</first> <last>Westwood</last><age>38</age></player> <player><first>Rory</first> <last>McIlroy</last><age>32</age></player>
. . .
<player><first>Edoardo</first> <last>Molinari</last><age>30</age></player> <player><first>Luke</first> <last>Donald</last><age>34</age></player>
</team>
</ryder_cup>
</XML>
this is the span block with id="p2out"
 2. (50 points) The 2010 Ryder Cup Golf Championship team rosters are stored inside an XML tag with id="ryder. A portion of the xml is shown to the left. When the user clicks this button: , a javascript function p2 is executed. This sub retrieves the XML and creates a 3 column table with a 1 pixel border showing all the teams' data as follows:
  • the name of each team on a row by itself
  • a single row for each player with 3 values:
    1. last name
    2. first name
    3. age
  • a row with the average age of each team
Place the table in a span block with id="p2out". Show only the javascript for p2. Show NO HTML.

Notes:

  • the number of teams is root.childNodes.length
  • team name is:
    root.childNodes(i).childNodes(0).text
  • the number of players on each team is:
    root.childNodes(i).childNodes.length - 1
  • first name is:
    root.childNodes(i).childNodes(j).childNodes.(0).text
  • last name is:
    root.childNodes(i).childNodes(j).childNodes.(1).text
  • age is:
    root.childNodes(i).childNodes(j).childNodes.(2).text