@bdelab/roav-mep

Roav MEP

Overview

Roav MEP is a modular JavaScript-based framework for running MEP . The application begins at src/experiment/index.js, which manages and calls the various views that control different aspects of the test.

Structure

Each view is a separate JavaScript file located in the views folder. These views handle different parts of the experiment, from consent collection to calibration and the main crowding test. Below is a breakdown of each view and its purpose.

Views Breakdown

Consent View

• File: views/consentView.js
• Description: Displays the consent form. Participants must accept before proceeding to the next step.

Configure Device View

• File: views/configureDeviceView.js
• Description: Requests camera (and/or microphone) access, ensures proper seating position, and allows configuration of device details such as screen size.

Calibration View

• File: views/calibrationView.js
• Description: Displays a blue stimulus for eye tracking calibration. A simple linear regressor estimates gaze position based on the response.

Menu View

• File: views/menuView.js
• Description: Displays available tasks, dynamically loading them from the storage bucket. For example, crowding tests may have different versions (e.g., letters vs. symbols).

Test View

• File: views/TestView.js
• Description: The core MEP test, where participants perform the task.

Story View

• File: views/storyView.js
• Description: Presents a story as part of the experiment.

Preload View

• File: views/preloadView.js
• Description: A blank screen that preloads files into cache to optimize performance.

View Structure

Each view follows a consistent structure to maintain modularity and ease of testing. For example, configureDeviceView consists of three main components:

• HTML File: Defines the layout and styling of the view.
• JavaScript File: Contains the logic for user interaction and view functionality.
• View Loader (views.js): Loads the corresponding HTML and JavaScript files, initializes a wrapper div, and injects it into the document body.

View Lifecycle

• A view starts by creating a container div.
• It loads the necessary HTML and JavaScript files.
• The div is added to document.body.
• The view ends when a resolve flag is triggered (e.g., a button click or programmatic completion of a task).

Design Philosophy

The structure was designed to be highly modular, allowing for easy swapping and modification of different views during the testing phase. While some aspects could be streamlined further, refactoring will only take place once the test design is finalized and stable.

Eye Tracking

There are a few pertinent files related to handling eye tracking, which exist across the three web apps. These include videoCapture.js, headeyetracking.js, and eyetrackingVars.html.

Video Capture

• File: videoCapture.js
• Description: Contains functions to start and stop the camera. This is essential as it is the first step in running the eye tracking model, which ingests webcam feeds.

Head and Eye Tracking

• File: headeyetracking.js
• Description: Processes the webcam feed and passes it into the eye tracking model to predict x, y coordinates of gaze.

Eye Tracking Variables

• File: eyetrackingVars.html
• Description: Initializes global variables needed to run the eye tracking model, such as leftEyeCoordinates and rightEyeCoordinates, which store the model's predictions. It also initializes FaceMesh (a Google product) to track the face and crop the eyes before passing them into the eye tracking model.