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%) &emsp;  &emsp;  &emsp; &emsp;  &emsp;
<input type="text" id="quiz1" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 2 (10%) &emsp;  &emsp;  &emsp;  &emsp;  &emsp;
<input type="text" id="quiz2" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 3 (10%) &emsp;  &emsp;  &emsp; &emsp;  &emsp;
<input type="text" id="quiz3" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey> Quiz 4 (10%) &emsp;  &emsp;  &emsp; &emsp;  &emsp;
<input type="text" id="quiz4" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 5 (10%) &emsp;  &emsp;  &emsp; &emsp;  &emsp;
<input type="text" id="quiz5" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 6 (10%) &emsp;  &emsp;  &emsp; &emsp;  &emsp;
<input type="text" id="quiz6" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 7 (10%) &emsp;  &emsp;  &emsp; &emsp;  &emsp;
<input type="text" id="quiz7" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 8 (10%) &emsp;  &emsp;  &emsp; &emsp;  &emsp;
<input type="text" id="quiz8" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 9 (10%) &emsp;  &emsp;  &emsp;  &emsp;  &emsp;
<input type="text" id="quiz9" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Quiz 10 (10%) &emsp;  &emsp; &ensp;  &emsp;  &emsp;
<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%) &emsp;  &emsp;  &emsp;
<input type="text" id="assignment1" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Assignment 2 (20%) &emsp;  &emsp;  &emsp;
<input type="text" id="assignment2" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Assignment 3 (20%) &emsp;  &emsp;  &emsp;
<input type="text" id="assignment3" size=5 maxlength=2 ></p>
<p style="background-color: lightgrey"> Assignment 4 (20%) &emsp;  &emsp;  &emsp;
<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%) &emsp;  &emsp;
<input type="text" id="projectFull" size=5 maxlength=3 ></p>
<p style="background-color: lightgrey"> Interactive Creative Design Report (10%) &emsp;  &emsp;
<input type="text" id="projectReport" size=5 maxlength=2 ></p>

</br>
</br>

<h2 style="background-color: red"> Final Exam [40%] &emsp;  &emsp; <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:


No comments:

Post a Comment