Simple Javascript problem: Write the JavaScript code to add behavior to the foll
ID: 3676014 • Letter: S
Question
Simple Javascript problem:
Write the JavaScript code to add behavior to the following page that has a user interface for entering grades on homework assignments. You will compute the percentage of points earned, with an optional curve. When "Compute!" is clicked, your JS code should use the values in the text boxes to compute the percentage (rounded to the nearest percent). If the "Curve +5" checkbox is checked, add +5 percent up to a maximum of 100% total. You should insert the percentage into the page as a new div added to the end (bottom) of the existing page section with the id of results area. If the overall percentage is 60% or more, give your newly created div a CSS class of pass; otherwise give it a class of fail. Each time the user clicks "Compute!", you will insert such a new div; this means that several div would be there after several clicks of "Compute!". In the code shown there are 3 assignments, but your code should work for any number of assignments greater than or equal to When "Clear" is clicked, all text in all of die input text boxes should be erased. Assume valid input; that is, assume that when "Compute!" is clicked, die user will have already typed valid text into every box that can be interpreted as an integer. You may assume that Prototype is also included in the page. These screenshots show the initial state, and state after scores have been typed and "Compute!" has been clicked.Explanation / Answer
newcss.css:
.pass{
background-color: #cfc;
font-weight: bold;
}
.fail{
background-color: #fcc;
font-weight: bold;
}
.hw {
color:black;
}
.earned {
color:black;
}
.max {
color:black;
}
GradeCalculator.html:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link rel="stylesheet" href="newcss.css" type="text/css"/>
<script type="text/javscript">
function Grader()
{
var am1=parseFloat(document.getElementById('hw1.earned').value);
var m1=parseFloat(document.getElementById('hw1.max').value);
var am2=parseFloat(document.getElementById('hw2.earned').value);
var m2=parseFloat(document.getElementById('hw2.max').value);
var am3=parseFloat(document.getElementById('hw3.earned').value);
var m3=parseFloat(document.getElementById('hw3.max').value);
var tam=am1+am2+am3;
var mt=m1+m2+m3;
var fe=tam*100/mt;
if(document.getElementById(curve).checked == true)
fe=fe+5;
if(fe>60)
{
pass.hidden=true;
document.getElementById('pass').innerHTML='pass ' + fe;
}
else
{
fail.hidden=true;
document.getElementById('fail').innerHTML='fail ' + fe;
}
}
clear()
{
document.getElementById('hw1.earned').value="";
document.getElementById('hw3.max').value="";
document.getElementById('hw1.earned').value="";
document.getElementById('hw3.max').value="";
document.getElementById('hw1.earned').value="";
document.getElementById('hw3.max').value="";
}
</script>
</head>
<body>
<h1> grade Calculator</h1>
<div id="assignments">
<div class="hw1">
HW1 <input class="earned" type="text" size="2"/>
<input class="max" type="text" size="2"/>
</div>
<div class="hw2">
HW2 <input class="earned" type="text" size="2"/>
<input class="max" type="text" size="2"/>
</div>
<div class="hw3">
HW3 <input class="earned" type="text" size="2"/>
<input class="max" type="text" size="2"/>
</div>
</div>
<div>
<label><input id="curve" type="checkbox"/> Curve +5? </label>
</div>
<div>
<button id="compute"> Compute!</button>
<button id="clear"> Clear</button>
<br>
<input class="pass" type="text" name="pass" hidden=""/><br><br><br><br>
<input class="fail" type="text" name="fail" hidden=""/>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.