CS460/CS565 Languages Midterm 1 Solutions

Fall 2010

  1. (14 points, answer.txt) Suppose you are designing a driver's license renewal web-site for the state of Tennessee. For each of the following scenarios, pick the most appropriate form element to use from the list below:

    textboxpassword boxtext area
    hidden fieldsubmitreset

    1. (menu) The user should select the county in which they reside. There are about 95 counties in Tennessee, but you do not want the user to be able to enter an incorrect county.
    2. (textbox) The user should enter their zip-code.
    3. (password box) The user should select a private keyword that they can use to log back into the site and edit their information
    4. (checkbox) The user is asked to select any of the following options that apply: wears corrective lenses, has disabilities that could affect their driving, is over the age of 65, had a traffic ticket in the past year, had an accident in the past year, drives a car built before 1960.
    5. (text area) The user should have an area where they are asked to enter any additional information that they think would be useful for the case officer to know when weighing whether to renew the person's license, such as the nature of any disabilities, or the circumstances surrounding an accident or traffic ticket.
    6. (radio button) The person enters their eye color as one of blue, green, brown, or hazel.
    7. (radio button) The person enters their height in feet (4-7) and inches (1-12). If using more than one form element, then choose the same form element for both feet and inches.

  2. (12 points, table.html) Create an html table that displays the following stylized (and not chemically correct) periodic table of elements:
    The html table should have the following characteristics:

    1. The table headers (I-VII) should be bold-faced.
    2. The atomic elements should be left-aligned and vertically centered
    3. The table title (Periodic Table of Elements) should be vertically top-aligned.
    4. The H (hydrogen) element should be colored light green and the VII column should be colored gold
    5. The cells should have a cellpadding of 10.

    Your html table must not use a stylesheet.


    <table border="1" frame="none" rules="all" cellpadding="10px"> <tr><th>I</th><th>II</th><th>III</th><th>IV</th><th>V</th><th>VI</th><th>VII</th></tr> <tr><td bgcolor="lightgreen">H</td> <td>&nbsp;</td> <td valign="top" colspan="3" rowspan="3">Periodic Table<br/>of Elements</td> <td>&nbsp;</td> <td bgcolor="gold">He</td> </tr> <tr><td>Li</td> <td>Be</td> <td>B</td <td bgcolor="gold">Ne</td> </tr> <tr><td>Na</td> <td>Mg</td> <td>Al</td> <td bgcolor="gold">Ar</td> </tr> <tr><td>K</td> <td>Ca</td> <td>Sc</td> <td>Ti</td> <td>V</td> <td>Ga</td> <td bgcolor="gold">Kr</td> </tr> <table>

  3. (12 points, table3.html, table.css) Now you are going to improve the look of your html table from the previous problem using a style sheet. Create an external style sheet that gives the periodic table from the previous problem the following visual characteristics:

    1. The headings (I-VII) are colored red.
    2. The table title (Periodic table of elements) is colored green, bold-faced, is vertically aligned with the top of the table, and starts 20 pixels from the top of the table (hint: you do not need absolute positioning to get this 20 pixels of separation).
    3. The table elements should have a width of 100 pixels, a height of 60 pixels, and the labels should be both horizontally and vertically centered.
    4. The elements in the first column should be light green, the elements in the second column should be cyan, and the elements in the last column should be gold.
    5. In the first row, the right border of the left empty cell should be removed and the left border of the right empty cell should be removed.
    The end result should look something as follows:


    table { border-collapse:collapse; } table, td, th { border: solid 1px black; } th { color: red; } #periodic-label { padding-top: 20px; vertical-align: top; font-weight: bold; color: green; border-left-style: none; border-right-style: none; } td { width: 100px; height: 60px; text-align: center; } td:last-child { background-color: gold; } td:first-child { background-color: lightgreen; } td:nth-child(2) { background-color: cyan; } td.empty { border-right-style: none; border-left-style: none; background-color: white; } table3.html <head> <style> <link rel="stylesheet" type="text/css" href="table.css" /> </style> </head> <body> <table id="periodic"> <tr><th>I</th><th>II</th><th>III</th> <th>IV</th><th>V</th><th>VI</th><th>VII</th></tr> <tr><td>H</td> <td class="empty">&nbsp;</td> <td id="periodic-label" colspan="3" rowspan="3">Periodic Table of Elements</td> <td class="empty">&nbsp;</td> <td>He</td> </tr> <tr><td>Li</td> <td>Be</td> <td>B</td> <td class="periodic-label">Ne</td> </tr> <tr><td>Na</td> <td>Mg</td> <td>Al</td> <td>Ar</td> </tr> <tr><td>K</td> <td>Ca</td> <td>Sc</td> <td>Ti</td> <td>V</td> <td>Ga</td> <td>Kr</td> </tr> </table> </body>

  4. (12 points, legend.html) Create an html file with an internal style sheet that duplicates the appearance of the legend for a periodic table of elements that is shown below:
    You are free to re-create this legend using either an html table or div blocks. In either event you will need to use style sheets to achieve some of the desired visual effects. The visual characteristics of this legend should include:

    1. There must be a border around the legend with the label "Legend" inset in the border.
    2. The "Legend" label should have a padding of 5 pixels around it. It should appear near the left of the legend block (30 pixels if using a style sheet) and should be roughly centered in the boundary.
    3. The columns of color chips should be left aligned.
    4. The color chips should be 60 pixels wide and 20 pixels high
    5. The 4 columns should be equal sized, but it is up to you to come up with a way to make them equally sized.
    6. Don't worry about resizing the browser--just make the layout be a 2x4 layout for a sufficiently wide browser.
    7. The labels do not have to be vertically centered with respect to the color chips--it is okay if they are top aligned or bottom aligned.
    8. There should be a few pixels of separation between the color chips and the labels.
    9. The color chips should use the following colors:
      • non-metals LightGreen
      • transition DarkTurquoise
      • rare-earth LightBlue
      • halogens yellow
      • alkali orange
      • alkali-earth aqua
      • other MediumPurple
      • inert DarkRed
    <head> <style> #legend-block { position: relative; margin-top: 40px; } #table-legend { padding: 10px; border: 1px solid; } #inset-label { padding: 5px; position: absolute; z-index: 1; background-color: white; left: 30px; top: -1em; } td.color { width: 60px; height: 20px; background-color: aqua; } td.label { vertical-align: middle; } td.legend { width: 20%; } #non-metals { background-color: LightGreen; } #transition { background-color: DarkTurquoise; } #rare-earth { background-color: LightBlue; } #halogens { background-color: yellow; } #alkali { background-color: orange; } #alkali-earth { background-color: aqua; } #other { background-color: MediumPurple; } #inert { background-color: DarkRed; } </style> </head> <body> <div id="legend-block"> <table id="table-legend"> <tr> <td class="legend"> <table> <tr> <td class="color" id="non-metals"</td> <td class="label">Non-Metals</td> </tr></table></td> <td class="legend"> <table><tr> <td class="color" id="transition"></td> <td class="label">Transition Metals</td> </tr></table></td> <td class="legend"> <table><tr> <td class="color" id="rare-earth"></td> <td class="label">Rare Earth Metals</td> </tr></table></td> <td class="legend"> <table><tr> <td class="color" id="halogens"></td> <td class="label">Halogens</td> </tr></table></td> </tr> <tr> <td class="legend"> <table><tr> <td class="color" id="alkali"</td> <td class="label">Alkali Metals</td> </tr></table></td> <td class="legend"> <table><tr> <td class="color" id="alkali-earth"></td> <td class="label">Alkali Earth Metals</td> </tr></table></td> <td class="legend"> <table><tr> <td class="color" id="other"></td> <td class="label">Other Metals</td> </tr></table></td> <td class="legend"> <table><tr> <td class="color" id="inert"></td> <td class="label">Inert Elements</td> </tr></table></td> </tr> </table> <div id="inset-label">Legend</div> </div>
  5. (12 points, periodic-cell.html): Write an html document with an internal stylesheet that creates the periodic cell element shown below:
    The specifications for this problem are as follows:

    <head> <style> #h { position: absolute; top: 50%; width: 100%; text-align: center; margin-top: -0.5em; } #b { position: relative; width: 60px; height: 60px; border: 1px solid; } .wt-label { position: absolute; right: 5; top: 5; font-size: x-small; } </style> </head> <body> <div id="b"> <div id="h"> H </div> <div class="wt-label">1</div> </div> </body>

  6. (12 points, paper.css) Create an external style sheet for the page layout shown below:
    The visual characteristics of the document are as follows:

    Here is a sample html file to work with.

    body { font-family: "Times New Roman", Times, serif; font-size: small; } #title { top: 0px; position: fixed; padding: 20px; text-align: center; width: 100%; height: 20px; font-weight: bold; font-size: large; background-color: yellow; } #author { margin-top: 90px; text-align: center; font-style: italic; font-size: medium; } #abstract { margin-top: 40px; margin-left: auto; margin-right: auto; width: 50%; max-width: 480px; text-align: center; font-style: italic; color: blue; } #left-column { margin-left: 20px; float: left; width: 45%; } #right-column { margin-right: 20px; float: right; width: 45%; }

  7. (8 points, answer.txt) What is the similarity between the keywords local and my in Perl. What is the difference between them?

    Similarity: They both declare the scope of a variable to be local to the current function

    Difference: my indicates that static scoping is to be used and local indicates that dynamic scoping is to be used. Static scoping means that you use the block structure of the program to find the value of a variable if the variable is not declared locally. Dynamic scoping means you search through the stack to find the value of a variable if the variable is not declared locally.

  8. (6 points, fox.pl) Use a foreach loop to iterate through the lines of stdin and print those lines that contain the word "fox". For example, if stdin contains the lines:
    the quick brown fox jumped
    over the fence
    and then the fox eluded the fox
    pursuing dogs.
    your output would look like:
    the quick brown fox jumped
    and then the fox eluded the fox
    foreach $line (<STDIN>) { if ($line =~ /fox/) { print $line; } }
  9. (12 points, count.pl) Copy the file ~bvz/scripting/exams/midterm1/count.pl. count.pl counts the frequency with which words occur in standard input. In order to make it work, add to count.pl a Perl function named incrementCount that takes a key and a reference to a hash as parameters. If the key is in the hash, then incrementCount increments the key's value field by 1. If the key is not in the hash, then incrementCount inserts the key into the hash and assigns it a value of 1. sub incrementCount { my ($key, $dictionary) = @_; if ($$dictionary{$key}) { $$dictionary{$key} += 1; } else { $$dictionary{$key} = 1; } }