Add RT property to fullscreen data collection. Support setting this property in simulation mode. #2462

Author: jodeleeuw

.changeset/mean-ads-clap.md

@@ -0,0 +1,5 @@
+---
+"@jspsych/plugin-fullscreen": minor
+---
+
+Plugin now records RT of the button press to launch fullscreen mode and simulation mode supports setting this property

docs/plugins/fullscreen.md

@@ -25,6 +25,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 Name | Type | Value
 -----|------|------
 success | boolean | true if the browser supports fullscreen mode (i.e., is not Safari)
+rt | number | Response time to click the button that launches fullscreen mode
 
 ## Simulation Mode
 

packages/plugin-fullscreen/src/index.spec.ts

@@ -23,6 +23,23 @@ describe("fullscreen plugin", () => {
     clickTarget(document.querySelector("#jspsych-fullscreen-btn"));
     expect(document.documentElement.requestFullscreen).toHaveBeenCalled();
   });
+
+  test("records RT of click", async () => {
+    const { getData, expectFinished } = await startTimeline([
+      {
+        type: fullscreen,
+        delay_after: 0,
+      },
+    ]);
+
+    expect(document.documentElement.requestFullscreen).not.toHaveBeenCalled();
+    jest.advanceTimersByTime(1000);
+    clickTarget(document.querySelector("#jspsych-fullscreen-btn"));
+    expect(document.documentElement.requestFullscreen).toHaveBeenCalled();
+    jest.runAllTimers();
+    await expectFinished();
+    expect(getData().values()[0].rt).toBeGreaterThanOrEqual(1000);
+  });
 });
 
 describe("fullscreen plugin simulation", () => {
@@ -63,5 +80,6 @@ describe("fullscreen plugin simulation", () => {
     await expectFinished();
 
     expect(getData().values()[0].success).toBe(true);
+    expect(getData().values()[0].rt).toBeGreaterThan(0);
   });
 });

packages/plugin-fullscreen/src/index.ts

@@ -47,6 +47,8 @@ type Info = typeof info;
  */
 class FullscreenPlugin implements JsPsychPlugin<Info> {
   static info = info;
+  private rt = null;
+  private start_time = 0;
 
   constructor(private jsPsych: JsPsych) {}
 
@@ -73,9 +75,11 @@ class FullscreenPlugin implements JsPsychPlugin<Info> {
       <button id="jspsych-fullscreen-btn" class="jspsych-btn">${trial.button_label}</button>
     `;
     display_element.querySelector("#jspsych-fullscreen-btn").addEventListener("click", () => {
+      this.rt = Math.round(performance.now() - this.start_time);
       this.enterFullScreen();
       this.endTrial(display_element, true, trial);
     });
+    this.start_time = performance.now();
   }
 
   private endTrial(display_element, success, trial) {
@@ -84,6 +88,7 @@ class FullscreenPlugin implements JsPsychPlugin<Info> {
     this.jsPsych.pluginAPI.setTimeout(() => {
       var trial_data = {
         success: success,
+        rt: this.rt,
       };
 
       this.jsPsych.finishTrial(trial_data);
@@ -137,8 +142,11 @@ class FullscreenPlugin implements JsPsychPlugin<Info> {
   }
 
   private create_simulation_data(trial: TrialType<Info>, simulation_options) {
+    const rt = this.jsPsych.randomization.sampleExGaussian(1000, 100, 1 / 200, true);
+
     const default_data = {
       success: true,
+      rt: rt,
     };
 
     const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
@@ -164,7 +172,7 @@ class FullscreenPlugin implements JsPsychPlugin<Info> {
       load_callback();
       this.jsPsych.pluginAPI.clickTarget(
         display_element.querySelector("#jspsych-fullscreen-btn"),
-        this.jsPsych.randomization.sampleExGaussian(1000, 100, 1 / 200, true)
+        data.rt
       );
     }
   }