Compare commits
4 Commits
master
...
summerHand
| Author | SHA1 | Date | |
|---|---|---|---|
| 50c7e0468b | |||
| 4f1efd12b1 | |||
| 15ad0417fc | |||
| 2363631674 |
19
README.md
19
README.md
@@ -1,30 +1,19 @@
|
||||
|
||||
|
||||
|
||||
## How do I access the site?
|
||||
## How do I access the website?
|
||||
|
||||
https://derec4.github.io/ut-grade-distribution-viewer/
|
||||
|
||||
## Where did you go?
|
||||
|
||||
I work on [UT Registration Plus](https://github.com/Longhorn-Developers/UT-Registration-Plus) now!
|
||||
|
||||
## Why is this a thing?
|
||||
|
||||
I'm sure you've all seen this page before:
|
||||
I'm sure you've all seen this before:
|
||||
|
||||
|
||||
|
||||
It's from a (super helpful) registration extension, and shows for more than half the classes looked at. No hate on the extension though, ironically enough, I was actually annexed into the UT Registration Plus team last year.
|
||||
It's from a (super helpful) registration extension, and shows for more than half the classes looked at (No hate, I love UT Registration Plus they laughed at my jokes)
|
||||
|
||||
Bored in VAPA one day, I noticed popular sites like Catalyst and UT Registration Plus showed outdated on grade distributions, or no data at all. They may update in the future but for the time being that is an issue. As a result, I decided to make this website instead of paying attention to the pipelining lecture in 429 that day. Magically, my quiz grade average decreased dramatically that week. Go figure 🤷♂️
|
||||
|
||||
Using the site is simple, just input the necessary data and voila!
|
||||
|
||||
|
||||
|
||||
|
||||
Report bugs plz cuz I made this in a few days
|
||||
|
||||
By derex_ or derec4 or derexxd or derexd or DereC_ or CORRUPT_Greninja or lordnexus123 or whatever my username is these days
|
||||
|
||||
|
||||
|
||||
125
docs/about.html
125
docs/about.html
@@ -1,125 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>About - UT Austin Grade Distribution Viewer</title>
|
||||
<link rel="icon" href="favicon.ico" />
|
||||
<meta
|
||||
name="description"
|
||||
content="An up to date grade distribution viewer for students at the University of Texas at Austin"
|
||||
/>
|
||||
<meta name="author" content="Derek Chen" />
|
||||
<meta
|
||||
name="keywords"
|
||||
content="UT, University of Texas at Austin, Grade viewer, grade distribution viewer, derex, grade distribution, ut austin"
|
||||
/>
|
||||
<meta name="language" content="English" />
|
||||
<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"
|
||||
>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<ul>
|
||||
<!-- <li><a href="/docs/index.html">Home</a></li>
|
||||
<li><a href="/docs/about.html">About</a></li>
|
||||
<li><a href="/docs/changelog.html">Changelog</a></li> -->
|
||||
<li><a href="https://derec4.github.io/ut-grade-distribution-viewer/index">Home</a></li>
|
||||
<li><a href="https://derec4.github.io/ut-grade-distribution-viewer/about">About</a></li>
|
||||
<li><a href="https://derec4.github.io/ut-grade-distribution-viewer/changelog">Changelog</a></li>
|
||||
<div class="top-left">
|
||||
<input type="checkbox" class="checkbox" id="colorToggle">
|
||||
<label for="colorToggle" class="checkbox-label">
|
||||
<i class="fas fa-moon"></i>
|
||||
<i class="fas fa-sun"></i>
|
||||
<span class="ball"></span>
|
||||
</label>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="wrapper-changelog">
|
||||
<div class="about-text" value="">
|
||||
<h1>About</h1>
|
||||
<p>
|
||||
Note: At the time I developed this site, tools like <a href="https://github.com/Longhorn-Developers/UT-Registration-Plus">UT Registration Plus</a> and <a href="https://utcatalyst.org/grade-distributions">Catalyst</a> showed very outdated grade data, if any at all.
|
||||
</p>
|
||||
<p>I'm sure you've all seen this before:</p>
|
||||
<div class="image-container">
|
||||
<img
|
||||
src="https://user-images.githubusercontent.com/53978637/233871181-d681c4a6-20a7-4544-9f1f-5e5fae1a6569.png"
|
||||
alt="Screenshot of registration extension"
|
||||
class="responsive-image"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
It's the grade distribution page on UT Registration Plus, a popular
|
||||
registration extension, and shows for more than half the courses
|
||||
available.
|
||||
</p>
|
||||
<p>
|
||||
During Spring 2023 registration, I noticed these tools showed outdated data on grade distributions, or no
|
||||
data at all. As a result, instead of paying attention to the
|
||||
pipelining lecture in 429 that day, I decided to start working on this
|
||||
website. Magically, my quiz grade average decreased dramatically that
|
||||
week.
|
||||
</p>
|
||||
</div>
|
||||
<div class="about-text">
|
||||
<h1>Thousands of Users!</h1>
|
||||
<p>
|
||||
On April 17th, 2023, the project was born! Though it was finished
|
||||
midway through registration, the subsequent registration periods saw a
|
||||
lot of use from students all over campus.
|
||||
</p>
|
||||
<div class="iframe-container">
|
||||
<iframe
|
||||
width="600"
|
||||
height="371"
|
||||
frameborder="0"
|
||||
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSIcbjzLhH9H0RP8rF69XrnZtQk1umBTofOJBqAG5xWGBJhVDAi_mEmxQ-DsZZtuLVMvrhvJadYCf_m/pubchart?oid=370744605&format=interactive"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
<p>(Mobile Users may have to scroll a bit)</p>
|
||||
</div>
|
||||
<div class="about-text">
|
||||
<h1>What's next?</h1>
|
||||
<p>
|
||||
The website will continue to be updated with the latest grade
|
||||
distribution data from UT Austin for the foreseeable future
|
||||
</p>
|
||||
<p>
|
||||
In the meantime, my team and I have been working on
|
||||
<a
|
||||
href="https://chromewebstore.google.com/detail/ut-registration-plus/hboadpjkoaieogjimneceaahlppnipaa"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>UT Registration Plus</a
|
||||
>
|
||||
so we're excited to ship out our new overhaul update soon! Check the
|
||||
<a href="https://derec4.github.io/ut-grade-distribution-viewer/changelog">changelog</a> for our beta testing interest
|
||||
form!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footy">
|
||||
<div class="footy-interior">
|
||||
<p>Created by <a href="https://www.linkedin.com/in/derekyujirchen/">Derek Chen.</a>
|
||||
<!-- because VAPA lecture was a bit boring that day -->
|
||||
Help keep the site up by <a href="https://www.paypal.com/donate/?business=ND35WHTPKM494&no_recurring=0&item_name=Help+support+our+grade+distribution+site+and+other+tools%21¤cy_code=USD">supporting it here!</a></p>
|
||||
<!-- <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="100" height="30" title="GitHub">
|
||||
</iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
<script src="colorScheme.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,249 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Changelog - UT Austin Grade Distribution Viewer</title>
|
||||
<link rel="icon" href="favicon.ico" />
|
||||
<meta
|
||||
name="description"
|
||||
content="An up to date grade distribution viewer for students at the University of Texas at Austin"
|
||||
/>
|
||||
<meta name="author" content="Derek Chen" />
|
||||
<meta
|
||||
name="keywords"
|
||||
content="UT, University of Texas at Austin, Grade viewer, grade distribution viewer, derex, grade distribution, ut austin"
|
||||
/>
|
||||
<meta name="language" content="English" />
|
||||
<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"
|
||||
>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||
</script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
|
||||
<style>
|
||||
@media screen and (max-width: 800px) {
|
||||
.leftcolumn,
|
||||
.rightcolumn {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<ul>
|
||||
<!-- <li><a href="/docs/index.html">Home</a></li>
|
||||
<li><a href="/docs/about.html">About</a></li>
|
||||
<li><a href="/docs/changelog.html">Changelog</a></li> -->
|
||||
<li>
|
||||
<a href="https://derec4.github.io/ut-grade-distribution-viewer/index"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://derec4.github.io/ut-grade-distribution-viewer/about"
|
||||
>About</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://derec4.github.io/ut-grade-distribution-viewer/changelog"
|
||||
>Changelog</a
|
||||
>
|
||||
</li>
|
||||
<div class="top-left">
|
||||
<input type="checkbox" class="checkbox" id="colorToggle" />
|
||||
<label for="colorToggle" class="checkbox-label">
|
||||
<i class="fas fa-moon"></i>
|
||||
<i class="fas fa-sun"></i>
|
||||
<span class="ball"></span>
|
||||
</label>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="about-text changelog">
|
||||
<h1>Changelog</h1>
|
||||
</div>
|
||||
<div class="changelog-split-row">
|
||||
<div class="column">
|
||||
<div class="default-card">
|
||||
<h2>Manifesting a J o b</h2>
|
||||
<p>October 19, 2025</p>
|
||||
<p>Episode IV</p>
|
||||
<p>A NEW GRIND</p>
|
||||
<p>
|
||||
It is a period of leetcode. UNDERGRAD STUDENTS, applying from dorm
|
||||
basements and labs, have secured their first OA from a
|
||||
career fair. During the assessment, brave students managed to pass
|
||||
all hidden test cases in a treacherous CODESIGNAL challenge — a
|
||||
digital trial with enough power to wreck self-esteem in minutes.
|
||||
Hunted by WORKDAY and Applicant Tracking Systems, nervous students
|
||||
update their resumes, guardians of hard-won projects and
|
||||
open-source contributions that might land them an offer and
|
||||
restore freedom to their credit card debts...
|
||||
</p>
|
||||
</div>
|
||||
<div class="default-card">
|
||||
<h2>how is it march already</h2>
|
||||
<p>March 3, 2025</p>
|
||||
<p>
|
||||
what the kevin it is already halfway through spring semester. Oh
|
||||
and the grade database has been updated, enjoy!
|
||||
</p>
|
||||
<a href="https://ibb.co/g7Wy31T">Preview Here</a>
|
||||
</div>
|
||||
<div class="default-card">
|
||||
<h2>Experimental Feature: Professors!</h2>
|
||||
<p>August 3, 2024</p>
|
||||
<p>
|
||||
Test out the new instructor field, it goes up to fall 2023 for now
|
||||
but is pretty cool and everyone should definitely try it. Also
|
||||
your semester will be remembered now in the dropdown menu so there
|
||||
goes your cache storage.
|
||||
</p>
|
||||
<a href="https://ibb.co/g7Wy31T">Preview Here</a>
|
||||
</div>
|
||||
<div class="default-card">
|
||||
<h2>New Semester Added!</h2>
|
||||
<p>July 28, 2024</p>
|
||||
<p>
|
||||
Happy 2/3 of summer! The spring 2024 semester has been added to
|
||||
our database and we can now analyze grades from that semester. You
|
||||
may also notice a new, experimental "instructor" field. That is
|
||||
classified.
|
||||
</p>
|
||||
</div>
|
||||
<div class="default-card">
|
||||
<h2>Server Maintenance</h2>
|
||||
<p>May 30, 2024</p>
|
||||
<p>
|
||||
We would like to inform you that we have scheduled server
|
||||
maintenance for [Your Software/Service Name] on [Maintenance Date]
|
||||
from [Start Time] to [End Time]. This maintenance is essential to
|
||||
ensure the continued performance, reliability, and security of our
|
||||
systems. Please mark your calendar and plan accordingly for this
|
||||
maintenance window. If you have any questions or need assistance,
|
||||
please contact our support team at [Support Email Address] or
|
||||
visit our [Support Page].
|
||||
</p>
|
||||
<p>Thank you for your cooperation,</p>
|
||||
<p>[Your Company Name]</p>
|
||||
</div>
|
||||
<div class="default-card">
|
||||
<h2>Donation page created</h2>
|
||||
<p>May 28, 2024</p>
|
||||
<p>
|
||||
Made a quick page so y'all can support our tools for UT and keep
|
||||
our site/database alive. Check it out
|
||||
<a
|
||||
href="https://www.paypal.com/donate/?business=ND35WHTPKM494&no_recurring=0&item_name=Help+support+our+grade+distribution+site+and+other+tools!¤cy_code=USD"
|
||||
>here!</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="default-card">
|
||||
<h2>Small update and repositioning</h2>
|
||||
<p>May 28, 2024</p>
|
||||
<p>Happy summer break!</p>
|
||||
<p>
|
||||
I saw this video where Darth Vader said that he ate a cat and that
|
||||
was funny. Also updated the page with a link to my Linkedin from
|
||||
my name, and moved the color scheme changer to the top left corner
|
||||
so it looked more organized.
|
||||
</p>
|
||||
</div>
|
||||
<div class="default-card">
|
||||
<h2>UT Registration Plus Testing Phase!</h2>
|
||||
<p>April 20, 2024</p>
|
||||
<p>
|
||||
My team and I have been working on
|
||||
<a
|
||||
href="https://chromewebstore.google.com/detail/ut-registration-plus/hboadpjkoaieogjimneceaahlppnipaa"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>UT Registration Plus</a
|
||||
>
|
||||
and testing has opened up for our upcoming overhaul update!
|
||||
<a href="https://forms.gle/YrEmq3R8nLU5a6iU6"
|
||||
>Interest form here</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="default-card">
|
||||
<h2>Overhaul Update [Patch 1.0.1.0]</h2>
|
||||
<p>April 20, 2024</p>
|
||||
<p>
|
||||
Created two more pages and the navbar today and now the site looks
|
||||
so much cooler.
|
||||
</p>
|
||||
</div>
|
||||
<div class="default-card">
|
||||
<h2>Made this page</h2>
|
||||
<p>April 20, 2024</p>
|
||||
<p>
|
||||
Yay I fixed a ton of things today and made this page! Got the
|
||||
color changing slider working way more smoothly now too so that's
|
||||
great.
|
||||
</p>
|
||||
<p>Can't believe this semester ends in 2 weeks</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="default-card">
|
||||
<h2>About Me</h2>
|
||||
<p>Just a simple student trying to make his way in the universe.</p>
|
||||
</div>
|
||||
<div class="social-icons-container">
|
||||
<a
|
||||
href="https://www.linkedin.com/in/derekyujirchen/"
|
||||
class="fa fa-linkedin"
|
||||
></a>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Mark_Zuckerberg"
|
||||
class="fa fa-facebook"
|
||||
></a>
|
||||
<a
|
||||
href="https://www.youtube.com/@DereC519/featured"
|
||||
class="fa fa-youtube"
|
||||
></a>
|
||||
<a href="https://photricity.com/flw/ajax/" class="fa fa-reddit"></a>
|
||||
<a href="https://github.com/DereC4" class="fa fa-github"></a>
|
||||
<a
|
||||
href="https://www.instagram.com/ramen__is__good/"
|
||||
class="fa fa-instagram"
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footy">
|
||||
<div class="footy-interior">
|
||||
<p>
|
||||
Created by
|
||||
<a href="https://www.linkedin.com/in/derekyujirchen/">Derek Chen.</a>
|
||||
<!-- because VAPA lecture was a bit boring that day -->
|
||||
Help keep the site up by
|
||||
<a
|
||||
href="https://www.paypal.com/donate/?business=ND35WHTPKM494&no_recurring=0&item_name=Help+support+our+grade+distribution+site+and+other+tools%21¤cy_code=USD"
|
||||
>supporting it here!</a
|
||||
>
|
||||
</p>
|
||||
<!-- <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="100" height="30" title="GitHub">
|
||||
</iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
<script src="colorScheme.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,9 +0,0 @@
|
||||
const colorToggle = document.getElementById("colorToggle")
|
||||
colorToggle.addEventListener("change", () => {
|
||||
const darkModeEnabled = document.body.classList.toggle("dark");
|
||||
Chart.defaults.global.defaultFontColor = darkModeEnabled ? "#484b6a" : "#F8F0E5";
|
||||
// Chart.defaults.plugins.legend.labels.color = isDarkModeEnabled ? "#484b6a" : "#F8F0E5";
|
||||
Chart.helpers.each(Chart.instances, (instance) => {
|
||||
instance.chart.update();
|
||||
});
|
||||
})
|
||||
BIN
docs/favicon.ico
BIN
docs/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
BIN
docs/favicon.io
BIN
docs/favicon.io
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
BIN
docs/favicon.png
BIN
docs/favicon.png
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
210
docs/index.html
210
docs/index.html
@@ -1,210 +0,0 @@
|
||||
<!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 Austin Grade Distribution Viewer</title>
|
||||
<link rel="icon" href="favicon.ico" />
|
||||
<meta
|
||||
name="description"
|
||||
content="An up to date grade distribution viewer for students at the University of Texas at Austin"
|
||||
/>
|
||||
<meta name="author" content="Derek Chen" />
|
||||
<meta
|
||||
name="keywords"
|
||||
content="UT, Austin, Grade, Distribution, Grades, University of Texas, UT Austin, ut grade distributions, ut grades plus, grades+"
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Explore UT Austin's grade distributions with two simple clicks!"
|
||||
/>
|
||||
<meta name="language" content="English" />
|
||||
<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"
|
||||
>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<ul>
|
||||
<!-- <li><a href="/docs/index.html">Home</a></li>
|
||||
<li><a href="/docs/about.html">About</a></li>
|
||||
<li><a href="/docs/changelog.html">Changelog</a></li> -->
|
||||
<li>
|
||||
<a href="https://derec4.github.io/ut-grade-distribution-viewer/index"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://derec4.github.io/ut-grade-distribution-viewer/about"
|
||||
>About</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://derec4.github.io/ut-grade-distribution-viewer/changelog"
|
||||
>Changelog</a
|
||||
>
|
||||
</li>
|
||||
<div class="top-left">
|
||||
<input type="checkbox" class="checkbox" id="colorToggle" />
|
||||
<label for="colorToggle" class="checkbox-label">
|
||||
<i class="fas fa-moon"></i>
|
||||
<i class="fas fa-sun"></i>
|
||||
<span class="ball"></span>
|
||||
</label>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="wrapper">
|
||||
<div class="about-text" value="">
|
||||
<h1>Intro</h1>
|
||||
<p>
|
||||
This is a database tool to assist students of the
|
||||
<a href="https://en.wikipedia.org/wiki/University_of_Texas_at_Austin"
|
||||
>University of Texas at Austin</a
|
||||
>
|
||||
in the biannual scramble for Jazz Appr- I mean course registration
|
||||
process.
|
||||
</p>
|
||||
<p>
|
||||
I noticed other grade sites used outdated data, so I made my own.
|
||||
Enjoy! Also check out my team's other project, <a href="https://github.com/Longhorn-Developers/UT-Registration-Plus">UT Registration Plus</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-form">
|
||||
<div class="bg-form-blurb">
|
||||
<p>
|
||||
Use the
|
||||
<a href="https://registrar.utexas.edu/schedules"
|
||||
>official course name</a
|
||||
>
|
||||
for best results.
|
||||
</p>
|
||||
<p>Some departments have a space in the middle (e.g., "C S")</p>
|
||||
<p>
|
||||
Course Name is optional, but used for duplicate ID courses (e.g.
|
||||
"UGS 303")
|
||||
</p>
|
||||
</div>
|
||||
<br />
|
||||
<form action="">
|
||||
<!-- Data is separated into course number, course prefix, and course name-->
|
||||
<div class="form-group">
|
||||
<label for="courseField"
|
||||
>Department (e.g. "MUS") <span class="required">*</span></label
|
||||
>
|
||||
<input type="text" id="courseField" name="fname" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="courseNum"
|
||||
>Course Number (e.g. "307")
|
||||
<span class="required">*</span></label
|
||||
>
|
||||
<input type="text" id="courseNum" name="fname" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="courseName"
|
||||
>Course Name (e.g. "JAZZ APPRECIATION-WB")</label
|
||||
>
|
||||
<input type="text" id="courseName" name="fname" />
|
||||
</div>
|
||||
|
||||
<!-- <label for="sectionNum">Section Number (Optional, Experimental)</label>
|
||||
<input type="text" id="sectionNum" name="fname" required> -->
|
||||
|
||||
<div class="form-group">
|
||||
<label
|
||||
for="courseInstructor"
|
||||
title="This is an experimental option!"
|
||||
>Instructor</label
|
||||
>
|
||||
<input type="text" id="courseInstructor" name="fname" />
|
||||
</div>
|
||||
|
||||
<!-- Dropdown menu for semester selection -->
|
||||
<div class="form-group">
|
||||
<label for="semester">Semester:</label>
|
||||
<select id="semester" name="dropdown">
|
||||
<option value="s2025">Summer 2025</option>
|
||||
<option value="sp2025">Spring 2025</option>
|
||||
<option value="f2024">Fall 2024</option>
|
||||
<option value="sp2024">Spring 2024</option>
|
||||
<option value="f2023">Fall 2023</option>
|
||||
<option value="s2023">Summer 2023</option>
|
||||
<option value="sp2023">Spring 2023</option>
|
||||
<option value="f2022">Fall 2022</option>
|
||||
<option value="s2022">Summer 2022</option>
|
||||
<option value="sp2022">Spring 2022</option>
|
||||
<option value="f2021">Fall 2021</option>
|
||||
<option value="s2021">Summer 2021</option>
|
||||
<option value="sp2021">Spring 2021</option>
|
||||
<option value="f2020">Fall 2020</option>
|
||||
<option value="s2020">Summer 2020</option>
|
||||
<option value="sp2020">Spring 2020</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="button" id="subBut" class="submit-button">
|
||||
Submit
|
||||
</button>
|
||||
</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>
|
||||
<div class="footy">
|
||||
<div class="footy-interior">
|
||||
<p>
|
||||
Created by
|
||||
<a href="https://www.linkedin.com/in/derekyujirchen/">Derek Chen.</a>
|
||||
<!-- because VAPA lecture was a bit boring that day -->
|
||||
Help keep the site up by
|
||||
<a
|
||||
href="https://www.paypal.com/donate/?business=ND35WHTPKM494&no_recurring=0&item_name=Help+support+our+grade+distribution+site+and+other+tools%21¤cy_code=USD"
|
||||
>donating!</a
|
||||
>
|
||||
Report feedback
|
||||
<a
|
||||
href="https://github.com/DereC4/ut-grade-distribution-viewer/issues"
|
||||
>here!</a
|
||||
>
|
||||
</p>
|
||||
<!-- <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="100" height="30" title="GitHub">
|
||||
</iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
<script src="colorScheme.js"></script>
|
||||
<script src="rememberSemester.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
465
docs/main.css
465
docs/main.css
@@ -1,465 +0,0 @@
|
||||
:root {
|
||||
/* Mobile - Default */
|
||||
--bg-form-padding: 3px;
|
||||
--about-text-padding: 3px;
|
||||
--p-size: 12px;
|
||||
--label-size: 12px;
|
||||
--h1-size: 16px;
|
||||
--footer-size: 10px;
|
||||
--font-color: white;
|
||||
--background-color: #2b323c;
|
||||
--container-color: #526d82c5;
|
||||
|
||||
/* --background-gradient-webkit: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);
|
||||
--background-gradient: linear-gradient(to right, #2C5364, #203A43, #0F2027); */
|
||||
--link-color: #2c82c9;
|
||||
font-family: 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue', sans-serif;
|
||||
background: var(--background-color);
|
||||
/* background: var(--background-gradient-webkit);
|
||||
background: var(--background-gradient); */
|
||||
margin: 0;
|
||||
transition: background 0.2s linear;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
--background-color: #ffcab0;
|
||||
--container-color: #fdffcd;
|
||||
--font-color: #484b6a;
|
||||
/* --background-gradient-webkit: -webkit-linear-gradient(to right, #eef2f3, #8e9eab);
|
||||
--background-gradient: linear-gradient(to right, #eef2f3, #8e9eab); */
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
font-size: var(--p-size);
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
width: auto;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
text-decoration: none;
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
/* display: grid;
|
||||
gap: 2vw;
|
||||
grid-auto-rows: minmax(100px, auto); */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; /* Center items horizontally */
|
||||
flex-grow: 1; /* Allow .wrapper to grow and occupy remaining space */
|
||||
row-gap: 100px;
|
||||
text-align: center;
|
||||
color: var(--font-color);
|
||||
margin-top: 30px;
|
||||
/* min-height: 100vh; */
|
||||
/* background-color: rgba(0, 0, 0, .4); */
|
||||
}
|
||||
|
||||
.wrapper-changelog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; /* Center items horizontally */
|
||||
flex-grow: 1; /* Allow .wrapper to grow and occupy remaining space */
|
||||
row-gap: 20px;
|
||||
text-align: center;
|
||||
color: var(--font-color);
|
||||
margin-top: 30px;
|
||||
|
||||
.about-text {
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
gap: 15px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #000;
|
||||
max-width: 150px;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
background-color: var(--container-color);
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
height: fit-content;
|
||||
padding: var(--about-text-padding);
|
||||
}
|
||||
|
||||
.changelog {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 1px dotted black;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 120px;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #555 transparent transparent transparent;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bg-form {
|
||||
background-color: var(--container-color);
|
||||
/* grid-column: 1;
|
||||
grid-row: 2; */
|
||||
font-weight: 400;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
padding: var(--bg-form-padding);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bg-form-blurb {
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: var(--p-size);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--link-color);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
height: 80vh;
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
|
||||
.footy {
|
||||
background-color: #2e2d2d;
|
||||
color: white;
|
||||
padding: 1%;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: var(--footer-size);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
/* margin-top: -200px; */
|
||||
align-self: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footy-interior {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: var(--p-size);
|
||||
line-height: 1.5;
|
||||
margin: 0 0 1rem 0
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: var(--label-size);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--h1-size);
|
||||
margin: 0 0 1rem 0
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff3d78;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.default-card {
|
||||
background-color: var(--container-color);
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
text-align: left;
|
||||
text-wrap: wrap;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.changelog-split-row {
|
||||
content: "";
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
/* margin: 0 auto; */
|
||||
}
|
||||
|
||||
.top-left {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
background-color: #111;
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
border-radius: 50px;
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 80%;
|
||||
max-width: fit-content;
|
||||
min-width: 200px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.responsive-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.iframe-container {
|
||||
width: 100%;
|
||||
overflow: auto; /* Enable scrolling when content overflows */
|
||||
max-width: 600px; /* Set maximum width to match iframe width */
|
||||
margin: 0 auto; /* Center the container horizontally */
|
||||
}
|
||||
|
||||
.social-icons-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
||||
grid-gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fa:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.fa-linkedin {
|
||||
background: #007bb5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.fa-facebook {
|
||||
background: #1575e4;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fa-github {
|
||||
background: #333; /* GitHub black */
|
||||
color: #fff; /* White text */
|
||||
}
|
||||
|
||||
|
||||
.fa-reddit {
|
||||
background: #ff5700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fa-youtube {
|
||||
background: #b81111;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fa-instagram {
|
||||
background: #e4405f; /* Instagram pink */
|
||||
color: #fff; /* White text */
|
||||
}
|
||||
|
||||
.fa {
|
||||
padding: 20px;
|
||||
font-size: 40px;
|
||||
width: 60px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fa-moon {
|
||||
color: #f1c40f;
|
||||
}
|
||||
|
||||
.fa-sun {
|
||||
color: #f39c12;
|
||||
}
|
||||
|
||||
.checkbox-label .ball {
|
||||
background-color: #fff;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
|
||||
.checkbox:checked+.checkbox-label .ball {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
/* form {
|
||||
text-align: right;
|
||||
} */
|
||||
|
||||
/* Tablet */
|
||||
@media (min-width:600px) {
|
||||
:root {
|
||||
--bg-form-padding: 15px;
|
||||
--about-text-padding: 10px;
|
||||
--p-size: 14px;
|
||||
--label-size: 14px;
|
||||
--h1-size: 18px;
|
||||
--footer-size: 15px;
|
||||
}
|
||||
|
||||
.social-icons-container {
|
||||
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop */
|
||||
@media (min-width:900px) {
|
||||
:root {
|
||||
--bg-form-padding: 24px;
|
||||
--about-text-padding: 12px;
|
||||
--p-size: 16px;
|
||||
--label-size: 18px;
|
||||
--h1-size: 30px;
|
||||
--footer-size: 18px;
|
||||
}
|
||||
}
|
||||
268
docs/main.js
268
docs/main.js
@@ -1,268 +0,0 @@
|
||||
const aboutDiv = document.querySelector('.about-text');
|
||||
const 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)", ""];
|
||||
const chartDiv = document.querySelector('#grades');
|
||||
const ctx = document.getElementById("gradeBar");
|
||||
const formDiv = document.querySelector('.bg-form');
|
||||
const gradeLabels = ["A", "A-", "B+", "B", "B-", "C+", "C", "C-", "D+", "D", "D-", "F"];
|
||||
const submitButton = document.getElementById('subBut');
|
||||
var gradeChart;
|
||||
|
||||
submitButton.addEventListener("click", parseName);
|
||||
if (chartDiv.getAttribute('value') == 'invisible') {
|
||||
chartDiv.style.display = 'none';
|
||||
}
|
||||
Chart.defaults.global.defaultFontColor = "#F8F0E5";
|
||||
|
||||
let gradeMapping = {
|
||||
"A_Plus": "A",
|
||||
"A_Minus": "A-",
|
||||
"B_Plus": "B+",
|
||||
"B_Minus": "B-",
|
||||
"C_Plus": "C+",
|
||||
"C_Minus": "C-",
|
||||
"D_Plus": "D+",
|
||||
"D_Minus": "D-"
|
||||
};
|
||||
|
||||
/**
|
||||
* Parse the input forms and determines if any fields are missing
|
||||
*/
|
||||
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 departmentList = '';
|
||||
let semester = document.getElementById('semester').value;
|
||||
let instructor = document.getElementById('courseInstructor').value;
|
||||
|
||||
await fetch('https://derec4.github.io/ut-grade-data/2022prefixes.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
departmentList = data;
|
||||
});
|
||||
|
||||
if (!className && !classNum && !department) {
|
||||
alert("At least fill out the form...");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!department || !classNum) {
|
||||
alert("Missing fields")
|
||||
return;
|
||||
}
|
||||
|
||||
if (!departmentList.includes(department)) {
|
||||
alert("Invalid Department");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(department, classNum.toString(), className.trim(), instructor.trim(), semester);
|
||||
await PapaParse(department, classNum.toString(), className.trim(), instructor.trim(), semester);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch the necessary table depending on the user selected semester.
|
||||
* Then, filter through the table based on the input data to get grade info for the class.
|
||||
* Displays an alert if nothing could be found.
|
||||
*/
|
||||
async function PapaParse(department, num, name, instructor, sem) {
|
||||
const semesterURLs = {
|
||||
's2025': 'https://derec4.github.io/ut-grade-data/2025%20Summer.json',
|
||||
'sp2025': 'https://derec4.github.io/ut-grade-data/2025%20Spring.json',
|
||||
'f2024': 'https://derec4.github.io/ut-grade-data/2024%20Fall.json',
|
||||
'sp2024': 'https://derec4.github.io/ut-grade-data/2024%20Spring.json',
|
||||
'f2023': 'https://derec4.github.io/ut-grade-data/2023%20Fall.json',
|
||||
's2023': 'https://derec4.github.io/ut-grade-data/2023%20Summer.json',
|
||||
'sp2023': 'https://derec4.github.io/ut-grade-data/2023%20Spring.json',
|
||||
'f2022': 'https://derec4.github.io/ut-grade-data/2022%20Fall.json',
|
||||
's2022': 'https://derec4.github.io/ut-grade-data/2022%20Summer.json',
|
||||
'sp2022': 'https://derec4.github.io/ut-grade-data/2022%20Spring.json',
|
||||
'f2021': 'https://derec4.github.io/ut-grade-data/2021%20Fall.json',
|
||||
's2021': 'https://derec4.github.io/ut-grade-data/2021%20Summer.json',
|
||||
'sp2021': 'https://derec4.github.io/ut-grade-data/2021%20Spring.json',
|
||||
'f2020': 'https://derec4.github.io/ut-grade-data/2020%20Fall.json',
|
||||
's2020': 'https://derec4.github.io/ut-grade-data/2020%20Summer.json',
|
||||
'sp2020': 'https://derec4.github.io/ut-grade-data/2020%20Spring.json',
|
||||
};
|
||||
|
||||
//Update to an array of URL options instead of a lengthy switch statement for readability
|
||||
const url = semesterURLs[sem] || 'https://derec4.github.io/ut-grade-data/2022%20Fall.json';
|
||||
const response = await fetch(url);
|
||||
let cData = await response.json();
|
||||
let selectedClass = cData.filter(cData => cData["Course Prefix"] == department);
|
||||
let usingExperimental = false;
|
||||
|
||||
if (instructor) {
|
||||
const altUrl = new URL("https://ut-grade-data.vercel.app/v2/query");
|
||||
const params = {
|
||||
department: department,
|
||||
sem: sem,
|
||||
num: num,
|
||||
professor: instructor,
|
||||
};
|
||||
|
||||
Object.keys(params).forEach((key) => {
|
||||
if (params[key]) {
|
||||
altUrl.searchParams.append(key, params[key]);
|
||||
}
|
||||
});
|
||||
|
||||
console.log(altUrl);
|
||||
|
||||
try {
|
||||
const response = await fetch(altUrl);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.length === 0) {
|
||||
console.error("Error executing query :((( :");
|
||||
} else {
|
||||
selectedClass = data;
|
||||
usingExperimental = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:");
|
||||
}
|
||||
}
|
||||
|
||||
if (!usingExperimental && sem.substring(0, 2) === 's2') {
|
||||
/**
|
||||
* Summer names are really weird but we can safely assume the prefix of the semester
|
||||
* will not become "s3" within the next lifetime
|
||||
*/
|
||||
console.log("Summer Semester Detected");
|
||||
selectedClass = selectedClass.filter(cData => cData["Course Number"].includes(num.toString().toUpperCase())).filter(cData => cData["Course Title"].includes(name));
|
||||
if (selectedClass.length == 0) {
|
||||
selectedClass = cData.filter(cData => cData["Course Prefix"] == department)
|
||||
.filter(cData => cData["Course Number"].includes(num.toString().toUpperCase()))
|
||||
}
|
||||
} else if (!usingExperimental) {
|
||||
selectedClass = selectedClass.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("Trying again with just the course number");
|
||||
selectedClass = cData.filter(cData => cData["Course Prefix"] == department)
|
||||
.filter(cData => cData["Course Number"] == num.toString().toUpperCase());
|
||||
}
|
||||
}
|
||||
if (selectedClass.length == 0) {
|
||||
// Still can't find anything? Exit without a chart and alert
|
||||
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 = usingExperimental ? selectedClass[0]["Course_Title"] : selectedClass[0]["Course Title"];
|
||||
|
||||
if (usingExperimental) {
|
||||
for (let classObj of selectedClass) {
|
||||
updateGradeDist(classObj, gradeDist);
|
||||
}
|
||||
console.log(gradeDist);
|
||||
(gradeChart ? updateChart(lableName, gradeDist) : createChart(gradeDist, lableName));
|
||||
} else {
|
||||
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"]) {
|
||||
// We can reasonably expect that time stays in the 2000s for a few more years
|
||||
lableName = (sem.substring(0, 2) === 's2' ? "Remember, summer courses have special prefixes!" : "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);
|
||||
(gradeChart ? updateChart(lableName, gradeDist) : createChart(gradeDist, lableName));
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* If the chart is in a state of existence, we update the data values
|
||||
*/
|
||||
function updateChart(labelName, gradeDist) {
|
||||
gradeChart.config.data = {
|
||||
labels: gradeLabels,
|
||||
datasets: [{
|
||||
label: '\"' + labelName + "\"",
|
||||
data: Object.values(gradeDist),
|
||||
borderWidth: 2,
|
||||
backgroundColor: backgroundColor,
|
||||
}]
|
||||
};
|
||||
gradeChart.update();
|
||||
}
|
||||
|
||||
/**
|
||||
* If the chart is nowhere to be found, we load a new chart, its attributes and the values
|
||||
* Then, make the chart visible on screen
|
||||
*/
|
||||
function createChart(gradeDist, courseName) {
|
||||
gradeChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: gradeLabels,
|
||||
datasets: [{
|
||||
label: '\"' + courseName + "\"",
|
||||
data: Object.values(gradeDist),
|
||||
borderWidth: 2,
|
||||
backgroundColor: backgroundColor,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
stacked: true,
|
||||
grid: {
|
||||
display: true,
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
aboutDiv.style.visibility = 'hidden';
|
||||
aboutDiv.style.display = 'none';
|
||||
chartDiv.style.display = '';
|
||||
formDiv.setAttribute("style", "grid-row: 1");
|
||||
}
|
||||
|
||||
function updateGradeDist(classObj, gradeDist) {
|
||||
for (let key in classObj) {
|
||||
if (key in gradeDist || key in gradeMapping) {
|
||||
let normalizedKey = gradeMapping[key] || key;
|
||||
gradeDist[normalizedKey] += classObj[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const savedSemester = sessionStorage.getItem('selectedSemester');
|
||||
if (savedSemester) {
|
||||
document.getElementById('semester').value = savedSemester;
|
||||
}
|
||||
|
||||
// Save the selected semester to sessionStorage on change
|
||||
document.getElementById('semester').addEventListener('change', function() {
|
||||
sessionStorage.setItem('selectedSemester', this.value);
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
81
index.html
Normal file
81
index.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<!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'>
|
||||
<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="bg"></div>
|
||||
<div class="bg-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 (under construction):</label>
|
||||
<select id="semester" name="dropdown">
|
||||
<option value="f2022">Fall 2022</option>
|
||||
<option value="sum2022">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>
|
||||
<footer>Created by Derek Chen
|
||||
<!-- because VAPA lecture was a bit boring that day -->
|
||||
</footer>
|
||||
|
||||
<script src='main.js'></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
96
main.css
Normal file
96
main.css
Normal file
@@ -0,0 +1,96 @@
|
||||
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: 20px
|
||||
}
|
||||
|
||||
main h1 {
|
||||
font-size: 24px;
|
||||
margin: 0 0 20px 0
|
||||
}
|
||||
|
||||
main p {
|
||||
font-size: 10px;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 20px 0
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #2e2d2d;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 13px
|
||||
}
|
||||
|
||||
footer p {
|
||||
font-size: 18px;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
.bg {
|
||||
background-image: url(tempbg.png);
|
||||
filter: blur(8px);
|
||||
-webkit-filter: blur(8px);
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.bg-text {
|
||||
background-color: #000;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
border: 3px solid #f1f1f1;
|
||||
margin: 5px auto;
|
||||
position: absolute;
|
||||
font-size: small;
|
||||
top: 15%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 70%;
|
||||
padding: 10px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.bg-form {
|
||||
background-color: #000;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
border: 3px solid #f1f1f1;
|
||||
margin: 5px auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: auto;
|
||||
padding: 20px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
height: 80vh;
|
||||
width: 80vw
|
||||
}
|
||||
160
main.js
Normal file
160
main.js
Normal file
@@ -0,0 +1,160 @@
|
||||
const submitButton = document.getElementById('subBut');
|
||||
submitButton.addEventListener("click", parseName);
|
||||
var chartDiv = document.querySelector('#grades');
|
||||
var aboutDiv = document.querySelector('.bg-text');
|
||||
if(chartDiv.getAttribute('value') == 'invisible'){
|
||||
chartDiv.style.display = 'none';
|
||||
}
|
||||
var gradeChart;
|
||||
const ctx = document.getElementById("gradeBar");
|
||||
const labels = ['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 'sum2022':
|
||||
url = 'https://derec4.github.io/ut-grade-data/2022%20Summer.json';
|
||||
break;
|
||||
case 'sp2022':
|
||||
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 course number and prefix");
|
||||
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
|
||||
};
|
||||
for(i in selectedClass) {
|
||||
let letterGrade = selectedClass[i]["Letter Grade"];
|
||||
let cnt = selectedClass[i]["Count of letter grade"]
|
||||
gradeDist[letterGrade] += cnt;
|
||||
// console.log(selectedClass[i]["Letter Grade"]);
|
||||
// console.log(selectedClass[i]["Count of letter grade"]);
|
||||
}
|
||||
console.log(gradeDist);
|
||||
if(gradeChart) {
|
||||
gradeChart.config.data = {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Grade distribution for \"' + selectedClass[0]["Course Title"] +"\"",
|
||||
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, selectedClass[0]["Course Title"]);
|
||||
aboutDiv.style.visibility='hidden';
|
||||
chartDiv.style.display = '';
|
||||
}
|
||||
}
|
||||
|
||||
function loadChart(gradeDist, courseName) {
|
||||
gradeChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Grade distribution for \"' + 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
Reference in New Issue
Block a user