Research Infrastructure · Behavioral Data
Web-Based Eye-Tracking Research Platform
An end-to-end web environment for collecting survey, gaze, scroll, and behavioral telemetry during remote educational studies.
- React
- TypeScript
- WebGazer
- Firebase
Overview
This platform was built within a collaborative PhD research project to support remote behavioral studies on participants' own laptops. It connects informed consent, Qualtrics assessments, webcam eye-tracking calibration, reading tasks, and behavioral telemetry through anonymous study and session identifiers.
Technical architecture
Frontend / UI
- React 18
- TypeScript
- Vite
- Ant Design
Eye tracking
- WebGazer.js and jsPsych
- Calibration and validation workflow
Backend / Data
- Anonymous Firebase Authentication and rules-based session ownership
- Firestore for sessions, calibration summaries, and telemetry manifests
- Cloud Storage for chunked NDJSON telemetry
- Cloud Functions for selected server-authoritative operations
Validation / Testing
- Zod
- Vitest
- React Testing Library
Participant flow
Consent
Qualtrics Pre-Test
Eye-Tracking Calibration
Calibration Validation
Reading Task
Gaze + Scroll + AOI Telemetry
Qualtrics Post-Test
Completion
Route guards preserve the intended participant flow, and session state can resume after refresh where appropriate.
Key features
Browser-based eye tracking
WebGazer.js and jsPsych support browser-based gaze estimation, nine-point calibration, and five-point validation without specialized eye-tracking hardware. Quality checks use configurable thresholds, with recalibration available when needed.
Integrated experimental workflow
Qualtrics assessments, calibration, reading tasks, and post-tests share route and session continuity while remaining linked through anonymous research identifiers.
High-frequency behavioral telemetry
The reading task records gaze, scroll position, viewport and section visibility, area-of-interest events, and lifecycle markers for later analysis.
My role and technical contributions
Within the broader research project, my role focuses on the web-based experimental infrastructure: participant flow, Qualtrics integration, webcam eye-tracking and calibration, session management, telemetry collection, and Firebase-backed data architecture.
Interface views
Qualtrics pre-test
Participants complete the pre-test before entering the eye-tracking portion of the study.
Calibration instructions
Participants review webcam and calibration guidance before beginning browser-based gaze calibration.
Calibration validation summary
Calibration quality metrics are reviewed before the participant proceeds to the reading task.