ref: Check config at trial level

src/lib/markup/photodiode.js

@@ -19,6 +19,7 @@ const photodiodeGhostBox = div(span("", { id: "photodiode-spot", class: "photodi
  * Note that this function must be executed inside the "on_load" callback of a trial
  * @param {number} taskCode The unique code for the given trial on which this function executes
  */
+// TODO #355: Conditional check should be at the task level (pass settings here)
 function pdSpotEncode(taskCode) {
   if (!config.USE_ELECTRON) {
     throw new Error("photodiodeSpot trial is only available when running inside Electron");

src/timelines/honeycombBlock.js

@@ -4,8 +4,16 @@ import { config, eventCodes, taskSettings } from "../config/main";
 import { photodiodeGhostBox, pdSpotEncode } from "../lib/markup/photodiode";
 import { buildFixationTrial } from "../trials/fixation";
 
+/**
+ * Builds the blocks of trials that form the core of the Honeycomb experiment
+ *
+ * 1) A fixation dot is shown at the center of the screen
+ * 2) The stimulus image is shown and the user is prompted to press the correct key
+ *
+ * Note that the block is conditionally rendered and repeated based on the task settings
+ */
 function buildHoneycombBlock(jsPsych) {
-  const { honeycomb: honeycombSettings } = taskSettings;
+  const honeycombSettings = taskSettings.honeycomb;
 
   const fixationTrial = buildFixationTrial(jsPsych);
 
@@ -35,7 +43,7 @@ function buildHoneycombBlock(jsPsych) {
     },
     // Conditionally flashes the photodiode when the trial first loads
     on_load: () => {
-      if (config.USE_PHOTODIODE) pdSpotEncode(eventCodes.honeycomb, 1, config);
+      if (config.USE_PHOTODIODE) pdSpotEncode(eventCodes.honeycomb);
     },
     // Add a boolean value ("correct") to the data - if the user responded with the correct key or not
     on_finish: (data) => {
@@ -53,10 +61,10 @@ function buildHoneycombBlock(jsPsych) {
    *
    */
   const honeycombBlock = {
-    timeline: [fixationTrial, taskTrial],
     randomize_order: honeycombSettings.randomize_order,
     repetitions: honeycombSettings.repetitions,
     timeline_variables: honeycombSettings.timeline_variables,
+    timeline: [fixationTrial, taskTrial],
   };
   return honeycombBlock;
 }

src/timelines/honeycombTimeline.js

@@ -1,4 +1,4 @@
-import { enterFullscreen, exitFullscreen } from "../trials/fullscreen";
+import { enterFullscreenTrial, exitFullscreenTrial } from "../trials/fullscreen";
 import {
   buildDebriefTrial,
   finishTrial,
@@ -8,7 +8,7 @@ import {
 } from "../trials/honeycombTrials";
 
 import { buildHoneycombBlock } from "./honeycombBlock";
-import { preamble } from "./preamble";
+import { buildPreambleBlock } from "./preamble";
 
 /**
  * This timeline builds the example reaction time task from the jsPsych tutorial.
@@ -17,20 +17,25 @@ import { preamble } from "./preamble";
  * See the jsPsych documentation for more: https://www.jspsych.org/7.3/tutorials/rt-task/
  */
 function buildHoneycombTimeline(jsPsych) {
-  const honeycombBlock = buildHoneycombBlock(jsPsych); // The first block repeats 5 times
+  const preambleBlock = buildPreambleBlock();
+
+  // The first block repeats 5 times
+  // TODO: Pull from config here and pass into function
+  const honeycombBlock = buildHoneycombBlock(jsPsych);
+
   const debriefTrial = buildDebriefTrial(jsPsych);
 
   const timeline = [
     // TODO #231: Use the new welcome trial inside the preamble
-    preamble,
+    preambleBlock,
     welcomeTrial,
-    enterFullscreen,
+    enterFullscreenTrial,
     preloadTrial,
     instructionsTrial,
     honeycombBlock,
     debriefTrial,
     finishTrial,
-    exitFullscreen,
+    exitFullscreenTrial,
   ];
   return timeline;
 }

src/timelines/main.js

@@ -1,5 +1,6 @@
 import { config } from "../config/main";
-import { cameraEnd, cameraStart } from "../trials/camera";
+import { buildCameraEndTrial, buildCameraStartTrial } from "../trials/camera";
+
 import { buildHoneycombTimeline } from "./honeycombTimeline";
 
 /**
@@ -24,8 +25,9 @@ function buildTimeline(jsPsych, studyID, participantID) {
 
   // Dynamically adds the camera trials to the experiment if config.USE_CAMERA
   if (config.USE_CAMERA) {
-    timeline.unshift(cameraStart(jsPsych)); // Add cameraStart as the first trial
-    timeline.push(cameraEnd(jsPsych, 5000)); // Add cameraEnd as the last trial
+    // TODO: These should be a part of the start and end blocks
+    timeline.unshift(buildCameraStartTrial(jsPsych)); // Add buildCameraStartTrial as the first trial
+    timeline.push(buildCameraEndTrial(jsPsych, 5000)); // Add buildCameraEndTrial as the last trial
   }
 
   return timeline;

src/timelines/preamble.js

@@ -1,18 +1,21 @@
 import { config } from "../config/main";
 
-import holdUpMarker from "../trials/holdUpMarker";
-import startCode from "../trials/startCode";
-import { showName, showWelcome } from "../trials/welcome";
+import { enterFullscreenTrial } from "../trials/fullscreen";
+import { holdUpMarkerTrial } from "../trials/holdUpMarker";
+import { startCodeTrial } from "../trials/startCode";
+import { welcomeTrial, nameTrial } from "../trials/welcome";
 
-/**
- * Timeline of initial trials used for setup and instructions
- */
-const timeline = [showName(), showWelcome()];
+/** Builds the blocks of trials needed to start and setup the experiment */
+function buildPreambleBlock() {
+  const timeline = [nameTrial, enterFullscreenTrial, welcomeTrial];
 
-// Add photodiode trials
-if (config.USE_PHOTODIODE) {
-  timeline.push(holdUpMarker());
-  timeline.push(startCode());
+  // Conditionally add the photodiode setup trials
+  if (config.USE_PHOTODIODE) {
+    timeline.push(holdUpMarkerTrial);
+    timeline.push(startCodeTrial);
+  }
+
+  return { timeline };
 }
 
-export const preamble = { timeline };
+export { buildPreambleBlock };

src/trials/adjustVolume.js

@@ -3,16 +3,15 @@ import { language } from "../config/main";
 import { baseStimulus } from "../lib/markup/stimuli";
 import { h1 } from "../lib/markup/tags";
 
-// TODO: Refactor to constant
-function adjustVolume() {
-  const adjustVolumeMarkup = h1(language.trials.adjustVolume);
+/** Trial that prompts the user to adjust the volume on their computer */
+const adjustVolumeTrial = {
+  type: htmlKeyboardResponse,
+  stimulus: () => {
+    const adjustVolumeMarkup = h1(language.trials.adjustVolume);
+    return baseStimulus(adjustVolumeMarkup, true);
+  },
+  prompt: language.prompts.continue.prompt,
+  response_ends_trial: true,
+};
 
-  return {
-    type: htmlKeyboardResponse,
-    stimulus: baseStimulus(adjustVolumeMarkup, true),
-    prompt: language.prompts.continue.prompt,
-    response_ends_trial: true,
-  };
-}
-
-export default adjustVolume;
+export { adjustVolumeTrial };

src/trials/camera.js

@@ -10,18 +10,11 @@ import { div, h1, p, tag } from "../lib/markup/tags";
 /**
  * A trial that begins recording the participant using their computer's default camera
  * @param {Object} jsPsych The jsPsych instance being used to run the task
- * @returns
+ * @returns {Object} A jsPsych trial object
  */
 // TODO: Refactor to buildCameraStartTrial
 // TODO #342: refactor to record using web USB
-function cameraStart(jsPsych) {
-  const videoMarkup = tag("video", "", { id: "webcam", width: 640, height: 480, autoplay: true });
-  const cameraStartMarkup = p(language.trials.camera.start);
-  const markup = div(cameraStartMarkup + videoMarkup, {
-    // TODO #344: Need to get rid of bootstrap (this is just centering it)
-    class: "d-flex flex-column align-items-center",
-  });
-
+function buildCameraStartTrial(jsPsych) {
   return {
     timeline: [
       {
@@ -34,7 +27,21 @@ function cameraStart(jsPsych) {
       {
         // Helps participant center themselves inside the camera
         type: htmlButtonResponse,
-        stimulus: baseStimulus(markup, true) + photodiodeGhostBox,
+        stimulus: () => {
+          const videoMarkup = tag("video", "", {
+            id: "camera",
+            width: 640,
+            height: 480,
+            autoplay: true,
+          });
+          const cameraStartMarkup = p(language.trials.camera.start);
+          const trialMarkup = div(cameraStartMarkup + videoMarkup, {
+            // TODO #344: Need to get rid of bootstrap (this is just centering it)
+            class: "d-flex flex-column align-items-center",
+          });
+          // TODO: Show photodiodeGhostBox as prompt
+          return baseStimulus(trialMarkup, true) + photodiodeGhostBox;
+        },
         choices: [language.prompts.continue.button],
         response_ends_trial: true,
         on_start: () => {
@@ -85,13 +92,14 @@ function cameraStart(jsPsych) {
  * A trial that finishes recording the participant using their computer's default camera
  *
  * @param {Number} duration How long to show the trial for
- * @returns
+ * @returns {Object} A jsPsych trial object
  */
-function cameraEnd(jsPsych, duration) {
+function buildCameraEndTrial(jsPsych, duration) {
   const recordingEndMarkup = h1(language.trials.camera.end);
 
   return {
     type: htmlKeyboardResponse,
+    // TODO: Show photodiodeGhostBox as prompt
     stimulus: baseStimulus(recordingEndMarkup, true) + photodiodeGhostBox,
     trial_duration: duration,
     on_start: () => {
@@ -112,4 +120,4 @@ function cameraEnd(jsPsych, duration) {
   };
 }
 
-export { cameraStart, cameraEnd };
+export { buildCameraStartTrial, buildCameraEndTrial };

src/trials/fixation.js

@@ -38,7 +38,7 @@ export function buildFixationTrial(jsPsych) {
     },
     // Conditionally flash the photodiode when the trial first loads
     on_load: () => {
-      if (config.USE_PHOTODIODE) pdSpotEncode(fixationCode, 1, config);
+      if (config.USE_PHOTODIODE) pdSpotEncode(fixationCode);
     },
   };
 }

src/trials/fullscreen.js

@@ -4,7 +4,7 @@ import jsPsychFullscreen from "@jspsych/plugin-fullscreen";
  * Trial to enter fullscreen mode.
  * Any trials after this one will be run while the app/browser is in fullscreen.
  */
-export const enterFullscreen = {
+export const enterFullscreenTrial = {
   type: jsPsychFullscreen,
   fullscreen_mode: true,
 };
@@ -13,7 +13,7 @@ export const enterFullscreen = {
  * Trial to exit fullscreen mode.
  * Any trials after this one will NOT be run while the app/browser is in fullscreen.
  */
-export const exitFullscreen = {
+export const exitFullscreenTrial = {
   type: jsPsychFullscreen,
   fullscreen_mode: false,
 };

src/trials/holdUpMarker.js

@@ -1,26 +1,33 @@
 import htmlButtonResponse from "@jspsych/plugin-html-button-response";
 
-import { config, language } from "../config/main";
-import { photodiodeGhostBox } from "../lib/markup/photodiode";
+import { config, eventCodes, language } from "../config/main";
+import { pdSpotEncode, photodiodeGhostBox } from "../lib/markup/photodiode";
 import { baseStimulus } from "../lib/markup/stimuli";
 import { h1, p } from "../lib/markup/tags";
 
 // TODO #330: Rename as checkEEG? (this is a similar trial to cameraStart)
 // TODO #330: Actually check to see if USB is connected? This isn't testing anything?
-// TODO: Refactor to constant
-function holdUpMarker() {
-  const eventMarkerMarkup = h1(language.trials.eventMarker.connected, { style: "color: green;" });
+const holdUpMarkerTrial = {
+  type: htmlButtonResponse,
+  stimulus: () => {
+    const eventMarkerMarkup = h1(language.trials.eventMarker.connected, {
+      style: "color: green;",
+    });
+    return baseStimulus(eventMarkerMarkup, true);
+  },
+  prompt: () => {
+    let holdUpMarkerPrompt = p(language.trials.holdUpMarker);
 
-  return {
-    type: htmlButtonResponse,
-    stimulus: baseStimulus(eventMarkerMarkup, true) + photodiodeGhostBox,
-    prompt: [p(language.trials.holdUpMarker)],
-    choices: [language.prompts.continue.button],
-    on_start: async () => {
-      // Ensure event marker is connected if using it
-      if (config.USE_EEG) await window.electronAPI.checkSerialPort();
-    },
-  };
-}
+    // Conditionally add the photodiodeGhostBox
+    if (config.USE_PHOTODIODE) holdUpMarkerPrompt += photodiodeGhostBox;
 
-export default holdUpMarker;
+    return holdUpMarkerPrompt;
+  },
+  choices: [language.prompts.continue.button],
+  // Conditionally flash the photodiode when the trial first loads
+  on_load: () => {
+    if (config.USE_PHOTODIODE) pdSpotEncode(eventCodes.open_task);
+  },
+};
+
+export { holdUpMarkerTrial };

src/trials/startCode.js

@@ -1,24 +1,25 @@
 import htmlKeyboardResponse from "@jspsych/plugin-html-keyboard-response";
 
-import { audioCodes, eventCodes, language } from "../config/main";
+import { audioCodes, config, eventCodes, language } from "../config/main";
 import { pdSpotEncode, photodiodeGhostBox } from "../lib/markup/photodiode";
 import { baseStimulus } from "../lib/markup/stimuli";
 import { h1 } from "../lib/markup/tags";
 import { beep } from "../lib/utils";
 
-// TODO: Refactor to constants
-function startCode() {
-  const startCodeMarkup = h1(language.prompts.settingUp);
-  return {
-    type: htmlKeyboardResponse,
-    stimulus: baseStimulus(startCodeMarkup, true) + photodiodeGhostBox,
-    trial_duration: 2000,
-    on_load: () => {
-      // Displays the photodiode spot and plays an audible beep when the trial first loads
-      pdSpotEncode(eventCodes.open_task);
-      beep(audioCodes);
-    },
-  };
-}
+const startCodeTrial = {
+  type: htmlKeyboardResponse,
+  // TODO: Display photodiodeGhostBox as prompt
+  stimulus: () => {
+    const startCodeMarkup = h1(language.prompts.settingUp);
+    return baseStimulus(startCodeMarkup, true) + photodiodeGhostBox;
+  },
+  trial_duration: 2000,
+  // Conditionally flash the photodiode and plays an audible beep when the trial first loads
+  on_load: () => {
+    // TODO: Pass config values as parameters to the function
+    if (config.USE_PHOTODIODE) pdSpotEncode(eventCodes.open_task);
+    if (config.USE_VOLUME) beep(audioCodes);
+  },
+};
 
-export default startCode;
+export { startCodeTrial };