CSci 1101 Problem set 2

CSci 1101 Problem set 2. Due Thursday, Oct. 5 at 10pm

Question 1

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>
<head>
<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>

Copy-paste this code into a PHP file.
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 rynite (or, better yet, its subfolder). Test your program. Correct mistakes if any.
Change the values of the two variables $color1 and $color2 to any other colors. Do not change anything else in the program. Upload the changed file and make sure that the list elements are now of the new colors.

Question 2

Your task is to write a PHP program that displays results of voting for two candidates as color bars of three different colors. The names of the candidates and the number of votes for each candidate are set in variables in the beginning of the program.

The code shows a sample of displaying a color bar followed by the name of a candidate. The width of the color bar, the name of the candidate, and the votes are all fixed in the example, you need to change this so that all of them 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 formatting.

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>
<head>
<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>

Question 3

In the voting program in the previous question print out the name of the winner. If it's a tie, print out both names and a message saying that they got equal number of votes.

Question 4

Recall the program hours.php that prints a greeting based on the time of the day (the lecture examples are posted here). Change the program so that, instead of printing the greeting, it prints out the time in the standard am/pm format. For instance, if the input is 13, the program should print 1pm. If the input is less than 0 or greater than 23, the program should print "Invalid time".

Question 5.

You are given an HTML file that displays a list:


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
An unordered list - to be numbered in reverse
Author: Elena Machkasova elenam@morris.umn.edu
Last modified: 9/28/06
-->
<html>
<head>
<title>
CSCi 1101 - numbering a list in reverse
</title>
</head>
<body>
<h1>5 reasons to use CSS:</h1>
<ul>
<li>It's a modern way to format web pages.</li>
<li>It's is easy to learn.</li>
<li>The appearance of the web page is easy to change.</li>
<li>You can format multiple pages the same way.</li>
<li>Your web pages look cool!</li>
</ul>
</body>
</html>

Copy the code into a file reverse_list.php and upload it on rynite. Check what the program displays.
Change the list to an ordered list.
Set a php variable $count to 5 before the start of the list. Use this variable to count down the list of items.
Use the value attribute of li tag to number the list items in reverse order (from the highest, i.e. value 5, to the lowest, i.e. 1). Use the variable $count. Decrement it by 1 after printing each list item.

You may use any other "5 reasons to..." reverse-ordered list instead of this one - just for fun.
As an extra credit, you may also increase the font size (use font-size CSS property) by a certain percent for each next list item. Use the variable $count and possibly other variables to accomplish this. Note that some font sizes may not work well in some browsers.

Testing and submitting your code

A form that generates some test cases for your programs (questions 2, 3, and 4, since the other programs don't require input) is located here: http://rynite.morris.umn.edu/csci1101/ps2_testing.html. Choose the problem number, enter your login name in lowercase letters and the path to your file from your public_html, then click Submit. Make sure that your program gets input as shown in the in-class example (a link will be posted shortly). If your program takes one input, its name is "input", if it takes two inputs, their names are "input1" and "input2".
To submit your programs, make sure that your current version is uploaded to rynite and send me an e-mail that lists all the file names and their locations.

This page is a part of CSci 1101 course web site.