]> Acme Drilling Supply ABC4455 April152008 K142 Casing Bolt 726 1.29 K842 Drilling Bit 4 inch 1 11567.29 K912 Drill Pipe 30 feet 4 inch 27 923.41 K001 Compressor 2 8453.21 K132 Hydraulic Fluid 100 gallons 17 342.11 K542 Paper Clips box of 100 1 0.79 K311 Light Bulbs 100 watt 12 2.29 K201 Mud Mix 100 pounds 129 111.04
DISC 3371 PARKS FINAL EXAM ANSWERS

<XML id="po_xmldata">
<?xml version="1.0"?>
<!DOCTYPE po_xmldata [
<!ELEMENT po_xmldata (company,po_num,po_date,po_line+)>
<!ELEMENT company (#PCDATA) >
<!ELEMENT po_num (#PCDATA) >
<!ELEMENT po_date (mon,day,yr) >
<!ELEMENT mon (#PCDATA) >
<!ELEMENT day (#PCDATA) >
<!ELEMENT yr (#PCDATA) >
<!ELEMENT po_line (prod_num,prod_desc,prod_quant,price_each) >
<!ELEMENT prod_num (#PCDATA) >
<!ELEMENT prod_desc (#PCDATA) >
<!ELEMENT prod_quant (#PCDATA) >
<!ELEMENT price_each (#PCDATA) >
]>
<po_xmldata>
<company>Acme Drilling Supply</company>
<po_num>ABC4455</po_num>
<po_date> <mon>April</mon><day>15</day><yr>2008</yr></po_date>
<po_line>
<prod_num>K142</prod_num>
<prod_desc>Casing Bolt</prod_desc>
<prod_quant>726</prod_quant>
<price_each>1.29</price_each>
</po_line>
.
...6 po_line tags omitted
.
<po_line>
<prod_num>K201</prod_num>
<prod_desc>Mud Mix 100 pounds</prod_desc>
<prod_quant>129</prod_quant>
<price_each>111.04</price_each>
</po_line>
</po_xmldata>
</XML> 		1. (50 points) A purchase order is stored in XML and is embedded in an HTML page with id=po_xmldata (the DTD and a portion of the XML data are shown to the left). When a button labelled "GO" (as shown below)

Click thhis button for the Answer
Click "View", the "Source" to see the code
is clicked, a javascript function named p1 is called. This function produces a new page on-the-fly which is a detailed report of the XML purchase order as shown below:
Acme Drilling Supply Purchase Order
Purchase Order Number: ABC4455 April-15-2008
ItemProduct
Number		Product
Description		Product
Quantity		Price
Each		Item
Total
1K142Casing Bolt7261.29936.54
...6 lines omitted...
8K201Mud Mix 100 pounds129111.0414324.16
Total74510.61
This six column table has two heading rows: (1) the first with the tag data for: company, po_num and po_date and (2) the six column headings as shown above. Column data for each detail row (i.e., the po_line tag data) is:

(1) a po_line counter ("Item" and numbered: 1,2,3...)
(2) thru (5) are the po_line tag data for:
   prod_num
   prod_desc
   prod_quantity
   price_each
(6) contains the "Item Total"

"Item Total" is the product of prod_quant multiplied by price_each. The last table row contains the sum of the "Item Total" values. For po_line data use:

root.childNodes(i).childNodes(j).text

where i begins at 3 and continues to root.childNodes.length and j ranges from 0 to 3 (i.,e. for the four po_line tag values). Show the javascript for p1. Show NO HTML. Show NO XML.

2. (50 points) A gif file named sredball.gif () is a red ball on a white background in a ten-pixel square image. The BODY tag of a page contains ONLY the div block named sd as shown below:
  <div id="sd" style="position:absolute;Top:0px;Left:0px;width:490px;height=500px;z-index:1;"></div> 
When the page is loaded a javascript function named p2 is executed. The p2 sub places a total of 490 sredball.gif images in the sd DIV block. Each image is contained in a SPAN block. Two of the style parameters of the SPAN are: "position:absolute;z-index:2;". Additionally, Top and Left style parameters are also to be specified. The design objective is to make a ten horizontal zigzag patterns using 49 sredball.gif images each. The first pattern starts with: (1) the first image has "Top:0px;Left:0px"; (2) the next has ten pixels added to "Top" and has ten pixels added to "Left" -- this occurs for the next four images; (3) after placing the fifth image, the program continues to add 10 pixels to "Left" each time, BUT subtracts ten pixels from "Top". This happens until the ninth images has been placed (thus the Top value has returned to zero); (4) This process is repeated until the 49th image has been placed (Thus: (1) 5 down; (2) 4 up; (3) 4 down; (4) 4 up; (5) 4 down; etc.). Then the 2nd pattern begins with the 50th image at "Top:50px;" and "Left:0px;"; the 3rd pattern begins with the 99th image at "Top:100px;" and "Left:0px;"; the 4th pattern begins with the 148th image begins at "Top:150px;" and "Left:0px;";...etc. Thus each of the ten patterns use 49 images. Each pattern is thus 490 pixels WIDE and 50 pixels TALL. The ten patterns are thus 500 pixels TALL. Show NO HTML. Show the javascript for p2 only.
Click here to see the Answer
Then Click "View", then "Source" to see the code