help scripting a simple grade calculator

@gbowJan 22.2008

I’m trying to write a simple grade calculator for my students to post on my webpage…

Basically it should look like this:

What is your goal mark (%)? ________

What is your final term mark (%)? ________

_______% is what you need to score on the final exam to reach your goal mark.

Students should be able to fill in the first two blanks and click a calculate button so the script can fill in the third blank.

The script needs to calculate the mark this way:

((goal mark – term mark)*3)+term mark)=exam mark

Thanks for your help!

to post a comment

JavaScript

14 Comments(s) _↴

@scragarJan 22.2008 — #Scragar is using the new HTML5 atributes for the first time, so yeah!

[code=html]
 <form action='#' onsubmit='findscore(); return false;'>
 <p>Goal Mark: <input id='goal' type='number' max='100' min='0'></p>
 <p>Term Mark: <input id='term' type='number' max='100' min='0'></p>
 <p>Exam Mark: <input id='exam' type='number' disabled='disabled'></p>
 <p><input type='submit' value='find exam score needed'></p>
 </form>[/code]

then the javascript:

[code=php]<script type='text/javascript'>
 <![CDATA[
 
 function findscore(){ 
 var g = parseInt("0"+document.getElementById('goal').value, 10);
 g = (g > 100)?100:g;
 var t = parseInt("0"+document.getElementById('term').value, 10); 
 t = (t > 100)?100:t;
 var e = document.getElementById('exam'); 
 e.value = (g - t)*3+t; 
 };
 
 ]]>
 </script>[/code]

edited to add submit button, and again to fix function.

Updated function to include input validation. Sorry for all the edits.

@gbowauthorJan 22.2008 — #Scragar,

Thanks for your reply - everything looks great. Two questions:

1. The <form> script goes after the <body> tag right? and the javascript goes in the <head>. Is that right?

2. If it is right, then when I load the page the 'find exam score needed' button forces the browser to jump to the top of the page instead of running the findscore function.

Any ideas?

Thanks again,

gbow

@scragarJan 22.2008 — #

1. that's right.

2. the idea of "return false;" being the last part of the onsubmit atribute was to stop that. If it still does it then you could always replace the "#" in the action atribute with something like: "javascript:void();"

ohh, make sure that you've coppied the latest version of the javascript, and if you still get JS errors(IE it doesn't work) try:

[code=html]<script type='text/javascript'>
 /* <![CDATA[ */
 function findscore(){ 
 var g = parseInt("0"+document.getElementById('goal').value, 10); 
 g = (g > 100)?100:g; 
 var t = parseInt("0"+document.getElementById('term').value, 10); 
 t = (t > 100)?100:t; 
 var e = document.getElementById('exam'); 
 e.value = (g - t)*3+t; 
 }; 
 
 /* ]]> /*
 </script>[/code]

@FlukeyJan 22.2008 — #Nice code, however, i wouldn't use parseInt because it's not supported in Opera (i know their market share isn't big, but one student might use it!).

I'd use NaN. I think it's safe to assume that they're going to put in a base 10 number rather than their score in hexadecimal! ?

@scragarJan 22.2008 — #I tested it in opera 9.2.1, so don't tell me opera doesn't support parseInt

oh, and the whole forcing base 10 thing was so I could stick 0 infront of it, it has 2 handy effects:

normaly a string not begining with a number(negative, decimal or whatever) becomes NaN, with 0 infront it becomes 0

it prevents negatives, since "0-3" always returns 0, not -3.

and it's always wise to parse it to base 10 anyway, because it's so easy for someone to put in a leading 0.

@FlukeyJan 22.2008 — #Last time I used Opera it didn't support it. Though, this wasn't Opers 9. They've obviously changed it. Anyhows, it's silly using parseInt. One would only do this if the number is not decimal, hex or octal.

@FlukeyJan 22.2008 — #What about 1/2 marks? Not sure if these exams have them but they could.

@scragarJan 22.2008 — #how would you recomend converting a string into an int then? given that your planning to make more checks that I did(I only made 1 check, for the number being over 100, parse in handled my other 2 checks(number being negative and not entered/invalid)...

Please do not tell me that you are recomending an alternative to what I have proposed without first considering the security checks required on normal input? avoiding parseInt will proberly add 4 or so more lines, and add a considerable(proportionaly) overhead given the need for nested if statements or a sizeable condition.

oh, and half points are rare in scores, and require a minimal edit at worst(editing the parseInt into a parseFloat). Please use the edit button instead of posting again next time though, this forum is not for you to boost your post count without reason.

@FlukeyJan 22.2008 — #The problem is that the score *may* not be an Integer. You assumed it would be.

@FlukeyJan 22.2008 — #I have no intention of boosting my post score. And with all due respect please do not dictate to me. Thanks.

I agree half points are rare, but they're a possibility. I am not slating or insulting you for what you've done, i'm just suggesting problems/possibilities. I quote, 'Nice code'.

By the way, please do not edit posts because I don't know when you've replied to a post of mine because I use my email account to check if there is a reply.

@gbowauthorJan 22.2008 — #Hi again,

Let me begin by saying I really appreciate your efforts. Programming like this goes way beyond my understanding of javascript. So I wanted to start off by saying thanks.

I think I've followed your instructions correctly, but I still can't get script to run. I've attached the relevant code into a very simplified version of a webpage. Can you see why it's not working for me?

gbow

<!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" dir="ltr">

<head>

<title>Calculating Target Grades</title>

<script type='text/javascript'>

<![CDATA[

function findscore(){

var g = parseInt("0"+document.getElementById('goal').value, 10);

g = (g > 100)?100:g;

var t = parseInt("0"+document.getElementById('term').value, 10);

t = (t > 100)?100:t;

var e = document.getElementById('exam');

e.value = (g - t)*3+t;

};

]]>

</script>

</head>

<body>

</p>

<form action='#' onsubmit='findscore(); return false;'>

<p>Goal Mark: <input id='goal' type='number' max='100' min='0'></p>

<p>Term Mark: <input id='term' type='number' max='100' min='0'></p>

<p>Exam Mark: <input id='exam' type='number' disabled='disabled'></p>

<p><input type='submit' value='find exam score needed'></p>

</form>

</p>

</body>

</html>

@FlukeyJan 22.2008 — #Nearly right, instead of having input type of submit it should be a button and an onClick event to call the findscore() function.

The cdata commenting bit was wrong. I've corrected that.

[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" dir="ltr">
 
 <head>
 
 <title>Calculating Target Grades</title>
 
 
 <script type='text/javascript'> 
 /* <![CDATA[ */ 
 function findscore(){ 
 var g = parseInt("0"+document.getElementById('goal').value, 10); 
 g = (g > 100)?100:g; 
 var t = parseInt("0"+document.getElementById('term').value, 10); 
 t = (t > 100)?100:t; var e = document.getElementById('exam');
 e.value = (g - t)*3+t; 
 }; 
 
 /* ]]> */
 
 </script>
 </head>
 
 
 <body>
 
 </p>
 
 
 <form action='#'>
 <p>Goal Mark: <input id='goal' type='number' max='100' min='0'></p>
 <p>Term Mark: <input id='term' type='number' max='100' min='0'></p>
 <p>Exam Mark: <input id='exam' type='number' disabled='disabled'></p>
 <p><input type='button' onClick='findscore()' value='find exam score needed'></p>
 </form>
 
 </p>
 
 </body>
 
 </html>
 [/CODE]

@gbowauthorJan 22.2008 — #Thank you all so much!

(and my students thank you too!)

gbow

@scragarJan 22.2008 — #may I advise you not to use xhtml since you do not need anything that xhtml offers, and IEs lack of support?

also, since I used HTML5 atributes you can already start using the HTML5 doctype(that all the major browsers already accept to be standards compliant).

I also removed the extra </p> tags for paragraphs you never opened from what you posted.

[code=html]<!DOCTYPE html5>
 <html>
 <head>
 <title>Calculating Target Grades</title>
 <script type='text/javascript'> 
 /* <![CDATA[ */ 
 
 function findscore(){ 
 var g = parseInt("0"+document.getElementById('goal').value, 10); 
 g = (g > 100)?100:g; 
 var t = parseInt("0"+document.getElementById('term').value, 10); 
 t = (t > 100)?100:t;
 var e = document.getElementById('exam');
 e.value = (g - t)*3+t; 
 }; 
 
 /* ]]> */
 </script>
 </head>
 <body>
 <form action='#'>
 <p>Goal Mark: <input id='goal' type='number' max='100' min='0'></p>
 <p>Term Mark: <input id='term' type='number' max='100' min='0'></p>
 <p>Exam Mark: <input id='exam' type='number' disabled='disabled'></p>
 <p><input type='button' onClick='findscore()' value='find exam score needed'></p>
 </form>
 </body>
 </html>[/code]

Also in #JavaScript _↴

input type="button" replace with image?Mili or better microseconds in clock function expected

Success!

Help @gbow spread the word by sharing this article on Twitter...

Tweet This

help scripting a simple grade calculator

14 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

help scripting a simple grade calculator

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