Python Auto-Grader System for Non-CS Professors

Final Project Presentation Group 3 INFSCI 2470 Interactive System Design Arman Assankhanov (ARA251@pitt.edu) Joey Livorno (GIL15@pitt.edu) Pinhao Wang (PIW17@pitt.edu) Connor Wilson (CJW79@pitt.edu) 04/04/2025 1

Introduction to the System Python Auto-grader Clients: Professor Babichenko, Professor Biehl and BS/MS student Thomas Downes Purpose:Aims to create a new auto-grading system for Python courses o Viewing course and assignment data in an understandable way o Easily creating new assignments o Grading assignments using Canvas, GitHub, and ChatGPT Usability Target: The target users of our system are Professors, specifically those who teach Python in non-CS related courses, such as Linguistics Benefit: There are several key benefits to our system: o Convenience: Provides professors a "starting point" for grading simple assignments o Democratization: Provides professors who may not be CS experts with a tool to help them utilize Python in their coursework 2

Task Analysis 3

Wireframe (Low-Fidelity) Mockup 4

High-Fidelity Mockup (1st round of prototyping) 5

User Study (2nd round of prototyping) User ID Comments on the High-Fidelity mockup Choose colors for colorblind (green and red may be confusing) Delete menu bar in the login page. Overall good, and system is understandable. little confused about the course summary page and was curious about what it was for, if you wanted to see the course name, you could see it on the course page. If you wanted to see all the homework, he thought the assignment page would be more intuitive. thinks our design is perfect because he can use the system without any tutorial. 1 2 Course names on blocks were confusing (hard to differentiate between the image and the name) Good design point keeping the back button away from other elements 3 everything organized well and looks clean back button found naturally without instruction course summary needs description actual calendar grade should specify total logout button 4 6

User Study (Expert User) Met with Dr. Na-Rae Han on 11/20/2023 to showcase design o Dr. Han is a Linguistics professor at Pitt o Ideal user because she teaches Python traditionally non-CS classes Feedback: o Github Organization Github Org is visible to everyone, so academic integrity could be a concern System uses Github Classroom to avoid this o Adding new students Not useful for canvas since students are automatically added by enrollment Altered to send out mass invite to Github to all enrolled users o Canvas less utilized for posting assignments, only for grades and feedback o Assignments already loaded onto Github since they are repeated each semester, so template option is helpful 7

Examples of changes after user feedback (1) Assignment page - made Delete button color darker red in case of color blindness Before After 8

Examples of changes after user feedback (2) Home page - Improved the difference and visibility of course names from background images. Before After 9

Examples of changes after user feedback (3) Website header - Added logout button by providing efficient way to log out from the account. Before After 10

Client Feedback (3rd round of prototyping) Zoom meeting with the client on 20thof November 2023. Gathered client s feedback by demonstrating high fidelity mock-up (after 2nd prototyping). We got the following recommendations: Implement further prompts for each question. Auto fill GitHub organization and other fields, by storing data locally on computer (in implementation stage) On the new assignment page utilizing canvas change CANVAS API to Name of Assignment Replace GitHub token to GitHub username in Students page and Edit Student page Remove add new student button and add student page. 11

Examples of changes after client feedback (1) Grade Results page - Design for the assignment result with several questions was created. In addition to this, for each question a further prompt was added. Before After 12

Examples of changes after client feedback (2) New Assignment page (Canvas) - By following client s suggestions, we modified label with value Canvas API to Assignment Title . Before After 13

Examples of changes after client feedback (3) Substituted GitHub token to GitHub username on Students page. Students page Before After 14

Implementation Project already existed as a basic, un-stylized HTML page o Original project was created using Flask, a Python web application framework o Project utilizes several other Python libraries, such as Canvas, Github, and OpenAI APIs Received a branch of the project on Github Initial implementation steps: o Updating the Flask routes, HTML Templates, and forms to fit our design o Creating a "mock" interface that would be used for our testing o Adding Bootstrap dependencies for the sylizing phase 15

Implementation (cont.) Final step was to stylize the new webpage o Used Bootstrap classes for forms, labels, buttons, etc. o Referenced high-fidelity mockup and the feedback we had received The project includes the following features: o Login function using Canvas API Token o Lists of courses, organized by current and past o Course Home page with Assignments, Summary, and Students o Ability to grade, edit, or delete each assignment o Ability to create new assignments o Display for generated grades, with the ability to edit and post grades to Canvas 16

Demonstration 17

Thank You! 18