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 12 of 12

Thread: Grade Book

  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Grade Book

    Trying to set up a simple grade book. I need it to store a list of students, percentages and letter grades within an array. Every time a student is added, add it to the array and refresh the list below.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script> 
    $(function(){
    	
    	
    	$('#submit').click(processForm);
    });
    
    function processForm(){
    	
    var grades = new Array();
    
    function students()
    {
    grades[0]=$('#firstName');
    grades[1]=$('#lastName');
    grades[2]=$('#pointsEarned');	
    grades[3]=$('#pointsPossible');	
    }
    
    function percent(){
    grades[2] / grades[3] * 100;
    	
    }
    
    function letter(){
    if (percent() >= 90){
    	$('#letter1').val('A');
    }
    if (percent() >= 80){
    	$('#letter1').val('B');
    }
    if (percent() >= 70){
    	$('#letter1').val('C');
    }
    if (percent() >= 60){
    	$('#letter1').val('D');
    }
    if (percent() > 60){
    	$('#letter1').val('F');
    }
    	
    }
    
    	
    	
    	
    }
    
    
    
    </script>
    </head>
    
    <body>
    <form name="form1" method="post" action="">
      <p>First Name: 
        <input type="text" name="firstName" id="firstName">
        Last Name: 
      <input type="text" name="lastName" id="lastName">
        Points Earned: 
      <input type="text" name="pointsEarned" id="pointsEarned">
        Points Possible: 
      <input type="text" name="pointsPossible" id="pointsPossible">
      </p>
      <p>
        <input type="button" name="submit" id="submit" value="Submit">
      </p>
    </form>
    <table width="936" height="117" border="1">
      <tr>
        <td id="first1">&nbsp;</td>
        <td id="last1">&nbsp;</td>
        <td id="points1">&nbsp;</td>
        <td id="letter1">&nbsp;</td>
      </tr>
      <tr>
        <td width="199" id="first2">&nbsp;</td>
        <td width="237" id="last2">&nbsp;</td>
        <td width="242" id="points2">&nbsp;</td>
        <td width="230" id="letter2">&nbsp;</td>
      </tr>
      <tr>
        <td id="first3">&nbsp;</td>
        <td id="last3">&nbsp;</td>
        <td id="points3">&nbsp;</td>
        <td id="letter3">&nbsp;</td>
      </tr>
      <tr>
        <td id="first4">&nbsp;</td>
        <td id="last4">&nbsp;</td>
        <td id="points4">&nbsp;</td>
        <td id="letter4">&nbsp;</td>
      </tr>
    </table>
    <p>&nbsp;</p>
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Your instructor actually lets you use jQuery in a beginning JavaScript class??? Ugh.

    Well, he/she should teach you how to use it right, if so.

    Your function to attach the onclick handler to the button is firing too soon...before the button is even defined.
    Last edited by Old Pedant; 11-28-2012 at 07:29 PM.
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    (An easy solution would be to move *ALL* the JS code to just before the </body>.)
    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
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Your function to attach the onclick handler to the button is firing too soon...before the button is even defined.
    $(function(){
    // is equivalent to
    $(document).ready(

    so this, of itself, is not an issue.

    grades[2]=$('#pointsEarned');

    is storing a jQuery object, but you then attempt to use this in an expression (grades[2]/ grades[3]). You need to extract the .val() from the element(s) and probably, also, convert it/these to a number.

    But there are other issues; e.g. percent() doesn't return a value. Some languages return the value of the last expression, but JS requires an explicit return statement.
    "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

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    $(function(){
    // is equivalent to
    $(document).ready(
    Ahhh...sorry about that.

    ********

    Don't you have to wonder about the overall design, though?

    What value is there in using that silly grades array? And of course the code for setting the letter grade is very badly broken. Only works for first student. And so on.

    I have to wonder why an instructor would be using jQuery on something like this when clearly the student needs to learn the basics of JavaScript first. No?
    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.

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I have to wonder why an instructor would be using jQuery on something like this when clearly the student needs to learn the basics of JavaScript first. No?
    Very much in agreement .

    There are other issues.. #letter1 is a TD and so doesn't have a val(). But, looking back, the OP never asked a question..
    "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

  • #7
    New Coder
    Join Date
    Nov 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I also agree that jquery in an introduction to javascript course is a bit silly. Could very well have to do with me not grasping some of these concepts. I guess my question would be how am I supposed to allow a user to input multiple sets of data that are stored within an array and are sortable?

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Well, your problem is that your array is *NOT* HOMOGENEOUS.

    That is, one element of your array is a name, one is points possible, etc.

    So if you sorted it, what meaning would it have for the name to come after the points possible, etc.???

    What you *want* to do is get the date for *ALL* students into a *SINGLE* array and THEN sort that array.

    Two ways to do it.

    Clunky way: An array of arrays.
    Code:
    var info = [ ]; // at the global level
    
    function addStudent( )
    {
        var student = [ $('#firstName').val(), $('#lastName').val(), $('#pointsEarned').val(),$('#pointsPossible').val() ];
        info.push( student );
    }
    Better way: An array of *OBJECTS*.

    Code:
    var info = [ ]; // at the global level
    
    function addStudent( )
    {
        var student = { 
            firstname : $('#firstName').val(), 
            lastnane : $('#lastName').val(), 
            earned : $('#pointsEarned').val(),
            possible :  $('#pointsPossible').val() 
        };
        info.push( student );
    }
    Or, using a constructor:
    [code]
    Code:
    var info = [ ]; // at the global level
    
    // this is the constructor function for one Student object:
    function Student( fn, ln, pts, poss )
    {
        this.firstname = fn;
        this.lastname = ln;
        this.points = pts;
        this.possible = poss;
    }
    
    function addStudent( )
    {
        var student = new Student(
                   $('#firstName').val(), 
                   $('#lastName').val(), 
                   $('#pointsEarned').val(),$('#pointsPossible').val() 
        );
        info.push( student );
    }
    Here's a maybe surprise for you: Those last two schemes produce *IDENTICAL* results.

    *********

    Anyway, now (in all 3 cases) you have an array that holds the info about *ALL* students. And now you can MEANINGFULLY sort that array. I'll leave that exercise to you, to find out how to supply a custom array sort function to JS. HINT: It is *easy*. If it is longer than 3 lines of code, you goofed.
    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 Coder
    Join Date
    Nov 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks that helped a ton. So now I having trouble outputting whats in the array to the document. My syntax must be wrong because it is not outputting anything. Any suggestions?

    Code:
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script> 
    
    var grades = [ ];
    
    $(function(){
    	
    $('#submit').click(processForm);
    
    });
    
    function processForm(){
    
    function addstudent(){
    
    	 var student = { 
            firstname : $('#firstName').val(), 
            lastname : $('#lastName').val(), 
            earned : $('#pointsEarned').val(),
            possible :  $('#pointsPossible').val() 
        };
    	
        grades.push(student);
    }
    
    document.write(grades + "<br>");
    
    }

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    NO NO NO NO.

    You can *NOT* use document.write() once a web page is laoded!

    IF YOU DO, you WIPE OUT alll content on the page! Including even the JS code that did the document.write!

    (On top of that, doing document.write(grades) would just display something like[quote]
    [object],[quote],
    if you had 3 students so it is pretty useless.)
    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
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Try using innerHTML instead - that's what replaced document.write for those at the beginner stage with JavaScript back in about 2005.

    Once you get to an intermediate level with JavaScript you will then stop using innerHTML because of the limitations on how it can be used and start using actual JavaScript document object model commands instead.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #12
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    Quote Originally Posted by felgall View Post
    Once you get to an intermediate level with JavaScript you will then stop using innerHTML because of the limitations on how it can be used and start using actual JavaScript document object model commands instead.
    innerHTML is an actual dom command, at least according to everyone who sets standards:
    http://www.w3.org/TR/2008/WD-html5-2...html#innerhtml
    http://domparsing.spec.whatwg.org/#innerhtml
    https://developer.mozilla.org/en-US/...ment.innerHTML
    http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx

    I use it a lot, are you saying i'm at a "pre-intermediate" level?

    old war stories don't count as html5-era advice, so let's not re-fight those battles.

    innerHTML is a lot faster at list generation, especially as the node count goes over 5000.

    while old browsers may have treated it in an ad-hoc manner, the past couple years has turned innerHTML (and outerHTML) into a strict parsing dom method defined without the former ambiguities as a getter/setter on Element.
    Last edited by rnd me; 11-30-2012 at 12:31 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

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