From 91b1cfcf5c7de2d792f4f7148ea19e7b5a487e4d Mon Sep 17 00:00:00 2001 From: Indira Tatikola Date: Fri, 7 Jun 2024 14:40:37 -0400 Subject: [PATCH] codegradr --- project-2-codegradr.html | 42 +++++++++++++++++++++++++--------------- styles/minima.css | 28 ++++++++++----------------- 2 files changed, 36 insertions(+), 34 deletions(-) diff --git a/project-2-codegradr.html b/project-2-codegradr.html index f86d4ea..60e4dbc 100644 --- a/project-2-codegradr.html +++ b/project-2-codegradr.html @@ -22,30 +22,40 @@

Project #2: CodeGradr

2024-02-09

- -

     This year, I accomplished the major milestone of actually getting a project out of a Hackathon and not giving up after the free Moe's on night two. At Hacklytics 2024, my team and I created CodeGradr - a web application using generative AI to provide feedback for routine, structured coding assignments. As a TA, spending four to five hours a week grading coding assignments that often have the same handful of bugs between them was becoming unbearable. However, for a student, it is really important to receive feedback and a thorough explanation of where you went wrong. Generative AI is the perfect outlet for automating this simple tasks that require mere pattern recognition.

+
+

     This year, I accomplished the major milestone of actually getting a project out of a Hackathon and not giving up after the free Moe's on night two. At Hacklytics 2024, my team and I created CodeGradr - a web application using generative AI to provide feedback for routine, structured coding assignments. As a TA, spending four to five hours a week grading coding assignments that often have the same handful of bugs between them was becoming unbearable. However, for a student, it is really important to receive feedback and a thorough explanation of where you went wrong. Generative AI is the perfect outlet for automating this simple tasks that require mere pattern recognition.

-

    The way CodeGradr works is you upload the files containing 1) your test cases (e.g. JUnits) for the assignment, and 2) the correct implementation.

+

    The way CodeGradr works is you upload the files containing 1) your test cases (e.g. JUnits) for the assignment, and 2) the correct implementation.

- +
+ +
-

     Copy and paste a student's code, then click "Generate Feedback" and receive a Chat-GPT generated response.

-
- - - - -
-

     The framework comes from the fact that in large classes, every student is being judged on the same criteria. So you do the 'hard' part of uploading your correct work first, then you can easily copy and paste student code as you go through each assignment. Chat-GPT is prompted to analyze the result of the test cases and compare against the correct implementation to provide a succinct explanation of what their mistakes were.

+

     Copy and paste a student's code, then click "Compile" and "Run" in sequence to make sure the code works.

+
+ + +
-

     We used an AWS EC2 instance to host the website and Flask as the web framework, my first using both of these technologies. Experimenting with the OpenAI API was definitely a treat! Unfortunately, we had the very bad luck of the API being down the weekend of the hackathon, so we were unable to finish and submit by the time projects were due. However, since we were excited about the project we quickly worked to finish the app as soon as it was up and running again. This was my first time developing an application entirely in Python, and I really enjoyed it. Finally, I created the entire user interface with simple CSS/HTML/JavaScript.

-

     Though we weren't able to submit, I still had a great time at Hacklytics and it definitely motivated me to create more small, but useful projects like Codegradr. Take a look at our code here.

-
+

     Then, click "Generate Feedback" for a ChatGPT generated response based on the JUnits the student's code failed and the correct implementation.

+
+ + +
+ +

     The framework comes from the fact that in large classes, every student is being judged on the same criteria. So you do the 'hard' part of uploading your correct work first, then you can easily copy and paste student code as you go through each assignment. Chat-GPT is prompted to analyze the result of the test cases and compare against the correct implementation to provide a succinct explanation of what their mistakes were.

+ +

     We used an AWS EC2 instance to host the website and Flask as the web framework, my first using both of these technologies. Experimenting with the OpenAI API was definitely a treat! Unfortunately, we had the very bad luck of the API being down the weekend of the hackathon, so we were unable to finish and submit by the time projects were due. However, since we were excited about the project we quickly worked to finish the app as soon as it was up and running again. This was my first time developing an application entirely in Python, and I really enjoyed it. Finally, I created the entire user interface with simple CSS/HTML/JavaScript.

+

     Though we weren't able to submit, I still had a great time at Hacklytics and it definitely motivated me to create more small, but useful projects like Codegradr. Take a look at our code here.

+ +
+ \ No newline at end of file diff --git a/styles/minima.css b/styles/minima.css index 8227d93..2afba3e 100644 --- a/styles/minima.css +++ b/styles/minima.css @@ -56,6 +56,12 @@ img { border-radius: 30px; } +.image-container { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + /** * Figures */ @@ -173,23 +179,11 @@ pre > code { } /** -.post-bubble { - max-width: -webkit-calc(800px - (30px * 2)); - max-width: calc(800px - 30px * 2); - margin: auto; - padding-top: 10px; - background-color: #f4f1f1; - border-radius: 30px; -} -@media screen and (max-width: 1000px) { - .post-bubble { - max-width: -webkit-calc(800px - (30px)); - max-width: calc(800px - (30px)); - padding-right: 15px; - padding-left: 15px; - } + * Posts + */ +.post img{ + justify-content: center; } -*/ /** * POST THUMBNAIL STYLING @@ -693,8 +687,6 @@ table th { color: #099; } -/*# sourceMappingURL=minima.css.map */ - /** IMAGE GALLERY EXPERIMENT