AiTA | Devpost

Example of Generated Quiz
Example of Playful UI
Example of Login
Example of Extension on Non-Google Forms Page

Inspiration

Having a combined 12 years of experience teaching in our group, we wanted to build something that would be of geniuine benefit to teachers. With developments in AI across academic and professional domains, we saw an opening for the use of AI in education. Taking inspiration from examples of this intersection like Duolingo's Bird Brain and Khan Academy's Khanmigo, we set out to create an AI teaching assistant whom we've affectionately named AiTA.

Due to growing class sizes, lack of engagement, and teacher burnout, it has become increasingly difficult to deliver quality personalized education to students.

Our goal with AiTA was to leverage the power of AI to keep teachers aware of the areas in which their students are struggling. Our idea for this application took many forms in its beginning stages, but we ultimately decided on a Chrome extension. We both envisioned a product that teachers would actually use, which meant considering the tools that are widely used amongst educators. This brought us to consider Google's suite of educational technologies, including Google Classroom and Google Forms. We realized that a Chrome extension would be the easiest way for an educator to meaningfully interact with AiTA considering their workflow, so we set out to build our idea in this way.

We landed on a product that we are both excited about and proud of, and we hope that you love AiTA as much as we do!

What it does

AiTA is a Chrome extension that aims to provide teachers with important data on the topics their students are struggling with, giving them the tools to improve their students' understanding of relevant material.

When a teacher visits a Google Forms quiz they administered, they can open the extension to analyze the responses of a quiz using the Google Forms API behind the scenes. AiTA considers all of the responses to the quiz and finds the 3 questions that students performed the worst on. After this, the questions are sent to Google Gemini through the Gemini API to determine the overarching topics/skills the questions are testing. This information is presented to the user through a playful interface designed to reflect classroom objects like paper and Post-It notes.

After the teacher is presented with the topics their students seem to understand the least, AiTA can generate a "review" quiz based on those topics. The topics are sent to Gemini, which then generates 10 multiple-choice questions (with feedback for incorrect answers). AiTA then uses the Google forms API to automatically generate a Google Forms quiz, presenting it to the user with a button linking to the quiz. From there, the teacher has the flexibility to adjust any questions they would like and administer it to their students. This allows for the teacher to ensure students' understanding of the material before moving onto new curriculum.

This removes the burden of analyzing student responses, creating questions/review material, and creating a Google Form Quiz.

How we built it

At the beginning of our implementation, we assumed we would only need a JavaScript frontend. After running into challenges making API calls and ensuring the user was authenticated to use the Google APIs, we decided to make a Flask backend.

On the frontend, we wanted to embrace the "Google" aspect of our project, so we used Material UI. Neither of us had ever made a Chrome extension, so we both had a lot of learning to do. We initally developed a prototype of the frontend using vanilla JavaScript, which we eventually developed from scratch using Material UI. We tried to separate elements that were either used more than once or had many function calls into their own components to promote code reusability and readability. Using a React framework was integral to our frontend implementation.

On the backend, we used Flask because it offered a lightweight and "quick-to-learn" solution to managing our API calls and parsing logic. Our backend handled the logic of user authentication (using Google OAuth2) to enable access to google drive and google forms. When a user opens AiTA on a Google Forms submission our frontend code would send Flask the form ID which would later be used to make requests to the Google Forms API for form and response data. We have a FormDataParser which handles the parsing of the student responses and determines the top 3 questions the most students got incorrect. Those questions get passed into a specific prompt we generated for the Google Gemini API which returns 1-3 overarching ideas students appeared to struggle with. Using that data (difficult questions and overarching ideas) we can then create a Google forms quiz with questions generated by the Gemini, upon the request of the user.

Challenges we ran into

One of the biggest challenges we faced was implementing authentication via OAuth2. This was a challenge because neither of us had much experience (if any) with web development, Flask or user authentication. We initially started by trying to use the Chrome Identity API in the frontend but ran into issues with passing sensitive data like tokens and refresh tokens to the backend. We eventually decided that it would be better to handle all authentication in backend in favour of security. For a future production build, our authentication would likely require some refactoring to make sure we adhere to best practices with security. One obvious instance is ensuring the use of https instead of http. There are other instances where we could make improvements but we were very proud to be able to successfully edit and create new files in Google drive.

Accomplishments that we're proud of

We realized that the key to getting precisely structured (parsable) answers from LLMs is much easier when you prompt them to provide their response in a particular programming language. In our case, when asking Gemini to provide the key topics students appeared to be struggling with, we asked for a Python list. When asking Gemini for the multiple choice questions, we asked for a Python dictionary (of an exact format we specified).

We were also both new to Flask, so we are both very proud that we got the backend working to a point that we were both happy with, especially given that we did not anticipate using it going into the project.

Another area we are both proud of is the creation of the Google Forms quizzes. There were many steps involved in creating them, including getting parsable information from Gemini even before beginning to create the form.

What we learned

[x] How to make a Chrome extension
[x] Effective prompting of generative AI
[x] Basics of Flask for the backend
[x] Basics of OAuth2 Authentication
[x] Working effectively as a team

What's next for AiTA?

We have countless ideas for the future of AiTA that we are excited to implement. One idea involves connecting to the Google Classroom API so that AiTA could be used for even more than Google Forms quizzes. Ideally, we'd love to publish AiTA to the Chrome extension store and let her help teachers across the world!