Init www
This commit is contained in:
23
pages/grade-calc/README.md
Normal file
23
pages/grade-calc/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Grade Calculator
|
||||
|
||||
Some professors do not properly configure the Canvas grade percentages based on their syllabus. Instead, they opt to use Excel to calculate the final grades after everything. It can be hard to estimate how much effort I should allocate for those classes without making an Excel file.
|
||||
|
||||
So I wrote this to quickly configure a calculator to see what I will end up getting in a class based on how much effort I put in.
|
||||
|
||||
## Short Summary of the JSON structure
|
||||
|
||||
The JSON is expected to have an array of section descriptions.
|
||||
|
||||
`name : string` is used as the class name. They have to be unique for each section to work as expected.
|
||||
|
||||
`title : string` is used as the heading for the sections.
|
||||
|
||||
`percentage : number` is used to weigh the section for the final grade.
|
||||
|
||||
`output : boolean` when true, it calculates the section score.
|
||||
|
||||
`points : [number]` used for each assignment in the section.
|
||||
|
||||
`bothMethods : boolean` when true, the weighted and unweighted scores are calculated.
|
||||
|
||||
`info : string` used for section description.
|
||||
25
pages/grade-calc/config/eee3307c.json
Normal file
25
pages/grade-calc/config/eee3307c.json
Normal file
@@ -0,0 +1,25 @@
|
||||
[
|
||||
{
|
||||
"name": "final",
|
||||
"title": "Final",
|
||||
"percentage": 40,
|
||||
"info": ""
|
||||
},
|
||||
{
|
||||
"name": "midterm",
|
||||
"title": "Midterm",
|
||||
"percentage": 30
|
||||
},
|
||||
{
|
||||
"name": "homework",
|
||||
"title": "Homework",
|
||||
"percentage": 10,
|
||||
"points": [100,100,100,100,100,100]
|
||||
},
|
||||
{
|
||||
"name": "lab",
|
||||
"title": "Lab",
|
||||
"percentage": 20,
|
||||
"info": "Lab score is accurate and does not need any sub-calculation."
|
||||
}
|
||||
]
|
||||
29
pages/grade-calc/config/eel4742c.json
Normal file
29
pages/grade-calc/config/eel4742c.json
Normal file
@@ -0,0 +1,29 @@
|
||||
[
|
||||
{
|
||||
"name": "exams",
|
||||
"percentage": 70,
|
||||
"points": [
|
||||
100,
|
||||
100,
|
||||
100
|
||||
],
|
||||
"title": "Exams"
|
||||
},
|
||||
{
|
||||
"name": "homework",
|
||||
"percentage": 15,
|
||||
"points": [
|
||||
90,
|
||||
50,
|
||||
110,
|
||||
90
|
||||
],
|
||||
"title": "Homework"
|
||||
},
|
||||
{
|
||||
"info": "Lab score is accurate and does not need any sub-calculation.",
|
||||
"name": "lab",
|
||||
"percentage": 15,
|
||||
"title": "Lab"
|
||||
}
|
||||
]
|
||||
35
pages/grade-calc/config/eel4781.json
Normal file
35
pages/grade-calc/config/eel4781.json
Normal file
@@ -0,0 +1,35 @@
|
||||
[
|
||||
{
|
||||
"name": "midterm",
|
||||
"percentage": 25,
|
||||
"info":"http://www.ece.ucf.edu/~yuksem/teaching/EEL-4781-Spring-2021.html"
|
||||
},
|
||||
{
|
||||
"name": "final",
|
||||
"percentage": 25
|
||||
},
|
||||
{
|
||||
"name": "project",
|
||||
"percentage": 15,
|
||||
"info":"Webserver project"
|
||||
},
|
||||
{
|
||||
"name": "homework",
|
||||
"percentage": 20,
|
||||
"points": [
|
||||
100,
|
||||
100,
|
||||
100,
|
||||
100,
|
||||
100
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "lab",
|
||||
"percentage": 15,
|
||||
"points": [
|
||||
100,
|
||||
100
|
||||
]
|
||||
}
|
||||
]
|
||||
41
pages/grade-calc/config/map2302.json
Normal file
41
pages/grade-calc/config/map2302.json
Normal file
@@ -0,0 +1,41 @@
|
||||
[
|
||||
{
|
||||
"name": "final",
|
||||
"title": "Final",
|
||||
"percentage": 25,
|
||||
"info": ""
|
||||
},
|
||||
{
|
||||
"name": "midterm",
|
||||
"title": "Midterm",
|
||||
"percentage": 50,
|
||||
"points": [
|
||||
20,
|
||||
20,
|
||||
20
|
||||
],
|
||||
"output": true
|
||||
},
|
||||
{
|
||||
"name": "quiz",
|
||||
"title": "Quiz",
|
||||
"percentage": 10,
|
||||
"points": [
|
||||
30,
|
||||
10,
|
||||
15
|
||||
],
|
||||
"output": true,
|
||||
"bothMethods": true
|
||||
},
|
||||
{
|
||||
"name": "homework",
|
||||
"title": "Homework",
|
||||
"percentage": 10
|
||||
},
|
||||
{
|
||||
"name": "attendance",
|
||||
"title": "Attendance",
|
||||
"percentage": 5
|
||||
}
|
||||
]
|
||||
203
pages/grade-calc/gc_client.js
Normal file
203
pages/grade-calc/gc_client.js
Normal file
@@ -0,0 +1,203 @@
|
||||
class GradeCalc {
|
||||
maxscore = 0;
|
||||
sections = [];
|
||||
inputSection = [];
|
||||
outputSection = [];
|
||||
fields = [];
|
||||
grades = [];
|
||||
ugrades = [];
|
||||
both = false;
|
||||
totalOutput = null;
|
||||
|
||||
constructor(config, outCallback) {
|
||||
this.totalOutput = document.createElement("div");
|
||||
let dConfig = JSON.parse(JSON.stringify(config)); // dirty clone
|
||||
let sanConfig = [];
|
||||
for (let conf of dConfig) {
|
||||
if (conf.percentage === undefined || conf.name === undefined)
|
||||
continue;
|
||||
if (conf.title === undefined)
|
||||
conf.title = conf.name[0].toUpperCase() + conf.name.slice(1);
|
||||
sanConfig.push(conf);
|
||||
}
|
||||
this.config = sanConfig;
|
||||
for (let [i, conf] of this.config.entries()) {
|
||||
this.maxscore += conf.percentage;
|
||||
|
||||
this.inputSection[i] = [];
|
||||
this.outputSection[i] = document.createElement("div");
|
||||
|
||||
if (conf.bothMethods) {
|
||||
this.both = true;
|
||||
}
|
||||
|
||||
this.sections[i] = (this.createSection(i));
|
||||
}
|
||||
|
||||
for (let [k, v] of this.fields.entries()) {
|
||||
for (let field of v) {
|
||||
this.addInputEventListener(k, field);
|
||||
}
|
||||
}
|
||||
|
||||
outCallback(this.sections);
|
||||
}
|
||||
|
||||
createSection(id) {
|
||||
let conf = this.config[id];
|
||||
|
||||
var section = document.createElement("div");
|
||||
section.classList.add(conf.name);
|
||||
|
||||
var heading = document.createElement("h2");
|
||||
heading.innerHTML = `${conf.title} (${conf.percentage}%)`;
|
||||
|
||||
section.appendChild(heading);
|
||||
|
||||
if (conf.info !== undefined)
|
||||
section.appendChild(document.createTextNode(conf.info));
|
||||
|
||||
this.fields[id] = [];
|
||||
if (conf.points !== undefined) {
|
||||
for (var i = 0; i < conf.points.length; i++) {
|
||||
section.appendChild(this.createInputSection(id, i));
|
||||
}
|
||||
}
|
||||
else {
|
||||
section.appendChild(this.createInputSection(id, 0, true));
|
||||
}
|
||||
|
||||
|
||||
section.appendChild(this.outputSection[id]);
|
||||
return section;
|
||||
}
|
||||
|
||||
createInputSection(sectId, inputId, soleInput = false) {
|
||||
let conf = this.config[sectId];
|
||||
let inputSection = document.createElement("div");
|
||||
inputSection.classList.add("input-section");
|
||||
|
||||
let label = document.createElement("label");
|
||||
if (soleInput)
|
||||
label.innerHTML = `${conf.title} Score: `;
|
||||
else
|
||||
label.innerHTML = `${conf.title} ${inputId + 1} Score: `;
|
||||
|
||||
let field = document.createElement("input");
|
||||
field.classList.add(`${conf.name}-score`);
|
||||
this.fields[sectId][inputId] = field;
|
||||
|
||||
let suffix = (soleInput) ? "%" : ` / ${conf.points[inputId]} pts`;
|
||||
|
||||
inputSection.appendChild(label);
|
||||
inputSection.appendChild(field);
|
||||
inputSection.appendChild(document.createTextNode(suffix));
|
||||
|
||||
this.inputSection[sectId][inputId] = inputSection;
|
||||
return inputSection;
|
||||
}
|
||||
|
||||
addInputEventListener(id, field, event = "keyup") {
|
||||
let conf = this.config[id];
|
||||
field.addEventListener(event, () => {
|
||||
if (conf.output !== undefined && conf.output)
|
||||
this.showSectionGrade(id);
|
||||
this.showTotalGrade();
|
||||
});
|
||||
}
|
||||
|
||||
calculateSectionGrade(id, unweighted = false) {
|
||||
let conf = this.config[id];
|
||||
let fields = this.fields[id];
|
||||
if (fields === undefined)
|
||||
return;
|
||||
if (conf.points === undefined) {
|
||||
return parseFloat(fields[0].value);
|
||||
}
|
||||
|
||||
let total = 0;
|
||||
|
||||
if (unweighted) {
|
||||
let counter = 0;
|
||||
for (let [i, field] of fields.entries()) {
|
||||
let val = parseFloat(field.value);
|
||||
if (isNaN(val))
|
||||
continue;
|
||||
total += val / conf.points[i];
|
||||
counter++;
|
||||
}
|
||||
|
||||
return (total / counter * 100);
|
||||
}
|
||||
|
||||
total = fields.reduce((acc, cur) => {
|
||||
let c = parseFloat(cur.value);
|
||||
if (isNaN(c))
|
||||
return acc;
|
||||
return acc + parseFloat(c);
|
||||
}, 0);
|
||||
|
||||
let max_total = 0;
|
||||
for (let [i, field] of conf.points.entries()) {
|
||||
if (isNaN(parseFloat(fields[i].value)))
|
||||
continue;
|
||||
max_total += field;
|
||||
}
|
||||
|
||||
return (total / max_total * 100);
|
||||
}
|
||||
|
||||
showSectionGrade(id) {
|
||||
let conf = this.config[id];
|
||||
let grade = this.calculateSectionGrade(id);
|
||||
let ugrade = this.calculateSectionGrade(id, true);
|
||||
|
||||
|
||||
this.grades[id] = grade * parseFloat(conf.percentage) / 100;
|
||||
this.ugrades[id] = ugrade * parseFloat(conf.percentage) / 100;
|
||||
|
||||
grade = !isNaN(grade) ? grade.toFixed(2) : "...";
|
||||
ugrade = !isNaN(ugrade) ? ugrade.toFixed(2) : "...";
|
||||
if (conf.bothMethods) {
|
||||
this.outputSection[id].innerHTML
|
||||
= `Score (weighted): ${grade}%<br> Score (unweighted): ${ugrade}%`;
|
||||
return;
|
||||
}
|
||||
|
||||
this.outputSection[id].innerHTML = `Score: ${grade}`;
|
||||
}
|
||||
|
||||
showTotalGrade() {
|
||||
for (let [k, conf] of this.config.entries()) {
|
||||
if (!conf.output) {
|
||||
this.grades[k] = this.calculateSectionGrade(k) * parseFloat(conf.percentage) / 100;
|
||||
this.ugrades[k] = this.calculateSectionGrade(k, true) * parseFloat(conf.percentage) / 100;
|
||||
}
|
||||
}
|
||||
|
||||
let grade = this.grades.reduce((a, c) => {
|
||||
if (isNaN(c))
|
||||
return a;
|
||||
return a + c
|
||||
}, 0);
|
||||
let ugrade = this.ugrades.reduce((a, c) => {
|
||||
if (isNaN(c))
|
||||
return a;
|
||||
return a + c
|
||||
}, 0);
|
||||
|
||||
grade = !isNaN(grade) ? grade.toFixed(2) : "...";
|
||||
ugrade = !isNaN(ugrade) ? ugrade.toFixed(2) : "...";
|
||||
if (this.both) {
|
||||
this.totalOutput.innerHTML
|
||||
= `Total Score (weighted): ${grade}%<br> Total Score (unweighted): ${ugrade}%`;
|
||||
return;
|
||||
}
|
||||
|
||||
this.totalOutput.innerHTML = `Total Score: ${grade}%`;
|
||||
}
|
||||
|
||||
get elemTotal() {
|
||||
return this.totalOutput;
|
||||
}
|
||||
}
|
||||
127
pages/grade-calc/index.html
Normal file
127
pages/grade-calc/index.html
Normal file
@@ -0,0 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta name="Grade Calculator" content="School grade calculation">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Grade Calc</title>
|
||||
</head>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.about-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.json-textarea,
|
||||
.calculator-container {
|
||||
width: 50%;
|
||||
padding: 1rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.json-textarea textarea {
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-container button {
|
||||
border: 1px solid black;
|
||||
border-radius: 0;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
margin: .5rem 0;
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #90c541;
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
|
||||
.json-textarea,
|
||||
.calculator-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="about-container">
|
||||
<h1><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Grade Calculator</h1>
|
||||
<hr>
|
||||
<h2>About</h2>
|
||||
Check out the <a href="https://github.com/lambdapaul/pages/blob/master/grade-calc/README.md">README.md</a> file
|
||||
to learn more about the configuration structure.
|
||||
<h3>Usage</h3>
|
||||
<ol>
|
||||
<li>Either configure the calculator using the text box below or load one from the existing JSON files to
|
||||
generate one.</li>
|
||||
<li>Click <code>Generate</code>.</li>
|
||||
<li>Enter the input values.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="json-textarea">
|
||||
<h2>Configuration</h2>
|
||||
<h3>Load config from file</h3>
|
||||
<ul>
|
||||
<li><a href="javascript:void(0)" onclick="loadConfig('./config/map2302.json')">MAP2302 - ODE I Fall 2019</a>
|
||||
</li>
|
||||
<li><a href="javascript:void(0)" onclick="loadConfig('./config/eee3307c.json')">EEE3307C - Electronics I
|
||||
Spring 2021</a></li>
|
||||
</ul>
|
||||
<div class="button-container">
|
||||
<button onclick="generate()">Generate →</button>
|
||||
</div>
|
||||
<textarea id="json" id="" rows="30"></textarea>
|
||||
|
||||
</div>
|
||||
<div class="calculator-container">
|
||||
</div>
|
||||
<script type="text/javascript" src="gc_client.js"></script>
|
||||
<script>
|
||||
function generate() {
|
||||
var let;
|
||||
let calcSection = document.querySelector(".calculator-container");
|
||||
calcSection.innerHTML = "";
|
||||
try {
|
||||
conf = JSON.parse(document.getElementById("json").value);
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e);
|
||||
calcSection.innerHTML = e;
|
||||
return;
|
||||
}
|
||||
let cb = (out) => {
|
||||
for (let o of out) {
|
||||
calcSection.appendChild(o);
|
||||
}
|
||||
}
|
||||
gc = new GradeCalc(conf, cb);
|
||||
|
||||
calcSection.appendChild(gc.elemTotal);
|
||||
}
|
||||
|
||||
function loadConfig(filename) {
|
||||
var client = new XMLHttpRequest();
|
||||
client.open('GET', filename);
|
||||
client.onreadystatechange = function () {
|
||||
document.getElementById("json").value = (client.responseText);
|
||||
}
|
||||
client.send();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user