Merge pull request jspsych#3339 from jspsych/feature-default-finish-t…

…imeline Make `finishTrial` clear the display and remove timeouts
vzhang03 · Jul 12, 2024 · 7679794 · 7679794
2 parents 29e7451 + 74b4adc
commit 7679794
Show file tree

Hide file tree

Showing 56 changed files with 81 additions and 203 deletions.
diff --git a/.changeset/rotten-mails-collect.md b/.changeset/rotten-mails-collect.md
@@ -0,0 +1,58 @@
+---
+"jspsych": major
+"@jspsych/plugin-animation": major
+"@jspsych/plugin-audio-button-response": major
+"@jspsych/plugin-audio-keyboard-response": major
+"@jspsych/plugin-audio-slider-response": major
+"@jspsych/plugin-browser-check": major
+"@jspsych/plugin-call-function": major
+"@jspsych/plugin-canvas-button-response": major
+"@jspsych/plugin-canvas-keyboard-response": major
+"@jspsych/plugin-canvas-slider-response": major
+"@jspsych/plugin-categorize-animation": major
+"@jspsych/plugin-categorize-html": major
+"@jspsych/plugin-categorize-image": major
+"@jspsych/plugin-cloze": major
+"@jspsych/plugin-external-html": major
+"@jspsych/plugin-free-sort": major
+"@jspsych/plugin-fullscreen": major
+"@jspsych/plugin-html-audio-response": major
+"@jspsych/plugin-html-button-response": major
+"@jspsych/plugin-html-keyboard-response": major
+"@jspsych/plugin-html-slider-response": major
+"@jspsych/plugin-html-video-response": major
+"@jspsych/plugin-iat-html": major
+"@jspsych/plugin-iat-image": major
+"@jspsych/plugin-image-button-response": major
+"@jspsych/plugin-image-keyboard-response": major
+"@jspsych/plugin-image-slider-response": major
+"@jspsych/plugin-initialize-camera": major
+"@jspsych/plugin-initialize-microphone": major
+"@jspsych/plugin-instructions": major
+"@jspsych/plugin-maxdiff": major
+"@jspsych/plugin-mirror-camera": major
+"@jspsych/plugin-preload": major
+"@jspsych/plugin-reconstruction": major
+"@jspsych/plugin-resize": major
+"@jspsych/plugin-same-different-html": major
+"@jspsych/plugin-same-different-image": major
+"@jspsych/plugin-serial-reaction-time": major
+"@jspsych/plugin-serial-reaction-time-mouse": major
+"@jspsych/plugin-sketchpad": major
+"@jspsych/plugin-survey": major
+"@jspsych/plugin-survey-html-form": major
+"@jspsych/plugin-survey-likert": major
+"@jspsych/plugin-survey-multi-choice": major
+"@jspsych/plugin-survey-multi-select": major
+"@jspsych/plugin-survey-text": major
+"@jspsych/plugin-video-button-response": major
+"@jspsych/plugin-video-keyboard-response": major
+"@jspsych/plugin-video-slider-response": major
+"@jspsych/plugin-virtual-chinrest": major
+"@jspsych/plugin-visual-search-circle": major
+"@jspsych/plugin-webgazer-calibrate": major
+"@jspsych/plugin-webgazer-init-camera": major
+"@jspsych/plugin-webgazer-validate": major
+---
+
+`finishTrial()` now clears the display and any timeouts set with `pluginApi.setTimeout()`
diff --git a/packages/jspsych/src/JsPsych.ts b/packages/jspsych/src/JsPsych.ts
@@ -396,6 +396,8 @@ export class JsPsych {
     getDefaultIti: () => this.getInitSettings().default_iti,
 
     finishTrialPromise: this.finishTrialPromise,
+
+    clearAllTimeouts: () => this.pluginAPI.clearAllTimeouts(),
   };
 
   private extensionManagerDependencies: ExtensionManagerDependencies = {

diff --git a/packages/jspsych/src/timeline/Trial.ts b/packages/jspsych/src/timeline/Trial.ts
@@ -112,6 +112,9 @@ export class Trial extends TimelineNode {
       result = await trialPromise;
     }
 
+    // The trial has finished, time to clean up.
+    this.cleanupTrial();
+
     return result;
   }
 
