Merge pull request #19 from brown-ccv/feat-message-fixes

fix: 🐛 add stimulus parameter to userId and showmessage
brown-ccv · Feb 10, 2021 · 0ebbc9e · 0ebbc9e
2 parents 2575f41 + 0b9b2a5
commit 0ebbc9e
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 20 deletions.
diff --git a/app.css b/app.css
@@ -21,7 +21,7 @@ p, li {
   position: absolute;
 }
 
-.main-prompt, .beads_container {
+.main-prompt, .center_container {
   height: 100vh;
   display: flex;
   flex-direction: row;

diff --git a/lib/markup/stimuli.js b/lib/markup/stimuli.js
@@ -1,8 +1,10 @@
 module.exports = {
-
-  baseStimulus: function(element, prompt=false){
-  const class_ = (prompt) ? 'main-prompt': 'main'
-  return `<div class=${class_}>${element}</div>`
-}
-}
-
+  baseStimulus: function (element, prompt = false, centered = false) {
+    const class_ = centered
+      ? "center_container"
+      : prompt
+      ? "main-prompt"
+      : "main";
+    return `<div class=${class_}>${element}</div>`;
+  },
+};
diff --git a/tests/fixation.spec.js b/tests/fixation.spec.js
@@ -6,7 +6,6 @@ describe("Fixation trial", () => {
   it("fixation without photodiode box", () => {
     const config = init({ USE_PHOTODIODE: false });
     const result = fixation(config, {
-      responseType: "html_keyboard_response",
       duration: 100,
     });
     expect(result.stimulus).toContain("fixation-dot");
@@ -19,7 +18,6 @@ describe("Fixation trial", () => {
     const config = init({ USE_PHOTODIODE: true });
     let data = { code: null };
     const result = fixation(config, {
-      responseType: "html_keyboard_response",
       duration: 100,
       taskCode: 10,
       numBlinks: 10,
@@ -33,7 +31,6 @@ describe("Fixation trial", () => {
   it("fixation with jsPsych.NO_KEYS", () => {
     const config = init({ USE_PHOTODIODE: false });
     const result = fixation(config, {
-      responseType: "html_keyboard_response",
       duration: 100,
       buttons: jsPsych.NO_KEYS,
     });
@@ -44,7 +41,6 @@ describe("Fixation trial", () => {
     const config = init({ USE_PHOTODIODE: false });
     const choices = ["p", "q"];
     const result = fixation(config, {
-      responseType: "html_keyboard_response",
       duration: 100,
       buttons: choices,
     });

diff --git a/tests/showMessage.spec.js b/tests/showMessage.spec.js
@@ -71,4 +71,17 @@ describe("showMessage trial", () => {
     });
     expect(result.on_start(trial)).not.toEqual("");
   });
+
+  it("showMessage with stimulus", () => {
+    const config = init({ USE_PHOTODIODE: false });
+    const stimulus = `<h3>Experiment Start</h3>`;
+    const result = showMessage(config, {
+      responseType: "html_keyboard_response",
+      duration: 100,
+      stimulus: stimulus,
+      taskCode: 10,
+      numBlinks: 10,
+    });
+    expect(result.stimulus).toContain(stimulus);
+  });
 });
diff --git a/tests/userId.spec.js b/tests/userId.spec.js
@@ -7,10 +7,19 @@ describe("userId trial", () => {
     const config = init({ USE_MTURK: true });
     const setIdMessage = "Setting User ID";
     const result = userId(jsPsych, config, {
-      responseType: "html_keyboard_response",
       duration: 100,
       setIdMessage: setIdMessage,
     });
     expect(result.stimulus).toContain(setIdMessage);
   });
+
+  it("userId with stimulus", () => {
+    const config = init({ USE_MTURK: true });
+    const stimulus = "<h3>Setting User ID</h3>";
+    const result = userId(jsPsych, config, {
+      duration: 100,
+      stimulus: stimulus,
+    });
+    expect(result.stimulus).toContain(stimulus);
+  });
 });
diff --git a/trials/fixation.js b/trials/fixation.js
@@ -34,7 +34,7 @@ module.exports = function (config, options) {
   };
 
   let stimulus =
-    '<div class="beads_container"><div id="fixation-dot"> </div></div>';
+    '<div class="center_container"><div id="fixation-dot"> </div></div>';
   if (config.USE_PHOTODIODE) stimulus += photodiodeGhostBox();
 
   return {

diff --git a/trials/showMessage.js b/trials/showMessage.js
@@ -17,6 +17,7 @@ const { baseStimulus } = require("../lib/markup/stimuli");
  * @param {Object} options
  * @param {string} options.responseType - This tells jsPsych which plugin file to use to run the trial.
  * @param {number} options.duration - The trial duration in milliseconds.
+ * @param {HTML string} options.stimulus - Onscreen stimulus in HTML to be shown in the trial, if not set default text is empty. If the stimulus is not provided, message should be provided as a string.
  * @param {string} options.message - Onscreen message to be shown in the trial, if not set default text is empty.
  * @param {boolean} options.onstart - True if the message is to be display on start of the trial. False if the message needs to be in the stimulus.(default: false)
  * @param {boolean} options.responseEndsTrial - True if the trial ends on response,false if the trial waits for the duration, by default false value.
@@ -28,6 +29,7 @@ const { baseStimulus } = require("../lib/markup/stimuli");
 module.exports = function (config, options) {
   const defaults = {
     message: "",
+    stimulus: "",
     onstart: false,
     responseEndsTrial: false,
     taskCode: null,
@@ -37,24 +39,30 @@ module.exports = function (config, options) {
     responseType,
     duration,
     message,
+    stimulus,
     onstart,
     responseEndsTrial,
     taskCode,
     numBlinks,
     buttons,
   } = { ...defaults, ...options };
 
-  let stimulus = onstart ? baseStimulus(message) : baseStimulus(message, true);
-  if (config.USE_PHOTODIODE) stimulus += photodiodeGhostBox();
+  let stimulusOrMessage =
+    message !== ""
+      ? onstart
+        ? baseStimulus(`<h1>${message}</h1>`, true, true)
+        : baseStimulus(`<h1>${message}</h1>`, true)
+      : stimulus;
+  if (config.USE_PHOTODIODE) stimulusOrMessage += photodiodeGhostBox();
 
   return {
     type: responseType,
-    stimulus: !onstart ? stimulus : "",
+    stimulus: !onstart ? stimulusOrMessage : "",
     trial_duration: duration,
     response_ends_trial: responseEndsTrial,
     choices: buttons,
     on_start: (trial) => {
-      onstart ? (trial.stimulus = stimulus) : "";
+      onstart ? (trial.stimulus = stimulusOrMessage) : "";
     },
     on_load: () =>
       taskCode != null ? pdSpotEncode(taskCode, numBlinks, config) : null,

diff --git a/trials/userId.js b/trials/userId.js
@@ -13,6 +13,7 @@ const { baseStimulus } = require("../lib/markup/stimuli");
  * @param {boolean} config.USE_MTURK - USE_MTURK flag
  * @param {Object} options
  * @param {number} options.duration - The trial duration in milliseconds.
+ * @param {HTML string} options.stimulus - Onscreen stimulus in HTML to be shown in the trial, if not set default text is empty. If the stimulus is not provided, message should be provided as a string.
  * @param {string} options.setIdMessage - Onscreen text for setting user id or for the input box to enter patient id.
  * @param {boolean} options.responseEndsTrial - True if the trial ends on response,false if the trial waits for the duration, by default false value.
  * @param {boolean} options.defaultPatientId - The patient id to show when requesting a patient ID, if not set default is empty.
@@ -21,20 +22,27 @@ const { baseStimulus } = require("../lib/markup/stimuli");
 module.exports = function (jsPsych, config, options) {
   const defaults = {
     setIdMessage: "",
+    stimulus: "",
     responseEndsTrial: false,
     defaultPatientId: "",
   };
   const {
     duration,
+    stimulus,
     setIdMessage,
     responseEndsTrial,
     defaultPatientId,
   } = { ...defaults, ...options };
 
+  const stimulusOrMessage =
+    setIdMessage !== ""
+      ? baseStimulus(`<h1>${setIdMessage}</h1>`, true)
+      : stimulus;
+
   if (config.USE_MTURK) {
     return {
-      type: 'html_keyboard_response',
-      stimulus: baseStimulus(`<h1>${setIdMessage}</h1>`, true),
+      type: "html_keyboard_response",
+      stimulus: stimulusOrMessage,
       response_ends_trial: responseEndsTrial,
       trial_duration: duration,
       on_finish: (data) => {