DerexXD/ut-grade-distribution-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Maybe thisll not break plz

Browse Source
This commit is contained in:
HW Computer
2023-05-01 00:09:31 -05:00
parent e980ccf7fa
commit 6c8cd20b06
4 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
docs/index.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z5B0S1WMC4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-Z5B0S1WMC4');
</script>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>UT Grade Viewer</title>
<link rel="icon" href="https://derec4.github.io/ut-grade-distribution-viewer/data/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
</head>
<body>
<div class="wrapper">
<div class="about-text" value="">
<h1>About</h1>
<p>
This is a database tool to assist students of the University of Texas - Austin in the biannual race for
Jazz Appr- I mean course registration process.
</p>
<p>
I noticed other grade sites used outdated data, so I made
my own. Enjoy!
</p>
</div>
<div class="bg-form">
<p>
Keep course names as close to the
<a href="https://registrar.utexas.edu/schedules">official course name</a>
as possible
</p>
<br>
<form action="">
<!-- Data is separated into course number, course prefi;x, and course name-->
<label for="courseField">Department (Ex: "MUS"):</label>
<input type="text" id="courseField" name="fname" required><br><br>
<label for="courseNum">Course Number (Ex: "307"):</label>
<input type="text" id="courseNum" name="fname" required><br><br>
<label for="courseName">Course Name (Optional, useful if classes have the same number like UGS 303):</label>
<input type="text" id="courseName" name="fname"><br><br>
<!-- <label for="courseInstructor">Instructor (Optional):</label>
<input type="text" id="courseInstructor" name="fname"><br><br> -->
<button type="button" id="subBut">Submit</button><br><br>
<!-- Dropdown menu for semester selection -->
<form>
<label for="dropdown">Semester (experimental feature):</label>
<select id="semester" name="dropdown">
<option value="f2022">Fall 2022</option>
<option value="s2022">Summer 2022</option>
<option value="sp2022">Spring 2022</option>
<option value="f2021">Fall 2021</option>
</select>
<br><br>
</form>
</form>
<div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw">
<!--Bar graph stuff-->
<canvas id="gradeBar" style="width:100%;height:100%;"></canvas>
</div>
</div>
</div>
<footer>Created by Derek Chen
<!-- because VAPA lecture was a bit boring that day -->
<iframe
src="https://ghbtns.com/github-btn.html?user=Derec4&repo=ut-grade-distribution-viewer&type=star&count=true&size=large"
frameborder="0" scrolling="0" width="170" height="30" title="GitHub">
</iframe>
<!-- <iframe src="https://ghbtns.com/github-btn.html?user=DereC4&type=follow&count=true&size=large" frameborder="0"
scrolling="0" width="170" height="30" title="GitHub">
</iframe> -->
</footer>
<script src='main.js'></script>
</body>
</html>

140
docs/main.css Normal file
View File

