While learning Javascript I come up with the idea to write a program in Javascript that I will compute the student grade. This program that I wrote is very simple it teaches the user and learner how to use html forms and form validations using Javascript as our scripting language.
How this program works is very simple it will ask the user to enter the student name, student course, subject, midterm grade and endterm grade to be solve to get the final grade of the student in the particular subject. I also include checking for remarks if the grade of the student greater than 75 percent the student passed the subject. If the grade is less then 75 percent means the student was not able to pass the subject.
I'm hoping that your learn something in my program feel free to use my code in your school or programming projects in mind. If you have some questions please send me an email at jakerpomperada@yahoo.com and jakerpomperada@gmail.com.
People here in the Philippines who wish to contact me can reach me at my mobile number 09173084360.
Thank you very much and Happy Programming
Sample Output of Our Program
Program Listing
<!-- Student Grading System in Javascript -->
<!-- Written By: Mr. Jake R. Pomperada,MAED-IT -->
<!-- November 23, 2014 Sunday -->
<html>
<title> Student Grading System</title>
<style>
h3 {
font-family: "arial";
color: blue;
align:left;
}
table, td, th {
font-family: "arial";
color: blue;
}
div {
font-family: "arial";
font-size: 20px;
color: blue;
}
</style>
<script type="text/javascript">
function test()
{
var _stud_name = document.grade.stud_name;
var _course = document.grade.course ;
var _subject = document.grade.subject;
var _midterm = document.grade.midterm;
var _endterm = document.grade.endterm;
if (_stud_name.value=="" || _stud_name.value==null){
_stud_name.focus();
alert("Student name field cannot be empty.");
return false;
}
else if (_course.value=="" || _course.value==null){
_course.focus();
alert("Course field cannot be empy.");
return false;
} else if (_subject.value=="" || _subject.value==null) {
_subject.focus();
alert("Subject field cannot be empty.");
return false;
} else if (_midterm.value=="" || _midterm.value==null) {
_midterm.focus();
alert("Midterm Grade cannot be empty.");
return false;
}
else if (_endterm.value=="" || _endterm.value==null) {
_endterm.focus();
alert("Endterm Grade cannot be empty.");
return false;
}
midterm_grade=document.grade.midterm.value;
endterm_grade=document.grade.endterm.value;
var solve_midterm = parseInt(midterm_grade) * 0.5;
var solve_endterm = parseInt(endterm_grade) * 0.5;
final_grade = (solve_midterm + solve_endterm);
final_grade2 = final_grade.toFixed(2);
if (final_grade2 >= 75) {
remarks = "Passed";
}
else {
remarks = "Failed";
}
report_title="Student Grade Report";
stud_name = document.grade.stud_name.value;
stud_course = document.grade.course.value;
stud_subject = document.grade.subject.value;
content ="Your Final Grade is " + final_grade2 + "."
document.getElementById('report_title').innerHTML = report_title;
document.getElementById('stud_name').innerHTML = "Name : " + stud_name;
document.getElementById('course').innerHTML = "Course : " + stud_course;
document.getElementById('subject').innerHTML = "Subject : " + stud_subject;
document.getElementById('final_grade').innerHTML = content;
document.getElementById('remarks').innerHTML = "Grade Remarks : " + remarks;
}
</script>
<body bgcolor="yellow">
<br>
<font color="blue">
<h3> Student Grading System </h3>
</font>
<form method="post" name="grade" >
<table>
<tr>
<td align="right">Student Name :</td>
<td align="left"><input type="text" name="stud_name" size="40" /></td>
</tr>
<tr>
<td align="right">Course:</td>
<td align="left"><input type="text" name="course" size="40" /></td>
</tr>
<tr>
<td align="right">Subject:</td>
<td align="left"><input type="text" name="subject" size="40" /></td>
</tr><td> </td>
<tr>
<td align="right">Midterm Grade:</td>
<td align="left"><input type="text" name="midterm" size="2" /></td>
</tr>
<tr>
<td align="right">Endterm Grade:</td>
<td align="left"><input type="text" name="endterm" size="2" /></td>
</tr>
<td> </td>
<tr>
<td align="right">
<input type="button" value="Solve Grade"
title="Click here to compute the grade."
onclick="test();">
</td>
</tr>
</table>
</form>
<br>
<div id="report_title"> </div>
<br>
<div id="stud_name"> </div>
<div id="course"> </div>
<div id="subject"> </div>
<div id="final_grade"> </div>
<div id="remarks"> </div>
</body>
</html>
