oTree-jsPsychHardware Setup

Bridging Online Tasks and Offline Devices

This setup integrates a graphical interface, server-side logic, and a signal delivery pipeline to interface with neuroimaging devices (EEG/fMRI).
It has been tested on a risk-preference task.

During the tests participants perform the task inside an fMRI scanner, interacting with the app through a mirrored PC screen.

Core Features

  • Run in a browser on a PC
  • Record behavioral responses
  • Send event-related timing markers to devices (via logical parallel port / LPT)

To achieve this, we integrated a multi-part software pipeline combining oTree, PsychoJS syntax (for stamp event initialization), jsPsychHardware (a Chrome extension for event detection), and jsPsychHardware Native v0.2 (a C++ application).

Neuro.png

Frontend & Backend

  • Frontend animation: jQuery (JS)
  • Task logic: PsychoJS event markers embedded in JS code
  • Backend + data storage: oTree v5.9.6

GitHub: messy working example with risk task

Runs locally via:

otree devserver

See: otree.readthedocs.io

Event Marker Pipeline

When a button is clicked in the task:

  1. JS sends a timestamp to browser console
  2. jsPsychHardware (Chrome extension) detects the event
  3. It forwards the event to:
    • jsPsychHardware Native v0.2 (C++ app)
  4. C++ program sends TTL signal via LPT

Parallel Port Setup

To configure LPT address:

  1. Open Windows Start menu → search msconfig
  2. Navigate to:
    • Tools → System Information
    • Left pane: Hardware Resources → IO
    • Find the parallel port adapter and copy its address (e.g., 0x378)
  3. Paste it into the jsPsychHardware input field
  4. Press ON to activate

Sources

Extension:
Chrome Web Store
Code:
github.com/rivasd/jsPsychHardware

Timing Precision

✅ Required latency: <15–30 ms
✅ Measured on:

  • OS: Windows 10
  • CPU: Intel i7-3770
  • GPU: NVX52 @ 50kHz sampling rate

10,000 test events sent

Results:

  • Typical latency: 2–5 ms
  • Rare spikes: max ~15 ms
This performance meets psychometric standards (see dist. on next slide).

aaa2.png