Dying to solve this...Please help

**Edwardfaraj** · 01-27-2013 08:05 PM

• 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** · 01-27-2013 08:34 PM

Smells like homework.

**Edwardfaraj** · 01-28-2013 06:44 AM

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** · 01-28-2013 04:58 PM

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** · 01-28-2013 07:45 PM

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** · 01-28-2013 08:10 PM

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** · 01-28-2013 08:17 PM

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** · 01-28-2013 08:19 PM

<?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** · 01-28-2013 08:20 PM

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** · 01-28-2013 11:11 PM

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** · 01-29-2013 04:36 AM

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** · 01-29-2013 04:40 AM

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** · 01-29-2013 09:46 AM

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.

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** · 01-29-2013 10:14 AM

Originally Posted by Edwardfaraj

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** · 01-29-2013 11:00 AM

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

Thread: Dying to solve this...Please help

Thread Tools

Display

Dying to solve this...Please help

so far I have this...

This is what I have so far

no specific data...anything

My reply

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions