CSci 1101 Problem set 2. Due Tuesday, February 16 at 11:59pm

Problem 1 (8 points)

You are given the following file with HTML and PHP code: 


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Author: Elena Machkasova elenam@morris.umn.edu
Last modified: 9/24/06
-->
<?php
$color1 = "#FFA500"; // orange
$color2 = "#8B0000"; // dark red
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>

Alternating colors example
</title>

</head>
<body>
<ol>
<li>List element</li>
<li>Another list element</li>

<li>And another one</li>

<li>Finally, the last one</li>
</ol>
</body>
</html>
  1. Copy-paste this code into a PHP file.
  2. Add PHP code so that the text color of the list elements alternates between the two colors specified in the variables $color1 and $color2. Make sure that you are using the color variables, not the colors themselves. Upload your file into your public_html on csci1101sp09 (or, better yet, its subfolder). Test your program. Correct mistakes if any.
  3. Change the values of the two variables $color1 and $color2 to any other colors. Do not change anything else in the program. Upload (or save) the changed file and make sure that the list elements are now of the new colors.

Problem 2 (12 points)

Your task is to write a PHP program that displays results of voting for two candidates as color bars of two different colors. The names of the candidates are set as variables in the beginning of the program. The number of votes for each candidate should be passed to the program as an input, via $_GET['input1'] and $_GET['input2']). Please use exactly these names (input1, input2) since we will be testing your programs and it helps when the input names are standard.

The code shows a sample of displaying a color bar followed by the name of a candidate as a table. The width of the color bar, the name of the candidate, and the votes are all fixed in the example. You need to change the program so that all of these settings depend on the variables (for instance, if the number of votes changes from 15 to 20 in $votes1, the width of the color bar is automatically set to 100px). You also need to add another table to display the votes for the other person.

Format the page any way you like. Add a header to explain what the page is about.
Note the padding property for <td> in the embedded style sheet. Feel free to change it if you prefer a different format.

Make sure to check your page for several different names and numbers of votes. 



<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Author: Elena Machkasova elenam@morris.umn.edu
Last modified: 2/9/06
-->
<?php
$name1 = "Bart Simpson";
$name2 = "Lisa Simpson";
$votes1 = 15;
$votes2 = 12;
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>
Voting results
</title>
<style type="text/css">

td {padding: 3px}
</style>
</head>
<body>
<table>

<tr>
<td style="background: blue; height: 20px; width: 75px;" />
<td>
Bart Simpson 15

</td>
</tr>
</table>
</body>
</html>

Testing and submitting your code

CSci 1101 course web site.