feat: add new images UWV

src/modules/experiment/jspsych/experiment.ts

@@ -71,8 +71,8 @@ const generateTimelineVars = (
 ): ImageDescription[] => {
   const timelineVariables: ImageDescription[] = [];
 
-  // Generate an array of numbers from 1 to 40
-  const numPool = Array.from({ length: 40 }, (_, i) => i + 1);
+  // Generate an array of numbers from 1 to 80
+  const numPool = Array.from({ length: 80 }, (_, i) => i + 1);
 
   // Sample numbers without replacement
   const sampledNums: number[] = jsPsych.randomization.sampleWithoutReplacement(
@@ -249,7 +249,7 @@ const partofexp: (
       type: jsPsychHtmlKeyboardResponse,
       stimulus() {
         const html = `<div>
-          <div class="task-img"><img class="task-img" id="task-img" src='./assets/pareidolia-imgs/test/pareidolia-test-${jsPsych.evaluateTimelineVariable('num') > 9 ? jsPsych.evaluateTimelineVariable('num') : `0${jsPsych.evaluateTimelineVariable('num')}`}.jpg' alt='task image'/></div>
+          <div class="task-img"><img class="task-img" id="task-img" src='./assets/pareidolia-imgs/test/${(jsPsych.evaluateTimelineVariable('num') % 40) + 1}-test${jsPsych.evaluateTimelineVariable('num') > 40 ? '-modified' : ''}.png' alt='task image'/></div>
           <div class="task-text"><b>${keySettings.noFaceKey.toUpperCase()}: No Face</b><b>${keySettings.faceKey.toUpperCase()}: Face</b></div>
           <div class='photo-diode photo-diode-white ${usePhotoDiode === 'top-left' ? 'top-left' : 'top-right'} ${usePhotoDiode === 'off' ? 'photo-diode-hide' : ''}'/>
         </div>`;

src/modules/experiment/jspsych/practice.ts

@@ -113,7 +113,7 @@ export const practiceTrials: (
       type: jsPsychHtmlKeyboardResponse,
       stimulus() {
         const html = `<div>
-            <div class="task-img"><img class="task-img" id="task-img" src='./assets/pareidolia-imgs/practice/pareidolia-practice-${jsPsych.evaluateTimelineVariable('num') > 9 ? jsPsych.evaluateTimelineVariable('num') : `0${jsPsych.evaluateTimelineVariable('num')}`}.jpg' alt='task image'/></div>
+            <div class="task-img"><img class="task-img" id="task-img" src='./assets/pareidolia-imgs/practice/${jsPsych.evaluateTimelineVariable('num')}-practice.png' alt='task image'/></div>
             <div class="task-text"><b>${keySettings.noFaceKey.toUpperCase()}: No Face</b><b>${keySettings.faceKey.toUpperCase()}: Face</b></div>
             <div class='photo-diode photo-diode-white ${usePhotoDiode === 'top-left' ? 'top-left' : 'top-right'} ${usePhotoDiode === 'off' ? 'photo-diode-hide' : ''}'/>
           </div>`;

src/modules/experiment/jspsych/setup.ts

@@ -26,9 +26,12 @@ export function generatePreloadStrings(): string[] {
   // Use nested loops to construct the file paths
   cntables.forEach((cntable, index) => {
     for (let id: number = 1; id < nrOfImages[index]; id += 1) {
-      pathList.push(
-        `./assets/pareidolia-imgs/${cntable}/pareidolia-${cntable}-${id < 10 ? `0${id}` : id}.jpg`,
-      );
+      pathList.push(`./assets/pareidolia-imgs/${cntable}/${id}-${cntable}.png`);
+      if (cntable === 'test') {
+        pathList.push(
+          `./assets/pareidolia-imgs/${cntable}/${id}-${cntable}-modified.png`,
+        );
+      }
     }
   });
   return pathList;