Merge pull request #388 from brown-ccv/ref-endBlock

ref: Add endBlock file and move trials into it

src/config/language.json

@@ -1,6 +1,5 @@
 {
   "name": "Honeycomb Task",
-  "welcome": "Welcome to the experiment. Press any key to begin.",
   "prompts": {
     "continue": {
       "prompt": "Press any key to continue.",
@@ -9,6 +8,7 @@
     "settingUp": "Setting up..."
   },
   "trials": {
+    "welcome": "Welcome to the experiment. Press any key to begin.",
     "honeycomb": {
       "instructions": {
         "read": "Please read the following instructions carefully.",
@@ -30,8 +30,7 @@
           "end": "ms."
         },
         "complete": "Press any key to complete the experiment. Thank you!"
-      },
-      "finish": "This experiment has ended."
+      }
     },
     "adjustVolume": "Set tablet volume to 50/100.",
     "camera": {
@@ -147,6 +146,7 @@
       "debriefing": {
         "confirm_completion": "Confirm Completion"
       }
-    }
+    },
+    "conclusion": "The experiment has concluded. Thank you for participating."
   }
 }

src/timelines/endBlock.js

@@ -0,0 +1,29 @@
+import { config } from "../config/main";
+import { buildCameraEndTrial } from "../trials/camera";
+import { conclusionTrial } from "../trials/conclusion";
+import { exitFullscreenTrial } from "../trials/fullscreen";
+
+/**
+ * Builds the block of trials needed to end the experiment
+ * 1) Trial used to complete the user's camera recording is displayed
+ * 2) The experiment exits fullscreen
+ *
+ * @param {Object} jsPsych The jsPsych instance being used to run the task
+ * @returns {Object} A jsPsych (nested) timeline object
+ */
+function buildEndBlock(jsPsych) {
+  const endBlock = [];
+
+  // Conditionally add the camera breakdown trials
+  if (config.USE_CAMERA) {
+    endBlock.push(buildCameraEndTrial(jsPsych));
+  }
+
+  // Add the other trials needed to end the experiment
+  endBlock.push(exitFullscreenTrial, conclusionTrial);
+
+  // Return the block as a nested timeline
+  return { timeline: endBlock };
+}
+
+export { buildEndBlock };

src/timelines/honeycombTimeline.js

@@ -1,11 +1,6 @@
-import { exitFullscreenTrial } from "../trials/fullscreen";
-import {
-  buildDebriefTrial,
-  finishTrial,
-  instructionsTrial,
-  preloadTrial,
-} from "../trials/honeycombTrials";
+import { buildDebriefTrial, instructionsTrial, preloadTrial } from "../trials/honeycombTrials";
 
+import { buildEndBlock } from "./endBlock";
 import { buildHoneycombBlock } from "./honeycombBlock";
 import { buildStartBlock } from "./startBlock";
 
@@ -24,18 +19,19 @@ function buildHoneycombTimeline(jsPsych) {
   // Build the trials that make up the Honeycomb block
   const honeycombBlock = buildHoneycombBlock(jsPsych);
 
-  // TODO #367: Move to end of the honeycombBlock?
+  // Builds the trial needed to debrief the participant on their performance
   const debriefTrial = buildDebriefTrial(jsPsych);
 
+  // Builds the trials that make up the end block
+  const endBlock = buildEndBlock(jsPsych);
+
   const timeline = [
     startBlock,
     preloadTrial,
     instructionsTrial,
     honeycombBlock,
     debriefTrial,
-    // TODO #367: Move to endBlock
-    finishTrial,
-    exitFullscreenTrial,
+    endBlock,
   ];
   return timeline;
 }

src/timelines/main.js

@@ -1,7 +1,3 @@
-import { config } from "../config/main";
-
-import { buildCameraEndTrial } from "../trials/camera";
-
 import { buildHoneycombTimeline } from "./honeycombTimeline";
 
 // Add CSS styling from jsPsych
