Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Iowa, United States
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Need help making a grading script

    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!

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Nookie (12-10-2012)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Iowa, United States
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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>

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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
    Code:
    <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
    Code:
    <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:
    Code:
    <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=.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Nookie (12-11-2012)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    So looping is fairly easy.

    Code:
    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 ...
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Nookie (12-11-2012)

  • #7
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Iowa, United States
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Iowa, United States
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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):
    Code:
    <!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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Nookie (12-13-2012)

  • #12
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Iowa, United States
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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!

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by Nookie View Post
    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.

    Code:
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Iowa, United States
    Posts
    9
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •