Dying to solve this...Please help

This site is best viewed in a modern browser with JavaScript enabled.

Edwardfaraj

• Write a web page that allows to calculate the grades for 3 courses as well as the GPA for them.

Your page must display 3 divisions laid out vertically near each other sharing the page width of 900 px.
Each division displays form elements to enter the grades of that course. Grades are entered as follows:
o # of Credits
o Exam 1 - 20%
o Exam 2 - 20%
o Project 1 - 15%
o Project 2 - 15%
o Final Exam - 30%
The division also displays two empty span tags (not empty form cells) that will show the average grade of the course and the letter grade of the course once calculated as described below.

The four division are followed (beneath them) by another division that displays the following:
o GPA of the 3 courses
o A button labelled 'Calculate'
o A button labelled 'Clear'
When the CALCULATE button is clicked, a javascript program must calculate the average of each class and its letter grade. The results should be displayed in the empty span tags mentioned above below each course. It then calculates the average GPA of the 3 courses and displays it in a BOLD CLEAR LARGE text below the forms (above the buttons).

When the CLEAR button is clicked, all form elements should become empty.

Jeff_Mott

Smells like homework.

Edwardfaraj

Please help me with this. I have to present this to my professor before Wednesday. This is life-threatening and I won't take my degree if I did not solve.

This has to be solved by Javascript. I need to create three types of courses vertically aligned and under each course I have to insert info: credit hours, exam 1, exam 2, exam 3 etc.
and then click on calculate to get my GPA for the 3 courses and the letter grade for each course after we do the percentages mentioned in my first thread.

Please help and I will help in return with many other stuff..

Regards

hackerofsorts

Edward, what do you have so far?

If you are a degree seeking student then you must have some knowledge of how to approach this problem.

JMRKER

Wednesday is only 2 days away. Are we dead yet?
What have you done to avoid the inevitable that does not involve paying taxes?
Any sample code yet?

Edwardfaraj

So far I have finished the design part. I mean my xhtml and css parts, the forms and classes and buttons...
I still have to write the functions...one function that give me gpa, another for letter grade etc.
I will copy paste what I have so far as soon as I login to my laptop...
And it's not an issue of knowing. It's an issue of time, work, and million of worries...that's why I'm going blank.
Please help
Thank you

Edwardfaraj

This is what I have so far...I still need to do the function so that the process works...the functions must contain the percentages I mentioned above for exam1, exam2, etc. I have to get the final grade for "each course", the "letter Grade" for each course, and the the GPA for all the courses. 3 courses

<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Class Average Program</title>
<style type="text/css">
.centerBody {
position:relative;
margin:0 auto;
width:900px;
height:100%;
display: inline-block;
text-align: center;
}
.centerForm {
position:relative;
width:100%;
height:100%;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
text-align: center;

	}
	.formRow {
	   margin-left: 25%;
       margin-right:25%;
       width: 100%;lock;
       position:relative;
	}
	.horizontalForm {
		width: 400px;
		position:relative;
		margin: 0 auto;

	}
	.lblForm {
		width: 100px;
		position:relative;
		display: inline-block;
        text-align: center;
	}
</style>
 <script type = "text/javascript">

</script>
<body class="centerBody">        
	<form name="form1" class="centerForm" action=''>
		<div class="formRow">
			<div class="centerForm">
				<div class="lblForm">
					<label>Credits:</label>
				</div>
				<input type='text' name='creditRow1' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Exam 1:</label>
				</div>
				<input type='text' name='ex1Row1' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Exam 2:</label>
				</div>
				<input type='text' name='ex2Row1' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Project 1:</label>
				</div>
				<input type='text' name='pr1Row1' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Project 2:</label>
				</div>
				<input type='text' name='pr2Row1' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Final Exam:</label>
				</div>
				<input type='text' name='finalRow1' size='5' maxlength='5'/>
			</div>
		</div>      
		<div class="formRow">
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Credits:</label>
				</div>
				<input type='text' name='creditRow2' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Exam 1:</label>
				</div>
				<input type='text' name='ex1Row2' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Exam 2:</label>
				</div>
				<input type='text' name='ex2Row2' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Project 1:</label>
				</div>
				<input type='text' name='pr1Row2' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label>Project 2:</label>
				</div>
				<input type='text' name='pr2Row2' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Final Exam:</label>
				</div>
				<input type='text' name='finalRow2' size='5' maxlength='5'/>
			</div>
		</div>   
		<div class="formRow">
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Credits:</label>
				</div>
				<input type='text' name='creditRow3' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Exam 1:</label>
				</div>
				<input type='text' name='ex1Row3' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Exam 2:</label>
				</div>
				<input type='text' name='ex2Row3' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Project 1:</label>
				</div>
				<input type='text' name='pr1Row3' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Project 2:</label>
				</div>
				<input type='text' name='pr2Row3' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Final Exam:</label>
				</div>
				<input type='text' name='finalRow3' size='5' maxlength='5'/>
			</div>
		</div>   
		<div class="formRow">
			<div class="horizontalForm">
				<input type="button" value="Calculate" name="calcBtn" onclick="cumCalc()"/>
				<input type="button" value="Clear" name="clearBtn" onclick="clear()"/>
			</div>
		</div> 
	</form>
</body>

</html>

Edwardfaraj

<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	}
	.formRow {
	   margin-left: 25%;
       margin-right:25%;
       width: 100%;lock;
       position:relative;
	}
	.horizontalForm {
		width: 400px;
		position:relative;
		margin: 0 auto;

	}
	.lblForm {
		width: 100px;
		position:relative;
		display: inline-block;
        text-align: center;
	}
</style>
 <script type = "text/javascript">

</script>
<body class="centerBody">        
	<form name="form1" class="centerForm" action=''>
		<div class="formRow">
			<div class="centerForm">
				<div class="lblForm">
					<label>Credits:</label>
				</div>
				<input type='text' name='creditRow1' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Exam 1:</label>
				</div>
				<input type='text' name='ex1Row1' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Exam 2:</label>
				</div>
				<input type='text' name='ex2Row1' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Project 1:</label>
				</div>
				<input type='text' name='pr1Row1' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Project 2:</label>
				</div>
				<input type='text' name='pr2Row1' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Final Exam:</label>
				</div>
				<input type='text' name='finalRow1' size='5' maxlength='5'/>
			</div>
		</div>      
		<div class="formRow">
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Credits:</label>
				</div>
				<input type='text' name='creditRow2' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Exam 1:</label>
				</div>
				<input type='text' name='ex1Row2' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Exam 2:</label>
				</div>
				<input type='text' name='ex2Row2' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Project 1:</label>
				</div>
				<input type='text' name='pr1Row2' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label>Project 2:</label>
				</div>
				<input type='text' name='pr2Row2' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Final Exam:</label>
				</div>
				<input type='text' name='finalRow2' size='5' maxlength='5'/>
			</div>
		</div>   
		<div class="formRow">
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Credits:</label>
				</div>
				<input type='text' name='creditRow3' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Exam 1:</label>
				</div>
				<input type='text' name='ex1Row3' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Exam 2:</label>
				</div>
				<input type='text' name='ex2Row3' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Project 1:</label>
				</div>
				<input type='text' name='pr1Row3' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Project 2:</label>
				</div>
				<input type='text' name='pr2Row3' size='5' maxlength='5'/>
			</div>
			<div class="centerForm">
				<div class="lblForm">
					<label class="lblForm">Final Exam:</label>
				</div>
				<input type='text' name='finalRow3' size='5' maxlength='5'/>
			</div>
		</div>   
		<div class="formRow">
			<div class="horizontalForm">
				<input type="button" value="Calculate" name="calcBtn" onclick="cumCalc()"/>
				<input type="button" value="Clear" name="clearBtn" onclick="clear()"/>
			</div>
		</div> 
	</form>
</body>

</html>

Edwardfaraj

Please help guys, I'm not lying nor faking anything. This is really important to me. The most important thing in my life now.
Thank You for understanding
Regards

grumpyOleMan

I like your life threatening professor.

How about giving us some sample data that could be put into each text box and what you would you expect the calculate button to do...

clearly showing the steps...

Edwardfaraj

Dear friend,
You can use any data you want...credits can be 3 or 4 or 1 etc.
The calculate button should be able to show the grade of each course in an empty span tag under each course and letter grade also in an empty span tag under each course, so we should have 6 span tag...and under them one GPA box that also calculates the gpa of all courses...so the button calculate does all of this...the gpa must show above the buttons in a clear bold text...please help I'm out of time...tomorrow deadline
Thank youuuu

Edwardfaraj

Dear friend,
You can use any data you want...credits can be 3 or 4 or 1 etc.
Any grades will also suffice...but has to be according to the rates given...for example if the grade is 80 on exam 1 then 80x0.20 equals...
The calculate button should be able to show the grade of each course in an empty span tag under each course and letter grade also in an empty span tag under each course, so we should have 6 span tag...and under them one GPA box that also calculates the gpa of all courses...so the button calculate does all of this...the gpa must show above the buttons in a clear bold text...please help I'm out of time...tomorrow deadline
Thank youuuu

JMRKER

You have a bunch of redundant code. You were also missing some closing tags ( </head> for example).
I compressed some of script to give the same look, but easier to read the code groupings.

I added a clearForm() function. You should be able to modify it to perform your calculations.

Let's see what you can do with it.

Also, it is a good idea to surround you script between [ code] and [ /code] tags (without the spaces)
to make it easier for forum members to read, copy and test your code.

<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Class Average Program</title>
<style type="text/css">
.centerBody {
 position:relative;
 margin:0 auto;
 width:900px;
 height:100%;
 display: inline-block;
 text-align: center;
}
.centerForm {
 position:relative;
 width:100%;
 height:100%;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
 display: inline-block;
 text-align: center;
}
.formRow {
 margin-left: 25%;
 margin-right:25%;
 width: 100%;lock;
 position:relative;
}
.horizontalForm {
 width: 400px;
 position:relative;
 margin: 0 auto;
}
.lblForm {
 width: 100px;
 position:relative;
 display: inline-block;
 text-align: center;
}
</style>
</head>
<body class="centerBody">
<form name="form1" class="centerForm" action='' onsubmit="return false">
 <div id="Semester" class="formRow">
  <div id="Course1" class="centerForm">
   <div class="lblForm"> <label>Credits:</label> </div>
   <input type='text' name='creditRow1' size='5' maxlength='5'/>    <p>
   <div class="lblForm"> <label class="lblForm">Exam 1:</label> </div>
   <input type='text' name='ex1Row1' size='5' maxlength='5'/>    <p>
   <div class="lblForm"> <label class="lblForm">Exam 2:</label> </div>
   <input type='text' name='ex2Row1' size='5' maxlength='5'/>    <p>
   <div class="lblForm"> <label class="lblForm">Project 1:</label> </div>
   <input type='text' name='pr1Row1' size='5' maxlength='5'/>    <p>
   <div class="lblForm"> <label class="lblForm">Project 2:</label> </div>
   <input type='text' name='pr2Row1' size='5' maxlength='5'/>    <p>
   <div class="lblForm"> <label class="lblForm">Final Exam:</label> </div>
   <input type='text' name='finalRow1' size='5' maxlength='5'/> <br>
  </div>
  <div id="Course2" class="centerForm">
   <div class="lblForm"> <label class="lblForm">Credits:</label> </div>
   <input type='text' name='creditRow2' size='5' maxlength='5'/>    <p>
   <div class="lblForm"> <label class="lblForm">Exam 1:</label> </div>
   <input type='text' name='ex1Row2' size='5' maxlength='5'/>    <p>
   <div class="lblForm"> <label class="lblForm">Exam 2:</label> </div>
   <input type='text' name='ex2Row2' size='5' maxlength='5'/>    <p>
   <div class="lblForm"> <label class="lblForm">Project 1:</label> </div>
   <input type='text' name='pr1Row2' size='5' maxlength='5'/>    <p>
   <div class="lblForm"> <label>Project 2:</label> </div>
   <input type='text' name='pr2Row2' size='5' maxlength='5'/>    <p>
   <div class="lblForm"> <label class="lblForm">Final Exam:</label> </div>
   <input type='text' name='finalRow2' size='5' maxlength='5'/>    <br>
  </div>
  <div id="Course3" class="centerForm">
   <div class="lblForm"> <label class="lblForm">Credits:</label>  </div>
   <input type='text' name='creditRow3' size='5' maxlength='5'/>   <p>
   <div class="lblForm"> <label class="lblForm">Exam 1:</label> </div>
   <input type='text' name='ex1Row3' size='5' maxlength='5'/>   <p>
   <div class="lblForm"> <label class="lblForm">Exam 2:</label> </div>
   <input type='text' name='ex2Row3' size='5' maxlength='5'/>   <p>
   <div class="lblForm"> <label class="lblForm">Project 1:</label> </div>
   <input type='text' name='pr1Row3' size='5' maxlength='5'/>   <p>
   <div class="lblForm"> <label class="lblForm">Project 2:</label> </div>
   <input type='text' name='pr2Row3' size='5' maxlength='5'/>   <p>
   <div class="lblForm"> <label class="lblForm">Final Exam:</label> </div>
   <input type='text' name='finalRow3' size='5' maxlength='5'/> <br>
  </div>
  <div id="infoActions" class="centerForm">
   <div class="horizontalForm">
    <input type="button" value="Calculate" name="calcBtn" onclick="cumCalc()"/>
    <input type="button" value="Clear" name="clearBtn" onclick="clearForm()"/>
   </div>
  </div>
 </div>