@@ -15,6 +11,7 @@ import "../lib/markup/trials.css";
  */
 const jsPsychOptions = {
   on_trial_finish: (data) => console.log(`Trial ${data.internal_node_id} just finished:`, data),
+  on_finish: (data) => console.log("The experiment has finished:", data),
 };
 
 /**
@@ -30,13 +27,6 @@ function buildTimeline(jsPsych, studyID, participantID) {
 
   // Build all of the trials consisting of the Honeycomb task
   const timeline = buildHoneycombTimeline(jsPsych);
-
-  // Dynamically adds the camera trials to the experiment if config.USE_CAMERA
-  // TODO #367: These should be a part of the start and end blocks
-  if (config.USE_CAMERA) {
-    timeline.push(buildCameraEndTrial(jsPsych)); // Add buildCameraEndTrial as the last trial
-  }
-
   return timeline;
 }
 

src/timelines/startBlock.js

@@ -18,20 +18,21 @@ import { nameTrial, welcomeTrial } from "../trials/welcome";
  * @returns {Object} A jsPsych (nested) timeline object
  */
 function buildStartBlock(jsPsych) {
-  const timeline = [nameTrial, enterFullscreenTrial, welcomeTrial];
+  const startBlock = [nameTrial, enterFullscreenTrial, welcomeTrial];
 
   // Conditionally add the photodiode setup trials
   if (config.USE_PHOTODIODE) {
-    timeline.push(holdUpMarkerTrial);
-    timeline.push(startCodeTrial);
+    startBlock.push(holdUpMarkerTrial);
+    startBlock.push(startCodeTrial);
   }
 
   // Conditionally add the camera setup trials
   if (config.USE_CAMERA) {
-    timeline.push(buildCameraStartTrial(jsPsych));
+    startBlock.push(buildCameraStartTrial(jsPsych));
   }
 
-  return { timeline };
+  // Return the block as a nested timeline
+  return { timeline: startBlock };
 }
 
 export { buildStartBlock };

src/trials/conclusion.js

@@ -0,0 +1,14 @@
+import htmlKeyboardResponse from "@jspsych/plugin-html-keyboard-response";
+
+import { LANGUAGE } from "../config/main";
+import { h1 } from "../lib/markup/tags";
+
+/** Trial that displays a completion message for 5 seconds */
+const conclusionTrial = {
+  type: htmlKeyboardResponse,
+  stimulus: h1(LANGUAGE.trials.conclusion),
+  choices: "NO_KEYS",
+  trial_duration: 5000,
+};
+
+export { conclusionTrial };

src/trials/fixation.js

@@ -16,14 +16,14 @@ export function buildFixationTrial(jsPsych) {
 
   return {
     type: htmlKeyboardResponse,
+    choices: "NO_KEYS",
     // Display the fixation dot
     stimulus: div("", { id: "fixation-dot" }),
     prompt: () => {
       // Conditionally display the photodiodeGhostBox
       if (config.USE_PHOTODIODE) return photodiodeGhostBox;
       else return null;
     },
-    response_ends_trial: false,
     trial_duration: () => {
       if (fixationSettings.randomize_duration) {
         // Select a random duration from the durations array to show the fixation dot for

src/trials/honeycombTrials.js

@@ -3,7 +3,7 @@ import instructionsResponse from "@jspsych/plugin-instructions";
 import preloadResponse from "@jspsych/plugin-preload";
 
 import { eventCodes, LANGUAGE, SETTINGS } from "../config/main";
-import { b, div, h1, image, p } from "../lib/markup/tags";
+import { b, div, image, p } from "../lib/markup/tags";
 
 const honeycombLanguage = LANGUAGE.trials.honeycomb;
 
@@ -80,13 +80,4 @@ function buildDebriefTrial(jsPsych) {
   };
 }
 
-/** Trial that displays a completion message for 5 seconds */
-// TODO #367: Use trial inside endBlock
-const finishTrial = {
-  type: htmlKeyboardResponse,
-  stimulus: h1(honeycombLanguage.finish),
-  choices: "NO_KEYS",
-  trial_duration: 5000,
-};
-
-export { buildDebriefTrial, finishTrial, instructionsTrial, preloadTrial };
+export { buildDebriefTrial, instructionsTrial, preloadTrial };

src/trials/welcome.js

@@ -16,7 +16,7 @@ const nameTrial = {
 const welcomeTrial = {
   type: htmlKeyboardResponse,
   stimulus: () => {
-    const welcomeMarkup = h1(LANGUAGE.welcome);
+    const welcomeMarkup = h1(LANGUAGE.trials.welcome);
     return div(welcomeMarkup, { class: "bottom-prompt" }) + photodiodeGhostBox;
   },
   prompt: () => {