@@ -147,6 +150,14 @@ export class Trial extends TimelineNode {
     };
   }
 
+  /**
+   * Cleanup the trial by removing the display element and removing event listeners
+   */
+  private cleanupTrial() {
+    this.dependencies.clearAllTimeouts();
+    this.dependencies.getDisplayElement().innerHTML = "";
+  }
+
   /**
    * Add the CSS classes from the `css_classes` parameter to the display element
    */

diff --git a/packages/jspsych/src/timeline/index.ts b/packages/jspsych/src/timeline/index.ts
@@ -221,6 +221,11 @@ export interface TimelineNodeDependencies {
    * is called.
    */
   finishTrialPromise: PromiseWrapper<TrialResult | void>;
+
+  /**
+   * Clear all of the timeouts
+   */
+  clearAllTimeouts: () => void;
 }
 
 export type TrialResult = Record<string, any>;

diff --git a/packages/jspsych/tests/core/abortexperiment.test.ts b/packages/jspsych/tests/core/abortexperiment.test.ts
@@ -76,7 +76,7 @@ test("if on_finish returns a Promise, wait for resolve before showing end messag
   const { getHTML, expectFinished, expectRunning } = await startTimeline(timeline, jsPsych);
 
   expect(getHTML()).toMatch("foo");
-  pressKey("a");
+  await pressKey("a");
   expect(getHTML()).not.toMatch("foo");
   expect(getHTML()).not.toMatch("bar");
 

diff --git a/packages/jspsych/tests/test-utils.ts b/packages/jspsych/tests/test-utils.ts
@@ -38,6 +38,8 @@ export class TimelineNodeDependenciesMock implements TimelineNodeDependencies {
   getDefaultIti = jest.fn(() => 0);
 
   finishTrialPromise = new PromiseWrapper<TrialResult>();
+
+  clearAllTimeouts = jest.fn();
 }
 
 /**

diff --git a/packages/plugin-audio-button-response/src/index.ts b/packages/plugin-audio-button-response/src/index.ts
@@ -278,9 +278,6 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // function to end trial when it is time
     const end_trial = () => {
-      // kill any remaining setTimeout handlers
-      this.jsPsych.pluginAPI.clearAllTimeouts();
-
       // stop the audio file if it is playing
       // remove end event listeners if they exist
       if (context !== null) {
@@ -299,9 +296,6 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
         response: response.button,
       };
 
-      // clear the display
-      display_element.innerHTML = "";
-
       // move on to the next trial
       this.jsPsych.finishTrial(trial_data);
 

diff --git a/packages/plugin-audio-keyboard-response/src/index.ts b/packages/plugin-audio-keyboard-response/src/index.ts
@@ -182,9 +182,6 @@ class AudioKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // function to end trial when it is time
     const end_trial = () => {
-      // kill any remaining setTimeout handlers
-      this.jsPsych.pluginAPI.clearAllTimeouts();
-
       // stop the audio file if it is playing
       // remove end event listeners if they exist
       if (context !== null) {
@@ -206,9 +203,6 @@ class AudioKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         response: response.key,
       };
 
-      // clear the display
-      display_element.innerHTML = "";
-
       // move on to the next trial
       this.jsPsych.finishTrial(trial_data);
 

diff --git a/packages/plugin-audio-slider-response/src/index.ts b/packages/plugin-audio-slider-response/src/index.ts
@@ -340,9 +340,6 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
     }
 
     const end_trial = () => {
-      // kill any remaining setTimeout handlers
-      this.jsPsych.pluginAPI.clearAllTimeouts();
-
       // stop the audio file if it is playing
       // remove end event listeners if they exist
       if (context !== null) {
@@ -362,8 +359,6 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
         response: response.response,
       };
 
-      display_element.innerHTML = "";
-
       // next trial
       this.jsPsych.finishTrial(trialdata);
 

diff --git a/packages/plugin-browser-check/src/index.ts b/packages/plugin-browser-check/src/index.ts
@@ -447,8 +447,6 @@ class BrowserCheckPlugin implements JsPsychPlugin<Info> {
   }
 
   private end_trial(feature_data) {
-    this.jsPsych.getDisplayElement().innerHTML = "";
-
     const trial_data = { ...Object.fromEntries(feature_data) };
 
     this.jsPsych.finishTrial(trial_data);

diff --git a/packages/plugin-canvas-button-response/src/index.ts b/packages/plugin-canvas-button-response/src/index.ts
@@ -201,18 +201,12 @@ class CanvasButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // function to end trial when it is time
     const end_trial = () => {
-      // kill any remaining setTimeout handlers
-      this.jsPsych.pluginAPI.clearAllTimeouts();
-
       // gather the data to store for the trial
       var trial_data = {
         rt: response.rt,
         response: response.button,
       };
 
-      // clear the display
-      display_element.innerHTML = "";
-
       // move on to the next trial
       this.jsPsych.finishTrial(trial_data);
     };

diff --git a/packages/plugin-canvas-keyboard-response/src/index.ts b/packages/plugin-canvas-keyboard-response/src/index.ts
@@ -124,9 +124,6 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // function to end trial when it is time
     const end_trial = () => {
-      // kill any remaining setTimeout handlers
-      this.jsPsych.pluginAPI.clearAllTimeouts();
-
       // kill keyboard listeners
       if (typeof keyboardListener !== "undefined") {
         this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
@@ -138,9 +135,6 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         response: response.key,
       };
 
-      // clear the display
-      display_element.innerHTML = "";
-
       // move on to the next trial
       this.jsPsych.finishTrial(trial_data);
     };

diff --git a/packages/plugin-canvas-slider-response/src/index.ts b/packages/plugin-canvas-slider-response/src/index.ts
@@ -175,17 +175,13 @@ class CanvasSliderResponsePlugin implements JsPsychPlugin<Info> {
     };
 
     const end_trial = () => {
-      this.jsPsych.pluginAPI.clearAllTimeouts();
-
       // save data
       var trialdata = {
         rt: response.rt,
         response: response.response,
         slider_start: trial.slider_start,
       };
 
-      display_element.innerHTML = "";
-
       // next trial
       this.jsPsych.finishTrial(trialdata);
     };

diff --git a/packages/plugin-categorize-animation/src/index.ts b/packages/plugin-categorize-animation/src/index.ts
@@ -240,7 +240,6 @@ class CategorizeAnimationPlugin implements JsPsychPlugin<Info> {
 
     const endTrial = () => {
       clearInterval(animate_interval); // stop animation!
-      display_element.innerHTML = ""; // clear everything
       this.jsPsych.finishTrial(trial_data);
     };
 

diff --git a/packages/plugin-categorize-html/src/index.ts b/packages/plugin-categorize-html/src/index.ts
@@ -134,9 +134,6 @@ class CategorizeHtmlPlugin implements JsPsychPlugin<Info> {
 
     // create response function
     const after_response = (info: { key: string; rt: number }) => {
-      // kill any remaining setTimeout handlers
-      this.jsPsych.pluginAPI.clearAllTimeouts();
-
       // clear keyboard listener
       this.jsPsych.pluginAPI.cancelAllKeyboardResponses();
 
@@ -153,8 +150,6 @@ class CategorizeHtmlPlugin implements JsPsychPlugin<Info> {
         response: info.key,
       };
 
-      display_element.innerHTML = "";
-
       var timeout = info.rt == null;
       doFeedback(correct, timeout);
     };
@@ -177,7 +172,6 @@ class CategorizeHtmlPlugin implements JsPsychPlugin<Info> {
     }
 
     const endTrial = () => {
-      display_element.innerHTML = "";
       this.jsPsych.finishTrial(trial_data);
     };
 

diff --git a/packages/plugin-categorize-image/src/index.ts b/packages/plugin-categorize-image/src/index.ts
@@ -135,9 +135,6 @@ class CategorizeImagePlugin implements JsPsychPlugin<Info> {
 
     // create response function
     const after_response = (info: { key: string; rt: number }) => {
-      // kill any remaining setTimeout handlers
-      this.jsPsych.pluginAPI.clearAllTimeouts();
-
       // clear keyboard listener
       this.jsPsych.pluginAPI.cancelAllKeyboardResponses();
 
@@ -154,8 +151,6 @@ class CategorizeImagePlugin implements JsPsychPlugin<Info> {
         response: info.key,
       };
 
-      display_element.innerHTML = "";
-
       var timeout = info.rt == null;
       doFeedback(correct, timeout);
     };
@@ -178,7 +173,6 @@ class CategorizeImagePlugin implements JsPsychPlugin<Info> {
     }
 
     const endTrial = () => {
-      display_element.innerHTML = "";
       this.jsPsych.finishTrial(trial_data);
     };
 

diff --git a/packages/plugin-cloze/src/index.ts b/packages/plugin-cloze/src/index.ts
@@ -105,7 +105,6 @@ class ClozePlugin implements JsPsychPlugin<Info> {
           response: answers,
         };
 
-        display_element.innerHTML = "";
         this.jsPsych.finishTrial(trial_data);
       }
     };

diff --git a/packages/plugin-external-html/src/index.ts b/packages/plugin-external-html/src/index.ts
@@ -98,7 +98,6 @@ class ExternalHtmlPlugin implements JsPsychPlugin<Info> {
             rt: Math.round(performance.now() - t0),
             url: trial.url,
           };
-          display_element.innerHTML = "";
           this.jsPsych.finishTrial(trial_data);
           trial_complete();
         };

diff --git a/packages/plugin-free-sort/src/index.ts b/packages/plugin-free-sort/src/index.ts
@@ -474,8 +474,6 @@ class FreeSortPlugin implements JsPsychPlugin<Info> {
           rt: rt,
         };
 
-        // advance to next part
-        display_element.innerHTML = "";
         this.jsPsych.finishTrial(trial_data);
       }
     });

diff --git a/packages/plugin-html-audio-response/src/index.ts b/packages/plugin-html-audio-response/src/index.ts
@@ -269,9 +269,6 @@ class HtmlAudioResponsePlugin implements JsPsychPlugin<Info> {
     this.recorder.removeEventListener("start", this.start_event_handler);
     this.recorder.removeEventListener("stop", this.stop_event_handler);
 
-    // kill any remaining setTimeout handlers
-    this.jsPsych.pluginAPI.clearAllTimeouts();
-
     // gather the data to store for the trial
     var trial_data: any = {
       rt: this.rt,
@@ -286,9 +283,6 @@ class HtmlAudioResponsePlugin implements JsPsychPlugin<Info> {
       URL.revokeObjectURL(this.audio_url);
     }
 
-    // clear the display
-    display_element.innerHTML = "";
-
     // move on to the next trial
     this.jsPsych.finishTrial(trial_data);
   }

diff --git a/packages/plugin-html-button-response/src/index.ts b/packages/plugin-html-button-response/src/index.ts
@@ -159,19 +159,13 @@ class HtmlButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // function to end trial when it is time
     const end_trial = () => {
-      // kill any remaining setTimeout handlers
-      this.jsPsych.pluginAPI.clearAllTimeouts();
-
       // gather the data to store for the trial
       var trial_data = {
         rt: response.rt,
         stimulus: trial.stimulus,
         response: response.button,
       };
 
-      // clear the display
-      display_element.innerHTML = "";
-
       // move on to the next trial
       this.jsPsych.finishTrial(trial_data);
     };

diff --git a/packages/plugin-html-keyboard-response/src/index.spec.ts b/packages/plugin-html-keyboard-response/src/index.spec.ts
@@ -31,6 +31,7 @@ describe("html-keyboard-response", () => {
     );
 
     await pressKey("f");
+    expect(getHTML()).toBe("");
     await expectFinished();
   });
-Original file line number
+Diff line change
@@ Expand Up @@
       getDefaultIti = jest.fn(() => 0);
       finishTrialPromise = new PromiseWrapper<TrialResult>();
+      clearAllTimeouts = jest.fn();
     }
     /**
@@ Expand Down @@