</form>

<script type = "text/javascript">
function cumCalc() {
  alert('cumCalc is not coded yet!');
}
function clearForm() {
  var str = '';
  var sel = document.getElementById('Semester').getElementsByTagName('input');
  for (var i=0; i<sel.length; i++) { sel[i].value = ''; }
}
</script>

</body>
</html>

grumpyOleMan

Edwardfaraj;1247563 wrote:
You can use any data you want...credits can be 3 or 4 or 1 etc.
Any grades will also suffice...but has to be according to the rates given...for example if the grade is 80 on exam 1 then 80x0.20 equals...
The calculate button should be able to show the grade of each course in an empty span tag under each course and letter grade also in an empty span tag under each course, so we should have 6 span tag...and under them one GPA box that also calculates the gpa of all courses...so the button calculate does all of this...the gpa must show above the buttons in a clear bold text

NO NO NO

follow instructions
step 1: YOU list actual values for each of the list boxes. proper values that anyone that will use your form will enter..

step 2: hit the calculate button

step 3: NOW you give a very detailed description of what to do with the values entered in step 1. How each value is used to get your results required. JUST the results NOT where to place them in your form.....

The details in step three will be a step by step description that can be used by anyone to get the same result each time. Even when different values are entered in step 1 everyone will get the same result....

If you cannot do that how can anyone (including yourself) write a JavaScript function.

When you have done that SO IT WORKS each time you read through it, hand that step by step description in with your final work to your professor.

May he look upon you with favour.

Edwardfaraj

Dear friend,
Thank you so much for your help I appreciate this so muchhh...

The clear function has worked perfectly, but what I really want is that when I click calculate, a grade for each course to appear in an empty span tag box...And also a letter grade for each course...And then the GPA of all courses...

So the calculate button must perform 3 tasks...grade for each course...letter grade for each course, and GPA for everything..

You can perform the function based on A means 4.0, B 3.0, B+ 3.3, B- 2.7 etc....D 1.0 C 2.0...

88 means A-...A means 92...80 means B...in other words, 80-82 B...70-72 C...60-62 D...you know the standard...

Can you please help me further?

Thank you for your help again...

Edward

JMRKER

Edwardfaraj;1247671 wrote:
Dear friend,
Thank you so much for your help I appreciate this so muchhh...

The clear function has worked perfectly, but what I really want is that when I click calculate, a grade for each course to appear in an empty span tag box...And also a letter grade for each course...And then the GPA of all courses...

.....

Can you please help me further?

Thank you for your help again...

Edward

What empty span tag are you talking about?
At least attempt a solution before giving up.

I will help with mistakes and offer suggestions, but I will not provide the answer to a homework assignment.

Jeff_Mott

JMRKER;1247661 wrote:
function cumCalc() {

That's an unfortunate abbreviation. Should this function name be labelled NSFW? :p

JMRKER

Jeff Mott;1247687 wrote:
That's an unfortunate abbreviation. Should this function name be labelled NSFW? :p

Now that you mention it, it does seem rather suggestive ,
but sorry ... it was not my original function name, it came from OP's code.