In: Computer Science
Need to HAVE a web page that uses a loop to allow a teacher to enter the following information for all students in a class: student's name, mt grade, f grade, hW grade, attendance grade.
program should calculate each student's numeric total grade based on the following formula:course grade = (mT*0.3)+(f*0.4)+(homework*0.2)+(attendance*0.1)File Table.html looks like this:When the button is clicked, you need to prompt the user the following information:-number of students (which will determine the number of rows in your table)-student's name-mT grade-f grade-homework grade-attendance gradeOnce all the information above is provided, a JavaScript-generated table must be created.
DEFAULT CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Student's Information</title>
</head>
<body>
<table align ="center" width ="70%">
<tr>
<td colspan ="2">
<h1> </h2>
<h1>Student's Information</h1>
<p><input type="button" id="students" value="Enter Data" /></p>
</td>
</tr>
</table>
</body>
</html>
HTML file :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<!-- title for web page -->
<title>Student's Information</title>
</head>
<body>
<table align="center" width="70%">
<tr>
<td colspan="2">
<h1> </h2>
<h1>Student's Information</h1>
<p><input type="button" id="students" value="Enter Data" onclick="getData()" /></p>
</td>
</tr>
<tr>
<td>
<!-- div to display table -->
<div id="studentsData"></div>
</td>
</tr>
</table>
<!-- <script> is used for javascript -->
<script>
//function to getData
function getData()
{
//declaring variable to create html table
var table = "<table border=1><tr><th>Student's name</th><th>mT grade</th><th>f grade</th><th>homework grade</th><th>attendance grade</th><th>course grade</th></tr>";
//asking user number of students
var numberOfStudents = parseInt(prompt("Enter number of Students : "));
//using for loop
for (var i = 0; i < numberOfStudents; i++) {
//asking user name
var name = prompt("Enter student name :", "Name");
//asking user mT grade
mT = parseFloat(prompt("Enter mT grade:"));
//asking user f grade
f = parseFloat(prompt("Enter f grade:"));
//asking user homework grade
homework = parseFloat(prompt("Enter homework grade:"));
//asking user attendance grade
attendance = parseFloat(prompt("Enter attendance grade:"));
//calculate course grade
var courseGrade = (mT * 0.3) + (f * 0.4) + (homework * 0.2) + (attendance * 0.1)
//create a new row in the table
table+="<tr><td>"+name+"</td><td>"+mT+"</td><td>"+f+"</td><td>"+homework+"</td><td>"+attendance+"</td><td>"+courseGrade+"</td></tr>";
}
//close table
table+="</table>";
//display table on the web page
document.getElementById("studentsData").innerHTML=table;
}
</script>
</body>
</html>
=============================================
Output :
Screen showing details after entering data :