diff --git a/app.css b/app.css index f4d5bfa..7d8fc70 100644 --- 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 index 2a9a52a..15b884a 100644 --- 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 `
${element}
` -} -} - + baseStimulus: function (element, prompt = false, centered = false) { + const class_ = centered + ? "center_container" + : prompt + ? "main-prompt" + : "main"; + return `
${element}
`; + }, +}; diff --git a/tests/fixation.spec.js b/tests/fixation.spec.js index 31f8d24..a652488 100644 --- 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 index 0751b43..17b78fa 100644 --- 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 = `

Experiment Start

`; + 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 index 678f037..8cb20b9 100644 --- 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 = "

Setting User ID

"; + const result = userId(jsPsych, config, { + duration: 100, + stimulus: stimulus, + }); + expect(result.stimulus).toContain(stimulus); + }); }); diff --git a/trials/fixation.js b/trials/fixation.js index 980bac5..e2d0ee2 100644 --- a/trials/fixation.js +++ b/trials/fixation.js @@ -34,7 +34,7 @@ module.exports = function (config, options) { }; let stimulus = - '
'; + '
'; if (config.USE_PHOTODIODE) stimulus += photodiodeGhostBox(); return { diff --git a/trials/showMessage.js b/trials/showMessage.js index 329c621..3aa1ba3 100644 --- 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,6 +39,7 @@ module.exports = function (config, options) { responseType, duration, message, + stimulus, onstart, responseEndsTrial, taskCode, @@ -44,17 +47,22 @@ module.exports = function (config, options) { buttons, } = { ...defaults, ...options }; - let stimulus = onstart ? baseStimulus(message) : baseStimulus(message, true); - if (config.USE_PHOTODIODE) stimulus += photodiodeGhostBox(); + let stimulusOrMessage = + message !== "" + ? onstart + ? baseStimulus(`

${message}

`, true, true) + : baseStimulus(`

${message}

`, 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 index c20f8b9..ff74f8d 100644 --- 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(`

${setIdMessage}

`, true) + : stimulus; + if (config.USE_MTURK) { return { - type: 'html_keyboard_response', - stimulus: baseStimulus(`

${setIdMessage}

`, true), + type: "html_keyboard_response", + stimulus: stimulusOrMessage, response_ends_trial: responseEndsTrial, trial_duration: duration, on_finish: (data) => {