Attendance for Google Meet

• 

  List of students and symbol showing attendance

• 

  Edit Class Screen

• 

  An automatically generated attendance Google Sheet

Inspiration

In the era of COVID-19, virtual classes have become the norm. For teachers, however, taking attendance in these virtual classes is often a pain. They must keep track of when students join and leave among side conversations and distracting visuals. Many teachers at our school complain about the difficulty of taking virtual attendance, claiming that existing Google Chrome extensions are buggy and unreliable.

What it does

Our Google Chrome extension, Attendance for Google Meet, streamlines the entire process of taking attendance in a Google Meet. When a teacher first joins a Meet, they are prompted to choose the class that the Meet is for, such as "Period 1 Math". They can edit the class to customize the list of students, add other classes, or delete them. The extension automatically detects when students join or leave the call and records it in local storage. At any time, teachers may click on the attendance button to view each student's status (present, absent, previously present, or not on list), and export the data to a beautifully formatted Google Spreadsheet in their own Google Drive.

How I built it

The extension was built with HTML, CSS, and Javascript. We injected these scripts using DOM manipulation into the Google Meet page to match the Material Design theme. We set up an OAuth2 consent screen to ask the user for permission to create a Google Spreadsheet in their Google Drive using the Google Sheets API.

Challenges I ran into

Using the Google Sheets API was rather difficult due to its complexity; however, we managed to abstract the functionalities with functions to make the process simpler. It was also hard to match the exact style of the Google Meet UI because Google minifies its class names, so parsing the page source was troublesome. The Material Design library documentation was infuriatingly unclear and we often could not do what it said we could do, but we overcame these hurdles by making functionality ourselves.

Accomplishments that I'm proud of

We are proud of the appearance of our extension and the appearance of the exported spreadsheet. We are also pleased that we not only managed to piece together a comprehensive UI in two days but also create an almost fully functional chrome extension that seamlessly integrates with such a large video platform.

What I learned

We learned about manipulating the DOM with Javascript. We learned about implementing design libraries, in particular Material Design, into our HTML and CSS. Additionally, we learned basic video editing skills.

What's next for Attendance for Google Meet

We plan to fix any bugs in our extension and later deploy the completed product to the Chrome Web Store to help teachers around the world take attendance.

Built With

• css
• google-sheets-api
• html
• javascript
• material-design
• oauth