@jspsych/plugin-audio-button-response 2.1.0 → 2.1.1

package/dist/index.browser.js

@@ -49,7 +49,7 @@ var jsPsychAudioButtonResponse = (function (jspsych) {
 
 	var autoBind$1 = /*@__PURE__*/getDefaultExportFromCjs(autoBind);
 
-	var version = "2.1.0";
+	var version = "2.1.1";
 
 	const info = {
 	  name: "audio-button-response",
@@ -202,9 +202,9 @@ var jsPsychAudioButtonResponse = (function (jspsych) {
 	    };
 	    // method to end trial when it is time
 	    this.end_trial = () => {
-	      this.audio.stop();
 	      this.audio.removeEventListener("ended", this.end_trial);
 	      this.audio.removeEventListener("ended", this.enable_buttons);
+	      this.audio.stop();
 	      var trial_data = {
 	        rt: this.response.rt,
 	        stimulus: this.params.stimulus,
@@ -337,4 +337,4 @@ var jsPsychAudioButtonResponse = (function (jspsych) {
 	return AudioButtonResponsePlugin;
 
 })(jsPsychModule);
-//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-audio-button-response@2.1.0/dist/index.browser.js.map
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-audio-button-response@2.1.1/dist/index.browser.js.map

package/dist/index.browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.browser.js","sources":["../../../node_modules/auto-bind/index.js","../package.json","../src/index.ts"],"sourcesContent":["'use strict';\n\n// Gets all non-builtin properties up the prototype chain\nconst getAllProperties = object => {\n\tconst properties = new Set();\n\n\tdo {\n\t\tfor (const key of Reflect.ownKeys(object)) {\n\t\t\tproperties.add([object, key]);\n\t\t}\n\t} while ((object = Reflect.getPrototypeOf(object)) && object !== Object.prototype);\n\n\treturn properties;\n};\n\nmodule.exports = (self, {include, exclude} = {}) => {\n\tconst filter = key => {\n\t\tconst match = pattern => typeof pattern === 'string' ? key === pattern : pattern.test(key);\n\n\t\tif (include) {\n\t\t\treturn include.some(match);\n\t\t}\n\n\t\tif (exclude) {\n\t\t\treturn !exclude.some(match);\n\t\t}\n\n\t\treturn true;\n\t};\n\n\tfor (const [object, key] of getAllProperties(self.constructor.prototype)) {\n\t\tif (key === 'constructor' || !filter(key)) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst descriptor = Reflect.getOwnPropertyDescriptor(object, key);\n\t\tif (descriptor && typeof descriptor.value === 'function') {\n\t\t\tself[key] = self[key].bind(self);\n\t\t}\n\t}\n\n\treturn self;\n};\n","{\n  \"name\": \"@jspsych/plugin-audio-button-response\",\n  \"version\": \"2.1.0\",\n  \"description\": \"jsPsych plugin for playing an audio file and getting a button response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-audio-button-response\"\n  },\n  \"author\": \"Kristin Diep\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/audio-button-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import autoBind from \"auto-bind\";\nimport { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { AudioPlayerInterface } from \"../../jspsych/src/modules/plugin-api/AudioPlayer\";\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"audio-button-response\",\n  version: version,\n  parameters: {\n    /** Path to audio file to be played. */\n    stimulus: {\n      type: ParameterType.AUDIO,\n      default: undefined,\n    },\n    /** Labels for the buttons. Each different string in the array will generate a different button.  */\n    choices: {\n      type: ParameterType.STRING,\n      default: undefined,\n      array: true,\n    },\n    /**\n     * A function that generates the HTML for each button in the `choices` array. The function gets the string\n     * and index of the item in the `choices` array and should return valid HTML. If you want to use different\n     * markup for each button, you can do that by using a conditional on either parameter. The default parameter\n     * returns a button element with the text label of the choice.\n     */\n    button_html: {\n      type: ParameterType.FUNCTION,\n      default: function (choice: string, choice_index: number) {\n        return `<button class=\"jspsych-btn\">${choice}</button>`;\n      },\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     *  is that it can be used to provide a reminder about the action the participant is supposed to take\n     * (e.g., which key to press). */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial\n     * will wait for a response indefinitely */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** Setting to `'grid'` will make the container element have the CSS property `display: grid` and enable the\n     * use of `grid_rows` and `grid_columns`. Setting to `'flex'` will make the container element have the CSS\n     * property `display: flex`. You can customize how the buttons are laid out by adding inline CSS in the `button_html` parameter.\n     */\n    button_layout: {\n      type: ParameterType.STRING,\n      default: \"grid\",\n    },\n    /** The number of rows in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the\n     * number of rows will be determined automatically based on the number of buttons and the number of columns.\n     */\n    grid_rows: {\n      type: ParameterType.INT,\n      default: 1,\n    },\n    /** The number of columns in the button grid. Only applicable when `button_layout` is set to `'grid'`.\n     * If null, the number of columns will be determined automatically based on the number of buttons and the\n     * number of rows.\n     */\n    grid_columns: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force\n     * the participant to listen to the stimulus for a fixed amount of time, even if they respond before the time is complete. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** If true, then the trial will end as soon as the audio file finishes playing.  */\n    trial_ends_after_audio: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n    /**\n     * If true, then responses are allowed while the audio is playing. If false, then the audio must finish\n     * playing before the button choices are enabled and a response is accepted. Once the audio has played\n     * all the way through, the buttons are enabled and a response is allowed (including while the audio is\n     * being re-played via on-screen playback controls).\n     */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** How long the button will delay enabling in milliseconds. If `response_allowed_while_playing` is `true`,\n     * the timer will start immediately. If it is `false`, the timer will start at the end of the audio. */\n    enable_button_after: {\n      type: ParameterType.INT,\n      default: 0,\n    },\n  },\n  data: {\n    /** The path of the audio file that was played. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first began playing until the participant's response.*/\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** Indicates which button the participant pressed. The first button in the `choices` array is 0, the second is 1, and so on. */\n    response: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * If the browser supports it, audio files are played using the WebAudio API. This allows for reasonably precise \n * timing of the playback. The timing of responses generated is measured against the WebAudio specific clock, \n * improving the measurement of response times. If the browser does not support the WebAudio API, then the audio file is \n * played with HTML5 audio. \n\n * Audio files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if \n * you are using timeline variables or another dynamic method to specify the audio stimulus, you will need \n * to [manually preload](../overview/media-preloading.md#manual-preloading) the audio.\n\n * The trial can end when the participant responds, when the audio file has finished playing, or if the participant \n * has failed to respond within a fixed length of time. You can also prevent a button response from being made before the \n * audio has finished playing.\n * \n * @author Kristin Diep\n * @see {@link https://www.jspsych.org/latest/plugins/audio-button-response/ audio-button-response plugin documentation on jspsych.org}\n */\nclass AudioButtonResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  private audio: AudioPlayerInterface;\n  private params: TrialType<Info>;\n  private buttonElements: HTMLElement[] = [];\n  private display: HTMLElement;\n  private response: { rt: number; button: number } = { rt: null, button: null };\n  private context: AudioContext;\n  private startTime: number;\n  private trial_complete: (trial_data: { rt: number; stimulus: string; response: number }) => void;\n\n  constructor(private jsPsych: JsPsych) {\n    autoBind(this);\n  }\n\n  async trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {\n    this.params = trial;\n    this.display = display_element;\n    // setup stimulus\n    this.context = this.jsPsych.pluginAPI.audioContext();\n\n    // load audio file\n    this.audio = await this.jsPsych.pluginAPI.getAudioPlayer(trial.stimulus);\n\n    // set up end event if trial needs it\n    if (trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.end_trial);\n    }\n\n    // enable buttons after audio ends if necessary\n    if (!trial.response_allowed_while_playing && !trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.enable_buttons);\n    }\n\n    // Display buttons\n    const buttonGroupElement = document.createElement(\"div\");\n    buttonGroupElement.id = \"jspsych-audio-button-response-btngroup\";\n    if (trial.button_layout === \"grid\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-grid\");\n      if (trial.grid_rows === null && trial.grid_columns === null) {\n        throw new Error(\n          \"You cannot set `grid_rows` to `null` without providing a value for `grid_columns`.\"\n        );\n      }\n      const n_cols =\n        trial.grid_columns === null\n          ? Math.ceil(trial.choices.length / trial.grid_rows)\n          : trial.grid_columns;\n      const n_rows =\n        trial.grid_rows === null\n          ? Math.ceil(trial.choices.length / trial.grid_columns)\n          : trial.grid_rows;\n      buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;\n      buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;\n    } else if (trial.button_layout === \"flex\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-flex\");\n    }\n\n    for (const [choiceIndex, choice] of trial.choices.entries()) {\n      buttonGroupElement.insertAdjacentHTML(\"beforeend\", trial.button_html(choice, choiceIndex));\n      const buttonElement = buttonGroupElement.lastChild as HTMLElement;\n      buttonElement.dataset.choice = choiceIndex.toString();\n      buttonElement.addEventListener(\"click\", () => {\n        this.after_response(choiceIndex);\n      });\n      this.buttonElements.push(buttonElement);\n    }\n\n    display_element.appendChild(buttonGroupElement);\n\n    // Show prompt if there is one\n    if (trial.prompt !== null) {\n      display_element.insertAdjacentHTML(\"beforeend\", trial.prompt);\n    }\n\n    if (trial.response_allowed_while_playing) {\n      if (trial.enable_button_after > 0) {\n        this.disable_buttons();\n        this.enable_buttons();\n      }\n    } else {\n      this.disable_buttons();\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        this.end_trial();\n      }, trial.trial_duration);\n    }\n\n    on_load();\n\n    // start time\n    this.startTime = performance.now();\n    if (this.context !== null) {\n      this.startTime = this.context.currentTime;\n    }\n\n    // start audio\n    this.audio.play();\n\n    return new Promise((resolve) => {\n      // hold the .resolve() function from the Promise that ends the trial\n      this.trial_complete = resolve;\n    });\n  }\n\n  private disable_buttons = () => {\n    for (const button of this.buttonElements) {\n      button.setAttribute(\"disabled\", \"disabled\");\n    }\n  };\n\n  private enable_buttons_without_delay = () => {\n    for (const button of this.buttonElements) {\n      button.removeAttribute(\"disabled\");\n    }\n  };\n\n  private enable_buttons_with_delay = (delay: number) => {\n    this.jsPsych.pluginAPI.setTimeout(this.enable_buttons_without_delay, delay);\n  };\n\n  private enable_buttons() {\n    if (this.params.enable_button_after > 0) {\n      this.enable_buttons_with_delay(this.params.enable_button_after);\n    } else {\n      this.enable_buttons_without_delay();\n    }\n  }\n\n  // function to handle responses by the subject\n  private after_response = (choice) => {\n    // measure rt\n    var endTime = performance.now();\n    var rt = Math.round(endTime - this.startTime);\n    if (this.context !== null) {\n      endTime = this.context.currentTime;\n      rt = Math.round((endTime - this.startTime) * 1000);\n    }\n    this.response.button = parseInt(choice);\n    this.response.rt = rt;\n\n    // disable all the buttons after a response\n    this.disable_buttons();\n\n    if (this.params.response_ends_trial) {\n      this.end_trial();\n    }\n  };\n\n  // method to end trial when it is time\n  private end_trial = () => {\n    // stop the audio file if it is playing\n    this.audio.stop();\n\n    // remove end event listeners if they exist\n    this.audio.removeEventListener(\"ended\", this.end_trial);\n    this.audio.removeEventListener(\"ended\", this.enable_buttons);\n\n    // gather the data to store for the trial\n    var trial_data = {\n      rt: this.response.rt,\n      stimulus: this.params.stimulus,\n      response: this.response.button,\n    };\n\n    // move on to the next trial\n    this.trial_complete(trial_data);\n  };\n\n  async simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt:\n        this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true) +\n        trial.enable_button_after,\n      response: this.jsPsych.randomization.randomInt(0, trial.choices.length - 1),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.clickTarget(\n          display_element.querySelector(\n            `#jspsych-audio-button-response-btngroup [data-choice=\"${data.response}\"]`\n          ),\n          data.rt\n        );\n      }\n    };\n\n    this.trial(display_element, trial, () => {\n      load_callback();\n      if (!trial.response_allowed_while_playing) {\n        this.audio.addEventListener(\"ended\", respond);\n      } else {\n        respond();\n      }\n    });\n  }\n}\n\nexport default AudioButtonResponsePlugin;\n"],"names":[],"mappings":";;;;;;;CAEA;CACA,MAAM,gBAAgB,GAAG,MAAM,IAAI;CACnC,CAAC,MAAM,UAAU,GAAG,IAAI,GAAG,EAAE,CAAA;;CAE7B,CAAC,GAAG;CACJ,EAAE,KAAK,MAAM,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;CAC7C,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;CAChC,GAAA;CACA,EAAE,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,MAAM,KAAK,MAAM,CAAC,SAAS,EAAA;;CAElF,CAAC,OAAO,UAAU,CAAA;CAClB,CAAC,CAAA;;KAED,QAAc,GAAG,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,EAAE,KAAK;CACpD,CAAC,MAAM,MAAM,GAAG,GAAG,IAAI;CACvB,EAAE,MAAM,KAAK,GAAG,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,GAAG,GAAG,KAAK,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;;CAE5F,EAAE,IAAI,OAAO,EAAE;CACf,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;CAC7B,GAAA;;CAEA,EAAE,IAAI,OAAO,EAAE;CACf,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;CAC9B,GAAA;;CAEA,EAAE,OAAO,IAAI,CAAA;CACb,EAAE,CAAA;;CAEF,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE;CAC3E,EAAE,IAAI,GAAG,KAAK,aAAa,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;CAC7C,GAAG,SAAA;CACH,GAAA;;CAEA,EAAE,MAAM,UAAU,GAAG,OAAO,CAAC,wBAAwB,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAClE,EAAE,IAAI,UAAU,IAAI,OAAO,UAAU,CAAC,KAAK,KAAK,UAAU,EAAE;CAC5D,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;CACnC,GAAA;CACA,EAAA;;CAEA,CAAC,OAAO,IAAI,CAAA;CACZ,CAAC,CAAA;;;;CCxCC,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCmHA,SAAA,EAAA;CAAA;;IAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.browser.js","sources":["../../../node_modules/auto-bind/index.js","../package.json","../src/index.ts"],"sourcesContent":["'use strict';\n\n// Gets all non-builtin properties up the prototype chain\nconst getAllProperties = object => {\n\tconst properties = new Set();\n\n\tdo {\n\t\tfor (const key of Reflect.ownKeys(object)) {\n\t\t\tproperties.add([object, key]);\n\t\t}\n\t} while ((object = Reflect.getPrototypeOf(object)) && object !== Object.prototype);\n\n\treturn properties;\n};\n\nmodule.exports = (self, {include, exclude} = {}) => {\n\tconst filter = key => {\n\t\tconst match = pattern => typeof pattern === 'string' ? key === pattern : pattern.test(key);\n\n\t\tif (include) {\n\t\t\treturn include.some(match);\n\t\t}\n\n\t\tif (exclude) {\n\t\t\treturn !exclude.some(match);\n\t\t}\n\n\t\treturn true;\n\t};\n\n\tfor (const [object, key] of getAllProperties(self.constructor.prototype)) {\n\t\tif (key === 'constructor' || !filter(key)) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst descriptor = Reflect.getOwnPropertyDescriptor(object, key);\n\t\tif (descriptor && typeof descriptor.value === 'function') {\n\t\t\tself[key] = self[key].bind(self);\n\t\t}\n\t}\n\n\treturn self;\n};\n","{\n  \"name\": \"@jspsych/plugin-audio-button-response\",\n  \"version\": \"2.1.1\",\n  \"description\": \"jsPsych plugin for playing an audio file and getting a button response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-audio-button-response\"\n  },\n  \"author\": \"Kristin Diep\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/audio-button-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import autoBind from \"auto-bind\";\nimport { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { AudioPlayerInterface } from \"../../jspsych/src/modules/plugin-api/AudioPlayer\";\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"audio-button-response\",\n  version: version,\n  parameters: {\n    /** Path to audio file to be played. */\n    stimulus: {\n      type: ParameterType.AUDIO,\n      default: undefined,\n    },\n    /** Labels for the buttons. Each different string in the array will generate a different button.  */\n    choices: {\n      type: ParameterType.STRING,\n      default: undefined,\n      array: true,\n    },\n    /**\n     * A function that generates the HTML for each button in the `choices` array. The function gets the string\n     * and index of the item in the `choices` array and should return valid HTML. If you want to use different\n     * markup for each button, you can do that by using a conditional on either parameter. The default parameter\n     * returns a button element with the text label of the choice.\n     */\n    button_html: {\n      type: ParameterType.FUNCTION,\n      default: function (choice: string, choice_index: number) {\n        return `<button class=\"jspsych-btn\">${choice}</button>`;\n      },\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     *  is that it can be used to provide a reminder about the action the participant is supposed to take\n     * (e.g., which key to press). */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial\n     * will wait for a response indefinitely */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** Setting to `'grid'` will make the container element have the CSS property `display: grid` and enable the\n     * use of `grid_rows` and `grid_columns`. Setting to `'flex'` will make the container element have the CSS\n     * property `display: flex`. You can customize how the buttons are laid out by adding inline CSS in the `button_html` parameter.\n     */\n    button_layout: {\n      type: ParameterType.STRING,\n      default: \"grid\",\n    },\n    /** The number of rows in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the\n     * number of rows will be determined automatically based on the number of buttons and the number of columns.\n     */\n    grid_rows: {\n      type: ParameterType.INT,\n      default: 1,\n    },\n    /** The number of columns in the button grid. Only applicable when `button_layout` is set to `'grid'`.\n     * If null, the number of columns will be determined automatically based on the number of buttons and the\n     * number of rows.\n     */\n    grid_columns: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force\n     * the participant to listen to the stimulus for a fixed amount of time, even if they respond before the time is complete. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** If true, then the trial will end as soon as the audio file finishes playing.  */\n    trial_ends_after_audio: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n    /**\n     * If true, then responses are allowed while the audio is playing. If false, then the audio must finish\n     * playing before the button choices are enabled and a response is accepted. Once the audio has played\n     * all the way through, the buttons are enabled and a response is allowed (including while the audio is\n     * being re-played via on-screen playback controls).\n     */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** How long the button will delay enabling in milliseconds. If `response_allowed_while_playing` is `true`,\n     * the timer will start immediately. If it is `false`, the timer will start at the end of the audio. */\n    enable_button_after: {\n      type: ParameterType.INT,\n      default: 0,\n    },\n  },\n  data: {\n    /** The path of the audio file that was played. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first began playing until the participant's response.*/\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** Indicates which button the participant pressed. The first button in the `choices` array is 0, the second is 1, and so on. */\n    response: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * If the browser supports it, audio files are played using the WebAudio API. This allows for reasonably precise \n * timing of the playback. The timing of responses generated is measured against the WebAudio specific clock, \n * improving the measurement of response times. If the browser does not support the WebAudio API, then the audio file is \n * played with HTML5 audio. \n\n * Audio files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if \n * you are using timeline variables or another dynamic method to specify the audio stimulus, you will need \n * to [manually preload](../overview/media-preloading.md#manual-preloading) the audio.\n\n * The trial can end when the participant responds, when the audio file has finished playing, or if the participant \n * has failed to respond within a fixed length of time. You can also prevent a button response from being made before the \n * audio has finished playing.\n * \n * @author Kristin Diep\n * @see {@link https://www.jspsych.org/latest/plugins/audio-button-response/ audio-button-response plugin documentation on jspsych.org}\n */\nclass AudioButtonResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  private audio: AudioPlayerInterface;\n  private params: TrialType<Info>;\n  private buttonElements: HTMLElement[] = [];\n  private display: HTMLElement;\n  private response: { rt: number; button: number } = { rt: null, button: null };\n  private context: AudioContext;\n  private startTime: number;\n  private trial_complete: (trial_data: { rt: number; stimulus: string; response: number }) => void;\n\n  constructor(private jsPsych: JsPsych) {\n    autoBind(this);\n  }\n\n  async trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {\n    this.params = trial;\n    this.display = display_element;\n    // setup stimulus\n    this.context = this.jsPsych.pluginAPI.audioContext();\n\n    // load audio file\n    this.audio = await this.jsPsych.pluginAPI.getAudioPlayer(trial.stimulus);\n\n    // set up end event if trial needs it\n    if (trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.end_trial);\n    }\n\n    // enable buttons after audio ends if necessary\n    if (!trial.response_allowed_while_playing && !trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.enable_buttons);\n    }\n\n    // Display buttons\n    const buttonGroupElement = document.createElement(\"div\");\n    buttonGroupElement.id = \"jspsych-audio-button-response-btngroup\";\n    if (trial.button_layout === \"grid\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-grid\");\n      if (trial.grid_rows === null && trial.grid_columns === null) {\n        throw new Error(\n          \"You cannot set `grid_rows` to `null` without providing a value for `grid_columns`.\"\n        );\n      }\n      const n_cols =\n        trial.grid_columns === null\n          ? Math.ceil(trial.choices.length / trial.grid_rows)\n          : trial.grid_columns;\n      const n_rows =\n        trial.grid_rows === null\n          ? Math.ceil(trial.choices.length / trial.grid_columns)\n          : trial.grid_rows;\n      buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;\n      buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;\n    } else if (trial.button_layout === \"flex\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-flex\");\n    }\n\n    for (const [choiceIndex, choice] of trial.choices.entries()) {\n      buttonGroupElement.insertAdjacentHTML(\"beforeend\", trial.button_html(choice, choiceIndex));\n      const buttonElement = buttonGroupElement.lastChild as HTMLElement;\n      buttonElement.dataset.choice = choiceIndex.toString();\n      buttonElement.addEventListener(\"click\", () => {\n        this.after_response(choiceIndex);\n      });\n      this.buttonElements.push(buttonElement);\n    }\n\n    display_element.appendChild(buttonGroupElement);\n\n    // Show prompt if there is one\n    if (trial.prompt !== null) {\n      display_element.insertAdjacentHTML(\"beforeend\", trial.prompt);\n    }\n\n    if (trial.response_allowed_while_playing) {\n      if (trial.enable_button_after > 0) {\n        this.disable_buttons();\n        this.enable_buttons();\n      }\n    } else {\n      this.disable_buttons();\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        this.end_trial();\n      }, trial.trial_duration);\n    }\n\n    on_load();\n\n    // start time\n    this.startTime = performance.now();\n    if (this.context !== null) {\n      this.startTime = this.context.currentTime;\n    }\n\n    // start audio\n    this.audio.play();\n\n    return new Promise((resolve) => {\n      // hold the .resolve() function from the Promise that ends the trial\n      this.trial_complete = resolve;\n    });\n  }\n\n  private disable_buttons = () => {\n    for (const button of this.buttonElements) {\n      button.setAttribute(\"disabled\", \"disabled\");\n    }\n  };\n\n  private enable_buttons_without_delay = () => {\n    for (const button of this.buttonElements) {\n      button.removeAttribute(\"disabled\");\n    }\n  };\n\n  private enable_buttons_with_delay = (delay: number) => {\n    this.jsPsych.pluginAPI.setTimeout(this.enable_buttons_without_delay, delay);\n  };\n\n  private enable_buttons() {\n    if (this.params.enable_button_after > 0) {\n      this.enable_buttons_with_delay(this.params.enable_button_after);\n    } else {\n      this.enable_buttons_without_delay();\n    }\n  }\n\n  // function to handle responses by the subject\n  private after_response = (choice) => {\n    // measure rt\n    var endTime = performance.now();\n    var rt = Math.round(endTime - this.startTime);\n    if (this.context !== null) {\n      endTime = this.context.currentTime;\n      rt = Math.round((endTime - this.startTime) * 1000);\n    }\n    this.response.button = parseInt(choice);\n    this.response.rt = rt;\n\n    // disable all the buttons after a response\n    this.disable_buttons();\n\n    if (this.params.response_ends_trial) {\n      this.end_trial();\n    }\n  };\n\n  // method to end trial when it is time\n  private end_trial = () => {\n    // remove end event listeners if they exist\n    this.audio.removeEventListener(\"ended\", this.end_trial);\n    this.audio.removeEventListener(\"ended\", this.enable_buttons);\n\n    // stop the audio file if it is playing\n    this.audio.stop();\n\n    // gather the data to store for the trial\n    var trial_data = {\n      rt: this.response.rt,\n      stimulus: this.params.stimulus,\n      response: this.response.button,\n    };\n\n    // move on to the next trial\n    this.trial_complete(trial_data);\n  };\n\n  async simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt:\n        this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true) +\n        trial.enable_button_after,\n      response: this.jsPsych.randomization.randomInt(0, trial.choices.length - 1),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.clickTarget(\n          display_element.querySelector(\n            `#jspsych-audio-button-response-btngroup [data-choice=\"${data.response}\"]`\n          ),\n          data.rt\n        );\n      }\n    };\n\n    this.trial(display_element, trial, () => {\n      load_callback();\n      if (!trial.response_allowed_while_playing) {\n        this.audio.addEventListener(\"ended\", respond);\n      } else {\n        respond();\n      }\n    });\n  }\n}\n\nexport default AudioButtonResponsePlugin;\n"],"names":[],"mappings":";;;;;;;CAEA;CACA,MAAM,gBAAgB,GAAG,MAAM,IAAI;CACnC,CAAC,MAAM,UAAU,GAAG,IAAI,GAAG,EAAE,CAAA;;CAE7B,CAAC,GAAG;CACJ,EAAE,KAAK,MAAM,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;CAC7C,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;CAChC,GAAA;CACA,EAAE,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,MAAM,KAAK,MAAM,CAAC,SAAS,EAAA;;CAElF,CAAC,OAAO,UAAU,CAAA;CAClB,CAAC,CAAA;;KAED,QAAc,GAAG,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,EAAE,KAAK;CACpD,CAAC,MAAM,MAAM,GAAG,GAAG,IAAI;CACvB,EAAE,MAAM,KAAK,GAAG,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,GAAG,GAAG,KAAK,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;;CAE5F,EAAE,IAAI,OAAO,EAAE;CACf,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;CAC7B,GAAA;;CAEA,EAAE,IAAI,OAAO,EAAE;CACf,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;CAC9B,GAAA;;CAEA,EAAE,OAAO,IAAI,CAAA;CACb,EAAE,CAAA;;CAEF,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE;CAC3E,EAAE,IAAI,GAAG,KAAK,aAAa,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;CAC7C,GAAG,SAAA;CACH,GAAA;;CAEA,EAAE,MAAM,UAAU,GAAG,OAAO,CAAC,wBAAwB,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAClE,EAAE,IAAI,UAAU,IAAI,OAAO,UAAU,CAAC,KAAK,KAAK,UAAU,EAAE;CAC5D,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;CACnC,GAAA;CACA,EAAA;;CAEA,CAAC,OAAO,IAAI,CAAA;CACZ,CAAC,CAAA;;;;CCxCC,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCmHA,SAAA,EAAA;CAAA;;IAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/index.browser.min.js

@@ -1,2 +1,2 @@
-var jsPsychAudioButtonResponse=function(i){"use strict";function c(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}const _=r=>{const s=new Set;do for(const t of Reflect.ownKeys(r))s.add([r,t]);while((r=Reflect.getPrototypeOf(r))&&r!==Object.prototype);return s};var m=(r,{include:s,exclude:t}={})=>{const a=e=>{const n=o=>typeof o=="string"?e===o:o.test(e);return s?s.some(n):t?!t.some(n):!0};for(const[e,n]of _(r.constructor.prototype)){if(n==="constructor"||!a(n))continue;const o=Reflect.getOwnPropertyDescriptor(e,n);o&&typeof o.value=="function"&&(r[n]=r[n].bind(r))}return r},y=c(m),b="2.1.0",h=(r,s,t)=>new Promise((a,e)=>{var n=u=>{try{l(t.next(u))}catch(d){e(d)}},o=u=>{try{l(t.throw(u))}catch(d){e(d)}},l=u=>u.done?a(u.value):Promise.resolve(u.value).then(n,o);l((t=t.apply(r,s)).next())});const f={name:"audio-button-response",version:b,parameters:{stimulus:{type:i.ParameterType.AUDIO,default:void 0},choices:{type:i.ParameterType.STRING,default:void 0,array:!0},button_html:{type:i.ParameterType.FUNCTION,default:function(r,s){return`<button class="jspsych-btn">${r}</button>`}},prompt:{type:i.ParameterType.HTML_STRING,default:null},trial_duration:{type:i.ParameterType.INT,default:null},button_layout:{type:i.ParameterType.STRING,default:"grid"},grid_rows:{type:i.ParameterType.INT,default:1},grid_columns:{type:i.ParameterType.INT,default:null},response_ends_trial:{type:i.ParameterType.BOOL,default:!0},trial_ends_after_audio:{type:i.ParameterType.BOOL,default:!1},response_allowed_while_playing:{type:i.ParameterType.BOOL,default:!0},enable_button_after:{type:i.ParameterType.INT,default:0}},data:{stimulus:{type:i.ParameterType.STRING},rt:{type:i.ParameterType.INT},response:{type:i.ParameterType.INT}},citations:{apa:"de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",bibtex:'@article{Leeuw2023jsPsych, 	author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, 	journal = {Journal of Open Source Software}, 	doi = {10.21105/joss.05351}, 	issn = {2475-9066}, 	number = {85}, 	year = {2023}, 	month = {may 11}, 	pages = {5351}, 	publisher = {Open Journals}, 	title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, 	url = {https://joss.theoj.org/papers/10.21105/joss.05351}, 	volume = {8}, }  '}};class p{constructor(s){this.jsPsych=s,this.buttonElements=[],this.response={rt:null,button:null},this.disable_buttons=()=>{for(const t of this.buttonElements)t.setAttribute("disabled","disabled")},this.enable_buttons_without_delay=()=>{for(const t of this.buttonElements)t.removeAttribute("disabled")},this.enable_buttons_with_delay=t=>{this.jsPsych.pluginAPI.setTimeout(this.enable_buttons_without_delay,t)},this.after_response=t=>{var a=performance.now(),e=Math.round(a-this.startTime);this.context!==null&&(a=this.context.currentTime,e=Math.round((a-this.startTime)*1e3)),this.response.button=parseInt(t),this.response.rt=e,this.disable_buttons(),this.params.response_ends_trial&&this.end_trial()},this.end_trial=()=>{this.audio.stop(),this.audio.removeEventListener("ended",this.end_trial),this.audio.removeEventListener("ended",this.enable_buttons);var t={rt:this.response.rt,stimulus:this.params.stimulus,response:this.response.button};this.trial_complete(t)},y(this)}trial(s,t,a){return h(this,null,function*(){this.params=t,this.display=s,this.context=this.jsPsych.pluginAPI.audioContext(),this.audio=yield this.jsPsych.pluginAPI.getAudioPlayer(t.stimulus),t.trial_ends_after_audio&&this.audio.addEventListener("ended",this.end_trial),!t.response_allowed_while_playing&&!t.trial_ends_after_audio&&this.audio.addEventListener("ended",this.enable_buttons);const e=document.createElement("div");if(e.id="jspsych-audio-button-response-btngroup",t.button_layout==="grid"){if(e.classList.add("jspsych-btn-group-grid"),t.grid_rows===null&&t.grid_columns===null)throw new Error("You cannot set `grid_rows` to `null` without providing a value for `grid_columns`.");const n=t.grid_columns===null?Math.ceil(t.choices.length/t.grid_rows):t.grid_columns,o=t.grid_rows===null?Math.ceil(t.choices.length/t.grid_columns):t.grid_rows;e.style.gridTemplateColumns=`repeat(${n}, 1fr)`,e.style.gridTemplateRows=`repeat(${o}, 1fr)`}else t.button_layout==="flex"&&e.classList.add("jspsych-btn-group-flex");for(const[n,o]of t.choices.entries()){e.insertAdjacentHTML("beforeend",t.button_html(o,n));const l=e.lastChild;l.dataset.choice=n.toString(),l.addEventListener("click",()=>{this.after_response(n)}),this.buttonElements.push(l)}return s.appendChild(e),t.prompt!==null&&s.insertAdjacentHTML("beforeend",t.prompt),t.response_allowed_while_playing?t.enable_button_after>0&&(this.disable_buttons(),this.enable_buttons()):this.disable_buttons(),t.trial_duration!==null&&this.jsPsych.pluginAPI.setTimeout(()=>{this.end_trial()},t.trial_duration),a(),this.startTime=performance.now(),this.context!==null&&(this.startTime=this.context.currentTime),this.audio.play(),new Promise(n=>{this.trial_complete=n})})}enable_buttons(){this.params.enable_button_after>0?this.enable_buttons_with_delay(this.params.enable_button_after):this.enable_buttons_without_delay()}simulate(s,t,a,e){return h(this,null,function*(){t=="data-only"&&(e(),this.simulate_data_only(s,a)),t=="visual"&&this.simulate_visual(s,a,e)})}create_simulation_data(s,t){const a={stimulus:s.stimulus,rt:this.jsPsych.randomization.sampleExGaussian(500,50,.006666666666666667,!0)+s.enable_button_after,response:this.jsPsych.randomization.randomInt(0,s.choices.length-1)},e=this.jsPsych.pluginAPI.mergeSimulationData(a,t);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(s,e),e}simulate_data_only(s,t){const a=this.create_simulation_data(s,t);this.jsPsych.finishTrial(a)}simulate_visual(s,t,a){const e=this.create_simulation_data(s,t),n=this.jsPsych.getDisplayElement(),o=()=>{e.rt!==null&&this.jsPsych.pluginAPI.clickTarget(n.querySelector(`#jspsych-audio-button-response-btngroup [data-choice="${e.response}"]`),e.rt)};this.trial(n,s,()=>{a(),s.response_allowed_while_playing?o():this.audio.addEventListener("ended",o)})}}return p.info=f,p}(jsPsychModule);
-//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-audio-button-response@2.1.0/dist/index.browser.min.js.map
+var jsPsychAudioButtonResponse=function(i){"use strict";function c(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}const _=r=>{const s=new Set;do for(const t of Reflect.ownKeys(r))s.add([r,t]);while((r=Reflect.getPrototypeOf(r))&&r!==Object.prototype);return s};var m=(r,{include:s,exclude:t}={})=>{const a=e=>{const n=o=>typeof o=="string"?e===o:o.test(e);return s?s.some(n):t?!t.some(n):!0};for(const[e,n]of _(r.constructor.prototype)){if(n==="constructor"||!a(n))continue;const o=Reflect.getOwnPropertyDescriptor(e,n);o&&typeof o.value=="function"&&(r[n]=r[n].bind(r))}return r},y=c(m),b="2.1.1",h=(r,s,t)=>new Promise((a,e)=>{var n=u=>{try{l(t.next(u))}catch(d){e(d)}},o=u=>{try{l(t.throw(u))}catch(d){e(d)}},l=u=>u.done?a(u.value):Promise.resolve(u.value).then(n,o);l((t=t.apply(r,s)).next())});const f={name:"audio-button-response",version:b,parameters:{stimulus:{type:i.ParameterType.AUDIO,default:void 0},choices:{type:i.ParameterType.STRING,default:void 0,array:!0},button_html:{type:i.ParameterType.FUNCTION,default:function(r,s){return`<button class="jspsych-btn">${r}</button>`}},prompt:{type:i.ParameterType.HTML_STRING,default:null},trial_duration:{type:i.ParameterType.INT,default:null},button_layout:{type:i.ParameterType.STRING,default:"grid"},grid_rows:{type:i.ParameterType.INT,default:1},grid_columns:{type:i.ParameterType.INT,default:null},response_ends_trial:{type:i.ParameterType.BOOL,default:!0},trial_ends_after_audio:{type:i.ParameterType.BOOL,default:!1},response_allowed_while_playing:{type:i.ParameterType.BOOL,default:!0},enable_button_after:{type:i.ParameterType.INT,default:0}},data:{stimulus:{type:i.ParameterType.STRING},rt:{type:i.ParameterType.INT},response:{type:i.ParameterType.INT}},citations:{apa:"de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",bibtex:'@article{Leeuw2023jsPsych, 	author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, 	journal = {Journal of Open Source Software}, 	doi = {10.21105/joss.05351}, 	issn = {2475-9066}, 	number = {85}, 	year = {2023}, 	month = {may 11}, 	pages = {5351}, 	publisher = {Open Journals}, 	title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, 	url = {https://joss.theoj.org/papers/10.21105/joss.05351}, 	volume = {8}, }  '}};class p{constructor(s){this.jsPsych=s,this.buttonElements=[],this.response={rt:null,button:null},this.disable_buttons=()=>{for(const t of this.buttonElements)t.setAttribute("disabled","disabled")},this.enable_buttons_without_delay=()=>{for(const t of this.buttonElements)t.removeAttribute("disabled")},this.enable_buttons_with_delay=t=>{this.jsPsych.pluginAPI.setTimeout(this.enable_buttons_without_delay,t)},this.after_response=t=>{var a=performance.now(),e=Math.round(a-this.startTime);this.context!==null&&(a=this.context.currentTime,e=Math.round((a-this.startTime)*1e3)),this.response.button=parseInt(t),this.response.rt=e,this.disable_buttons(),this.params.response_ends_trial&&this.end_trial()},this.end_trial=()=>{this.audio.removeEventListener("ended",this.end_trial),this.audio.removeEventListener("ended",this.enable_buttons),this.audio.stop();var t={rt:this.response.rt,stimulus:this.params.stimulus,response:this.response.button};this.trial_complete(t)},y(this)}trial(s,t,a){return h(this,null,function*(){this.params=t,this.display=s,this.context=this.jsPsych.pluginAPI.audioContext(),this.audio=yield this.jsPsych.pluginAPI.getAudioPlayer(t.stimulus),t.trial_ends_after_audio&&this.audio.addEventListener("ended",this.end_trial),!t.response_allowed_while_playing&&!t.trial_ends_after_audio&&this.audio.addEventListener("ended",this.enable_buttons);const e=document.createElement("div");if(e.id="jspsych-audio-button-response-btngroup",t.button_layout==="grid"){if(e.classList.add("jspsych-btn-group-grid"),t.grid_rows===null&&t.grid_columns===null)throw new Error("You cannot set `grid_rows` to `null` without providing a value for `grid_columns`.");const n=t.grid_columns===null?Math.ceil(t.choices.length/t.grid_rows):t.grid_columns,o=t.grid_rows===null?Math.ceil(t.choices.length/t.grid_columns):t.grid_rows;e.style.gridTemplateColumns=`repeat(${n}, 1fr)`,e.style.gridTemplateRows=`repeat(${o}, 1fr)`}else t.button_layout==="flex"&&e.classList.add("jspsych-btn-group-flex");for(const[n,o]of t.choices.entries()){e.insertAdjacentHTML("beforeend",t.button_html(o,n));const l=e.lastChild;l.dataset.choice=n.toString(),l.addEventListener("click",()=>{this.after_response(n)}),this.buttonElements.push(l)}return s.appendChild(e),t.prompt!==null&&s.insertAdjacentHTML("beforeend",t.prompt),t.response_allowed_while_playing?t.enable_button_after>0&&(this.disable_buttons(),this.enable_buttons()):this.disable_buttons(),t.trial_duration!==null&&this.jsPsych.pluginAPI.setTimeout(()=>{this.end_trial()},t.trial_duration),a(),this.startTime=performance.now(),this.context!==null&&(this.startTime=this.context.currentTime),this.audio.play(),new Promise(n=>{this.trial_complete=n})})}enable_buttons(){this.params.enable_button_after>0?this.enable_buttons_with_delay(this.params.enable_button_after):this.enable_buttons_without_delay()}simulate(s,t,a,e){return h(this,null,function*(){t=="data-only"&&(e(),this.simulate_data_only(s,a)),t=="visual"&&this.simulate_visual(s,a,e)})}create_simulation_data(s,t){const a={stimulus:s.stimulus,rt:this.jsPsych.randomization.sampleExGaussian(500,50,.006666666666666667,!0)+s.enable_button_after,response:this.jsPsych.randomization.randomInt(0,s.choices.length-1)},e=this.jsPsych.pluginAPI.mergeSimulationData(a,t);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(s,e),e}simulate_data_only(s,t){const a=this.create_simulation_data(s,t);this.jsPsych.finishTrial(a)}simulate_visual(s,t,a){const e=this.create_simulation_data(s,t),n=this.jsPsych.getDisplayElement(),o=()=>{e.rt!==null&&this.jsPsych.pluginAPI.clickTarget(n.querySelector(`#jspsych-audio-button-response-btngroup [data-choice="${e.response}"]`),e.rt)};this.trial(n,s,()=>{a(),s.response_allowed_while_playing?o():this.audio.addEventListener("ended",o)})}}return p.info=f,p}(jsPsychModule);
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-audio-button-response@2.1.1/dist/index.browser.min.js.map

package/dist/index.browser.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.browser.min.js","sources":["../../../node_modules/auto-bind/index.js","../package.json","../src/index.ts"],"sourcesContent":["'use strict';\n\n// Gets all non-builtin properties up the prototype chain\nconst getAllProperties = object => {\n\tconst properties = new Set();\n\n\tdo {\n\t\tfor (const key of Reflect.ownKeys(object)) {\n\t\t\tproperties.add([object, key]);\n\t\t}\n\t} while ((object = Reflect.getPrototypeOf(object)) && object !== Object.prototype);\n\n\treturn properties;\n};\n\nmodule.exports = (self, {include, exclude} = {}) => {\n\tconst filter = key => {\n\t\tconst match = pattern => typeof pattern === 'string' ? key === pattern : pattern.test(key);\n\n\t\tif (include) {\n\t\t\treturn include.some(match);\n\t\t}\n\n\t\tif (exclude) {\n\t\t\treturn !exclude.some(match);\n\t\t}\n\n\t\treturn true;\n\t};\n\n\tfor (const [object, key] of getAllProperties(self.constructor.prototype)) {\n\t\tif (key === 'constructor' || !filter(key)) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst descriptor = Reflect.getOwnPropertyDescriptor(object, key);\n\t\tif (descriptor && typeof descriptor.value === 'function') {\n\t\t\tself[key] = self[key].bind(self);\n\t\t}\n\t}\n\n\treturn self;\n};\n","{\n  \"name\": \"@jspsych/plugin-audio-button-response\",\n  \"version\": \"2.1.0\",\n  \"description\": \"jsPsych plugin for playing an audio file and getting a button response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-audio-button-response\"\n  },\n  \"author\": \"Kristin Diep\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/audio-button-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import autoBind from \"auto-bind\";\nimport { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { AudioPlayerInterface } from \"../../jspsych/src/modules/plugin-api/AudioPlayer\";\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"audio-button-response\",\n  version: version,\n  parameters: {\n    /** Path to audio file to be played. */\n    stimulus: {\n      type: ParameterType.AUDIO,\n      default: undefined,\n    },\n    /** Labels for the buttons. Each different string in the array will generate a different button.  */\n    choices: {\n      type: ParameterType.STRING,\n      default: undefined,\n      array: true,\n    },\n    /**\n     * A function that generates the HTML for each button in the `choices` array. The function gets the string\n     * and index of the item in the `choices` array and should return valid HTML. If you want to use different\n     * markup for each button, you can do that by using a conditional on either parameter. The default parameter\n     * returns a button element with the text label of the choice.\n     */\n    button_html: {\n      type: ParameterType.FUNCTION,\n      default: function (choice: string, choice_index: number) {\n        return `<button class=\"jspsych-btn\">${choice}</button>`;\n      },\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     *  is that it can be used to provide a reminder about the action the participant is supposed to take\n     * (e.g., which key to press). */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial\n     * will wait for a response indefinitely */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** Setting to `'grid'` will make the container element have the CSS property `display: grid` and enable the\n     * use of `grid_rows` and `grid_columns`. Setting to `'flex'` will make the container element have the CSS\n     * property `display: flex`. You can customize how the buttons are laid out by adding inline CSS in the `button_html` parameter.\n     */\n    button_layout: {\n      type: ParameterType.STRING,\n      default: \"grid\",\n    },\n    /** The number of rows in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the\n     * number of rows will be determined automatically based on the number of buttons and the number of columns.\n     */\n    grid_rows: {\n      type: ParameterType.INT,\n      default: 1,\n    },\n    /** The number of columns in the button grid. Only applicable when `button_layout` is set to `'grid'`.\n     * If null, the number of columns will be determined automatically based on the number of buttons and the\n     * number of rows.\n     */\n    grid_columns: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force\n     * the participant to listen to the stimulus for a fixed amount of time, even if they respond before the time is complete. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** If true, then the trial will end as soon as the audio file finishes playing.  */\n    trial_ends_after_audio: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n    /**\n     * If true, then responses are allowed while the audio is playing. If false, then the audio must finish\n     * playing before the button choices are enabled and a response is accepted. Once the audio has played\n     * all the way through, the buttons are enabled and a response is allowed (including while the audio is\n     * being re-played via on-screen playback controls).\n     */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** How long the button will delay enabling in milliseconds. If `response_allowed_while_playing` is `true`,\n     * the timer will start immediately. If it is `false`, the timer will start at the end of the audio. */\n    enable_button_after: {\n      type: ParameterType.INT,\n      default: 0,\n    },\n  },\n  data: {\n    /** The path of the audio file that was played. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first began playing until the participant's response.*/\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** Indicates which button the participant pressed. The first button in the `choices` array is 0, the second is 1, and so on. */\n    response: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * If the browser supports it, audio files are played using the WebAudio API. This allows for reasonably precise \n * timing of the playback. The timing of responses generated is measured against the WebAudio specific clock, \n * improving the measurement of response times. If the browser does not support the WebAudio API, then the audio file is \n * played with HTML5 audio. \n\n * Audio files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if \n * you are using timeline variables or another dynamic method to specify the audio stimulus, you will need \n * to [manually preload](../overview/media-preloading.md#manual-preloading) the audio.\n\n * The trial can end when the participant responds, when the audio file has finished playing, or if the participant \n * has failed to respond within a fixed length of time. You can also prevent a button response from being made before the \n * audio has finished playing.\n * \n * @author Kristin Diep\n * @see {@link https://www.jspsych.org/latest/plugins/audio-button-response/ audio-button-response plugin documentation on jspsych.org}\n */\nclass AudioButtonResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  private audio: AudioPlayerInterface;\n  private params: TrialType<Info>;\n  private buttonElements: HTMLElement[] = [];\n  private display: HTMLElement;\n  private response: { rt: number; button: number } = { rt: null, button: null };\n  private context: AudioContext;\n  private startTime: number;\n  private trial_complete: (trial_data: { rt: number; stimulus: string; response: number }) => void;\n\n  constructor(private jsPsych: JsPsych) {\n    autoBind(this);\n  }\n\n  async trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {\n    this.params = trial;\n    this.display = display_element;\n    // setup stimulus\n    this.context = this.jsPsych.pluginAPI.audioContext();\n\n    // load audio file\n    this.audio = await this.jsPsych.pluginAPI.getAudioPlayer(trial.stimulus);\n\n    // set up end event if trial needs it\n    if (trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.end_trial);\n    }\n\n    // enable buttons after audio ends if necessary\n    if (!trial.response_allowed_while_playing && !trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.enable_buttons);\n    }\n\n    // Display buttons\n    const buttonGroupElement = document.createElement(\"div\");\n    buttonGroupElement.id = \"jspsych-audio-button-response-btngroup\";\n    if (trial.button_layout === \"grid\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-grid\");\n      if (trial.grid_rows === null && trial.grid_columns === null) {\n        throw new Error(\n          \"You cannot set `grid_rows` to `null` without providing a value for `grid_columns`.\"\n        );\n      }\n      const n_cols =\n        trial.grid_columns === null\n          ? Math.ceil(trial.choices.length / trial.grid_rows)\n          : trial.grid_columns;\n      const n_rows =\n        trial.grid_rows === null\n          ? Math.ceil(trial.choices.length / trial.grid_columns)\n          : trial.grid_rows;\n      buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;\n      buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;\n    } else if (trial.button_layout === \"flex\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-flex\");\n    }\n\n    for (const [choiceIndex, choice] of trial.choices.entries()) {\n      buttonGroupElement.insertAdjacentHTML(\"beforeend\", trial.button_html(choice, choiceIndex));\n      const buttonElement = buttonGroupElement.lastChild as HTMLElement;\n      buttonElement.dataset.choice = choiceIndex.toString();\n      buttonElement.addEventListener(\"click\", () => {\n        this.after_response(choiceIndex);\n      });\n      this.buttonElements.push(buttonElement);\n    }\n\n    display_element.appendChild(buttonGroupElement);\n\n    // Show prompt if there is one\n    if (trial.prompt !== null) {\n      display_element.insertAdjacentHTML(\"beforeend\", trial.prompt);\n    }\n\n    if (trial.response_allowed_while_playing) {\n      if (trial.enable_button_after > 0) {\n        this.disable_buttons();\n        this.enable_buttons();\n      }\n    } else {\n      this.disable_buttons();\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        this.end_trial();\n      }, trial.trial_duration);\n    }\n\n    on_load();\n\n    // start time\n    this.startTime = performance.now();\n    if (this.context !== null) {\n      this.startTime = this.context.currentTime;\n    }\n\n    // start audio\n    this.audio.play();\n\n    return new Promise((resolve) => {\n      // hold the .resolve() function from the Promise that ends the trial\n      this.trial_complete = resolve;\n    });\n  }\n\n  private disable_buttons = () => {\n    for (const button of this.buttonElements) {\n      button.setAttribute(\"disabled\", \"disabled\");\n    }\n  };\n\n  private enable_buttons_without_delay = () => {\n    for (const button of this.buttonElements) {\n      button.removeAttribute(\"disabled\");\n    }\n  };\n\n  private enable_buttons_with_delay = (delay: number) => {\n    this.jsPsych.pluginAPI.setTimeout(this.enable_buttons_without_delay, delay);\n  };\n\n  private enable_buttons() {\n    if (this.params.enable_button_after > 0) {\n      this.enable_buttons_with_delay(this.params.enable_button_after);\n    } else {\n      this.enable_buttons_without_delay();\n    }\n  }\n\n  // function to handle responses by the subject\n  private after_response = (choice) => {\n    // measure rt\n    var endTime = performance.now();\n    var rt = Math.round(endTime - this.startTime);\n    if (this.context !== null) {\n      endTime = this.context.currentTime;\n      rt = Math.round((endTime - this.startTime) * 1000);\n    }\n    this.response.button = parseInt(choice);\n    this.response.rt = rt;\n\n    // disable all the buttons after a response\n    this.disable_buttons();\n\n    if (this.params.response_ends_trial) {\n      this.end_trial();\n    }\n  };\n\n  // method to end trial when it is time\n  private end_trial = () => {\n    // stop the audio file if it is playing\n    this.audio.stop();\n\n    // remove end event listeners if they exist\n    this.audio.removeEventListener(\"ended\", this.end_trial);\n    this.audio.removeEventListener(\"ended\", this.enable_buttons);\n\n    // gather the data to store for the trial\n    var trial_data = {\n      rt: this.response.rt,\n      stimulus: this.params.stimulus,\n      response: this.response.button,\n    };\n\n    // move on to the next trial\n    this.trial_complete(trial_data);\n  };\n\n  async simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt:\n        this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true) +\n        trial.enable_button_after,\n      response: this.jsPsych.randomization.randomInt(0, trial.choices.length - 1),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.clickTarget(\n          display_element.querySelector(\n            `#jspsych-audio-button-response-btngroup [data-choice=\"${data.response}\"]`\n          ),\n          data.rt\n        );\n      }\n    };\n\n    this.trial(display_element, trial, () => {\n      load_callback();\n      if (!trial.response_allowed_while_playing) {\n        this.audio.addEventListener(\"ended\", respond);\n      } else {\n        respond();\n      }\n    });\n  }\n}\n\nexport default AudioButtonResponsePlugin;\n"],"names":["getAllProperties","object","properties","key","autoBind","self","include","exclude","filter","match","pattern","descriptor","version","p","l","e","n","s","o","r","a"],"mappings":"4JAGA,MAAMA,EAAmBC,GAAU,CAClC,MAAMC,EAAa,IAAI,IAEvB,EACC,WAAWC,KAAO,QAAQ,QAAQF,CAAM,EACvCC,EAAW,IAAI,CAACD,EAAQE,CAAG,CAAC,SAEpBF,EAAS,QAAQ,eAAeA,CAAM,IAAMA,IAAW,OAAO,WAExE,OAAOC,CACR,MAEAE,EAAiB,CAACC,EAAM,CAAC,QAAAC,EAAS,QAAAC,CAAO,EAAI,CAAA,IAAO,CACnD,MAAMC,EAASL,GAAO,CACrB,MAAMM,EAAQC,GAAW,OAAOA,GAAY,SAAWP,IAAQO,EAAUA,EAAQ,KAAKP,CAAG,EAEzF,OAAIG,EACIA,EAAQ,KAAKG,CAAK,EAGtBF,EACI,CAACA,EAAQ,KAAKE,CAAK,EAGpB,EACT,EAEC,SAAW,CAACR,EAAQE,CAAG,IAAKH,EAAiBK,EAAK,YAAY,SAAS,EAAG,CACzE,GAAIF,IAAQ,eAAiB,CAACK,EAAOL,CAAG,EACvC,SAGD,MAAMQ,EAAa,QAAQ,yBAAyBV,EAAQE,CAAG,EAC3DQ,GAAc,OAAOA,EAAW,OAAU,aAC7CN,EAAKF,CAAG,EAAIE,EAAKF,CAAG,EAAE,KAAKE,CAAI,EAElC,CAEC,OAAOA,CACR,SCxCEO,EAAW,QCFbC,EAAA,CAAAC,EAAAC,EAAA,IAAA,IAAA,QAAA,CAAAC,EAAAC,IAAA,CAAA,IAAAC,EAAA,GAAA,CAAA,GAAA,CAAAC,EAAA,EAAA,KAAA,CAAA,CAAA,CAAA,OAAA,EAAA,CAAAF,EAAA,CAAA,CAAA,CAAA,EAAAG,EAAA,GAAA,CAAA,GAAA,CAAAD,EAAA,EAAA,MAAA,CAAA,CAAA,CAAA,OAAA,EAAA,CAAAF,EAAA,CAAA,CAAA,CAAA,EAAAE,EAAA,GAAA,EAAA,KAAAH,EAAA,EAAA,KAAA,EAAA,QAAA,QAAA,EAAA,KAAA,EAAA,KAAAE,EAAAE,CAAA,EAAAD,GAAA,EAAA,EAAA,MAAAL,EAAAC,CAAA,GAAA,KAAA,CAAA,CAAA,CAAA,45BAqHa,UAAA,iuBAAe","x_google_ignoreList":[0]}
+{"version":3,"file":"index.browser.min.js","sources":["../../../node_modules/auto-bind/index.js","../package.json","../src/index.ts"],"sourcesContent":["'use strict';\n\n// Gets all non-builtin properties up the prototype chain\nconst getAllProperties = object => {\n\tconst properties = new Set();\n\n\tdo {\n\t\tfor (const key of Reflect.ownKeys(object)) {\n\t\t\tproperties.add([object, key]);\n\t\t}\n\t} while ((object = Reflect.getPrototypeOf(object)) && object !== Object.prototype);\n\n\treturn properties;\n};\n\nmodule.exports = (self, {include, exclude} = {}) => {\n\tconst filter = key => {\n\t\tconst match = pattern => typeof pattern === 'string' ? key === pattern : pattern.test(key);\n\n\t\tif (include) {\n\t\t\treturn include.some(match);\n\t\t}\n\n\t\tif (exclude) {\n\t\t\treturn !exclude.some(match);\n\t\t}\n\n\t\treturn true;\n\t};\n\n\tfor (const [object, key] of getAllProperties(self.constructor.prototype)) {\n\t\tif (key === 'constructor' || !filter(key)) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst descriptor = Reflect.getOwnPropertyDescriptor(object, key);\n\t\tif (descriptor && typeof descriptor.value === 'function') {\n\t\t\tself[key] = self[key].bind(self);\n\t\t}\n\t}\n\n\treturn self;\n};\n","{\n  \"name\": \"@jspsych/plugin-audio-button-response\",\n  \"version\": \"2.1.1\",\n  \"description\": \"jsPsych plugin for playing an audio file and getting a button response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-audio-button-response\"\n  },\n  \"author\": \"Kristin Diep\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/audio-button-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import autoBind from \"auto-bind\";\nimport { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { AudioPlayerInterface } from \"../../jspsych/src/modules/plugin-api/AudioPlayer\";\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"audio-button-response\",\n  version: version,\n  parameters: {\n    /** Path to audio file to be played. */\n    stimulus: {\n      type: ParameterType.AUDIO,\n      default: undefined,\n    },\n    /** Labels for the buttons. Each different string in the array will generate a different button.  */\n    choices: {\n      type: ParameterType.STRING,\n      default: undefined,\n      array: true,\n    },\n    /**\n     * A function that generates the HTML for each button in the `choices` array. The function gets the string\n     * and index of the item in the `choices` array and should return valid HTML. If you want to use different\n     * markup for each button, you can do that by using a conditional on either parameter. The default parameter\n     * returns a button element with the text label of the choice.\n     */\n    button_html: {\n      type: ParameterType.FUNCTION,\n      default: function (choice: string, choice_index: number) {\n        return `<button class=\"jspsych-btn\">${choice}</button>`;\n      },\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     *  is that it can be used to provide a reminder about the action the participant is supposed to take\n     * (e.g., which key to press). */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial\n     * will wait for a response indefinitely */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** Setting to `'grid'` will make the container element have the CSS property `display: grid` and enable the\n     * use of `grid_rows` and `grid_columns`. Setting to `'flex'` will make the container element have the CSS\n     * property `display: flex`. You can customize how the buttons are laid out by adding inline CSS in the `button_html` parameter.\n     */\n    button_layout: {\n      type: ParameterType.STRING,\n      default: \"grid\",\n    },\n    /** The number of rows in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the\n     * number of rows will be determined automatically based on the number of buttons and the number of columns.\n     */\n    grid_rows: {\n      type: ParameterType.INT,\n      default: 1,\n    },\n    /** The number of columns in the button grid. Only applicable when `button_layout` is set to `'grid'`.\n     * If null, the number of columns will be determined automatically based on the number of buttons and the\n     * number of rows.\n     */\n    grid_columns: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force\n     * the participant to listen to the stimulus for a fixed amount of time, even if they respond before the time is complete. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** If true, then the trial will end as soon as the audio file finishes playing.  */\n    trial_ends_after_audio: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n    /**\n     * If true, then responses are allowed while the audio is playing. If false, then the audio must finish\n     * playing before the button choices are enabled and a response is accepted. Once the audio has played\n     * all the way through, the buttons are enabled and a response is allowed (including while the audio is\n     * being re-played via on-screen playback controls).\n     */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** How long the button will delay enabling in milliseconds. If `response_allowed_while_playing` is `true`,\n     * the timer will start immediately. If it is `false`, the timer will start at the end of the audio. */\n    enable_button_after: {\n      type: ParameterType.INT,\n      default: 0,\n    },\n  },\n  data: {\n    /** The path of the audio file that was played. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first began playing until the participant's response.*/\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** Indicates which button the participant pressed. The first button in the `choices` array is 0, the second is 1, and so on. */\n    response: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * If the browser supports it, audio files are played using the WebAudio API. This allows for reasonably precise \n * timing of the playback. The timing of responses generated is measured against the WebAudio specific clock, \n * improving the measurement of response times. If the browser does not support the WebAudio API, then the audio file is \n * played with HTML5 audio. \n\n * Audio files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if \n * you are using timeline variables or another dynamic method to specify the audio stimulus, you will need \n * to [manually preload](../overview/media-preloading.md#manual-preloading) the audio.\n\n * The trial can end when the participant responds, when the audio file has finished playing, or if the participant \n * has failed to respond within a fixed length of time. You can also prevent a button response from being made before the \n * audio has finished playing.\n * \n * @author Kristin Diep\n * @see {@link https://www.jspsych.org/latest/plugins/audio-button-response/ audio-button-response plugin documentation on jspsych.org}\n */\nclass AudioButtonResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  private audio: AudioPlayerInterface;\n  private params: TrialType<Info>;\n  private buttonElements: HTMLElement[] = [];\n  private display: HTMLElement;\n  private response: { rt: number; button: number } = { rt: null, button: null };\n  private context: AudioContext;\n  private startTime: number;\n  private trial_complete: (trial_data: { rt: number; stimulus: string; response: number }) => void;\n\n  constructor(private jsPsych: JsPsych) {\n    autoBind(this);\n  }\n\n  async trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {\n    this.params = trial;\n    this.display = display_element;\n    // setup stimulus\n    this.context = this.jsPsych.pluginAPI.audioContext();\n\n    // load audio file\n    this.audio = await this.jsPsych.pluginAPI.getAudioPlayer(trial.stimulus);\n\n    // set up end event if trial needs it\n    if (trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.end_trial);\n    }\n\n    // enable buttons after audio ends if necessary\n    if (!trial.response_allowed_while_playing && !trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.enable_buttons);\n    }\n\n    // Display buttons\n    const buttonGroupElement = document.createElement(\"div\");\n    buttonGroupElement.id = \"jspsych-audio-button-response-btngroup\";\n    if (trial.button_layout === \"grid\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-grid\");\n      if (trial.grid_rows === null && trial.grid_columns === null) {\n        throw new Error(\n          \"You cannot set `grid_rows` to `null` without providing a value for `grid_columns`.\"\n        );\n      }\n      const n_cols =\n        trial.grid_columns === null\n          ? Math.ceil(trial.choices.length / trial.grid_rows)\n          : trial.grid_columns;\n      const n_rows =\n        trial.grid_rows === null\n          ? Math.ceil(trial.choices.length / trial.grid_columns)\n          : trial.grid_rows;\n      buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;\n      buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;\n    } else if (trial.button_layout === \"flex\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-flex\");\n    }\n\n    for (const [choiceIndex, choice] of trial.choices.entries()) {\n      buttonGroupElement.insertAdjacentHTML(\"beforeend\", trial.button_html(choice, choiceIndex));\n      const buttonElement = buttonGroupElement.lastChild as HTMLElement;\n      buttonElement.dataset.choice = choiceIndex.toString();\n      buttonElement.addEventListener(\"click\", () => {\n        this.after_response(choiceIndex);\n      });\n      this.buttonElements.push(buttonElement);\n    }\n\n    display_element.appendChild(buttonGroupElement);\n\n    // Show prompt if there is one\n    if (trial.prompt !== null) {\n      display_element.insertAdjacentHTML(\"beforeend\", trial.prompt);\n    }\n\n    if (trial.response_allowed_while_playing) {\n      if (trial.enable_button_after > 0) {\n        this.disable_buttons();\n        this.enable_buttons();\n      }\n    } else {\n      this.disable_buttons();\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        this.end_trial();\n      }, trial.trial_duration);\n    }\n\n    on_load();\n\n    // start time\n    this.startTime = performance.now();\n    if (this.context !== null) {\n      this.startTime = this.context.currentTime;\n    }\n\n    // start audio\n    this.audio.play();\n\n    return new Promise((resolve) => {\n      // hold the .resolve() function from the Promise that ends the trial\n      this.trial_complete = resolve;\n    });\n  }\n\n  private disable_buttons = () => {\n    for (const button of this.buttonElements) {\n      button.setAttribute(\"disabled\", \"disabled\");\n    }\n  };\n\n  private enable_buttons_without_delay = () => {\n    for (const button of this.buttonElements) {\n      button.removeAttribute(\"disabled\");\n    }\n  };\n\n  private enable_buttons_with_delay = (delay: number) => {\n    this.jsPsych.pluginAPI.setTimeout(this.enable_buttons_without_delay, delay);\n  };\n\n  private enable_buttons() {\n    if (this.params.enable_button_after > 0) {\n      this.enable_buttons_with_delay(this.params.enable_button_after);\n    } else {\n      this.enable_buttons_without_delay();\n    }\n  }\n\n  // function to handle responses by the subject\n  private after_response = (choice) => {\n    // measure rt\n    var endTime = performance.now();\n    var rt = Math.round(endTime - this.startTime);\n    if (this.context !== null) {\n      endTime = this.context.currentTime;\n      rt = Math.round((endTime - this.startTime) * 1000);\n    }\n    this.response.button = parseInt(choice);\n    this.response.rt = rt;\n\n    // disable all the buttons after a response\n    this.disable_buttons();\n\n    if (this.params.response_ends_trial) {\n      this.end_trial();\n    }\n  };\n\n  // method to end trial when it is time\n  private end_trial = () => {\n    // remove end event listeners if they exist\n    this.audio.removeEventListener(\"ended\", this.end_trial);\n    this.audio.removeEventListener(\"ended\", this.enable_buttons);\n\n    // stop the audio file if it is playing\n    this.audio.stop();\n\n    // gather the data to store for the trial\n    var trial_data = {\n      rt: this.response.rt,\n      stimulus: this.params.stimulus,\n      response: this.response.button,\n    };\n\n    // move on to the next trial\n    this.trial_complete(trial_data);\n  };\n\n  async simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt:\n        this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true) +\n        trial.enable_button_after,\n      response: this.jsPsych.randomization.randomInt(0, trial.choices.length - 1),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.clickTarget(\n          display_element.querySelector(\n            `#jspsych-audio-button-response-btngroup [data-choice=\"${data.response}\"]`\n          ),\n          data.rt\n        );\n      }\n    };\n\n    this.trial(display_element, trial, () => {\n      load_callback();\n      if (!trial.response_allowed_while_playing) {\n        this.audio.addEventListener(\"ended\", respond);\n      } else {\n        respond();\n      }\n    });\n  }\n}\n\nexport default AudioButtonResponsePlugin;\n"],"names":["getAllProperties","object","properties","key","autoBind","self","include","exclude","filter","match","pattern","descriptor","version","p","l","e","n","s","o","r","a"],"mappings":"4JAGA,MAAMA,EAAmBC,GAAU,CAClC,MAAMC,EAAa,IAAI,IAEvB,EACC,WAAWC,KAAO,QAAQ,QAAQF,CAAM,EACvCC,EAAW,IAAI,CAACD,EAAQE,CAAG,CAAC,SAEpBF,EAAS,QAAQ,eAAeA,CAAM,IAAMA,IAAW,OAAO,WAExE,OAAOC,CACR,MAEAE,EAAiB,CAACC,EAAM,CAAC,QAAAC,EAAS,QAAAC,CAAO,EAAI,CAAA,IAAO,CACnD,MAAMC,EAASL,GAAO,CACrB,MAAMM,EAAQC,GAAW,OAAOA,GAAY,SAAWP,IAAQO,EAAUA,EAAQ,KAAKP,CAAG,EAEzF,OAAIG,EACIA,EAAQ,KAAKG,CAAK,EAGtBF,EACI,CAACA,EAAQ,KAAKE,CAAK,EAGpB,EACT,EAEC,SAAW,CAACR,EAAQE,CAAG,IAAKH,EAAiBK,EAAK,YAAY,SAAS,EAAG,CACzE,GAAIF,IAAQ,eAAiB,CAACK,EAAOL,CAAG,EACvC,SAGD,MAAMQ,EAAa,QAAQ,yBAAyBV,EAAQE,CAAG,EAC3DQ,GAAc,OAAOA,EAAW,OAAU,aAC7CN,EAAKF,CAAG,EAAIE,EAAKF,CAAG,EAAE,KAAKE,CAAI,EAElC,CAEC,OAAOA,CACR,SCxCEO,EAAW,QCFbC,EAAA,CAAAC,EAAAC,EAAA,IAAA,IAAA,QAAA,CAAAC,EAAAC,IAAA,CAAA,IAAAC,EAAA,GAAA,CAAA,GAAA,CAAAC,EAAA,EAAA,KAAA,CAAA,CAAA,CAAA,OAAA,EAAA,CAAAF,EAAA,CAAA,CAAA,CAAA,EAAAG,EAAA,GAAA,CAAA,GAAA,CAAAD,EAAA,EAAA,MAAA,CAAA,CAAA,CAAA,OAAA,EAAA,CAAAF,EAAA,CAAA,CAAA,CAAA,EAAAE,EAAA,GAAA,EAAA,KAAAH,EAAA,EAAA,KAAA,EAAA,QAAA,QAAA,EAAA,KAAA,EAAA,KAAAE,EAAAE,CAAA,EAAAD,GAAA,EAAA,EAAA,MAAAL,EAAAC,CAAA,GAAA,KAAA,CAAA,CAAA,CAAA,45BAqHa,UAAA,iuBAAe","x_google_ignoreList":[0]}

package/dist/index.cjs

@@ -3,7 +3,7 @@
 var autoBind = require('auto-bind');
 var jspsych = require('jspsych');
 
-var version = "2.1.0";
+var version = "2.1.1";
 
 const info = {
   name: "audio-button-response",
@@ -156,9 +156,9 @@ class AudioButtonResponsePlugin {
     };
     // method to end trial when it is time
     this.end_trial = () => {
-      this.audio.stop();
       this.audio.removeEventListener("ended", this.end_trial);
       this.audio.removeEventListener("ended", this.enable_buttons);
+      this.audio.stop();
       var trial_data = {
         rt: this.response.rt,
         stimulus: this.params.stimulus,

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-audio-button-response\",\n  \"version\": \"2.1.0\",\n  \"description\": \"jsPsych plugin for playing an audio file and getting a button response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-audio-button-response\"\n  },\n  \"author\": \"Kristin Diep\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/audio-button-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import autoBind from \"auto-bind\";\nimport { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { AudioPlayerInterface } from \"../../jspsych/src/modules/plugin-api/AudioPlayer\";\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"audio-button-response\",\n  version: version,\n  parameters: {\n    /** Path to audio file to be played. */\n    stimulus: {\n      type: ParameterType.AUDIO,\n      default: undefined,\n    },\n    /** Labels for the buttons. Each different string in the array will generate a different button.  */\n    choices: {\n      type: ParameterType.STRING,\n      default: undefined,\n      array: true,\n    },\n    /**\n     * A function that generates the HTML for each button in the `choices` array. The function gets the string\n     * and index of the item in the `choices` array and should return valid HTML. If you want to use different\n     * markup for each button, you can do that by using a conditional on either parameter. The default parameter\n     * returns a button element with the text label of the choice.\n     */\n    button_html: {\n      type: ParameterType.FUNCTION,\n      default: function (choice: string, choice_index: number) {\n        return `<button class=\"jspsych-btn\">${choice}</button>`;\n      },\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     *  is that it can be used to provide a reminder about the action the participant is supposed to take\n     * (e.g., which key to press). */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial\n     * will wait for a response indefinitely */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** Setting to `'grid'` will make the container element have the CSS property `display: grid` and enable the\n     * use of `grid_rows` and `grid_columns`. Setting to `'flex'` will make the container element have the CSS\n     * property `display: flex`. You can customize how the buttons are laid out by adding inline CSS in the `button_html` parameter.\n     */\n    button_layout: {\n      type: ParameterType.STRING,\n      default: \"grid\",\n    },\n    /** The number of rows in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the\n     * number of rows will be determined automatically based on the number of buttons and the number of columns.\n     */\n    grid_rows: {\n      type: ParameterType.INT,\n      default: 1,\n    },\n    /** The number of columns in the button grid. Only applicable when `button_layout` is set to `'grid'`.\n     * If null, the number of columns will be determined automatically based on the number of buttons and the\n     * number of rows.\n     */\n    grid_columns: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force\n     * the participant to listen to the stimulus for a fixed amount of time, even if they respond before the time is complete. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** If true, then the trial will end as soon as the audio file finishes playing.  */\n    trial_ends_after_audio: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n    /**\n     * If true, then responses are allowed while the audio is playing. If false, then the audio must finish\n     * playing before the button choices are enabled and a response is accepted. Once the audio has played\n     * all the way through, the buttons are enabled and a response is allowed (including while the audio is\n     * being re-played via on-screen playback controls).\n     */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** How long the button will delay enabling in milliseconds. If `response_allowed_while_playing` is `true`,\n     * the timer will start immediately. If it is `false`, the timer will start at the end of the audio. */\n    enable_button_after: {\n      type: ParameterType.INT,\n      default: 0,\n    },\n  },\n  data: {\n    /** The path of the audio file that was played. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first began playing until the participant's response.*/\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** Indicates which button the participant pressed. The first button in the `choices` array is 0, the second is 1, and so on. */\n    response: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * If the browser supports it, audio files are played using the WebAudio API. This allows for reasonably precise \n * timing of the playback. The timing of responses generated is measured against the WebAudio specific clock, \n * improving the measurement of response times. If the browser does not support the WebAudio API, then the audio file is \n * played with HTML5 audio. \n\n * Audio files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if \n * you are using timeline variables or another dynamic method to specify the audio stimulus, you will need \n * to [manually preload](../overview/media-preloading.md#manual-preloading) the audio.\n\n * The trial can end when the participant responds, when the audio file has finished playing, or if the participant \n * has failed to respond within a fixed length of time. You can also prevent a button response from being made before the \n * audio has finished playing.\n * \n * @author Kristin Diep\n * @see {@link https://www.jspsych.org/latest/plugins/audio-button-response/ audio-button-response plugin documentation on jspsych.org}\n */\nclass AudioButtonResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  private audio: AudioPlayerInterface;\n  private params: TrialType<Info>;\n  private buttonElements: HTMLElement[] = [];\n  private display: HTMLElement;\n  private response: { rt: number; button: number } = { rt: null, button: null };\n  private context: AudioContext;\n  private startTime: number;\n  private trial_complete: (trial_data: { rt: number; stimulus: string; response: number }) => void;\n\n  constructor(private jsPsych: JsPsych) {\n    autoBind(this);\n  }\n\n  async trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {\n    this.params = trial;\n    this.display = display_element;\n    // setup stimulus\n    this.context = this.jsPsych.pluginAPI.audioContext();\n\n    // load audio file\n    this.audio = await this.jsPsych.pluginAPI.getAudioPlayer(trial.stimulus);\n\n    // set up end event if trial needs it\n    if (trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.end_trial);\n    }\n\n    // enable buttons after audio ends if necessary\n    if (!trial.response_allowed_while_playing && !trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.enable_buttons);\n    }\n\n    // Display buttons\n    const buttonGroupElement = document.createElement(\"div\");\n    buttonGroupElement.id = \"jspsych-audio-button-response-btngroup\";\n    if (trial.button_layout === \"grid\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-grid\");\n      if (trial.grid_rows === null && trial.grid_columns === null) {\n        throw new Error(\n          \"You cannot set `grid_rows` to `null` without providing a value for `grid_columns`.\"\n        );\n      }\n      const n_cols =\n        trial.grid_columns === null\n          ? Math.ceil(trial.choices.length / trial.grid_rows)\n          : trial.grid_columns;\n      const n_rows =\n        trial.grid_rows === null\n          ? Math.ceil(trial.choices.length / trial.grid_columns)\n          : trial.grid_rows;\n      buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;\n      buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;\n    } else if (trial.button_layout === \"flex\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-flex\");\n    }\n\n    for (const [choiceIndex, choice] of trial.choices.entries()) {\n      buttonGroupElement.insertAdjacentHTML(\"beforeend\", trial.button_html(choice, choiceIndex));\n      const buttonElement = buttonGroupElement.lastChild as HTMLElement;\n      buttonElement.dataset.choice = choiceIndex.toString();\n      buttonElement.addEventListener(\"click\", () => {\n        this.after_response(choiceIndex);\n      });\n      this.buttonElements.push(buttonElement);\n    }\n\n    display_element.appendChild(buttonGroupElement);\n\n    // Show prompt if there is one\n    if (trial.prompt !== null) {\n      display_element.insertAdjacentHTML(\"beforeend\", trial.prompt);\n    }\n\n    if (trial.response_allowed_while_playing) {\n      if (trial.enable_button_after > 0) {\n        this.disable_buttons();\n        this.enable_buttons();\n      }\n    } else {\n      this.disable_buttons();\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        this.end_trial();\n      }, trial.trial_duration);\n    }\n\n    on_load();\n\n    // start time\n    this.startTime = performance.now();\n    if (this.context !== null) {\n      this.startTime = this.context.currentTime;\n    }\n\n    // start audio\n    this.audio.play();\n\n    return new Promise((resolve) => {\n      // hold the .resolve() function from the Promise that ends the trial\n      this.trial_complete = resolve;\n    });\n  }\n\n  private disable_buttons = () => {\n    for (const button of this.buttonElements) {\n      button.setAttribute(\"disabled\", \"disabled\");\n    }\n  };\n\n  private enable_buttons_without_delay = () => {\n    for (const button of this.buttonElements) {\n      button.removeAttribute(\"disabled\");\n    }\n  };\n\n  private enable_buttons_with_delay = (delay: number) => {\n    this.jsPsych.pluginAPI.setTimeout(this.enable_buttons_without_delay, delay);\n  };\n\n  private enable_buttons() {\n    if (this.params.enable_button_after > 0) {\n      this.enable_buttons_with_delay(this.params.enable_button_after);\n    } else {\n      this.enable_buttons_without_delay();\n    }\n  }\n\n  // function to handle responses by the subject\n  private after_response = (choice) => {\n    // measure rt\n    var endTime = performance.now();\n    var rt = Math.round(endTime - this.startTime);\n    if (this.context !== null) {\n      endTime = this.context.currentTime;\n      rt = Math.round((endTime - this.startTime) * 1000);\n    }\n    this.response.button = parseInt(choice);\n    this.response.rt = rt;\n\n    // disable all the buttons after a response\n    this.disable_buttons();\n\n    if (this.params.response_ends_trial) {\n      this.end_trial();\n    }\n  };\n\n  // method to end trial when it is time\n  private end_trial = () => {\n    // stop the audio file if it is playing\n    this.audio.stop();\n\n    // remove end event listeners if they exist\n    this.audio.removeEventListener(\"ended\", this.end_trial);\n    this.audio.removeEventListener(\"ended\", this.enable_buttons);\n\n    // gather the data to store for the trial\n    var trial_data = {\n      rt: this.response.rt,\n      stimulus: this.params.stimulus,\n      response: this.response.button,\n    };\n\n    // move on to the next trial\n    this.trial_complete(trial_data);\n  };\n\n  async simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt:\n        this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true) +\n        trial.enable_button_after,\n      response: this.jsPsych.randomization.randomInt(0, trial.choices.length - 1),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.clickTarget(\n          display_element.querySelector(\n            `#jspsych-audio-button-response-btngroup [data-choice=\"${data.response}\"]`\n          ),\n          data.rt\n        );\n      }\n    };\n\n    this.trial(display_element, trial, () => {\n      load_callback();\n      if (!trial.response_allowed_while_playing) {\n        this.audio.addEventListener(\"ended\", respond);\n      } else {\n        respond();\n      }\n    });\n  }\n}\n\nexport default AudioButtonResponsePlugin;\n"],"names":[],"mappings":";;;;;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECmHA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-audio-button-response\",\n  \"version\": \"2.1.1\",\n  \"description\": \"jsPsych plugin for playing an audio file and getting a button response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-audio-button-response\"\n  },\n  \"author\": \"Kristin Diep\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/audio-button-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import autoBind from \"auto-bind\";\nimport { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { AudioPlayerInterface } from \"../../jspsych/src/modules/plugin-api/AudioPlayer\";\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"audio-button-response\",\n  version: version,\n  parameters: {\n    /** Path to audio file to be played. */\n    stimulus: {\n      type: ParameterType.AUDIO,\n      default: undefined,\n    },\n    /** Labels for the buttons. Each different string in the array will generate a different button.  */\n    choices: {\n      type: ParameterType.STRING,\n      default: undefined,\n      array: true,\n    },\n    /**\n     * A function that generates the HTML for each button in the `choices` array. The function gets the string\n     * and index of the item in the `choices` array and should return valid HTML. If you want to use different\n     * markup for each button, you can do that by using a conditional on either parameter. The default parameter\n     * returns a button element with the text label of the choice.\n     */\n    button_html: {\n      type: ParameterType.FUNCTION,\n      default: function (choice: string, choice_index: number) {\n        return `<button class=\"jspsych-btn\">${choice}</button>`;\n      },\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     *  is that it can be used to provide a reminder about the action the participant is supposed to take\n     * (e.g., which key to press). */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial\n     * will wait for a response indefinitely */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** Setting to `'grid'` will make the container element have the CSS property `display: grid` and enable the\n     * use of `grid_rows` and `grid_columns`. Setting to `'flex'` will make the container element have the CSS\n     * property `display: flex`. You can customize how the buttons are laid out by adding inline CSS in the `button_html` parameter.\n     */\n    button_layout: {\n      type: ParameterType.STRING,\n      default: \"grid\",\n    },\n    /** The number of rows in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the\n     * number of rows will be determined automatically based on the number of buttons and the number of columns.\n     */\n    grid_rows: {\n      type: ParameterType.INT,\n      default: 1,\n    },\n    /** The number of columns in the button grid. Only applicable when `button_layout` is set to `'grid'`.\n     * If null, the number of columns will be determined automatically based on the number of buttons and the\n     * number of rows.\n     */\n    grid_columns: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force\n     * the participant to listen to the stimulus for a fixed amount of time, even if they respond before the time is complete. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** If true, then the trial will end as soon as the audio file finishes playing.  */\n    trial_ends_after_audio: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n    /**\n     * If true, then responses are allowed while the audio is playing. If false, then the audio must finish\n     * playing before the button choices are enabled and a response is accepted. Once the audio has played\n     * all the way through, the buttons are enabled and a response is allowed (including while the audio is\n     * being re-played via on-screen playback controls).\n     */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** How long the button will delay enabling in milliseconds. If `response_allowed_while_playing` is `true`,\n     * the timer will start immediately. If it is `false`, the timer will start at the end of the audio. */\n    enable_button_after: {\n      type: ParameterType.INT,\n      default: 0,\n    },\n  },\n  data: {\n    /** The path of the audio file that was played. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first began playing until the participant's response.*/\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** Indicates which button the participant pressed. The first button in the `choices` array is 0, the second is 1, and so on. */\n    response: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * If the browser supports it, audio files are played using the WebAudio API. This allows for reasonably precise \n * timing of the playback. The timing of responses generated is measured against the WebAudio specific clock, \n * improving the measurement of response times. If the browser does not support the WebAudio API, then the audio file is \n * played with HTML5 audio. \n\n * Audio files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if \n * you are using timeline variables or another dynamic method to specify the audio stimulus, you will need \n * to [manually preload](../overview/media-preloading.md#manual-preloading) the audio.\n\n * The trial can end when the participant responds, when the audio file has finished playing, or if the participant \n * has failed to respond within a fixed length of time. You can also prevent a button response from being made before the \n * audio has finished playing.\n * \n * @author Kristin Diep\n * @see {@link https://www.jspsych.org/latest/plugins/audio-button-response/ audio-button-response plugin documentation on jspsych.org}\n */\nclass AudioButtonResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  private audio: AudioPlayerInterface;\n  private params: TrialType<Info>;\n  private buttonElements: HTMLElement[] = [];\n  private display: HTMLElement;\n  private response: { rt: number; button: number } = { rt: null, button: null };\n  private context: AudioContext;\n  private startTime: number;\n  private trial_complete: (trial_data: { rt: number; stimulus: string; response: number }) => void;\n\n  constructor(private jsPsych: JsPsych) {\n    autoBind(this);\n  }\n\n  async trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {\n    this.params = trial;\n    this.display = display_element;\n    // setup stimulus\n    this.context = this.jsPsych.pluginAPI.audioContext();\n\n    // load audio file\n    this.audio = await this.jsPsych.pluginAPI.getAudioPlayer(trial.stimulus);\n\n    // set up end event if trial needs it\n    if (trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.end_trial);\n    }\n\n    // enable buttons after audio ends if necessary\n    if (!trial.response_allowed_while_playing && !trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.enable_buttons);\n    }\n\n    // Display buttons\n    const buttonGroupElement = document.createElement(\"div\");\n    buttonGroupElement.id = \"jspsych-audio-button-response-btngroup\";\n    if (trial.button_layout === \"grid\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-grid\");\n      if (trial.grid_rows === null && trial.grid_columns === null) {\n        throw new Error(\n          \"You cannot set `grid_rows` to `null` without providing a value for `grid_columns`.\"\n        );\n      }\n      const n_cols =\n        trial.grid_columns === null\n          ? Math.ceil(trial.choices.length / trial.grid_rows)\n          : trial.grid_columns;\n      const n_rows =\n        trial.grid_rows === null\n          ? Math.ceil(trial.choices.length / trial.grid_columns)\n          : trial.grid_rows;\n      buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;\n      buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;\n    } else if (trial.button_layout === \"flex\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-flex\");\n    }\n\n    for (const [choiceIndex, choice] of trial.choices.entries()) {\n      buttonGroupElement.insertAdjacentHTML(\"beforeend\", trial.button_html(choice, choiceIndex));\n      const buttonElement = buttonGroupElement.lastChild as HTMLElement;\n      buttonElement.dataset.choice = choiceIndex.toString();\n      buttonElement.addEventListener(\"click\", () => {\n        this.after_response(choiceIndex);\n      });\n      this.buttonElements.push(buttonElement);\n    }\n\n    display_element.appendChild(buttonGroupElement);\n\n    // Show prompt if there is one\n    if (trial.prompt !== null) {\n      display_element.insertAdjacentHTML(\"beforeend\", trial.prompt);\n    }\n\n    if (trial.response_allowed_while_playing) {\n      if (trial.enable_button_after > 0) {\n        this.disable_buttons();\n        this.enable_buttons();\n      }\n    } else {\n      this.disable_buttons();\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        this.end_trial();\n      }, trial.trial_duration);\n    }\n\n    on_load();\n\n    // start time\n    this.startTime = performance.now();\n    if (this.context !== null) {\n      this.startTime = this.context.currentTime;\n    }\n\n    // start audio\n    this.audio.play();\n\n    return new Promise((resolve) => {\n      // hold the .resolve() function from the Promise that ends the trial\n      this.trial_complete = resolve;\n    });\n  }\n\n  private disable_buttons = () => {\n    for (const button of this.buttonElements) {\n      button.setAttribute(\"disabled\", \"disabled\");\n    }\n  };\n\n  private enable_buttons_without_delay = () => {\n    for (const button of this.buttonElements) {\n      button.removeAttribute(\"disabled\");\n    }\n  };\n\n  private enable_buttons_with_delay = (delay: number) => {\n    this.jsPsych.pluginAPI.setTimeout(this.enable_buttons_without_delay, delay);\n  };\n\n  private enable_buttons() {\n    if (this.params.enable_button_after > 0) {\n      this.enable_buttons_with_delay(this.params.enable_button_after);\n    } else {\n      this.enable_buttons_without_delay();\n    }\n  }\n\n  // function to handle responses by the subject\n  private after_response = (choice) => {\n    // measure rt\n    var endTime = performance.now();\n    var rt = Math.round(endTime - this.startTime);\n    if (this.context !== null) {\n      endTime = this.context.currentTime;\n      rt = Math.round((endTime - this.startTime) * 1000);\n    }\n    this.response.button = parseInt(choice);\n    this.response.rt = rt;\n\n    // disable all the buttons after a response\n    this.disable_buttons();\n\n    if (this.params.response_ends_trial) {\n      this.end_trial();\n    }\n  };\n\n  // method to end trial when it is time\n  private end_trial = () => {\n    // remove end event listeners if they exist\n    this.audio.removeEventListener(\"ended\", this.end_trial);\n    this.audio.removeEventListener(\"ended\", this.enable_buttons);\n\n    // stop the audio file if it is playing\n    this.audio.stop();\n\n    // gather the data to store for the trial\n    var trial_data = {\n      rt: this.response.rt,\n      stimulus: this.params.stimulus,\n      response: this.response.button,\n    };\n\n    // move on to the next trial\n    this.trial_complete(trial_data);\n  };\n\n  async simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt:\n        this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true) +\n        trial.enable_button_after,\n      response: this.jsPsych.randomization.randomInt(0, trial.choices.length - 1),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.clickTarget(\n          display_element.querySelector(\n            `#jspsych-audio-button-response-btngroup [data-choice=\"${data.response}\"]`\n          ),\n          data.rt\n        );\n      }\n    };\n\n    this.trial(display_element, trial, () => {\n      load_callback();\n      if (!trial.response_allowed_while_playing) {\n        this.audio.addEventListener(\"ended\", respond);\n      } else {\n        respond();\n      }\n    });\n  }\n}\n\nexport default AudioButtonResponsePlugin;\n"],"names":[],"mappings":";;;;;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECmHA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -1,7 +1,7 @@
 import autoBind from 'auto-bind';
 import { ParameterType } from 'jspsych';
 
-var version = "2.1.0";
+var version = "2.1.1";
 
 const info = {
   name: "audio-button-response",
@@ -154,9 +154,9 @@ class AudioButtonResponsePlugin {
     };
     // method to end trial when it is time
     this.end_trial = () => {
-      this.audio.stop();
       this.audio.removeEventListener("ended", this.end_trial);
       this.audio.removeEventListener("ended", this.enable_buttons);
+      this.audio.stop();
       var trial_data = {
         rt: this.response.rt,
         stimulus: this.params.stimulus,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-audio-button-response\",\n  \"version\": \"2.1.0\",\n  \"description\": \"jsPsych plugin for playing an audio file and getting a button response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-audio-button-response\"\n  },\n  \"author\": \"Kristin Diep\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/audio-button-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import autoBind from \"auto-bind\";\nimport { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { AudioPlayerInterface } from \"../../jspsych/src/modules/plugin-api/AudioPlayer\";\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"audio-button-response\",\n  version: version,\n  parameters: {\n    /** Path to audio file to be played. */\n    stimulus: {\n      type: ParameterType.AUDIO,\n      default: undefined,\n    },\n    /** Labels for the buttons. Each different string in the array will generate a different button.  */\n    choices: {\n      type: ParameterType.STRING,\n      default: undefined,\n      array: true,\n    },\n    /**\n     * A function that generates the HTML for each button in the `choices` array. The function gets the string\n     * and index of the item in the `choices` array and should return valid HTML. If you want to use different\n     * markup for each button, you can do that by using a conditional on either parameter. The default parameter\n     * returns a button element with the text label of the choice.\n     */\n    button_html: {\n      type: ParameterType.FUNCTION,\n      default: function (choice: string, choice_index: number) {\n        return `<button class=\"jspsych-btn\">${choice}</button>`;\n      },\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     *  is that it can be used to provide a reminder about the action the participant is supposed to take\n     * (e.g., which key to press). */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial\n     * will wait for a response indefinitely */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** Setting to `'grid'` will make the container element have the CSS property `display: grid` and enable the\n     * use of `grid_rows` and `grid_columns`. Setting to `'flex'` will make the container element have the CSS\n     * property `display: flex`. You can customize how the buttons are laid out by adding inline CSS in the `button_html` parameter.\n     */\n    button_layout: {\n      type: ParameterType.STRING,\n      default: \"grid\",\n    },\n    /** The number of rows in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the\n     * number of rows will be determined automatically based on the number of buttons and the number of columns.\n     */\n    grid_rows: {\n      type: ParameterType.INT,\n      default: 1,\n    },\n    /** The number of columns in the button grid. Only applicable when `button_layout` is set to `'grid'`.\n     * If null, the number of columns will be determined automatically based on the number of buttons and the\n     * number of rows.\n     */\n    grid_columns: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force\n     * the participant to listen to the stimulus for a fixed amount of time, even if they respond before the time is complete. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** If true, then the trial will end as soon as the audio file finishes playing.  */\n    trial_ends_after_audio: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n    /**\n     * If true, then responses are allowed while the audio is playing. If false, then the audio must finish\n     * playing before the button choices are enabled and a response is accepted. Once the audio has played\n     * all the way through, the buttons are enabled and a response is allowed (including while the audio is\n     * being re-played via on-screen playback controls).\n     */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** How long the button will delay enabling in milliseconds. If `response_allowed_while_playing` is `true`,\n     * the timer will start immediately. If it is `false`, the timer will start at the end of the audio. */\n    enable_button_after: {\n      type: ParameterType.INT,\n      default: 0,\n    },\n  },\n  data: {\n    /** The path of the audio file that was played. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first began playing until the participant's response.*/\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** Indicates which button the participant pressed. The first button in the `choices` array is 0, the second is 1, and so on. */\n    response: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * If the browser supports it, audio files are played using the WebAudio API. This allows for reasonably precise \n * timing of the playback. The timing of responses generated is measured against the WebAudio specific clock, \n * improving the measurement of response times. If the browser does not support the WebAudio API, then the audio file is \n * played with HTML5 audio. \n\n * Audio files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if \n * you are using timeline variables or another dynamic method to specify the audio stimulus, you will need \n * to [manually preload](../overview/media-preloading.md#manual-preloading) the audio.\n\n * The trial can end when the participant responds, when the audio file has finished playing, or if the participant \n * has failed to respond within a fixed length of time. You can also prevent a button response from being made before the \n * audio has finished playing.\n * \n * @author Kristin Diep\n * @see {@link https://www.jspsych.org/latest/plugins/audio-button-response/ audio-button-response plugin documentation on jspsych.org}\n */\nclass AudioButtonResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  private audio: AudioPlayerInterface;\n  private params: TrialType<Info>;\n  private buttonElements: HTMLElement[] = [];\n  private display: HTMLElement;\n  private response: { rt: number; button: number } = { rt: null, button: null };\n  private context: AudioContext;\n  private startTime: number;\n  private trial_complete: (trial_data: { rt: number; stimulus: string; response: number }) => void;\n\n  constructor(private jsPsych: JsPsych) {\n    autoBind(this);\n  }\n\n  async trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {\n    this.params = trial;\n    this.display = display_element;\n    // setup stimulus\n    this.context = this.jsPsych.pluginAPI.audioContext();\n\n    // load audio file\n    this.audio = await this.jsPsych.pluginAPI.getAudioPlayer(trial.stimulus);\n\n    // set up end event if trial needs it\n    if (trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.end_trial);\n    }\n\n    // enable buttons after audio ends if necessary\n    if (!trial.response_allowed_while_playing && !trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.enable_buttons);\n    }\n\n    // Display buttons\n    const buttonGroupElement = document.createElement(\"div\");\n    buttonGroupElement.id = \"jspsych-audio-button-response-btngroup\";\n    if (trial.button_layout === \"grid\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-grid\");\n      if (trial.grid_rows === null && trial.grid_columns === null) {\n        throw new Error(\n          \"You cannot set `grid_rows` to `null` without providing a value for `grid_columns`.\"\n        );\n      }\n      const n_cols =\n        trial.grid_columns === null\n          ? Math.ceil(trial.choices.length / trial.grid_rows)\n          : trial.grid_columns;\n      const n_rows =\n        trial.grid_rows === null\n          ? Math.ceil(trial.choices.length / trial.grid_columns)\n          : trial.grid_rows;\n      buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;\n      buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;\n    } else if (trial.button_layout === \"flex\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-flex\");\n    }\n\n    for (const [choiceIndex, choice] of trial.choices.entries()) {\n      buttonGroupElement.insertAdjacentHTML(\"beforeend\", trial.button_html(choice, choiceIndex));\n      const buttonElement = buttonGroupElement.lastChild as HTMLElement;\n      buttonElement.dataset.choice = choiceIndex.toString();\n      buttonElement.addEventListener(\"click\", () => {\n        this.after_response(choiceIndex);\n      });\n      this.buttonElements.push(buttonElement);\n    }\n\n    display_element.appendChild(buttonGroupElement);\n\n    // Show prompt if there is one\n    if (trial.prompt !== null) {\n      display_element.insertAdjacentHTML(\"beforeend\", trial.prompt);\n    }\n\n    if (trial.response_allowed_while_playing) {\n      if (trial.enable_button_after > 0) {\n        this.disable_buttons();\n        this.enable_buttons();\n      }\n    } else {\n      this.disable_buttons();\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        this.end_trial();\n      }, trial.trial_duration);\n    }\n\n    on_load();\n\n    // start time\n    this.startTime = performance.now();\n    if (this.context !== null) {\n      this.startTime = this.context.currentTime;\n    }\n\n    // start audio\n    this.audio.play();\n\n    return new Promise((resolve) => {\n      // hold the .resolve() function from the Promise that ends the trial\n      this.trial_complete = resolve;\n    });\n  }\n\n  private disable_buttons = () => {\n    for (const button of this.buttonElements) {\n      button.setAttribute(\"disabled\", \"disabled\");\n    }\n  };\n\n  private enable_buttons_without_delay = () => {\n    for (const button of this.buttonElements) {\n      button.removeAttribute(\"disabled\");\n    }\n  };\n\n  private enable_buttons_with_delay = (delay: number) => {\n    this.jsPsych.pluginAPI.setTimeout(this.enable_buttons_without_delay, delay);\n  };\n\n  private enable_buttons() {\n    if (this.params.enable_button_after > 0) {\n      this.enable_buttons_with_delay(this.params.enable_button_after);\n    } else {\n      this.enable_buttons_without_delay();\n    }\n  }\n\n  // function to handle responses by the subject\n  private after_response = (choice) => {\n    // measure rt\n    var endTime = performance.now();\n    var rt = Math.round(endTime - this.startTime);\n    if (this.context !== null) {\n      endTime = this.context.currentTime;\n      rt = Math.round((endTime - this.startTime) * 1000);\n    }\n    this.response.button = parseInt(choice);\n    this.response.rt = rt;\n\n    // disable all the buttons after a response\n    this.disable_buttons();\n\n    if (this.params.response_ends_trial) {\n      this.end_trial();\n    }\n  };\n\n  // method to end trial when it is time\n  private end_trial = () => {\n    // stop the audio file if it is playing\n    this.audio.stop();\n\n    // remove end event listeners if they exist\n    this.audio.removeEventListener(\"ended\", this.end_trial);\n    this.audio.removeEventListener(\"ended\", this.enable_buttons);\n\n    // gather the data to store for the trial\n    var trial_data = {\n      rt: this.response.rt,\n      stimulus: this.params.stimulus,\n      response: this.response.button,\n    };\n\n    // move on to the next trial\n    this.trial_complete(trial_data);\n  };\n\n  async simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt:\n        this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true) +\n        trial.enable_button_after,\n      response: this.jsPsych.randomization.randomInt(0, trial.choices.length - 1),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.clickTarget(\n          display_element.querySelector(\n            `#jspsych-audio-button-response-btngroup [data-choice=\"${data.response}\"]`\n          ),\n          data.rt\n        );\n      }\n    };\n\n    this.trial(display_element, trial, () => {\n      load_callback();\n      if (!trial.response_allowed_while_playing) {\n        this.audio.addEventListener(\"ended\", respond);\n      } else {\n        respond();\n      }\n    });\n  }\n}\n\nexport default AudioButtonResponsePlugin;\n"],"names":[],"mappings":";;;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECmHA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-audio-button-response\",\n  \"version\": \"2.1.1\",\n  \"description\": \"jsPsych plugin for playing an audio file and getting a button response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-audio-button-response\"\n  },\n  \"author\": \"Kristin Diep\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/audio-button-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import autoBind from \"auto-bind\";\nimport { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { AudioPlayerInterface } from \"../../jspsych/src/modules/plugin-api/AudioPlayer\";\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"audio-button-response\",\n  version: version,\n  parameters: {\n    /** Path to audio file to be played. */\n    stimulus: {\n      type: ParameterType.AUDIO,\n      default: undefined,\n    },\n    /** Labels for the buttons. Each different string in the array will generate a different button.  */\n    choices: {\n      type: ParameterType.STRING,\n      default: undefined,\n      array: true,\n    },\n    /**\n     * A function that generates the HTML for each button in the `choices` array. The function gets the string\n     * and index of the item in the `choices` array and should return valid HTML. If you want to use different\n     * markup for each button, you can do that by using a conditional on either parameter. The default parameter\n     * returns a button element with the text label of the choice.\n     */\n    button_html: {\n      type: ParameterType.FUNCTION,\n      default: function (choice: string, choice_index: number) {\n        return `<button class=\"jspsych-btn\">${choice}</button>`;\n      },\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     *  is that it can be used to provide a reminder about the action the participant is supposed to take\n     * (e.g., which key to press). */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial\n     * will wait for a response indefinitely */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** Setting to `'grid'` will make the container element have the CSS property `display: grid` and enable the\n     * use of `grid_rows` and `grid_columns`. Setting to `'flex'` will make the container element have the CSS\n     * property `display: flex`. You can customize how the buttons are laid out by adding inline CSS in the `button_html` parameter.\n     */\n    button_layout: {\n      type: ParameterType.STRING,\n      default: \"grid\",\n    },\n    /** The number of rows in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the\n     * number of rows will be determined automatically based on the number of buttons and the number of columns.\n     */\n    grid_rows: {\n      type: ParameterType.INT,\n      default: 1,\n    },\n    /** The number of columns in the button grid. Only applicable when `button_layout` is set to `'grid'`.\n     * If null, the number of columns will be determined automatically based on the number of buttons and the\n     * number of rows.\n     */\n    grid_columns: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force\n     * the participant to listen to the stimulus for a fixed amount of time, even if they respond before the time is complete. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** If true, then the trial will end as soon as the audio file finishes playing.  */\n    trial_ends_after_audio: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n    /**\n     * If true, then responses are allowed while the audio is playing. If false, then the audio must finish\n     * playing before the button choices are enabled and a response is accepted. Once the audio has played\n     * all the way through, the buttons are enabled and a response is allowed (including while the audio is\n     * being re-played via on-screen playback controls).\n     */\n    response_allowed_while_playing: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** How long the button will delay enabling in milliseconds. If `response_allowed_while_playing` is `true`,\n     * the timer will start immediately. If it is `false`, the timer will start at the end of the audio. */\n    enable_button_after: {\n      type: ParameterType.INT,\n      default: 0,\n    },\n  },\n  data: {\n    /** The path of the audio file that was played. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first began playing until the participant's response.*/\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** Indicates which button the participant pressed. The first button in the `choices` array is 0, the second is 1, and so on. */\n    response: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * If the browser supports it, audio files are played using the WebAudio API. This allows for reasonably precise \n * timing of the playback. The timing of responses generated is measured against the WebAudio specific clock, \n * improving the measurement of response times. If the browser does not support the WebAudio API, then the audio file is \n * played with HTML5 audio. \n\n * Audio files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if \n * you are using timeline variables or another dynamic method to specify the audio stimulus, you will need \n * to [manually preload](../overview/media-preloading.md#manual-preloading) the audio.\n\n * The trial can end when the participant responds, when the audio file has finished playing, or if the participant \n * has failed to respond within a fixed length of time. You can also prevent a button response from being made before the \n * audio has finished playing.\n * \n * @author Kristin Diep\n * @see {@link https://www.jspsych.org/latest/plugins/audio-button-response/ audio-button-response plugin documentation on jspsych.org}\n */\nclass AudioButtonResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  private audio: AudioPlayerInterface;\n  private params: TrialType<Info>;\n  private buttonElements: HTMLElement[] = [];\n  private display: HTMLElement;\n  private response: { rt: number; button: number } = { rt: null, button: null };\n  private context: AudioContext;\n  private startTime: number;\n  private trial_complete: (trial_data: { rt: number; stimulus: string; response: number }) => void;\n\n  constructor(private jsPsych: JsPsych) {\n    autoBind(this);\n  }\n\n  async trial(display_element: HTMLElement, trial: TrialType<Info>, on_load: () => void) {\n    this.params = trial;\n    this.display = display_element;\n    // setup stimulus\n    this.context = this.jsPsych.pluginAPI.audioContext();\n\n    // load audio file\n    this.audio = await this.jsPsych.pluginAPI.getAudioPlayer(trial.stimulus);\n\n    // set up end event if trial needs it\n    if (trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.end_trial);\n    }\n\n    // enable buttons after audio ends if necessary\n    if (!trial.response_allowed_while_playing && !trial.trial_ends_after_audio) {\n      this.audio.addEventListener(\"ended\", this.enable_buttons);\n    }\n\n    // Display buttons\n    const buttonGroupElement = document.createElement(\"div\");\n    buttonGroupElement.id = \"jspsych-audio-button-response-btngroup\";\n    if (trial.button_layout === \"grid\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-grid\");\n      if (trial.grid_rows === null && trial.grid_columns === null) {\n        throw new Error(\n          \"You cannot set `grid_rows` to `null` without providing a value for `grid_columns`.\"\n        );\n      }\n      const n_cols =\n        trial.grid_columns === null\n          ? Math.ceil(trial.choices.length / trial.grid_rows)\n          : trial.grid_columns;\n      const n_rows =\n        trial.grid_rows === null\n          ? Math.ceil(trial.choices.length / trial.grid_columns)\n          : trial.grid_rows;\n      buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;\n      buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;\n    } else if (trial.button_layout === \"flex\") {\n      buttonGroupElement.classList.add(\"jspsych-btn-group-flex\");\n    }\n\n    for (const [choiceIndex, choice] of trial.choices.entries()) {\n      buttonGroupElement.insertAdjacentHTML(\"beforeend\", trial.button_html(choice, choiceIndex));\n      const buttonElement = buttonGroupElement.lastChild as HTMLElement;\n      buttonElement.dataset.choice = choiceIndex.toString();\n      buttonElement.addEventListener(\"click\", () => {\n        this.after_response(choiceIndex);\n      });\n      this.buttonElements.push(buttonElement);\n    }\n\n    display_element.appendChild(buttonGroupElement);\n\n    // Show prompt if there is one\n    if (trial.prompt !== null) {\n      display_element.insertAdjacentHTML(\"beforeend\", trial.prompt);\n    }\n\n    if (trial.response_allowed_while_playing) {\n      if (trial.enable_button_after > 0) {\n        this.disable_buttons();\n        this.enable_buttons();\n      }\n    } else {\n      this.disable_buttons();\n    }\n\n    // end trial if time limit is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        this.end_trial();\n      }, trial.trial_duration);\n    }\n\n    on_load();\n\n    // start time\n    this.startTime = performance.now();\n    if (this.context !== null) {\n      this.startTime = this.context.currentTime;\n    }\n\n    // start audio\n    this.audio.play();\n\n    return new Promise((resolve) => {\n      // hold the .resolve() function from the Promise that ends the trial\n      this.trial_complete = resolve;\n    });\n  }\n\n  private disable_buttons = () => {\n    for (const button of this.buttonElements) {\n      button.setAttribute(\"disabled\", \"disabled\");\n    }\n  };\n\n  private enable_buttons_without_delay = () => {\n    for (const button of this.buttonElements) {\n      button.removeAttribute(\"disabled\");\n    }\n  };\n\n  private enable_buttons_with_delay = (delay: number) => {\n    this.jsPsych.pluginAPI.setTimeout(this.enable_buttons_without_delay, delay);\n  };\n\n  private enable_buttons() {\n    if (this.params.enable_button_after > 0) {\n      this.enable_buttons_with_delay(this.params.enable_button_after);\n    } else {\n      this.enable_buttons_without_delay();\n    }\n  }\n\n  // function to handle responses by the subject\n  private after_response = (choice) => {\n    // measure rt\n    var endTime = performance.now();\n    var rt = Math.round(endTime - this.startTime);\n    if (this.context !== null) {\n      endTime = this.context.currentTime;\n      rt = Math.round((endTime - this.startTime) * 1000);\n    }\n    this.response.button = parseInt(choice);\n    this.response.rt = rt;\n\n    // disable all the buttons after a response\n    this.disable_buttons();\n\n    if (this.params.response_ends_trial) {\n      this.end_trial();\n    }\n  };\n\n  // method to end trial when it is time\n  private end_trial = () => {\n    // remove end event listeners if they exist\n    this.audio.removeEventListener(\"ended\", this.end_trial);\n    this.audio.removeEventListener(\"ended\", this.enable_buttons);\n\n    // stop the audio file if it is playing\n    this.audio.stop();\n\n    // gather the data to store for the trial\n    var trial_data = {\n      rt: this.response.rt,\n      stimulus: this.params.stimulus,\n      response: this.response.button,\n    };\n\n    // move on to the next trial\n    this.trial_complete(trial_data);\n  };\n\n  async simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt:\n        this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true) +\n        trial.enable_button_after,\n      response: this.jsPsych.randomization.randomInt(0, trial.choices.length - 1),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    const respond = () => {\n      if (data.rt !== null) {\n        this.jsPsych.pluginAPI.clickTarget(\n          display_element.querySelector(\n            `#jspsych-audio-button-response-btngroup [data-choice=\"${data.response}\"]`\n          ),\n          data.rt\n        );\n      }\n    };\n\n    this.trial(display_element, trial, () => {\n      load_callback();\n      if (!trial.response_allowed_while_playing) {\n        this.audio.addEventListener(\"ended\", respond);\n      } else {\n        respond();\n      }\n    });\n  }\n}\n\nexport default AudioButtonResponsePlugin;\n"],"names":[],"mappings":";;;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECmHA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jspsych/plugin-audio-button-response",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "jsPsych plugin for playing an audio file and getting a button response",
   "type": "module",
   "main": "dist/index.cjs",

package/src/index.spec.ts

@@ -273,9 +273,9 @@ describe("audio-button-response", () => {
       use_webaudio: false,
     });
 
-    await startTimeline(timeline, jsPsych);
+    const { displayElement } = await startTimeline(timeline, jsPsych);
 
-    const btns = document.querySelectorAll(".jspsych-html-button-response-button button");
+    const btns = displayElement.querySelectorAll(".jspsych-html-button-response-button button");
 
     for (let i = 0; i < btns.length; i++) {
       expect(btns[i].getAttribute("disabled")).toBe(true);

package/src/index.ts

@@ -291,13 +291,13 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
 
   // method to end trial when it is time
   private end_trial = () => {
-    // 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);
 
+    // stop the audio file if it is playing
+    this.audio.stop();
+
     // gather the data to store for the trial
     var trial_data = {
       rt: this.response.rt,