This website allows students in Pattis's ICS 33 class to view their grades online. Simply enter your hash id and your grades will be displayed.
When the ICS 33 Grade Viewer opens, it loads the current grades file from the ICS 33 website, gets the data from within the file, puts it into an HTML table, and then displays it to the user.
The ICS 33 Grade Viewer is a static website. This means that there is no backend server; everything is done on the frontend with Javascript.
When the ICS 33 Grade Viewer loads on a user's browser, it sends two XMLHttpRequest to the ICS 33 website.
- The first is to scrape the website looking for the url of the grades zip.
- The second is to load the grades zip file from the scraped url.
Normally, these requests would require a backend and wouldn't be possible on the frontend because of the CORS same-origin policy, which blocks Javascript requests from the browser to other websites. However, since the ICS 33 Grade Viewer and the ICS 33 website are both hosted on the same domain (ics.uci.edu), this restriction doesn't apply. The benefit to doing everything on the frontend is that there are no server costs!
Once the ICS 33 Grade Viewer has loaded the zipped grades file, it unzips this file using the JSZip library and then converts the inner .xslm file to a JSON object using the SheetJS library.
Inside of the JSON object, it contains the property referring to the grades (e.g. "Winter 2018"). This property has a two dimensional array, which can be represented as [row[column]]. Rows 0-6 contain data representing statistics for the class. Starting at row 7, we have data for each hash id. If a grade has not yet be inputed, then there is a null. After the hash ids, there are a lot of empty lists, which can be ignored.
This data gets set to a global variable called grades_json and is printed to console.log
The user can then choose to view all of the grades in the class or just the grades of a single Hash Id. If the user inputs a Hash Id, that Id is saved as a cookie so that the ICS 33 Grade Viewer can remember their Id for the next time that they visit the site.
-
Clone the repository
git clone https://github.com/ChaseC99/ICS33-Grade-Viewer.git -
Navigate into the "ICS-33-Grade-Viewer" Folder
cd ICS-33-Grade-Viewer -
Turn on local testing
Setuse_local_test_filetotruein js/gradviewer.js -
Run the website on your local host
python3 -m http.server -
Navigate to "localhost:8000" in your browser
The website will only work if you run it on local host.
Because of the CORS same-origin policy, you won't be able to load the grades from the ICS 33 website.
I've included a file called test_grades.zip in the "ICS-33-Grade-Viewer" folder, so that you can still test your code.
Just make sure that use_local_test_file is set to true in js/gradviewer.js
If you want to help improve the ICS 33 Grade Viewer, play around with the code and make a pull request!
Feel free to reach out if you have any questions :)