-
+
+
+
-
-
-
+
Add Grades
-
-
+
+
Total:
+
0/0
+
+
+
+
+
+
+ Add Grades
+
+
+
Total:
+
0/0
+
+
+
+
+
+ Add Grades
+
Total:
-
0/0
-
+
0/0
+
+
+
+
+ Add Grades
+
+
+
Total:
+
0/0
+
+
+
+
+
+
+ Add Grades
+
+
+
Total:
+
0/0
+
+
+
+
+
+
Homeworks
+ 0
+
+ Quizes
+ 0
+
+ Tests
+ 0
+
+ Projects
+ 0
+
+ Other
+ 0
+
+ Final Exam
+ 0
+
+
+
+ Total
+ 0
+
diff --git a/script.js b/script.js
index d98b2ab..1ec25db 100644
--- a/script.js
+++ b/script.js
@@ -1,19 +1,19 @@
-function addGradeField() {
- var gradesList = document.getElementById("HomeworkGrades");
+function addGradeField(category) {
+ var gradesList = document.getElementById(category+"Grades");
var newGrade = document.createElement("li");
var idCode = gradesList.childNodes.length - 2;
/// A little quick fix to fix IDs. It messes up because the active marker throws off the count for everything after the first one...
if(idCode > 1)
- idCode = idCode-1;
+ idCode = (idCode+1)/2;
- newGrade.setAttribute("id","Grade"+idCode);
+ newGrade.setAttribute("id",category+"Grade"+idCode);
newGrade.setAttribute("class", "Grade");
- newGrade.innerHTML = '
';
+ newGrade.innerHTML = '
';
var activeMarker = document.createElement('input');
activeMarker.type = "checkbox";
- activeMarker.id = "GradeMarker"+idCode;
+ activeMarker.id = ""+category+"GradeMarker"+idCode;
activeMarker.setAttribute("class", "ActiveMarker");
activeMarker.setAttribute("Checked", "True");
gradesList.appendChild(activeMarker);
@@ -22,10 +22,25 @@ function addGradeField() {
}
function init(){
- setInterval('calculateGrade()', 1000);
+ setInterval('calculateTotal()', 3000);
}
-function calculateGrade()
+function calculateTotal()
+{
+ // This could be converted into a for loop, sure... but too much code overhead... This is cleaner and more efficient.
+ var homeworkGrade = calculateGrade("Homework") * parseFloat(document.getElementById("HomeworkPercentage").value)/100.0;
+ var quizGrade = calculateGrade("Quiz") * parseFloat(document.getElementById("QuizPercentage").value)/100.0;
+ var testGrade = calculateGrade("Test") * parseFloat(document.getElementById("TestPercentage").value)/100.0;
+ var projectGrade = calculateGrade("Project") * parseFloat(document.getElementById("ProjectPercentage").value)/100.0;
+ var otherGrade = calculateGrade("Other") * parseFloat(document.getElementById("OtherPercentage").value)/100.0;
+ var finalGrade = calculateGrade("Final") * parseFloat(document.getElementById("FinalPercentage").value)/100.0;
+
+ var total = ( homeworkGrade + quizGrade + testGrade + projectGrade ) * 100.0;
+
+ document.getElementById("TotalTotalSummary").innerHTML = total;
+}
+
+function calculateGrade(category)
{
// Todo: add grade/total field, instead of assuming it's out of 100...
// var gradeValue = document.getElementById('myText');
@@ -33,7 +48,7 @@ function calculateGrade()
var i = 1;
- var gradeValue = document.getElementById("GradeValue"+i);
+ var gradeValue = document.getElementById(category+"GradeValue"+i);
var grade = 0;
var total = 0;
@@ -41,15 +56,16 @@ function calculateGrade()
while( gradeValue != null){
// Do stuff with the grade value.
- var activeCheck = document.getElementById("GradeMarker"+i);
+ var activeCheck = document.getElementById(category+"GradeMarker"+i);
if(activeCheck.checked){ // Check if we shoudl include that grade in...
grade+=parseFloat(gradeValue.value); // Note: Do parseInt here instead?
total+=100;
}
i++;
- gradeValue = document.getElementById("GradeValue"+i);
+ gradeValue = document.getElementById(category+"GradeValue"+i);
}
-
- document.getElementById("HomeworkTotal").innerHTML = ""+grade+"/"+total;
+ document.getElementById(category+"Total").innerHTML = ""+grade+"/"+total;
+ document.getElementById(category+"TotalSummary").innerHTML = ""+grade+"/"+total;
+ return grade/total;
}
diff --git a/style.css b/style.css
index 2d38e5a..f6cf451 100644
--- a/style.css
+++ b/style.css
@@ -1,10 +1,54 @@
body{
background-color:#333333;
/* background-color:#EFF1F1; */
+
+
padding:0px 0px 0px 0px;
font: normal 1em/1.5 Georgia, serif;
}
+
+#Content
+{
+ padding-top:150px;
+ background-color:#8b6840;
+ background-image:url("recycled-paper-texture.jpg");
+ border: 2px solid gray;
+ padding-bottom:102px;
+ -moz-border-radius:8px;
+ -webkit-border-radius:8px;
+
+ -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
+ -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
+}
+
+
+#Title
+{
+ font:normal Sans, Comics;
+ text-align:center;
+ color:white;
+}
+
+#Header
+{
+ background-color:#333333;
+ border-width:0px;
+ width:450px;
+ height:60px;
+ position:absolute;
+ display:inline-block;
+ left:0px;
+ top:70px;
+}
+
+#Logo
+{
+ position:absolute;
+ left:15px;
+ top:-25px;
+}
+
.ActiveMarker
{
display:inline;
@@ -25,20 +69,7 @@ body{
opacity:1;
}
-#Content
-{
- padding-top:70px;
- background-color:#FFFFFF;
- border: 2px solid gray;
- padding-bottom:102px;
-/* -moz-border-radius:8px;
- -webkit-border-radius:8px; */
-
- -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
- -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
-}
-
-#Category
+.Category
{
display: block;
width:800px;
@@ -46,6 +77,10 @@ body{
background:white;
margin-left: auto;
margin-right: auto;
+
+ margin-top:30px;
+ margin-bottom:30px;
+
border: 1px solid gray;
padding:10px 20px 10px 20px;
-moz-border-radius:8px;
@@ -54,6 +89,29 @@ body{
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
}
+#Summary
+{
+ display: block;
+ width:800px;
+ min-height:75px;
+ margin-left:auto;
+ margin-right:auto;
+ margin-top:30px;
+ margin-bottom:80px;
+}
+
+.CategoryName
+{
+ display:block;
+}
+.CategoryTotal
+{
+ display:block;
+ text-align:right;
+ color:black;
+ clear:right;
+}
+
#Logo
{
display:block;
@@ -101,13 +159,6 @@ body{
border: 1px solid #aaaaaa;
}
-#HomeworkTotal
-{
- color:black;
- font-size:32px;
- padding:0 0 0 0;
-}
-
.GradeValue
{
float:right;
@@ -116,6 +167,17 @@ body{
border:0px solid #ffffff;
}
+#FinalGradeValue1
+{
+ display:block;
+ width:50px;
+ height:50px;
+
+ margin-left:auto;
+ margin-right:auto;
+ text-align:center;
+}
+
.GradeName
{
width:300px;
@@ -162,3 +224,11 @@ hr{
font-size:16px;
display:inline;
}
+
+
+.Total
+{
+ color:black;
+ font-size:32px;
+ padding:0 0 0 0;
+}
- 
+