Create a table that is structured, with input elements, exactly as shown in Figu
ID: 3813093 • Letter: C
Question
Create a table that is structured, with input elements, exactly as shown in Figure below.
2. When the Check Sum of Percentage Values button is clicked, a JS function needs to be invoked that:
2.1. Calculates the sum of all the values under the heading “Percentage” 2.2. And display appropriate messages within an alert box for each of the following checks :
2.2.a. Each cell must contain a non-zero, positive number.
2.2.b. The sum of all values submitted is a 100.
3. When the Calculate Grade button is clicked call a function that:
Writes the numeric grade inside the cell located right underneath this button. This is calculated by taking into account the user submitted percentage values for each of the labeled categories.
And the associated letter grade in the bottom row to the right of the number grade cell within the table. Align these values such that it is displayed in the center of the cell.
For this problem use:
A 100-90
B+ 89-87
B 86-80
C+ 79-77
C 76-70
D+ 69-67
D 66-60
F < 60
If the grade is B and above, the background color of the letter grade cell should turn green.
If the grade is between C+ and D, the background color of the letter grade cell should turn yellow.
If the grade is F, the background color of the letter grade cell should turn red.
Use the debugger in Firefox, to find errors in your JavaScript function.
Open Lab-12 in Mozilla Firefox, press the ALT button on the keyboard. This makes the menu bar visible at the top of the page.
Click on TOOLS -> WEB DEVELOPER -> DEBUGGER
You can see the debugger at the bottom of the page, it shows you the errors in the <script> element.
After debugging your code, make sure you turn off the debugger by accessing TOOLS -> WEB DEVELOPER -> DEBUGGER
Keyboard Shortcut to turn on/off the debugger: Ctrl+Shift+S
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lab12A</title>
<script>
function calculateSum(){
var T1=parseInt(document.getElementById("TP1").value);
var T2=parseInt(document.getElementById("TP2").value);
var F1=parseInt(document.getElementById("FP1").value);
var L1=parseInt(document.getElementById("LP1").value);
var P1=parseInt(document.getElementById("PP1").value);
var Q1=parseInt(document.getElementById("QP1").value);
var totalSum=T1+T2+F1+L1+P1+Q1;
document.getElementById("Percentage").innerHTML=totalSum;}
function calculateGrade(){
var Test1=parseInt(document.getElementById("TS1").value);
var Test2=parseInt(document.getElementById("TS2").value);
var FinalExam=parseInt(document.getElementById("FS1").value);
var Labs=parseInt(document.getElementById("LS1").value);
var Project=parseInt(document.getElementById("PS1").value);
var Quizzes=parseInt(document.getElementById("QS1").value);
var totalScore=Test1+Test2+FinalExam+Labs+Project+Quizzes;
var letterGrade;
if(totalScore>=90){
letterGrade="A"; setBackground(Color.green)}
else if (totalScore>=87&&totalScore<90){
letterGrade="B+";}
else if (totalScore>=80&&totalScore<87){
letterGrade="B";}
else if(totalScore>=77&&totalScore<80){
letterGrade="C+";}
else if(totalScore>=70&&totalScore<77){
letterGrade="C";}
else if(totalScore>=67&&totalScore<70){
letterGrade="D+";}
else if(totalScore>=60&&totalScore<67){
letterGrade="D";}
else if(totalScore<60){
letterGrade="F";}
document.getElementById("score").innerHTML=totalScore;
document.getElementById("grade").innerHTML=letterGrade;}
function changeColor(){
var background=(document.getElementById("grade").style;
if(letterGrade="A"
</script>
</head>
<body>
<table>
<tr>
<th></th>
<th align="left"><label>Score</label></th>
<th align="left"><label>percentage</label><th>
</tr>
<tr>
<td>Test # 1</td>
<td><input type="text" name="TS1" id="TS1"></td>
<td><input type="text" name="TP1" id="TP1"></td>
</tr>
<tr>
<td>Test # 2</td>
<td><input type="text" name="TS2" id="TS2"></td>
<td><input type="text" name="TS2" id="TS2"></td>
</tr>
<tr>
<td>Final Exam</td>
<td><input type="text" name="FS1" id="FS1"></td>
<td><input type="text" name="FP1" id="FP1"></td>
</tr>
<tr>
<td>Lab Average</td>
<td><input type="text" name="LS1" id="LS1"></td>
<td><input type="text" name="LP1" id="LP1"></td>
</tr>
<tr>
<td>Quiz/HW Average</td>
<td><input type="text" name="QS1" id="QS1"></td>
<td><input type="text" name="QP1" id="QP1"></td>
</tr>
<tr>
<td>Project</td>
<td><input type="text" name="PS1" id="PS1"></td>
<td><input type="text" name="PP1" id="PP1"></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="Calculate Grade"></td>
<td><input type="submit" value="Check Sum of Percentage Values"></td>
</tr>
<tr>
<td colspan="2" align="center" id="score"><b>0</b></td>
<td align="center" id="grade"><b>F</b></td>
<td colspan="2" align="center" id="Percentage"><b></b></td>
</tr>
</table>
</body>
</html>
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lab12A</title>
<script>
function calculateSum(){
var T1=parseInt(document.getElementById("TP1").value);
var T2=parseInt(document.getElementById("TP2").value);
var F1=parseInt(document.getElementById("FP1").value);
var L1=parseInt(document.getElementById("LP1").value);
var P1=parseInt(document.getElementById("PP1").value);
var Q1=parseInt(document.getElementById("QP1").value);
if(T1 >0 && T2 >0 && F1 >0 && L1 >0 && P1 >0 && Q1>0){
var totalSum=T1+T2+F1+L1+P1+Q1;
if(totalSum > 100){
alert("Please note that the maximum percentage allowed is 100. Your sum exceeds 100");
}
document.getElementById("Percentage").innerHTML=totalSum;
}
else{
alert("Please enter a valid value. The values must be an postive integer greater than 0.");
}
}
function calculateGrade(){
var Test1=parseInt(document.getElementById("TS1").value);
var Test2=parseInt(document.getElementById("TS2").value);
var FinalExam=parseInt(document.getElementById("FS1").value);
var Labs=parseInt(document.getElementById("LS1").value);
var Project=parseInt(document.getElementById("PS1").value);
var Quizzes=parseInt(document.getElementById("QS1").value);
var totalScore=Test1+Test2+FinalExam+Labs+Project+Quizzes;
var letterGrade='';
if(totalScore>=90){
letterGrade="A";
changeColor("green");
}
else if (totalScore>=87&&totalScore<90){
letterGrade="B+";
changeColor("green");
}
else if (totalScore>=80&&totalScore<87){
letterGrade="B";
changeColor("green");
}
else if(totalScore>=77&&totalScore<80){
letterGrade="C+";
changeColor("yellow");
}
else if(totalScore>=70&&totalScore<77){
letterGrade="C";
changeColor("yellow");
}
else if(totalScore>=67&&totalScore<70){
letterGrade="D+";
changeColor("yellow");
}
else if(totalScore>=60&&totalScore<67){
letterGrade="D";
changeColor("yellow");
}
else if(totalScore<60){
letterGrade="F";
changeColor("red");
}
document.getElementById("score").innerHTML=totalScore;
document.getElementById("grade").innerHTML=letterGrade;
//changeColor(letterGrade);
}
function changeColor(colorValue){
var background=document.getElementById("grade");
//if(gradeValue === ""){
//}
background.style.backgroundColor = colorValue;
}
</script>
</head>
<body>
<table>
<tr>
<th></th>
<th align="left"><label>Score</label></th>
<th align="left"><label>percentage</label><th>
</tr>
<tr>
<td>Test # 1</td>
<td><input type="text" name="TS1" id="TS1"></td>
<td><input type="text" name="TP1" id="TP1"></td>
</tr>
<tr>
<td>Test # 2</td>
<td><input type="text" name="TS2" id="TS2"></td>
<td><input type="text" name="TP2" id="TP2"></td>
</tr>
<tr>
<td>Final Exam</td>
<td><input type="text" name="FS1" id="FS1"></td>
<td><input type="text" name="FP1" id="FP1"></td>
</tr>
<tr>
<td>Lab Average</td>
<td><input type="text" name="LS1" id="LS1"></td>
<td><input type="text" name="LP1" id="LP1"></td>
</tr>
<tr>
<td>Quiz/HW Average</td>
<td><input type="text" name="QS1" id="QS1"></td>
<td><input type="text" name="QP1" id="QP1"></td>
</tr>
<tr>
<td>Project</td>
<td><input type="text" name="PS1" id="PS1"></td>
<td><input type="text" name="PP1" id="PP1"></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="Calculate Grade"></td>
<td><input type="submit" value="Check Sum of Percentage Values"></td>
</tr>
<tr>
<td colspan="2" align="center" id="score"><b>0</b></td>
<td align="center" id="grade"><b>F</b></td>
<td colspan="2" align="center" id="Percentage"><b></b></td>
</tr>
</table>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.