LockIn: Study Tracker

General extension functionality
Shows console logging for whenever the player looks away too long

Inspiration

Students have a hard time focusing and staying on task these days, constantly pulled away by social media or struggling with a fundamental lack of motivation. We realized existing productivity tools like Forest and Pomodoro timers were too passive, they only manage time and don't detect user attention, rewarding users even if they're not locked in. This led to the idea of building an solution that motivates users to focus while tracking attention in real-time.

What it does

LockIn is a study tracker that gamifies the experience of studying. Instead of just simply timing how long you study, it also awards you points. The longer you study for, the more multipliers that get stacked. For our demo we shortened the time needed to get these multipliers so we can give a example of how the point system worked. The catch is, when you look away for longer than thirty seconds, your multipliers get cancelled and you make less points. So this pushes users to beat their previous highscores but "locking in" for extended periods of time.

How we built it

We first set up our development environment with Vite, which gave us a fast and modular build process. Using React, we created dynamic UI components that display the user’s score, timer, and progress in real time. With Tailwind CSS, we styled everything to look clean, modern, and responsive while keeping the code lightweight and consistent across the extension.

To track focus, we integrated WebGazer.js, a browser-based eye-tracking library. It uses the user’s webcam (with permission) to estimate where they are looking on the screen. We used this data to detect whether the user was staying focused during their study session. If the user looked away for too long, the session could pause or reduce their score, adding a layer of accountability and gamification to the studying experience.

On the backend, we used JavaScript and the Chrome Storage Local API to manage user data, including scores, high scores, and multipliers. This allowed progress to be automatically saved even when the extension was closed, making the experience persistent and reliable across study sessions.

Challenges we ran into

We wanted our extension to run in the background, but unfortunately that wasn't an option that we found as the eye-tracker runs inside the popup window. And if we switched it to run in the browser tabs, it wouldn't run at all. So, keeping it in the popup window that's kept opened is what we found to be the solution that could best fit our needs in the time we had, as it was still able to track and update everything the way it should.

Accomplishments that we're proud of

We managed to implement a working tracker into our code, that on some level, could track eye and face movements and send out the data to be used and manipulated by other functions and scripts all the end up in a condensed UI.

What we learned

Our team had never worked with creating an extension before, so we learned how to make one as well as implement an eye-tracker through it. We also collaborated through bugs and other technical issues as a group. We had lots of problems debugging so we needed to communicate with each other and figure out what could be the problem, whether it was front-end or back-end development.

What's next for LockIn: Study Tracker

Moving forward, we want to expand the range of LockIn. First, we will convert the web application into a native app, making it compatible with all platforms. This will allow users to track focus seamlessly across multiple desktop applications, such as switching between VS Code and Chrome, ensuring our tool integrates into any workflow instead of limiting itself as Chrome extension. Second, we plan to create a dashboard feature to provide users with data on their performance, visualizing daily focus time, streaks, and overall trends so they can have a log of how they've improved. We also want to introduce a collaboration feature allowing users to compare scores with friends, driving engagement through friendly competition.