Changed AudioPlayer to implement interface; fixed build error; rewrote plugins using AudioPlayer and added tests; changed test-utils' clickTarget to respect disabled forms

packages/jspsych/src/modules/plugin-api/AudioPlayer.ts

@@ -3,7 +3,15 @@ export interface AudioPlayerOptions {
   audioContext?: AudioContext;
 }
 
-export class AudioPlayer {
+export interface AudioPlayerInterface {
+  load(): Promise<void>;
+  play(): void;
+  stop(): void;
+  addEventListener(eventName: string, callback: EventListenerOrEventListenerObject): void;
+  removeEventListener(eventName: string, callback: EventListenerOrEventListenerObject): void;
+}
+
+export class AudioPlayer implements AudioPlayerInterface {
   private audio: HTMLAudioElement | AudioBufferSourceNode;
   private audioContext: AudioContext | null;
   private useWebAudio: boolean;

packages/plugin-audio-button-response/src/index.spec.ts

@@ -1,13 +1,62 @@
-import { clickTarget, simulateTimeline, startTimeline } from "@jspsych/test-utils";
+jest.mock("../../jspsych/src/modules/plugin-api/AudioPlayer");
+
+import { clickTarget, flushPromises, simulateTimeline, startTimeline } from "@jspsych/test-utils";
 import { initJsPsych } from "jspsych";
 
+//@ts-expect-error mock
+import { mockStop } from "../../jspsych/src/modules/plugin-api/AudioPlayer";
 import audioButtonResponse from ".";
 
 jest.useFakeTimers();
 
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
 // skip this until we figure out how to mock the audio loading
-describe.skip("audio-button-response", () => {
+describe("audio-button-response", () => {
+  it.only("works with all defaults", async () => {
+    const { expectFinished, expectRunning, displayElement, getHTML } = await startTimeline([
+      {
+        type: audioButtonResponse,
+        choices: ["choice1"],
+        stimulus: "foo.mp3",
+      },
+    ]);
+
+    expectRunning();
+
+    console.log(getHTML());
+
+    clickTarget(displayElement.querySelector("button"));
+
+    expectFinished();
+
+    await flushPromises();
+  });
+  it("works with use_webaudio:false", async () => {
+    const jsPsych = initJsPsych({ use_webaudio: false });
+
+    const { expectFinished, expectRunning, displayElement } = await startTimeline(
+      [
+        {
+          type: audioButtonResponse,
+          choices: ["choice1"],
+          stimulus: "foo.mp3",
+        },
+      ],
+      jsPsych
+    );
+
+    await expectRunning();
+
+    clickTarget(displayElement.querySelector("button"));
+
+    await expectFinished();
+  });
   test("on_load event triggered after page setup complete", async () => {
+    const onLoadCallback = jest.fn();
+
     const timeline = [
       {
         type: audioButtonResponse,
@@ -15,9 +64,7 @@ describe.skip("audio-button-response", () => {
         prompt: "foo",
         choices: ["choice1"],
         on_load: () => {
-          expect(getHTML()).toContain("foo");
+          onLoadCallback();
-
-          clickTarget(displayElement.querySelector("button"));
         },
       },
     ];
@@ -26,11 +73,107 @@ describe.skip("audio-button-response", () => {
       use_webaudio: false,
     });
 
-    const { getHTML, finished, displayElement } = await startTimeline(timeline, jsPsych);
+    await startTimeline(timeline, jsPsych);
 
-    expect(getHTML()).not.toContain("foo");
+    expect(onLoadCallback).toHaveBeenCalled();
+  });
+  it("trial ends when button is clicked", async () => {
+    const jsPsych = initJsPsych({ use_webaudio: false });
 
-    await finished;
+    const { expectFinished, expectRunning, displayElement } = await startTimeline(
+      [
+        {
+          type: audioButtonResponse,
+          stimulus: "foo.mp3",
+          prompt: "foo",
+          choices: ["choice1"],
+        },
+      ],
+      jsPsych
+    );
+
+    await expectRunning();
+
+    clickTarget(displayElement.querySelector("button"));
+
+    await expectFinished();
+  });
+
+  it("ends when trial_ends_after_audio is true and audio finishes", async () => {
+    const jsPsych = initJsPsych({ use_webaudio: false });
+
+    const { expectFinished, expectRunning } = await startTimeline(
+      [
+        {
+          type: audioButtonResponse,
+          stimulus: "foo.mp3",
+          choices: ["choice1"],
+          trial_duration: 30000,
+          trial_ends_after_audio: true,
+        },
+      ],
+      jsPsych
+    );
+
+    await expectRunning();
+
+    jest.runAllTimers();
+
+    await expectFinished();
+  });
+  it("ends when trial_duration is shorter than the audio duration, stopping the audio", async () => {
+    const jsPsych = initJsPsych({ use_webaudio: false });
+
+    const { expectFinished, expectRunning } = await startTimeline(
+      [
+        {
+          type: audioButtonResponse,
+          stimulus: "foo.mp3",
+          choices: ["choice1"],
+          trial_duration: 500,
+        },
+      ],
+      jsPsych
+    );
+
+    await expectRunning();
+
+    expect(mockStop).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(500);
+
+    expect(mockStop).toHaveBeenCalled();
+
+    await expectFinished();
+  });
+  it("prevents responses when response_allowed_while_playing is false", async () => {
+    const jsPsych = initJsPsych({ use_webaudio: false });
+
+    const { expectFinished, expectRunning, displayElement, getHTML } = await startTimeline(
+      [
+        {
+          type: audioButtonResponse,
+          stimulus: "foo.mp3",
+          choices: ["choice1"],
+          response_allowed_while_playing: false,
+        },
+      ],
+      jsPsych
+    );
+
+    await expectRunning();
+
+    clickTarget(displayElement.querySelector("button"));
+
+    await expectRunning();
+
+    jest.runAllTimers();
+
+    await expectRunning();
+
+    clickTarget(displayElement.querySelector("button"));
+
+    await expectFinished();
   });
 });
 

packages/plugin-audio-button-response/src/index.ts

@@ -1,5 +1,8 @@
+import autoBind from "auto-bind";
 import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
 
+import { AudioPlayerInterface } from "../../jspsych/src/modules/plugin-api/AudioPlayer";
+
 const info = <const>{
   name: "audio-button-response",
   parameters: {
@@ -98,60 +101,43 @@ type Info = typeof info;
  */
 class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
   static info = info;
-  private audio;
+  private audio: AudioPlayerInterface;
-
+  private params: TrialType<Info>;
   private buttonElements: HTMLElement[] = [];
+  private display: HTMLElement;
+  private response: { rt: number; button: number } = { rt: null, button: null };
+  private context: AudioContext;
+  private startTime: number;
+  private trial_complete: (trial_data: { rt: number; stimulus: string; response: number }) => void;
 
-  constructor(private jsPsych: JsPsych) {}
+  constructor(private jsPsych: JsPsych) {
+    autoBind(this);
+  }
 
-  trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {
+  async trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {
     // hold the .resolve() function from the Promise that ends the trial
-    let trial_complete;
+    this.trial_complete;
-
+    this.params = trial;
+    this.display = display_element;
     // setup stimulus
-    var context = this.jsPsych.pluginAPI.audioContext();
+    this.context = this.jsPsych.pluginAPI.audioContext();
-
-    // store response
-    var response = {
-      rt: null,
-      button: null,
-    };
-
-    // record webaudio context start time
-    var startTime;
 
     // load audio file
-    this.jsPsych.pluginAPI
+    this.audio = await this.jsPsych.pluginAPI.getAudioPlayer(trial.stimulus);
-      .getAudioBuffer(trial.stimulus)
-      .then((buffer) => {
-        if (context !== null) {
-          this.audio = context.createBufferSource();
-          this.audio.buffer = buffer;
-          this.audio.connect(context.destination);
-        } else {
-          this.audio = buffer;
-          this.audio.currentTime = 0;
-        }
-        setupTrial();
-      })
-      .catch((err) => {
-        console.error(
-          `Failed to load audio file "${trial.stimulus}". Try checking the file path. We recommend using the preload plugin to load audio files.`
-        );
-        console.error(err);
-      });
 
-    const setupTrial = () => {
     // set up end event if trial needs it
     if (trial.trial_ends_after_audio) {
-        this.audio.addEventListener("ended", end_trial);
+      this.audio.addEventListener("ended", this.end_trial);
     }
 
     // enable buttons after audio ends if necessary
     if (!trial.response_allowed_while_playing && !trial.trial_ends_after_audio) {
-        this.audio.addEventListener("ended", enable_buttons);
+      this.audio.addEventListener("ended", this.enable_buttons);
     }
 
+    // record start time
+    this.startTime = performance.now();
+
     // Display buttons
     const buttonGroupElement = document.createElement("div");
     buttonGroupElement.id = "jspsych-audio-button-response-btngroup";
@@ -181,7 +167,7 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
       const buttonElement = buttonGroupElement.lastChild as HTMLElement;
       buttonElement.dataset.choice = choiceIndex.toString();
       buttonElement.addEventListener("click", () => {
-          after_response(choiceIndex);
+        this.after_response(choiceIndex);
       });
       this.buttonElements.push(buttonElement);
     }
@@ -194,100 +180,84 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
     }
 
     if (!trial.response_allowed_while_playing) {
-        disable_buttons();
+      this.disable_buttons();
-      }
-
-      // start time
-      startTime = performance.now();
-
-      // start audio
-      if (context !== null) {
-        startTime = context.currentTime;
-        this.audio.start(startTime);
-      } else {
-        this.audio.play();
     }
 
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
       this.jsPsych.pluginAPI.setTimeout(() => {
-          end_trial();
+        this.end_trial();
       }, trial.trial_duration);
     }
 
     on_load();
-    };
 
-    // function to handle responses by the subject
+    this.audio.play();
-    const after_response = (choice) => {
-      // measure rt
-      var endTime = performance.now();
-      var rt = Math.round(endTime - startTime);
-      if (context !== null) {
-        endTime = context.currentTime;
-        rt = Math.round((endTime - startTime) * 1000);
-      }
-      response.button = parseInt(choice);
-      response.rt = rt;
 
-      // disable all the buttons after a response
+    return new Promise((resolve) => {
-      disable_buttons();
+      this.trial_complete = resolve;
-
+    });
-      if (trial.response_ends_trial) {
-        end_trial();
-      }
-    };
-
-    // 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) {
-        this.audio.stop();
-      } else {
-        this.audio.pause();
   }
 
-      this.audio.removeEventListener("ended", end_trial);
+  private disable_buttons = () => {
-      this.audio.removeEventListener("ended", enable_buttons);
-
-      // 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);
-
-      trial_complete();
-    };
-
-    const disable_buttons = () => {
     for (const button of this.buttonElements) {
       button.setAttribute("disabled", "disabled");
     }
   };
 
-    const enable_buttons = () => {
+  private enable_buttons = () => {
     for (const button of this.buttonElements) {
       button.removeAttribute("disabled");
     }
   };
 
-    return new Promise((resolve) => {
+  // function to handle responses by the subject
-      trial_complete = resolve;
+  private after_response = (choice) => {
-    });
+    // measure rt
+    var endTime = performance.now();
+    var rt = Math.round(endTime - this.startTime);
+    if (this.context !== null) {
+      endTime = this.context.currentTime;
+      rt = Math.round((endTime - this.startTime) * 1000);
     }
+    this.response.button = parseInt(choice);
+    this.response.rt = rt;
 
-  simulate(
+    // disable all the buttons after a response
+    this.disable_buttons();
+
+    if (this.params.response_ends_trial) {
+      this.end_trial();
+    }
+  };
+
+  // method to end trial when it is time
+  private end_trial = () => {
+    // kill any remaining setTimeout handlers
+    this.jsPsych.pluginAPI.clearAllTimeouts();
+
+    // stop the audio file if it is playing
+    this.audio.stop();
+
+    // remove end event listeners if they exist
+    this.audio.removeEventListener("ended", this.end_trial);
+    this.audio.removeEventListener("ended", this.enable_buttons);
+
+    // gather the data to store for the trial
+    var trial_data = {
+      rt: this.response.rt,
+      stimulus: this.params.stimulus,
+      response: this.response.button,
+    };
+
+    // clear the display
+    this.display.innerHTML = "";
+
+    // move on to the next trial
+    this.trial_complete(trial_data);
+  };
+
+  async simulate(
     trial: TrialType<Info>,
     simulation_mode,
     simulation_options: any,

packages/plugin-audio-keyboard-response/src/index.ts

@@ -1,7 +1,7 @@
 import autoBind from "auto-bind";
 import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
 
-import { AudioPlayer } from "../../jspsych/src/modules/plugin-api/AudioPlayer";
+import { AudioPlayerInterface } from "../../jspsych/src/modules/plugin-api/AudioPlayer";
 
 const info = <const>{
   name: "audio-keyboard-response",
@@ -63,7 +63,7 @@ type Info = typeof info;
  */
 class AudioKeyboardResponsePlugin implements JsPsychPlugin<Info> {
   static info = info;
-  private audio: AudioPlayer;
+  private audio: AudioPlayerInterface;
   private params: TrialType<Info>;
   private display: HTMLElement;
   private response: { rt: number; key: string } = { rt: null, key: null };
@@ -79,7 +79,6 @@ class AudioKeyboardResponsePlugin implements JsPsychPlugin<Info> {
       this.finish = resolve;
       this.params = trial;
       this.display = display_element;
-
       // load audio file
       this.audio = await this.jsPsych.pluginAPI.getAudioPlayer(trial.stimulus);
 

packages/plugin-audio-slider-response/src/index.spec.ts

@@ -1,10 +1,140 @@
-import { pressKey, simulateTimeline, startTimeline } from "@jspsych/test-utils";
+jest.mock("../../jspsych/src/modules/plugin-api/AudioPlayer");
+
+import {
+  clickTarget,
+  flushPromises,
+  pressKey,
+  simulateTimeline,
+  startTimeline,
+} from "@jspsych/test-utils";
 import { initJsPsych } from "jspsych";
 
+//@ts-expect-error mock
+import { mockStop } from "../../jspsych/src/modules/plugin-api/AudioPlayer";
 import audioSliderResponse from ".";
 
 jest.useFakeTimers();
 
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe("audio-slider-response", () => {
+  // this relies on AudioContext, which we haven't mocked yet
+  it.skip("works with all defaults", async () => {
+    const { expectFinished, expectRunning } = await startTimeline([
+      {
+        type: audioSliderResponse,
+        stimulus: "foo.mp3",
+      },
+    ]);
+
+    expectRunning();
+
+    pressKey("a");
+
+    expectFinished();
+
+    await flushPromises();
+  });
+
+  it("works with use_webaudio:false", async () => {
+    const jsPsych = initJsPsych({ use_webaudio: false });
+
+    const { expectFinished, expectRunning, displayElement, getHTML } = await startTimeline(
+      [
+        {
+          type: audioSliderResponse,
+          stimulus: "foo.mp3",
+        },
+      ],
+      jsPsych
+    );
+
+    await expectRunning();
+
+    //jest.runAllTimers();
+
+    clickTarget(displayElement.querySelector("button"));
+
+    await expectFinished();
+  });
+
+  it("ends when trial_ends_after_audio is true and audio finishes", async () => {
+    const jsPsych = initJsPsych({ use_webaudio: false });
+
+    const { expectFinished, expectRunning } = await startTimeline(
+      [
+        {
+          type: audioSliderResponse,
+          stimulus: "foo.mp3",
+          trial_ends_after_audio: true,
+        },
+      ],
+      jsPsych
+    );
+
+    await expectRunning();
+
+    jest.runAllTimers();
+
+    await expectFinished();
+  });
+
+  it("prevents responses when response_allowed_while_playing is false", async () => {
+    const jsPsych = initJsPsych({ use_webaudio: false });
+
+    const { expectFinished, expectRunning, displayElement } = await startTimeline(
+      [
+        {
+          type: audioSliderResponse,
+          stimulus: "foo.mp3",
+          response_allowed_while_playing: false,
+        },
+      ],
+      jsPsych
+    );
+
+    await expectRunning();
+
+    clickTarget(displayElement.querySelector("button"));
+
+    await expectRunning();
+
+    jest.runAllTimers();
+
+    await expectRunning();
+
+    clickTarget(displayElement.querySelector("button"));
+
+    await expectFinished();
+  });
+
+  it("ends when trial_duration is shorter than the audio duration, stopping the audio", async () => {
+    const jsPsych = initJsPsych({ use_webaudio: false });
+
+    const { expectFinished, expectRunning } = await startTimeline(
+      [
+        {
+          type: audioSliderResponse,
+          stimulus: "foo.mp3",
+          trial_duration: 500,
+        },
+      ],
+      jsPsych
+    );
+
+    await expectRunning();
+
+    expect(mockStop).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(500);
+
+    expect(mockStop).toHaveBeenCalled();
+
+    await expectFinished();
+  });
+});
 describe("audio-slider-response simulation", () => {
   test("data mode works", async () => {
     const timeline = [

packages/plugin-audio-slider-response/src/index.ts

@@ -1,5 +1,8 @@
+import autoBind from "auto-bind";
 import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
 
+import { AudioPlayerInterface } from "../../jspsych/src/modules/plugin-api/AudioPlayer";
+
 const info = <const>{
   name: "audio-slider-response",
   parameters: {
@@ -104,86 +107,101 @@ type Info = typeof info;
  */
 class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
   static info = info;
-  private audio;
+  private audio: AudioPlayerInterface;
+  private context: AudioContext;
+  private params: TrialType<Info>;
+  private display: HTMLElement;
+  private response: { rt: number; response: number } = { rt: null, response: null };
+  private startTime: number;
+  private half_thumb_width: number;
+  private trial_complete: (trial_data: {
+    rt: number;
+    slider_start: number;
+    response: number;
+  }) => void;
 
-  constructor(private jsPsych: JsPsych) {}
+  constructor(private jsPsych: JsPsych) {
-
+    autoBind(this);
-  trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {
+  }
-    // hold the .resolve() function from the Promise that ends the trial
-    let trial_complete;
 
+  async trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {
+    // record webaudio context start time
+    this.startTime;
+    this.params = trial;
+    this.display = display_element;
+    // for storing data related to response
+    this.response;
     // half of the thumb width value from jspsych.css, used to adjust the label positions
-    var half_thumb_width = 7.5;
+    this.half_thumb_width = 7.5;
+    // hold the .resolve() function from the Promise that ends the trial
+    this.trial_complete;
 
     // setup stimulus
-    var context = this.jsPsych.pluginAPI.audioContext();
+    this.context = this.jsPsych.pluginAPI.audioContext();
-
-    // record webaudio context start time
-    var startTime;
-
-    // for storing data related to response
-    var response;
 
     // load audio file
-    this.jsPsych.pluginAPI
+    this.audio = await this.jsPsych.pluginAPI.getAudioPlayer(trial.stimulus);
-      .getAudioBuffer(trial.stimulus)
-      .then((buffer) => {
-        if (context !== null) {
-          this.audio = context.createBufferSource();
-          this.audio.buffer = buffer;
-          this.audio.connect(context.destination);
-        } else {
-          this.audio = buffer;
-          this.audio.currentTime = 0;
-        }
-        setupTrial();
-      })
-      .catch((err) => {
-        console.error(
-          `Failed to load audio file "${trial.stimulus}". Try checking the file path. We recommend using the preload plugin to load audio files.`
-        );
-        console.error(err);
-      });
 
-    const setupTrial = () => {
+    this.setupTrial();
+
+    on_load();
+
+    return new Promise((resolve) => {
+      this.trial_complete = resolve;
+      console.log("PROMISE");
+    });
+  }
+
+  // to enable slider after audio ends
+  private enable_slider() {
+    document.querySelector<HTMLInputElement>("#jspsych-audio-slider-response-response").disabled =
+      false;
+    if (!this.params.require_movement) {
+      document.querySelector<HTMLButtonElement>("#jspsych-audio-slider-response-next").disabled =
+        false;
+    }
+  }
+
+  private setupTrial = () => {
+    console.log("SETUP TRIAL");
     // set up end event if trial needs it
-      if (trial.trial_ends_after_audio) {
+    if (this.params.trial_ends_after_audio) {
-        this.audio.addEventListener("ended", end_trial);
+      this.audio.addEventListener("ended", this.end_trial);
     }
 
     // enable slider after audio ends if necessary
-      if (!trial.response_allowed_while_playing && !trial.trial_ends_after_audio) {
+    if (!this.params.response_allowed_while_playing && !this.params.trial_ends_after_audio) {
-        this.audio.addEventListener("ended", enable_slider);
+      this.audio.addEventListener("ended", this.enable_slider);
     }
 
     var html = '<div id="jspsych-audio-slider-response-wrapper" style="margin: 100px 0px;">';
     html +=
       '<div class="jspsych-audio-slider-response-container" style="position:relative; margin: 0 auto 3em auto; width:';
-      if (trial.slider_width !== null) {
+    if (this.params.slider_width !== null) {
-        html += trial.slider_width + "px;";
+      html += this.params.slider_width + "px;";
     } else {
       html += "auto;";
     }
     html += '">';
     html +=
       '<input type="range" class="jspsych-slider" value="' +
-        trial.slider_start +
+      this.params.slider_start +
       '" min="' +
-        trial.min +
+      this.params.min +
       '" max="' +
-        trial.max +
+      this.params.max +
       '" step="' +
-        trial.step +
+      this.params.step +
       '" id="jspsych-audio-slider-response-response"';
-      if (!trial.response_allowed_while_playing) {
+    if (!this.params.response_allowed_while_playing) {
       html += " disabled";
     }
     html += "></input><div>";
-      for (var j = 0; j < trial.labels.length; j++) {
+    for (var j = 0; j < this.params.labels.length; j++) {
-        var label_width_perc = 100 / (trial.labels.length - 1);
+      var label_width_perc = 100 / (this.params.labels.length - 1);
-        var percent_of_range = j * (100 / (trial.labels.length - 1));
+      var percent_of_range = j * (100 / (this.params.labels.length - 1));
       var percent_dist_from_center = ((percent_of_range - 50) / 50) * 100;
-        var offset = (percent_dist_from_center * half_thumb_width) / 100;
+      var offset = (percent_dist_from_center * this.half_thumb_width) / 100;
       html +=
         '<div style="border: 1px solid transparent; display: inline-block; position: absolute; ' +
         "left:calc(" +
@@ -195,154 +213,131 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
         "px); text-align: center; width: " +
         label_width_perc +
         '%;">';
-        html += '<span style="text-align: center; font-size: 80%;">' + trial.labels[j] + "</span>";
+      html +=
+        '<span style="text-align: center; font-size: 80%;">' + this.params.labels[j] + "</span>";
       html += "</div>";
     }
     html += "</div>";
     html += "</div>";
     html += "</div>";
 
-      if (trial.prompt !== null) {
+    if (this.params.prompt !== null) {
-        html += trial.prompt;
+      html += this.params.prompt;
     }
 
     // add submit button
     var next_disabled_attribute = "";
-      if (trial.require_movement || !trial.response_allowed_while_playing) {
+    if (this.params.require_movement || !this.params.response_allowed_while_playing) {
       next_disabled_attribute = "disabled";
     }
     html +=
       '<button id="jspsych-audio-slider-response-next" class="jspsych-btn" ' +
       next_disabled_attribute +
       ">" +
-        trial.button_label +
+      this.params.button_label +
       "</button>";
 
-      display_element.innerHTML = html;
+    this.display.innerHTML = html;
 
-      response = {
+    console.log("iinner", this.display.innerHTML);
+
+    this.response = {
       rt: null,
       response: null,
     };
 
-      if (!trial.response_allowed_while_playing) {
+    if (!this.params.response_allowed_while_playing) {
-        display_element.querySelector<HTMLInputElement>(
+      this.display.querySelector<HTMLInputElement>(
         "#jspsych-audio-slider-response-response"
       ).disabled = true;
-        display_element.querySelector<HTMLInputElement>(
+      this.display.querySelector<HTMLInputElement>("#jspsych-audio-slider-response-next").disabled =
-          "#jspsych-audio-slider-response-next"
+        true;
-        ).disabled = true;
     }
 
-      if (trial.require_movement) {
+    if (this.params.require_movement) {
       const enable_button = () => {
-          display_element.querySelector<HTMLInputElement>(
+        this.display.querySelector<HTMLInputElement>(
           "#jspsych-audio-slider-response-next"
         ).disabled = false;
       };
 
-        display_element
+      this.display
         .querySelector("#jspsych-audio-slider-response-response")
         .addEventListener("mousedown", enable_button);
 
-        display_element
+      this.display
         .querySelector("#jspsych-audio-slider-response-response")
         .addEventListener("touchstart", enable_button);
 
-        display_element
+      this.display
         .querySelector("#jspsych-audio-slider-response-response")
         .addEventListener("change", enable_button);
     }
 
-      display_element
+    this.display
       .querySelector("#jspsych-audio-slider-response-next")
       .addEventListener("click", () => {
         // measure response time
         var endTime = performance.now();
-          var rt = Math.round(endTime - startTime);
+        var rt = Math.round(endTime - this.startTime);
-          if (context !== null) {
+        if (this.context !== null) {
-            endTime = context.currentTime;
+          endTime = this.context.currentTime;
-            rt = Math.round((endTime - startTime) * 1000);
+          rt = Math.round((endTime - this.startTime) * 1000);
         }
-          response.rt = rt;
+        this.response.rt = rt;
-          response.response = display_element.querySelector<HTMLInputElement>(
+        this.response.response = this.display.querySelector<HTMLInputElement>(
           "#jspsych-audio-slider-response-response"
         ).valueAsNumber;
 
-          if (trial.response_ends_trial) {
+        if (this.params.response_ends_trial) {
-            end_trial();
+          this.end_trial();
         } else {
-            display_element.querySelector<HTMLInputElement>(
+          this.display.querySelector<HTMLInputElement>(
             "#jspsych-audio-slider-response-next"
           ).disabled = true;
         }
       });
 
-      startTime = performance.now();
+    this.startTime = performance.now();
+
     // start audio
-      if (context !== null) {
-        startTime = context.currentTime;
-        this.audio.start(startTime);
-      } else {
     this.audio.play();
-      }
 
     // end trial if trial_duration is set
-      if (trial.trial_duration !== null) {
+    if (this.params.trial_duration !== null) {
       this.jsPsych.pluginAPI.setTimeout(() => {
-          end_trial();
+        this.end_trial();
-        }, trial.trial_duration);
+      }, this.params.trial_duration);
     }
 
-      on_load();
+    console.log("END SETUP TRIAL");
   };
 
-    // function to enable slider after audio ends
+  private end_trial = () => {
-    function enable_slider() {
-      document.querySelector<HTMLInputElement>("#jspsych-audio-slider-response-response").disabled =
-        false;
-      if (!trial.require_movement) {
-        document.querySelector<HTMLButtonElement>("#jspsych-audio-slider-response-next").disabled =
-          false;
-      }
-    }
-
-    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) {
     this.audio.stop();
-      } else {
-        this.audio.pause();
-      }
 
-      this.audio.removeEventListener("ended", end_trial);
+    // remove end event listeners if they exist
-      this.audio.removeEventListener("ended", enable_slider);
+    this.audio.removeEventListener("ended", this.end_trial);
+    this.audio.removeEventListener("ended", this.enable_slider);
 
     // save data
     var trialdata = {
-        rt: response.rt,
+      rt: this.response.rt,
-        stimulus: trial.stimulus,
+      stimulus: this.params.stimulus,
-        slider_start: trial.slider_start,
+      slider_start: this.params.slider_start,
-        response: response.response,
+      response: this.response.response,
     };
 
-      display_element.innerHTML = "";
+    this.display.innerHTML = "";
 
     // next trial
-      this.jsPsych.finishTrial(trialdata);
+    this.trial_complete(trialdata);
-
-      trial_complete();
   };
 
-    return new Promise((resolve) => {
-      trial_complete = resolve;
-    });
-  }
-
   simulate(
     trial: TrialType<Info>,
     simulation_mode,

packages/test-utils/src/index.ts

@@ -33,6 +33,13 @@ export async function mouseDownMouseUpTarget(target: Element) {
 }
 
 export async function clickTarget(target: Element) {
+  // Check if the target is a form element and if it's disabled
+  if (target instanceof HTMLButtonElement || target instanceof HTMLInputElement) {
+    if (target.disabled) {
+      console.log("Target is disabled, not dispatching click event.");
+      return; // Exit the function if the target is disabled
+    }
+  }
   await dispatchEvent(new MouseEvent("click", { bubbles: true }), target);
 }