feat: update for EEG experiment, add triggers, update descriptions, a…

…dd new apathy questions etc. * feat: update progress bar, add eeg tweaks and update storage of data * fix: resolve eeg trigger issue and go from CHF rewards to points * fix: ignore type issues * fix: shorten trigger EEG * feat: update descriptions and images after feedback tech test * fix: limit repetitions serialport check * fix: set min-height to 800 * fix: set playerview height when not fullscreen
lnco-epfl · Dec 18, 2024 · 8f9f33b · 8f9f33b
1 parent d194820
commit 8f9f33b
Show file tree

Hide file tree

Showing 37 changed files with 34,605 additions and 2,791 deletions.
diff --git a/index.html b/index.html
@@ -23,7 +23,7 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
     />
-    <title>Graasp App Template</title>
+    <title>Cognitive Apathy Task</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -36,6 +36,8 @@
     "@types/node": "20.12.14",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "@types/w3c-web-serial": "^1.0.6",
+    "@types/w3c-web-usb": "^1.0.10",
     "alias-hq": "^6.2.3",
     "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",
@@ -50,6 +52,7 @@
     "react-dom": "18.3.1",
     "react-i18next": "14.1.3",
     "react-toastify": "10.0.5",
+    "serialport": "^12.0.0",
     "simple-keyboard": "^3.7.93",
     "typescript": "5.4.5"
   },
@@ -83,6 +86,8 @@
     "@types/i18n": "0.13.12",
     "@types/lodash": "^4.17.9",
     "@types/uuid": "9.0.8",
+    "@types/w3c-web-serial": "^1.0.6",
+    "@types/w3c-web-usb": "^1.0.10",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "@vitejs/plugin-react": "^4.2.1",

diff --git a/public/assets/images/hand.png b/public/assets/images/hand.png
diff --git a/src/config/appData.ts b/src/config/appData.ts
@@ -0,0 +1,21 @@
+import { AppData, AppDataVisibility } from '@graasp/sdk';
+
+import { ExperimentResult } from '@/modules/config/appResults';
+
+export enum AppDataType {
+  ExperimentResults = 'experiment-results',
+}
+
+export type ExperimentResultsAppData = AppData & {
+  type: AppDataType.ExperimentResults;
+  data: ExperimentResult;
+  visibility: AppDataVisibility.Member;
+};
+
+export const getDefaultExperimentResultAppData = (
+  experimentResult: ExperimentResult,
+): Pick<ExperimentResultsAppData, 'data' | 'type' | 'visibility'> => ({
+  type: AppDataType.ExperimentResults,
+  data: experimentResult,
+  visibility: AppDataVisibility.Member,
+});
diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,15 @@
 /* define colors */
