Syllabus says: Test 1 and 2 20% each Quizzes/Homework 5% Final 30% Labs/Project
ID: 3586551 • Letter: S
Question
Syllabus says:
Test 1 and 2
20% each
Quizzes/Homework
5%
Final
30%
Labs/Project
25%
Test 1 and 2
20% each
Quizzes/Homework
5%
Final
30%
Labs/Project
25%
Basics of Web Design: HTML5 & CSS - Read Chapter 10. Creating lab12a.html: In this lab, you will be creating lab11aXX.html (where the "XX" are your initials). NOTE: make sure you look over the screencasts on my web page for this week. Part l: Create a table that is structured, with input elements, exactly as shown in Figure A below. Score Score 100 Test 2 Final Exam Labs Project Quizzes Test 1 Test 2 Final Exam 85 Labs Project Quizzes78 85 50 60 Calculate Grade Calculate Grade 74.45 Figure A: initial HTML setup Figure B: example result of completed lab Part Il-Text & button input elements When the button is clicked call a function that: 1. Writes the numeric grade in the bottom left cell of the table. You should get your formula 1. And the associated letter grade in the bottom right cell of the table. (For this problem use: A 1. If the grade is passing the background color of the letter grade cell changes to green. If the for this grade from the syllabus for this class >= 90 > B >= 80 > C >= 70 > D >= 60 > F) grade is failing the background color of the letter grade cell should turn red Part III- Test case 1. Carefully test your code and make sure it is correctExplanation / Answer
Here is the code please replay with comments if there is any query
this code use only html5,css,javascript
with out using javascript we can't make it dymamic
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Grade System</title>
</head>
<style type='text/css'>
.ni {width: 100%;
}
#letter{
text-align: center; // to make the letter on the center
}
</style>
<body>
<div id='table'>
<table border='0' id='grade_system'>
<tr>
<th></th>
<th>Score</th>
</tr>
<tr>
<td>Test 1 </td>
<td><input type="text" id='text1' name='text1'/></td>
</tr>
<tr>
<td>Test 2 </td>
<td><input type="text" id='text2' name='text2'/></td>
</tr>
<tr>
<td>Final Exam </td>
<td><input type="text" id='fexam' name='fexam'/></td>
</tr>
<tr>
<td>Labs </td>
<td><input type="text" id='labs' name='labs'/></td>
</tr>
<tr>
<td>Project </td>
<td><input type="text" id='project' name='project'/></td>
</tr>
<tr>
<td>Quizzes </td>
<td><input type="text" id='quizzes' name='quizzes'/></td>
</tr>
<tr>
<td colspan="2"><input class='ni' type='button' value='Calculate Grade' /></td>
<tr>
<td id='grade' >0</td>
<td id='letter' > F</td>
</tr>
</table>
</div>
</body>
</html>
<script type='text/javascript'>
function calculate()
{
var t1=parseInt(document.getElementById('text1').value); // use parseInt to convert to int
var t2=parseInt(document.getElementById('text2').value);
var fe=parseInt(document.getElementById('fexam').value);
var lab=parseInt(document.getElementById('labs').value);
var pjt=parseInt(document.getElementById('project').value);
var qz=parseInt(document.getElementById('quizzes').value);
var total=t1+t2+fe+lab+pjt+qz; // finding the total
var avg = total/6; // ie (total/600) * 100; actually i don't know how you calculate grade
// replace the above code as per your formula from the syllabus if necessery
document.getElementById('grade').innerHTML=avg.toFixed(2); // print the avg to grade
// toFixed(2) is to make the 2 fraction
var letter='';
var color='GREEN';
if(avg>=90)
{
letter='A';
}
else if(avg>=80)
{
letter='B';
}
else if(avg>=70)
{
letter='C';
}
else if(avg>=60)
{
letter='D';
}
else if(avg<60)
{
letter='F';
color='RED';
}
var letterobj=document.getElementById('letter');
letterobj.innerHTML=letter;
letterobj.style.backgroundColor = color;
}
</script>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.