diff --git a/.changeset/stale-pens-grab.md b/.changeset/stale-pens-grab.md new file mode 100644 index 00000000..10090b61 --- /dev/null +++ b/.changeset/stale-pens-grab.md @@ -0,0 +1,5 @@ +--- +"@jspsych-contrib/plugin-html-swipe-response": patch +--- + +Add a stimulus container div to wrap the stimulus div. This allows the user to swipe on the container even after the stimulus has been hidden due to exceeding the stimulus duration. diff --git a/packages/plugin-html-swipe-response/README.md b/packages/plugin-html-swipe-response/README.md index 4b99e95e..9ea7b4e9 100644 --- a/packages/plugin-html-swipe-response/README.md +++ b/packages/plugin-html-swipe-response/README.md @@ -4,6 +4,8 @@ This plugin displays HTML content and records responses generated by swipe gestures, keyboard, and button responses. This is ideal for two-alternative forced choice assessments that will be administered on both mobile and desktop platforms. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the subject has failed to respond within a fixed length of time. +Setting the `stimulus_duration` parameter while using the swipe modality can result in a user experience issue, wherein the user must swipe a stimulus div tag that has been hidden after the stimulus duration has elapsed. To solve this, this plugin wraps the stimulus div tag in another tag with the ID `#jspsych-html-swipe-response-stimulus-container`. This div tag can then be styled so that they user has some visual representation of the stimulus even after the `#jspsych-html-swipe-response-stimulus-container` div has been hidden. + ## Loading ```js diff --git a/packages/plugin-html-swipe-response/docs/jspsych-html-swipe-response.md b/packages/plugin-html-swipe-response/docs/jspsych-html-swipe-response.md index e81459b0..480fd696 100644 --- a/packages/plugin-html-swipe-response/docs/jspsych-html-swipe-response.md +++ b/packages/plugin-html-swipe-response/docs/jspsych-html-swipe-response.md @@ -2,6 +2,8 @@ This plugin displays HTML content and records responses generated by swipe gestures, keyboard, and button responses. This plugin will be useful for two-alternative forced choice (2AFC) assessments that will be administered on both desktop and mobile devices. The stimulus can be animated to move off-screen before the trial ends. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the subject has failed to respond within a fixed length of time. After the user responds a `'responded'` css class gets added to the stimulus and to the button corresponding to their choice. +Setting the `stimulus_duration` parameter while using the swipe modality can result in a user experience issue, wherein the user must swipe a stimulus div tag that has been hidden after the stimulus duration has elapsed. To solve this, this plugin wraps the stimulus div tag in another tag with the ID `#jspsych-html-swipe-response-stimulus-container`. This div tag can then be styled so that they user has some visual representation of the stimulus even after the `#jspsych-html-swipe-response-stimulus-container` div has been hidden. + ## Parameters In addition to the [parameters available in all plugins](https://www.jspsych.org/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Parameters can be left unspecified if the default value is acceptable. diff --git a/packages/plugin-html-swipe-response/src/index.spec.ts b/packages/plugin-html-swipe-response/src/index.spec.ts index d3933e49..92195f7b 100644 --- a/packages/plugin-html-swipe-response/src/index.spec.ts +++ b/packages/plugin-html-swipe-response/src/index.spec.ts @@ -142,7 +142,7 @@ describe("plugin-html-swipe-response", () => { ]); expect(getHTML()).toBe( - '