+.jspsych-display-element {
+  min-height: 800px;
+}
+
+@media not all and (display-mode: fullscreen) {
+  .player-view {
+    height: 100%;
+    background-color: rgb(49, 49, 49);
+  }
+}
+
 :root {
   --graasp-primary: #5050d2;
   --code-bg: rgba(197, 197, 197, 0.37);
@@ -13,7 +24,6 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  min-height: '800px';
 }
 
 code {

diff --git a/src/locales copy/en/ns1.json b/src/locales copy/en/ns1.json
@@ -7,7 +7,7 @@
   "CALIBRATION_SECTION_MESSAGE": "<h2>Calibration</h2>You will now begin the <b>Calibration</b> section of the experiment, which consists of <b>three</b> parts. <br>Press the button below to begin.",
   "ADDITIONAL_CALIBRATION_PART_1_DIRECTIONS": "<b>You did not reach the minimum required number of key taps</b><br/>You will now perform additional calibrations tasks. The task is the same as the section you just completed<br><br><ol><li> You will place your pinky on the <b>{{KEYS_TO_HOLD_0}}</b> key<br></li><li> Place your ring finger on the <b>{{KEYS_TO_HOLD_1}}</b> key<br></li> <li>Place your middle finger on the <b>{{KEYS_TO_HOLD_2}}</b> key</li><li>Place your left thumb on the <b>spacebar</b> key</li><li>Place your right index finger on the <b>right arrow</b> key</li></ol><br><p>While still holding down with these fingers, simultaneously, when you see the <b>GO!</b>, tap the <b>{{KEY_TO_PRESS}}</b> key, <b>repeatedly</b> with your index finger <b>as fast as you can!</b></p><br><ul class = 'warning'><li>Do not tap the <b>{{KEY_TO_PRESS}}</b> key until the <b>GO!</b> appears</li> <li>Do not release the <b>{{KEYS_TO_HOLD_0}}</b>, <b>{{KEYS_TO_HOLD_1}}</b>, <b>{{KEYS_TO_HOLD_2}}</b>, <b>Spacebar</b>, <b>Right Arrow</b> until prompted.</li></ul><br><br> Press the button below to proceed.",
   "CALIBRATION_PART_1_ENDING_MESSAGE": "You will now enter the next phase of the experiment.<br><br> Press the button below to proceed.",
-  "TRIAL_BLOCKS_DIRECTIONS": "<h2>Trial Blocks</h2><h3>Part 1</h3>During this next phase of the experiment, you will have the choice to skip or accept a trial.<br><br>You may skip the trial with the <b>Left Arrow</b> on your keyboard<br>or<br>You may accept a trial with the <b>Right Arrow</b> on your keyboard<br><br>If the trial is accepted, you <b>may</b> have to complete a tapping task: <br><br><ul><li style='text-align:left'>The required target area will be shown in <b>blue</b>.<li style='text-align:left'>If the <b>top of the red bar</b> ends in the target area during the trial, you will receive the reward shown to you.</li></ul><h4>ⓘ Before the block begins, you will have a set of practice trials to familiarize yourself with the task.</h4><p style='text-align: center;'>Press the button below to proceed.</p> ",
+  "TRIAL_BLOCKS_DIRECTIONS": "<h2>Trial Blocks</h2><h3>Part 1</h3>During this next phase of the experiment, you will have the choice to skip or accept a trial.<br><br>You may skip the trial with the <b>Left Arrow</b> on your keyboard<br>or<br>You may accept a trial with the <b>Right Arrow</b> on your keyboard<br><br>If the trial is accepted, you <b>may</b> have to complete a tapping task: <br><br><ul><li style='text-align:left'>The required target area will be shown in <b>blue</b>.<li style='text-align:left'>If the <b>top of the red bar</b> ends in the target area during the trial, you will receive the reward shown to you.</li></ul> <br /> <p><b>Note on your reward:</b> The additional money you will receive for doing the experiment is linked directly to the number of points you collect. The more points you get, the more money you earn. Accepted trials that you do not have to perform still count towards your points total.<h4>ⓘ Before the block begins, you will have a set of practice trials to familiarize yourself with the task.</h4><p style='text-align: center;'>Press the button below to proceed.</p> ",
   "CALIBRATION_PART_2_ENDING_MESSAGE": "<br>You will now enter the next phase of the experiment.<br><br> Press the button below to proceed.",
   "CALIBRATION_FINISHED_DIRECTIONS": "You have finished the first set of trials... INSERT MORE HERE",
   "FINAL_CALIBRATION_SECTION_DIRECTIONS_PART_1": "<h2>Trial Blocks</h2><h3>Wrap Up</h3><p1>The next section you will complete will be similar to the start of the experiment.</p1><br><br><p1>The video below is a reminder of how the next task will be completed</p1><br><p1>When you see the <b>GO!</b>, tap the <b>{{KEY_TO_PRESS}}</b> key, <b>repeatedly</b> with your index finger <b>as fast as you can!</b></p1><br><ul class = 'warning'><li>Do not tap the <b>{{KEY_TO_PRESS}}</b> key until the <b>GO!</b> appears.</li> <li>Do not release the <b>{{KEYS_TO_HOLD_0}}</b>, <b>{{KEYS_TO_HOLD_1}}</b>, <b>{{KEYS_TO_HOLD_2}}</b>, <b>Spacebar</b>, <b>Right Arrow</b> until prompted.</li></ul>",
@@ -16,15 +16,16 @@
   "VALIDATION_VIDEO_TUTORIAL_MESSAGE": "<h2>Calibration</h2><h3>Part 3</h3><p1>Get the top of the red bar in the target area with your taps!</p1><br><ul class = 'warning'><li>Do not tap the <b>{{KEY_TO_PRESS}}</b> key until the <b>GO!</b> appears</li> <li>Do not release the <b>{{KEYS_TO_HOLD_0}}</b>, <b>{{KEYS_TO_HOLD_1}}</b>, <b>{{KEYS_TO_HOLD_2}}</b>, <b>Spacebar</b>, <b>Right Arrow</b> until prompted.</li></ul>",
   "INTERACTIVE_KEYBOARD_TUTORIAL_MESSAGE": "<br> <b>PRACTICE</b><br>On your physical keyboard:<br><ol><li> You will place your pinky on the <b>{{KEYS_TO_HOLD_0}}</b> key<br></li><li> Place your ring finger on the <b>{{KEYS_TO_HOLD_1}}</b> key<br></li> <li>Place your middle finger on the <b>{{KEYS_TO_HOLD_2}}</b> key</li><li>Place your left thumb on the <b>spacebar</b> key</li><li>Place your right index finger on the <b>right arrow</b> key</li></ol><br><p>While still holding down with these fingers, simultaneously, when you see the <b>GO!</b>, tap the <b>{{KEY_TO_PRESS}}</b> key, <b>repeatedly</b> with your index finger <b>as fast as you can!</b></p><br><ul class = 'warning'><li>Do not tap the <b>{{KEY_TO_PRESS}}</b> key until the <b>GO!</b> appears</li> <li>Do not release the <b>{{KEYS_TO_HOLD_0}}</b>, <b>{{KEYS_TO_HOLD_1}}</b>, <b>{{KEYS_TO_HOLD_2}}</b>, <b>Spacebar</b>, <b>Right Arrow</b> until prompted.</li></ul>",
   "PREMATURE_KEY_RELEASE_ERROR_MESSAGE": "You released the keys early!",
-  "LIKERT_PREAMBLE": "During this <b>last block of trials</b>, how would you respond to the following question?",
+  "LIKERT_PREAMBLE_BLOCK": "During this last part of the experiment, how would you respond to the following question?",
   "LIKERT_PREAMBLE_DEMO": "During this last block of practice trials, how would you respond to the following question?",
+  "LIKERT_PREAMBLE_FINAL_QUESTIONS": "During this last part of the experiment, please rate your feelings on the following topics.",
   "FAILED_MINIMUM_DEMO_TAPS_MESSAGE": "You did not tap enough during the last practice trial. Please try again.",
   "HOLD_KEYS_MESSAGE": "<p>Hold the <b>{{KEYS_TO_HOLD_0}}</b>, <b>{{KEYS_TO_HOLD_1}}</b>, <b>{{KEYS_TO_HOLD_2}}</b>, <b>Spacebar</b> and <b>Right Arrow</b> keys!</p>",
   "KEY_TAPPED_EARLY_MESSAGE": "Key was tapped too early. Please wait for the appropriate time to press the key.",
   "RELEASE_KEYS_MESSAGE": "Release All Keys",
-  "REWARD_TOTAL_MESSAGE": "You have earned: CHF {{totalSuccessfulReward}} total. Press the button below to proceed to the next block of trials.",
+  "REWARD_TOTAL_MESSAGE": "You have earned: {{totalSuccessfulReward}} points total. Press the button below to proceed to the next block of trials.",
   "EXPERIMENT_BEGIN_MESSAGE": "<h1>Welcome to the Experiment</h1>Press the button below to start.",
-  "NO_STIMULI_VIDEO_TUTORIAL_MESSAGE": "<h2>Tutorial</h2>The video below demonstrates how the task will be performed.<br><br><ol><li> You will place your pinky on the <b>{{KEYS_TO_HOLD_0}}</b> key<br></li><li> Place your ring finger on the <b>{{KEYS_TO_HOLD_1}}</b> key<br></li> <li>Place your middle finger on the <b>{{KEYS_TO_HOLD_2}}</b> key</li><li>Place your left thumb on the <b>spacebar</b> key</li><li>Place your right index finger on the <b>right arrow</b> key</li></ol><br><p>While still holding down with these fingers, simultaneously, when you see the <b>GO!</b>, tap the <b>{{KEY_TO_PRESS}}</b> key, <b>repeatedly</b> with your index finger <b>as fast as you can!</b></p><ul class = 'warning'><li>Do not tap the <b>{{KEY_TO_PRESS}}</b> key until the <b>GO!</b> appears</li> <li>Do not release the <b>{{KEYS_TO_HOLD_0}}</b>, <b>{{KEYS_TO_HOLD_1}}</b>, <b>{{KEYS_TO_HOLD_2}}</b>, <b>Spacebar</b>, <b>Right Arrow</b> until prompted.</li></ul>",
+  "NO_STIMULI_VIDEO_TUTORIAL_MESSAGE": "<h2>Tutorial</h2>The video below demonstrates how the task will be performed.<br><br><ol><li> You will place your pinky on the <b>{{KEYS_TO_HOLD_0}}</b> key<br></li><li> Place your ring finger on the <b>{{KEYS_TO_HOLD_1}}</b> key<br></li> <li>Place your middle finger on the <b>{{KEYS_TO_HOLD_2}}</b> key</li><li>Place your left thumb on the <b>spacebar</b> key</li><li>Place your right index finger on the <b>right arrow</b> key</li></ol><br><p>While still holding down with these fingers, simultaneously, when you see the <b>GO!</b>, tap the <b>{{KEY_TO_PRESS}}</b> key, <b>repeatedly</b> with your index finger <b>as fast as you can!</b></p><ul class = 'warning'><li>Do not tap the <b>{{KEY_TO_PRESS}}</b> key until the <b>GO!</b> appears</li> <li>Do not release the <b>{{KEYS_TO_HOLD_0}}</b>, <b>{{KEYS_TO_HOLD_1}}</b>, <b>{{KEYS_TO_HOLD_2}}</b>, <b>Spacebar</b>, <b>Right Arrow</b> until prompted.</li></ul>. <br />Click the continue at the bottom to proceed to the test trial.",
   "CLICK_BUTTON_TO_PROCEED_MESSAGE": "<p1> Click the button below to proceed.</p1>",
   "STIMULI_VIDEO_TUTORIAL_MESSAGE": "<h2>Calibration</h2><h3>Part 2</h3><p1>Get the red bar as high as possible with your taps!</p1><br><ul class = 'warning'><li>Do not tap the <b>{{KEY_TO_PRESS}}</b> key until the <b>GO!</b> appears</li> <li>Do not release the <b>{{KEYS_TO_HOLD_0}}</b>, <b>{{KEYS_TO_HOLD_1}}</b>, <b>{{KEYS_TO_HOLD_2}}</b>, <b>Spacebar</b>, <b>Right Arrow</b> until prompted.</li></ul>",
   "DEMO_TRIAL_MESSAGE": "<p><br>The next <b>{{NUM_DEMO_TRIALS}}</b> trials you will complete are <b>practice</b> trials.<br>The feedback you receive on the display when the <b>{{KEY_TO_PRESS}}</b> key is tapped will be the same as in the next block of trials that you will complete. <br><br> Attempt to finish the trial with the top of the red bar within the target area. <br><ul class = 'warning'><li>Do not tap the <b>{{KEY_TO_PRESS}}</b> key until the <b>GO!</b> appears</li> <li>Do not release the <b>{{KEYS_TO_HOLD_0}}</b>, <b>{{KEYS_TO_HOLD_1}}</b>, <b>{{KEYS_TO_HOLD_2}}</b>, <b>Spacebar</b>, <b>Right Arrow</b> until prompted.</li></ul>",
@@ -46,33 +47,47 @@
     "NEUTRAL": "Neutral",
     "SOMEWHAT_AGREE": "Somewhat Agree",
     "AGREE": "Agree",
-    "STRONGLY_AGREE": "Strongly Agree"
+    "STRONGLY_AGREE": "Strongly Agree",
+    "LOW_ATTENTION": "No Attention",
+    "HIGH_ATTENTION": "Highest Attention",
+    "LOW_MOTIVATION": "No Motivation",
+    "HIGH_MOTIVATION": "Highest Motivation",
+    "LOW_FATIGUE": "No Fatigue",
+    "HIGH_FATIGUE": "Highest Fatigue",
+    "LOW_TIREDNESS": "No Tiredness",
+    "HIGH_TIREDNESS": "Highest Tiredness"
   },
   "LIKERT_SURVEY_1_QUESTIONS": {
     "QUESTION_1": "I felt I was in control of the bar's movement.",
     "QUESTION_2": "I found the task difficult."
   },
   "LIKERT_SURVEY_2_QUESTIONS": {
-    "QUESTION_1": "My task performance affects how I feel now.",
-    "QUESTION_2": "I felt bad when I did not perform the task successfully.",
-    "QUESTION_3": "It was difficult to work out what I had to do to complete the task successfully.",
+    "QUESTION_1": "I felt indifferent about my performance in the task.",
+    "QUESTION_2": "I felt satisfied when I saw that I was succeeding in the task.",
+    "QUESTION_3": "It was hard to work out how to complete the task successfully.",
     "QUESTION_4": "It was difficult to keep my mind on the task.",
-    "QUESTION_5": "I set myself the goal to perform the task better.",
-    "QUESTION_6": "I felt that I needed a push to continue tapping until the end of the task.",
-    "QUESTION_7": "I feel motivated to continue the task.",
-    "QUESTION_8": "My left arm feels tired."
+    "QUESTION_5": "I was continuously trying to perform the task better.",
+    "QUESTION_6": "I felt that I needed a push to continue tapping until the end of the task."
+  },
+  "LIKERT_SURVEY_3_QUESTIONS": {
+    "QUESTION_1": "Your Level of Attention",
+    "QUESTION_2": "Your Level of Motivation",
+    "QUESTION_3": "Your Level of Muscular Fatigue of the Left Arm",
+    "QUESTION_4": "Your Level of Overall Tiredness"
   },
   "END_EXPERIMENT_MESSAGE": "The experiment is now complete. Please let the experimenter know.",
   "PROGRESS_BAR": {
     "PROGRESS_BAR_INTRODUCTION": "Introduction",
     "PROGRESS_BAR_PRACTICE": "Practice",
     "PROGRESS_BAR_CALIBRATION": "Calibration",
-    "PROGRESS_BAR_TRIAL_BLOCKS": "Trial Block"
+    "PROGRESS_BAR_VALIDATION": "Validation",
+    "PROGRESS_BAR_TRIAL_BLOCKS": "Trial Block",
+    "PROGRESS_BAR_FINAL_CALIBRATION": "Final Calibration"
   },
   "TUTORIAL_INTRODUCTION_MESSAGE": "The first part of the experiment will consist of two different sections:<br><br><ol style='text-align: left;'><li>A practice section so you can get familiarized with the task you will be performing.</li><li>A calibration section to ensure that everything is running correctly.</li></ol><p>Please follow the instructions throughout each section carefully.</p>Press the button below to begin.",
   "EXPERIMENT_HAS_ENDED_MESSAGE": "Thank you very much for your participation!",
   "LIKERT_INTRO": "You will now answer a few questions. Press the button below to proceed.",
   "LIKERT_INTRO_DEMO": "You will now answer a question. Press the button below to proceed.",
-  "HAND_TUTORIAL_MESSAGE": "The image below shows how your fingers should be placed on the keyboard throughout the task.",
+  "HAND_TUTORIAL_MESSAGE": "The image below shows how the fingers of <b>your left hand</b> should be placed on the keyboard throughout the task. <br /><b>The index finger of your right hand should be on the right arrow at the same time.</b>",
   "TUTORIAL_HEADER": "Tutorial"
 }
diff --git a/src/modules/Root.tsx b/src/modules/Root.tsx
@@ -68,7 +68,7 @@ const theme = createTheme({
 });
 
 const RootDiv = styled('div')({
-  minHeight: '500px',
+  flexGrow: 1,
 });
 
 const Root: FC = () => {

diff --git a/src/modules/answers/ResultsView.tsx b/src/modules/answers/ResultsView.tsx
@@ -69,10 +69,7 @@ const ResultsView: FC = () => {
         </Button>
       </Stack>
       <TableContainer component={Paper}>
-        <Table
-          sx={{ minWidth: 650, textAlign: 'center' }}
-          aria-label="answers table"
-        >
+        <Table aria-label="answers table">
           <TableHead>
             <TableRow>
               <TableCell>User</TableCell>