Attentive Learn

• 

  Real Time Stats

• 

  Quiz Interface

Inspiration

As someone who has worked closely with students, we’ve seen firsthand how easy it is for learners to lose focus while studying. Even small distractions can drastically affect comprehension and retention. We wanted to explore how technology could help track and improve student attentiveness, giving educators and learners a tool to identify when focus drifts and provide insights for improvement.

What it does

Attentive Learn monitors a student’s attentiveness while they are completing quizzes. Using eye-tracking technology, the app detects when a student looks away from the screen and measures how long their attention is diverted. This data is paired with quiz performance metrics—such as time spent per question and accuracy—to provide a comprehensive picture of engagement and learning effectiveness.

How we built it

We developed the backend using Python, leveraging OpenCV for real-time eye-tracking and Supervision for detection and monitoring. The frontend was built with React.js, providing students with an interactive quiz interface and real-time feedback on their engagement levels. The system integrates data collection, processing, and visualization to ensure both functionality and usability.

Challenges we ran into

Implementing accurate and reliable eye-tracking with OpenCV in different lighting and environmental conditions. Balancing system performance to ensure real-time feedback without lag. Designing a frontend that is both simple and engaging for students while integrating backend analytics seamlessly. Handling differences in user devices (e.g., varying webcam quality).

Accomplishments that we're proud of

Successfully integrating real-time eye-tracking with quiz performance tracking. Creating a smooth pipeline from data collection to frontend visualization. Building a tool that doesn’t just measure results but also provides insight into how students are learning. Bringing together computer vision and education technology in a way that feels practical and impactful.

What we learned

How to apply computer vision tools like OpenCV beyond traditional use cases and adapt them to education. The importance of UI/UX design when building tools intended for students. How attention and engagement data can reveal hidden patterns in learning. The challenges of merging real-time data processing with frontend interactivity.

What's next for Attentive Learn

Adding advanced analytics, such as attention heatmaps and long-term engagement trends. Integrating machine learning models to personalize quizzes based on attention and performance history. Expanding beyond quizzes to track attentiveness during video lessons or study sessions. Building teacher dashboards so educators can monitor student engagement and adapt teaching strategies. Exploring mobile compatibility to make the tool more accessible to a wider audience.

Built With

• javascript
• opencv
• python
• react
• supervision