Merge pull request #120 from yeatmanlab/enh/add-stimulus-container

Add a stimulus container div to plugin-html-swipe-response

.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.

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

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.

packages/plugin-html-swipe-response/src/index.spec.ts

@@ -142,7 +142,7 @@ describe("plugin-html-swipe-response", () => {
     ]);
 
     expect(getHTML()).toBe(
-      '<div id="jspsych-html-swipe-response-stimulus">this is html</div><div id="jspsych-html-swipe-response-btngroup"></div>'
+      '<div id="jspsych-html-swipe-response-stimulus-container"><div id="jspsych-html-swipe-response-stimulus">this is html</div></div><div id="jspsych-html-swipe-response-btngroup"></div>'
     );
     jest.advanceTimersByTime(500);
     await expectFinished();

packages/plugin-html-swipe-response/src/index.ts

@@ -111,7 +111,10 @@ class HtmlSwipeResponsePlugin implements JsPsychPlugin<Info> {
 
   trial(display_element: HTMLElement, trial: TrialType<Info>) {
     // display stimulus
-    let html = '<div id="jspsych-html-swipe-response-stimulus">' + trial.stimulus + "</div>";
+    let html =
+      '<div id="jspsych-html-swipe-response-stimulus-container"><div id="jspsych-html-swipe-response-stimulus">' +
+      trial.stimulus +
+      "</div></div>";
 
     //display buttons
     var buttons = [];