...

View Full Version : Grade Book



Staceadam
11-28-2012, 07:53 PM
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.


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

Old Pedant
11-28-2012, 08:26 PM
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.

Old Pedant
11-28-2012, 08:30 PM
(An easy solution would be to move *ALL* the JS code to just before the </body>.)

AndrewGSW
11-28-2012, 08:59 PM
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.

Old Pedant
11-28-2012, 09:32 PM
$(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?

AndrewGSW
11-28-2012, 09:37 PM
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 :thumbsup:.

There are other issues.. #letter1 is a TD and so doesn't have a val(). But, looking back, the OP never asked a question..

Staceadam
11-29-2012, 12:12 AM
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?

Old Pedant
11-29-2012, 12:52 AM
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.


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*.



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]
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.

Staceadam
11-29-2012, 01:54 AM
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?


<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>");

}

Old Pedant
11-29-2012, 03:10 AM
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

[object],[quote],[quote]

if you had 3 students so it is pretty useless.)

felgall
11-29-2012, 08:50 AM
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.

rnd me
11-30-2012, 01:17 AM
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-20080610/dom.html#innerhtml
http://domparsing.spec.whatwg.org/#innerhtml
https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML
http://msdn.microsoft.com/en-us/library/ie/ms533897(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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum