Need help making a grading script

[Nookie]

I need a way to easily calculate the grades of the students in a class at the end of the semester with javascript. Want to input grades as percentages and onClick, would like the letter grade of the student to appear at the end of the row for each student. Following a basic 90, 80, 70, 60, 50 grading scale with no plus or minus. I need rows of text fields for the students and columns for the assignments. If anyone knows of a good place to find a reference for something like this it would be appreciated. Thanks in advance!

[AndrewGSW]

I suggest you need to build the HTML (and CSS) firstly. You can construct a form with a table and some cells (TDs) would contain text-inputs for the marks, etc..

If you are looking to extract the student names from somewhere, and store the grades and marks, then there is quite a bit more work involved.

[Old Pedant]

This sounds like just a variation on the same homework problem that appears here with great regularity. So if this is homework for some class (hard to believe it isn't, actually), you need to read rule 1.5 here:
http://www.codingforums.com/rules.htm

The more work you do yourself, the more likely you are to get assistance.

[Nookie]

This is a couple rows of the form/table that I built and I just have a couple questions before starting the js. First I'm wondering if the decimal in the ID's will work okay in js or if that should be changed? Also is there a loop I can incorporate into the script so that each row adds the diff. values entered and returns the letter grade @ the end or do I need to manually right each one out exmpl: ((a1 + a2 + q1 + q2 + a3 + a4 + final) / 7)

<form id="form1" name="form1" method="post" action="">
<table border="0" cellspacing="5" cellpadding="0">
<tr>
<th scope="col">&nbsp;</th>
<th scope="col">Assignment 1</th>
<th scope="col">Assignment 2</th>
<th scope="col">Quiz 1</th>
<th scope="col">Quiz 2</th>
<th scope="col">Assignment 3</th>
<th scope="col">Assignment 4</th>
<th scope="col">Final Exam</th>
<th scope="col">Letter Grade</th>
</tr>
<tr>
<th scope="row">Bobbi Dooley</th>
<td><label for="a1"></label>
<input name="a1" type="text" id="a1" size="4" maxlength="3" /></td>
<td><label for="a2"></label>
<input type="text" name="a2" id="a2" size="4" maxlength="3" /></td>
<td><label for="q1"></label>
<input type="text" name="q1" id="q1" size="4" maxlength="3" /></td>
<td><label for="q2"></label>
<input type="text" name="q2" id="q2" size="4" maxlength="3" /></td>
<td><label for="a3"></label>
<input name="a3" type="text" id="a3" size="4" maxlength="3" /></td>
<td><label for="a4"></label>
<input name="a4" type="text" id="a4" size="4" maxlength="3" /></td>
<td><label for="final"></label>
<input name="final" type="text" id="final" size="4" maxlength="3" /></td>
<td><label for="letter"></label>
<input name="letter" type="text" id="letter" size="4" maxlength="3" /></td>
</tr>
<tr>
<th scope="row">Steve Bosell</th>
<td><label for="a1.1"></label>
<input name="a1.1" type="text" id="a1.1" size="4" maxlength="3" /></td>
<td><label for="a2.1"></label>
<input type="text" name="a2.1" id="a2.1" size="4" maxlength="3" /></td>
<td><label for="q1.1"></label>
<input type="text" name="q1.1" id="q1.1" size="4" maxlength="3" /></td>
<td><label for="q2.1"></label>
<input type="text" name="q2.1" id="q2.1" size="4" maxlength="3" /></td>
<td><label for="a3.1"></label>
<input type="text" name="a3.1" id="a3.1" size="4" maxlength="3" /></td>
<td><label for="a4.1"></label>
<input type="text" name="a4.1" id="a4.1" size="4" maxlength="3" /></td>
<td><label for="final1"></label>
<input type="text" name="final1" id="final1" size="4" maxlength="3" /></td>
<td><label for="letter1"></label>
<input type="text" name="letter1" id="letter1" size="4" maxlength="3" /></td>
</tr>

[Old Pedant]

Suggestions:

If you are going to use numbered rows (or numbered field in rows), then never have one row that is *not* numbered.

That is, instead of

<input name="a1" type="text" id="a1" size="4" maxlength="3" /></td>
<input type="text" name="a2" id="a2" size="4" maxlength="3" /></td>

vs.

<input name="a1.1" type="text" id="a1.1" size="4" maxlength="3" /></td>
<input type="text" name="a2.1" id="a2.1" size="4" maxlength="3" /></td>

Either *start* with a1.1, a2.1, etc., or change the first set to

<input name="a1.0" type="text" id="a1.0" size="4" maxlength="3" /></td>
<input type="text" name="a2.0" id="a2.0" size="4" maxlength="3" /></td>

and so on.

**************

If you aren't going to put anything between the <label> and </label> then why bother with them?

And a simpler way to do labels, if you do use them, is this:

<label> stuff in label <input name="whatever" /> more stuff in label </label>

Now you don't have to have an ID on your <input> field or use for="someid" in the <label>.
(The labels don't act *quite* the same, but for all practical purposes they do.)

*************

No, you shouldn't use periods in IDs. But they are okay in names. (Though underlines would probably be better in either case.)

You won't need IDs any more if you get rid or your <label>s that use for=.

[Old Pedant]

So looping is fairly easy.

var form = document.getElementById("form1");
for ( var row = 0; row < 999999; ++row ) /* or start at 1 depending on your fields */
{
    // test to see if there is a row with this number:
    var a1field = form["a1_" + row];
    if ( a1field == null ) breaik; // out of the for loop

    // the +form here converts the value to a number.  Omit the + if not a number
    var a1 = +form["a1_" + row].value;
    var a2 = +form["a1_" + row].value;
    var q1 = +form["q1_" + row].value;
    var q2 = +form["q2_" + row].value;
    var a3 = +form["a3_" + row].value;
    var a4 = +form["a4_" + row].value;
    ... now do your processing ...
}

[Nookie]

1st off thank you both for your help! Old Pedant, the reason the <label> tags were in there is because I built the HTML in Dreamweaver and it just included them. Unfortunately, I was unable to get the loop that you suggested to work so I wrote it out long hand, but with some copy and paste it didn't take as long as I thought it would. I know that the loop would make it easier to add students and assignments but for this I don't need to worry about it.

So here is the JS I ended up with and it works! (This is just for the 1st row.)

function grademe(){
var a1_1=document.getElementById("a1_1").value;
var a2_1=document.getElementById("a2_1").value;
var q1_1=document.getElementById("q1_1").value;
var q2_1=document.getElementById("q2_1").value;
var a3_1=document.getElementById("a3_1").value;
var a4_1=document.getElementById("a4_1").value;
var final_1=document.getElementById("final_1").value;
document.getElementById("letter_1").value = calcGrade(a1_1,a2_1, q1_1,q2_1,a3_1,a4_1,final_1);
}

function calcGrade(n1,n2,n3,n4,n5,n6,n7){
var score= ((parseInt(n1)+ parseInt(n2)+parseInt(n3)+parseInt(n4)+parseInt(n5) +parseInt(n6)+parseInt(n7)) /7);
if (score >= 90) { result = 'A'; }
else if (score >= 80) { result = 'B'; }
else if (score >= 70) { result = 'C'; }
else if (score >= 60) { result = 'D'; }
else { result = 'F'; }
return (result);

}

oh and of course I added a button onclick=grademe(); at the end of the form.

Thanks again

[Old Pedant]

You need to figure out why my loop didn't work.

If *I* were grading your work, it would be the difference between maybe an A grade and a C+ grade.

Truly, if it didn't work, it was probably a minor typo. It's worth the effort to figure it out.

Again, learn to use a debugger. And again, Chrome is your best bet.

[Nookie]

This was my 1st ever JS assignment and the instructor pretty much just wanted to see if we could make it work. But yes I am going to figure out what I did wrong but I had to have it in today. Also we were not told about the debugger so I will bring that up in my next class so he impliments it into future classes. He's only in his 2nd year running the program so I'll cut him some slack! haha

[Old Pedant]

That was 1st assignment??? In that case, forget it. You get an A.

It felt more like a mid-quarter assignment.

And, yes, do all your fellow students a favor by turning them on to the debugger.

Even if you only use it for finding errors (that is, even if you only use the Console it's a big help. But do try take 20 minutes or so and learn how to use the debugger. You will be amazed at how much help it can be.

[Old Pedant]

If you care, here it is working in a loop (and with weighted grading...3x for the quizzes, 10x fro the final, just for fun):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grading</title>
</head>
<body>
<form id="form1" method="get" action="">
<table border="1" cellspacing="5" cellpadding="0">
<tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">Assignment 1</th>
    <th scope="col">Assignment 2</th>
    <th scope="col">Quiz 1 (3x)</th>
    <th scope="col">Quiz 2 (3x)</th>
    <th scope="col">Assignment 3</th>
    <th scope="col">Assignment 4</th>
    <th scope="col">Final Exam (10x)</th>
    <th>Weighted Average</th>
    <th scope="col">Letter Grade</th>
</tr>
<tr>
    <th scope="row">Bobbi Dooley</th>
    <td><input type="text" name="a1_1" size="4" maxlength="3" /></td>
    <td><input type="text" name="a2_1" size="4" maxlength="3" /></td>
    <td><input type="text" name="q1_1" size="4" maxlength="3" /></td>
    <td><input type="text" name="q2_1" size="4" maxlength="3" /></td>
    <td><input type="text" name="a3_1" size="4" maxlength="3" /></td>
    <td><input type="text" name="a4_1" size="4" maxlength="3" /></td>
    <td><input type="text" name="final_1" size="4" maxlength="3" /></td>
    <td><input type="text" name="average_1" size="4" maxlength="3" readonly="readonly" /></td>
    <td><input type="text" name="letter_1" size="4" maxlength="3" readonly="readonly" /></td>
</tr>
<tr>
    <th scope="row">Alfred Nobel</th>
    <td><input type="text" name="a1_2" size="4" maxlength="3" /></td>
    <td><input type="text" name="a2_2" size="4" maxlength="3" /></td>
    <td><input type="text" name="q1_2" size="4" maxlength="3" /></td>
    <td><input type="text" name="q2_2" size="4" maxlength="3" /></td>
    <td><input type="text" name="a3_2" size="4" maxlength="3" /></td>
    <td><input type="text" name="a4_2" size="4" maxlength="3" /></td>
    <td><input type="text" name="final_2" size="4" maxlength="3" /></td>
    <td><input type="text" name="average_2" size="4" maxlength="3" readonly="readonly" /></td>
    <td><input type="text" name="letter_2" size="4" maxlength="3" readonly="readonly"/></td>
</tr>
<tr>
    <th scope="row">Tom Zamboni</th>
    <td><input type="text" name="a1_3" size="4" maxlength="3" /></td>
    <td><input type="text" name="a2_3" size="4" maxlength="3" /></td>
    <td><input type="text" name="q1_3" size="4" maxlength="3" /></td>
    <td><input type="text" name="q2_3" size="4" maxlength="3" /></td>
    <td><input type="text" name="a3_3" size="4" maxlength="3" /></td>
    <td><input type="text" name="a4_3" size="4" maxlength="3" /></td>
    <td><input type="text" name="final_3" size="4" maxlength="3" /></td>
    <td><input type="text" name="average_3" size="4" maxlength="3" readonly="readonly" /></td>
    <td><input type="text" name="letter_3" size="4" maxlength="3" readonly="readonly"/></td>
</tr>
</table>
<input type="button" name="grade" value="** ASSIGN GRADES **" />
</form>

<script type="text/javascript">
(
  function( )
  {
      var form = document.getElementById("form1");
      form.grade.onclick = doGrading;
      
      function doGrading( )
      {
            for ( var row = 1; row < 999999; ++row ) /* or start at 1 depending on your fields */
            {
                // test to see if there is a row with this number:
                var a1field = form["a1_" + row];
                if ( a1field == null ) break; // out of the for loop

                // the +form here converts the value to a number.  Omit the + if not a number
                var a1 = +form["a1_" + row].value;
                var a2 = +form["a1_" + row].value;
                var a3 = +form["a3_" + row].value;
                var a4 = +form["a4_" + row].value;
                var q1 = +form["q1_" + row].value;
                var q2 = +form["q2_" + row].value;
                var final = +form["final_" + row].value;
                var points = a1 + a2 + a3 + a4 + 3*q1 + 3*q2 + 10*final;
                if ( ! isNaN(points) )
                {
                    var score = points / 20;
                    if (score >= 90) { result = 'A'; }
                    else if (score >= 80) { result = 'B'; }
                    else if (score >= 70) { result = 'C'; }
                    else if (score >= 60) { result = 'D'; }
                    else { result = 'F'; }
                    form["letter_" + row].value = result;
                    form["average_" + row].value = score.toFixed(1);
                }
            }
      }
  }
)();
</script>
</body>
</html>

[Nookie]

Thanks that is awesome that you took the time to show me that! And I am going to say something that I'm pretty sure I'll never tell you again.... I found a couple simple errors in the code:

The first 2 var's were calling the same answer ["a1_" + row].
var a1 = +form["a1_" + row].value;
var a2 = +form["a1_" + row].value;
var a3 = +form["a3_" + row].value;
var a4 = +form["a4_" + row].value;
var q1 = +form["q1_" + row].value;
var q2 = +form["q2_" + row].value;

Also for some reason the var points = a1 + a2 + a3 + a4 + 3*q1 + 3*q2 + 10*final;
was only adding up q1,q2, and final after they were multiplied.?. All I had to do was add parentheses around the equation and everything seems to be working fine now.

I don't know if you left these errors in to see if I'd figure it out but I just wanted to point it out cuz I'm proud of myself for being able to find them.

Thanks again you have been so much help!

[Old Pedant]

Originally Posted by Nookie

The first 2 var's were calling the same answer ["a1_" + row].
var a1 = +form["a1_" + row].value;
var a2 = +form["a1_" + row].value;

NICE CATCH! A typo on my part, hard to find.

Also for some reason the  var points = a1 + a2 + a3 + a4 + 3*q1 + 3*q2 + 10*final;
was only adding up q1,q2, and final after they were multiplied.?.

Read what I wrote:

... (and with weighted grading...3x for the quizzes, 10x fro the final, just for fun):

That was to show you how easy it is to *DO* weighted grading, where quizzes and tests count more than assignments, which is true in most real-world classes, isn't it?

[Nookie]

Originally Posted by Old Pedant

Read what I wrote:
That was to show you how easy it is to *DO* weighted grading, where quizzes and tests count more than assignments, which is true in most real-world classes, isn't it?

Yeah I seen that, but this is the first time I have ever heard the term "weighted grading". Everything I get graded on is "face value" the assignments, tests, finals, ect. are each worth a set number of points. But I can see how that may come in handy.