I have the following three files:
gradegrid.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Grade Grid!</title>
<link rel="stylesheet" type="text/css" href="gradegrid.css">
</head>
<body>
<div style="width: 370px; margin: auto">
<h1>GradeGrid Generator</h1>
<form action="gradegrid.php" method="post">
<fieldset>
<p><input type="text" name="eval_name" size="30" maxlength="40" style="width: 100%" placeholder="Name of the Evaluation"/></p>
<p><input type="text" name="max_points" size="10" maxlength="4" style="width: 33%" placeholder="Max Points"/></p>
<table>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>minimum %:</td>
<td><input type="text" name="a_min" size="2" maxlength="2" value="90" /></td>
<td><input type="text" name="b_min" size="2" maxlength="2" value="80" /></td>
<td><input type="text" name="c_min" size="2" maxlength="2" value="70" /></td>
<td><input type="text" name="d_min" size="2" maxlength="2" value="60" /></td>
</tr>
</table>
<p><label for="precision">Output Precision: </label>
<input type="radio" name="precision" value="0" checked="checked" /> 1
<input type="radio" name="precision" value="1" /> 0.1
</p>
<p><label>Columns in output:
<select name="columns">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></label></p>
</fieldset>
<p align="center"><input type="submit" name="submit" value="Generate GradeGrid!" /></p>
</form>
</div>
</body>
</html>
gradegrid.css
* {
font-family: Verdana, Geneva, sans-serif;
}
body {
background-color: gainsboro;
}
h1 {
text-align: center;
font-size: 24px;
}
h2 {
text-align: center;
font-size: 16px;
}
p {
font-family: verdana;
font-size: 16px;
}
table {
border-collapse:collapse;
background-color: cornsilk;
font-size: 14px;
margin: 0 auto;
}
td {
border: none;
padding-top: 7px;
padding-bottom: 7px;
}
tr:nth-child(even) {background-color: lavender}
.ltrGrade {
color: lightslategray;
padding-right: 10px;
float: right;
}
.pctGrade {
padding-left: 1px;
padding-right: 3px;
}
.points {
padding-left: 10px;
}
input {
height: 30px;
font-size: 16px;
}
.notice {
font-style: italic;
color: firebrick;
font-size: 12px;
text-align: center;
}
gradegrid.php
<!doctpye html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Scores</title>
<link rel="stylesheet" type="text/css" href="gradegrid.css" />
</head>
<body>
<?php
// variables for all the input elements
$eval_name = $_POST['eval_name'];
$max_points = $_POST['max_points'];
$precision = $_POST['precision'];
$a_min = $_POST['a_min'];
$b_min = $_POST['b_min'];
$c_min = $_POST['c_min'];
$d_min = $_POST['d_min'];
$columns = $_POST['columns'];
// stores string for any possible 'notice' messages
$errors = "";
$letterGrade;
$percentage;
$scores = array();
// get the input from the form and make sure it is all valid
if (isset($_POST['submit'])) {
if ($_POST['eval_name'] == "") {
$eval_name = "Evaluation";
}
if ($_POST['max_points'] < 0 or $_POST['max_points'] == "") {
$max_points = 100;
$errors .= "<p class='notice'>No maximum points specified or value out of range, defaulting to 100.</p>
";
}
if ($a_min <= $b_min or $b_min <= $c_min or $c_min <= $d_min) {
$a_min = 90;
$b_min = 80;
$c_min = 70;
$d_min = 60;
$errors .= "<p class='notice'>Input values for ranges were invalid, defaulting to 90, 80, 70, 60%</p>
";
}
}
// put all of the points/percentage/letterGrade data into $scores array
for ($i = $max_points; $i >= 0; $i--) {
$percentage = round(($i / $max_points) * 100, $precision);
// assign letter grades based off percentage
if ($percentage >= $a_min) {
$letterGrade = "A";
} else if ($percentage >= $b_min) {
$letterGrade = "B";
} else if ($percentage >= $c_min) {
$letterGrade = "C";
} else if ($percentage >= $d_min) {
$letterGrade = "D";
} else {
$letterGrade = "F";
}
// some formatting to make the output look nice
$scores[$i] = "<td><span class='points'>$i</span> - <span class='pctGrade'>$percentage%</span><span class='ltrGrade'>($letterGrade)</span></td>
";
}
// output the header information (title, max points, grading scale)
echo "<h1>$eval_name</h1>
";
echo "<h2>$max_points maximum points.</h2>
";
echo "<h2>A: 100 - $a_min%; B: <$a_min - $b_min%; C: <$b_min - $c_min%; D: <$c_min - $d_min%; F: <$d_min%</h2>
";
// output any error messages if necessary
echo $errors;
// output the table
echo "<table>
";
echo "<tr>
";
for ($i = count($scores) - 1; $i > 0; $i--) {
$newRowCounter = count($scores) - $i;
echo $scores[$i];
if ($newRowCounter % $columns == 0) {
echo "</tr>
";
echo "<tr>
";
}
}
echo "</tr>
";
echo "</table>
";
?>
</body>
</html>
The first two files aren't that important, they are just there so you can have the full code. It's the PHP file that I am focused on. So basically what this little application does is it allows you to enter in the maximum number of points for a test, and then it generates a table showing you the percentage grade for the number of points that were right.
An example of an output table with the grades divided into five columns (which the user can choose the number of columns):
Right now the grades are displaying from left to right. I want them to display from top to bottom, which is easier to look at when you're grading tests. How do I do that?