@@ -0,0 +1,140 @@
body {
font-family: 'Helvetica Neue', sans-serif;
background: #1b1a2a;
background: linear-gradient(90deg, rgba(61, 87, 92, 1) 0, #454454 100%);
}
a {
color: #2c82c9;
text-decoration: none
}
main {
padding: 10%
}
footer {
background-color: #2e2d2d;
color: #fff;
padding: 1%;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: left;
font-size: 1rem
}
* {
box-sizing: border-box;
}
.wrapper {
display: grid;
gap: 2vw;
grid-auto-rows: minmax(100px, auto);
text-align: center;
color: #fff;
/* background-color: rgba(0, 0, 0, .4); */
}
.about-text {
background-color: rgba(0, 0, 0, .4);
border: 3px solid #f1f1f1;
grid-column: 1;
grid-row: 1;
width: 70%;
margin: 0 auto;
border-radius: 10px;
}
.bg-form {
background-color: rgba(0, 0, 0, .4);
border: 3px solid #f1f1f1;
grid-column: 1;
grid-row: 2;
font-weight: 600;
width: auto;
height: auto;
margin: 0 auto;
border-radius: 10px;
}
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
/* Mobile */
.bg-form {
padding: 3px;
}
.about-text {
padding: 3px;
}
p {
font-size: 10px;
line-height: 1.5;
margin: 0 0 1rem 0
}
label {
font-size: 10px;
}
h1 {
font-size: 15px;
margin: 0 0 1rem 0
}
/* Tablet */
@media (min-width:600px) {
.bg-form {
padding: 15px;
}
.about-text {
padding: 10px;
}
p {
font-size: 14px;
}
label {
font-size: 14px;
}
h1 {
font-size: 18px;
}
}
/* Desktop */
@media (min-width:900px) {
.bg-form {
padding: 24px;
}
.about-text {
padding: 12px;
}
p {
font-size: 16px;
}
label {
font-size: 18px;
}
h1 {
font-size: 30px;
margin: 0 0 1rem 0
}
}

173
docs/main.js Normal file
View File

@@ -0,0 +1,173 @@
const submitButton = document.getElementById('subBut');
submitButton.addEventListener("click", parseName);
const chartDiv = document.querySelector('#grades');
const aboutDiv = document.querySelector('.about-text');
const formDiv = document.querySelector('.bg-form');
if(chartDiv.getAttribute('value') == 'invisible'){
chartDiv.style.display = 'none';
}
var gradeChart;
const ctx = document.getElementById("gradeBar");
const gradeLabels = ["A", "A-", "B+", "B", "B-", "C+", "C", "C-", "D+", "D", "D-", "F"];
/*
Parse the input form and class data
*/
async function parseName() {
let className = document.getElementById('courseName').value.toUpperCase();
let classNum = document.getElementById('courseNum').value;
let department = document.getElementById('courseField').value.trim().toUpperCase();
let semester = document.getElementById('semester').value;
let departments = '';
await fetch('https://derec4.github.io/ut-grade-data/2022prefixes.json')
.then(res => res.json())
.then(data => { departments = data; });
if(!className && !classNum && !department) {
alert("At least fill out the form...");
return;
}
if(!department || !classNum) {
alert("Missing fields")
return;
}
if(!departments.includes(department)) {
alert("Invalid Department");
return;
}
console.log(department, classNum.toString(), className.trim(), semester);
await PapaParse(department, classNum.toString(), className.trim(), semester);
}
/*
Fetch the necessary database depending on semester and filter based on the input data
*/
async function PapaParse(department, num, name, sem) {
let cData = '';
let url = '';
switch (sem) {
case 'f2022':
url = 'https://derec4.github.io/ut-grade-data/2022%20Fall.json';
break;
case 's2022':
url = 'https://derec4.github.io/ut-grade-data/2022%20Summer.json';
break;
case 'sp2022':
// Temp, change when other data sets are added
url = 'https://derec4.github.io/ut-grade-data/2022%20Spring.json';
break;
case 'f2021':
url = 'https://derec4.github.io/ut-grade-data/2021%20Fall.json';
break;
default:
url = 'https://derec4.github.io/ut-grade-data/2022%20Fall.json';
break;
}
await fetch(url)
.then(res => res.json())
.then(data => { cData = data; });
let selectedClass = cData.filter(cData => cData["Course Prefix"].includes(department))
.filter(cData => cData["Course Number"] == num.toString().toUpperCase())
.filter(cData => cData["Course Title"].includes(name));
if(selectedClass.length == 0) {
// Possible that the class name was typed wrong; try again with just the course number
console.log("Invalid name; trying again with just the course number");
selectedClass = cData.filter(cData => cData["Course Prefix"].includes(department))
.filter(cData => cData["Course Number"] == num.toString().toUpperCase());
}
if(selectedClass.length == 0) {
// Still can't find anything? Just exit without making a chart and alert that nothing could be found
alert("No data found. Try again :(");
return;
}
console.log(selectedClass);
let gradeDist = {
"A": 0,
'A-': 0,
'B+': 0,
'B': 0,
'B-': 0,
'C+': 0,
'C': 0,
'C-': 0,
'D+': 0,
'D': 0,
'D-': 0,
'F': 0,
'Other': 0
};
let lableName = selectedClass[0]["Course Title"];
let sameName = true;
for(i in selectedClass) {
let letterGrade = selectedClass[i]["Letter Grade"];
let cnt = selectedClass[i]["Count of letter grade"]
gradeDist[letterGrade] += cnt;
if(sameName && !(lableName === selectedClass[i]["Course Title"])) {
lableName = "Multiple courses detected; try specifying a course name!"
sameName = false;
}
// console.log(selectedClass[i]["Letter Grade"]);
// console.log(selectedClass[i]["Count of letter grade"]);
}
console.log(gradeDist);
if(gradeChart) {
gradeChart.config.data = {
labels: gradeLabels,
datasets: [{
label: '\"' + lableName +"\"",
data: Object.values(gradeDist),
borderWidth: 2,
// borderColor: '#36A2EB',
backgroundColor: ["rgb(98, 244, 54)", "rgb(129, 231, 10)", "rgb(151, 218, 0)", "rgb(168, 204, 0)", "rgb(181, 190, 0)", "rgb(191, 176, 0)", "rgb(199, 162, 0)", "rgb(205, 148, 0)", "rgb(209, 133, 0)", "rgb(211, 119, 0)", "rgb(210, 105, 0)", "rgb(208, 91, 23)", "rgb(204, 78, 36)", "rgb(198, 66, 46)", "rgb(190, 54, 54)", ""],
}]
};
gradeChart.update();
} else {
loadChart(gradeDist, lableName);
aboutDiv.style.visibility='hidden';
aboutDiv.style.display='none';
chartDiv.style.display = '';
formDiv.setAttribute("style", "grid-row: 1");
}
}
function loadChart(gradeDist, courseName) {
gradeChart = new Chart(ctx, {
type: 'bar',
data: {
labels: gradeLabels,
datasets: [{
label: '\"' + courseName + "\"",
data: Object.values(gradeDist),
borderWidth: 2,
backgroundColor: ["rgb(98, 244, 54)", "rgb(129, 231, 10)", "rgb(151, 218, 0)", "rgb(168, 204, 0)", "rgb(181, 190, 0)", "rgb(191, 176, 0)", "rgb(199, 162, 0)", "rgb(205, 148, 0)", "rgb(209, 133, 0)", "rgb(211, 119, 0)", "rgb(210, 105, 0)", "rgb(208, 91, 23)", "rgb(204, 78, 36)", "rgb(198, 66, 46)", "rgb(190, 54, 54)", ""],
}]
},
options: {
legend: {
labels: {
fontColor: "#00FF59",
fontSize: 15
}
},
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
stacked: true,
grid: {
display: true,
}
},
x: {
grid: {
display: false
}
}
}
}
});
}

13
docs/sitemap.xml Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>https://derec4.github.io/ut-grade-distribution-viewer/</loc>
<lastmod>2023-04-29T05:59:34+00:00</lastmod>
</url>
</urlset>