MIDTERM BREAK | JAVASCRIPT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Interactive Creative Design (STIV2053) subject allocates its mark percentage by 60% and 40% where the 60% represents the coursework and the 40% represents the final exam.
Coursework is constituted of quizzes, assignments and a final project which carry the percentage of 10%, 20%, and 30% respectively.
There are 10 quizzes and only the best five are selected to be calculated as a part of the carry mark AUTOMATICALLY. Four assignments must be completed in order to contribute to the carry mark’s total and as for the final project; a complete Interactive Creative Design work along with a written report must be submitted. Both carry the percentages of 20% and 10% respectively.
Develop a system that counts the total percentage of the subject and based on the total percentage obtained by using JavaScript + HTML
The script as below:
<html>
<head>
<script type="text/javascript">
function Calculate()
{
var quizzes, totalAssignment, totalProject, totalCarryMarkObtained;
var q1 = parseInt(document.getElementById('quiz1').value);
var q2 = parseInt(document.getElementById('quiz2').value);
var q3 = parseInt(document.getElementById('quiz3').value);
var q4 = parseInt(document.getElementById('quiz4').value);
var q5 = parseInt(document.getElementById('quiz5').value);
var q6 = parseInt(document.getElementById('quiz6').value);
var q7 = parseInt(document.getElementById('quiz7').value);
var q8 = parseInt(document.getElementById('quiz8').value);
var q9 = parseInt(document.getElementById('quiz9').value);
var q10 = parseInt(document.getElementById('quiz10').value);
var num = [q1,q2,q3,q4,q5,q6,q7,q8,q9,q10];
num.sort(function(a,b){return a -b});
var totalQuizzes = num[5] + num[6] + num[7] + num[8] + num[9];
quizzes = totalQuizzes /50 * 10;
var a1 = parseInt(document.getElementById('assignment1').value);
var a2 = parseInt(document.getElementById('assignment2').value);
var a3 = parseInt(document.getElementById('assignment3').value);
var a4 = parseInt(document.getElementById('assignment4').value);
totalAssignment = (a1 + a2 + a3 + a4) /100 * 20;
var p1 = parseInt(document.getElementById('projectFull').value);
var p2 = parseInt(document.getElementById('projectReport').value);
totalProject = (p1/100*20) + (p2/10*10);
var final = parseInt(document.getElementById('final').value);
totalCarryMarkObtained= quizzes + totalAssignment + totalProject + final;
alert("Total Carry Mark Obtained = " + totalCarryMarkObtained);
}
</script>
</head>
<body>
<h1 align="center" style="background-color: lightblue"> STIV2053 Interactive Creative Design </h1>
</br>
<h2 style="background-color: red"> Carry Mark [60%] </h2>
<h3 style="background-color: grey"><u> Quizzes [10%] </u> </h3>
<p style="background-color: lightgrey"> Quiz 1 (10%)          
<input type="text" id="quiz1" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 2 (10%)          
<input type="text" id="quiz2" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 3 (10%)          
<input type="text" id="quiz3" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey> Quiz 4 (10%)          
<input type="text" id="quiz4" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 5 (10%)          
<input type="text" id="quiz5" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 6 (10%)          
<input type="text" id="quiz6" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 7 (10%)          
<input type="text" id="quiz7" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 8 (10%)          
<input type="text" id="quiz8" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 9 (10%)          
<input type="text" id="quiz9" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 10 (10%)          
<input type="text" id="quiz10" size=5 maxlength=2 ></p>
</br>
<h3 style="background-color: grey"><u> Assignments [20%] </u> </h3>
<p style="background-color: lightgrey"> Assignment 1 (20%)      
<input type="text" id="assignment1" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Assignment 2 (20%)      
<input type="text" id="assignment2" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Assignment 3 (20%)      
<input type="text" id="assignment3" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Assignment 4 (20%)      
<input type="text" id="assignment4" size=5 maxlength=2 ></p>
</br>
<h3 style="background-color: grey"><u> Final Project [30%] </u> </h3>
<p style="background-color: lightgrey"> Interactive Creative Design Project (20%)    
<input type="text" id="projectFull" size=5 maxlength=3 ></p>
<p style="background-color: lightgrey"> Interactive Creative Design Report (10%)    
<input type="text" id="projectReport" size=5 maxlength=2 ></p>
</br>
</br>
<h2 style="background-color: red"> Final Exam [40%]     <input type="text" id="final" size=5 maxlength=3 >
</h2>
</br>
</br>
<input type="button" value="Calculate!" onClick="Calculate()">
</body>
</html>
The interface as below:
Message box will pop-up:
