added timer to survey

index.js

@@ -10,16 +10,18 @@ import '@jspsych/plugin-survey/css/survey.css';
 import './styles.css';
 import { getStimulusMap } from './scripts/text-stimuli.js';
 import jsPsychObjectMoving from './scripts/plugin-object-moving.js';
+import { textStimuli } from './scripts/text-stimuli.js';
 
-const debug = import.meta.env.VITE_DEBUG === 'true';
-const total_participants = import.meta.env.VITE_TOTAL_PARTICIPANTS;
+const total_participants = import.meta.env.VITE_TOTAL_PARTICIPANTS || 2;
 const uniqueUsernames = generateUniqueUsernames(total_participants);
 const experiment_name = import.meta.env.VITE_EXPERIMENT_NAME;
 
+
 let prolific_id;
 let probe_condition; // P in the params, O = open, S = suspicion mentioned
-let mapping; // M in the params, TB = together blue, AB = alone blue
-let short_version = false;
+let debug = false;
+
+const short_version = true; // just using the short version of the task
 
 function delayed_redirect(url) {
   setTimeout(() => {
@@ -28,51 +30,68 @@ function delayed_redirect(url) {
 }
 
 const jsPsych = initJsPsych({
-  on_finish: function() {
+  on_finish: function () {
     jsPsych.getDisplayElement().innerHTML = textStimuli.complete;
   },
-  on_close: function() {
+  on_close: function () {
     delayed_redirect(import.meta.env.VITE_CLOSED_URL);
   },
-  on_data_update: function() {
+  on_data_update: function () {
     if (debug) {
       console.log(jsPsych.data.get().json());
     }
   },
 });
 
-prolific_id = jsPsych.data.getURLVariable('PROLIFIC_PID');
-mapping = jsPsych.data.getURLVariable('M');
-short_version = jsPsych.data.getURLVariable('S') === 'true';
-const together_colour = mapping === 'TB' ? 'blue' : 'red';
-const stimulusMap = getStimulusMap(together_colour);
+debug = jsPsych.data.getURLVariable('debug') === 'true';
 
-probe_condition = jsPsych.data.getURLVariable('P');
+prolific_id = jsPsych.data.getURLVariable('PROLIFIC_PID');
+
+const COND = Number(jsPsych.data.getURLVariable('C'));
+
+const probe_text_direct = 'Did you have any thoughts, observations, or suspicions about the experiment?'
+const probe_text_indirect = 'Did you have any thoughts or observations about the experiment?';
+
+let together_colour;
 let probe_text;
-if (probe_condition === 'O') {
-  probe_text =
-    'Did you have any thoughts or observations about the experiment?';
-} else if (probe_condition === 'S') {
-  probe_text =
-    'Did you have any thoughts, observations, or suspicions about the experiment?';
-} else if (probe_condition === 'D') {
-  probe_text =
-    'Many studies use deception to create the appearance that you are interacting with a real person. Did you suspect that you were not interacting with a real person?';
-} else if (probe_condition === 'R') {
-  probe_text =
-    'Our study used deception to create the appearance that you are interacting with a real person. Did you suspect that you were not interacting with a real person?';
-} else {
-  probe_text =
-    'Did you have any thoughts or observations about the experiment?';
+
+
+switch (COND) {
+  case 0:
+    probe_condition = 'direct';
+    together_colour = 'blue';
+    break;
+  case 1:
+    probe_condition = 'direct';
+    together_colour = 'red';
+    break;
+  case 2:
+    probe_condition = 'indirect';
+    together_colour = 'blue';
+    break;
+  case 3:
+    probe_condition = 'indirect';
+    together_colour = 'red';
+    break;
 }
 
-jsPsych.data.addProperties({
+probe_text = probe_condition === 'direct' ? probe_text_direct : probe_text_indirect;
+
+const stimulusMap = getStimulusMap(together_colour);
+
+const props = {
   condition: probe_condition,
   together_colour: together_colour,
   prolific_id: prolific_id,
   experiment_name: experiment_name,
   probe_text: probe_text,
-});
+}
+
+if (debug) {
+  console.log(props);
+}
+
+jsPsych.data.addProperties(props);
 
 const timeline = [];
 
@@ -91,7 +110,7 @@ const consent_form = {
   type: jsPsychHtmlButtonResponse,
   stimulus: stimulusMap.get('consent'),
   choices: ['Exit', 'Continue'],
-  on_finish: function(data) {
+  on_finish: function (data) {
     if (data.response === 0) {
       jsPsych.abortExperiment(stimulusMap.get('no_consent'));
     }
@@ -176,8 +195,39 @@ const debrief = {
   stimulus: stimulusMap.get('debrief'),
 };
 
+const pre_survey_info = {
+  type: jsPsychHtmlKeyboardResponse,
+  choices: [' '],
+  stimulus: stimulusMap.get('pre_survey_info'),
+};
+
+const survey_function = (survey) => {
+  survey.onAfterRenderPage.add(function (sender, options) {
+    if (survey.activePage.name === 'page1') {
+    const nextButton = document.querySelector('#sv-nav-next > div > input');
+    if (nextButton) {
+      let seconds = 30;
+      const originalText = nextButton.value.replace(/\s*\(\d+\)$/, '') || 'Continue';
+      nextButton.disabled = true;
+      nextButton.value = `${originalText} (${seconds})`;
+      const interval = setInterval(() => {
+        seconds--;
+        nextButton.value = `${originalText} (${seconds})`;
+        if (seconds <= 0) {
+          clearInterval(interval);
+          nextButton.disabled = false;
+          nextButton.value = originalText;
+        }
+      }, 1000);
+    }
+    console.log('Survey page rendered:', sender.currentPage);
+  }
+  });
+}
+
 const survey = {
   type: jsPsychSurvey,
+  survey_function: survey_function,
   survey_json: {
     showQuestionNumbers: false,
     completeText: 'Done!',
@@ -187,48 +237,18 @@ const survey = {
     pages: [
       {
         name: 'page1',
-        elements: [
-          {
-            type: 'radiogroup',
-            title: 'Please indicate your gender',
-            choices: ['Male', 'Female', 'Other'],
-            isRequired: debug ? false : true,
-            colCount: 0,
-            name: 'gender',
-          },
-          {
-            type: 'radiogroup',
-            title: 'Please indicate your handedness',
-            choices: ['Right', 'Left', 'Ambidextrous/Other'],
-            isRequired: debug ? false : true,
-            colCount: 0,
-            name: 'handedness',
-          },
-          {
-            type: 'text',
-            title: 'How old are you?',
-            name: 'age',
-            isRequired: debug ? false : false,
-            inputType: 'number',
-            min: 18,
-            max: 100,
-            defaultValue: 18,
-          },
-        ],
-      },
-      {
-        name: 'page2',
         elements: [
           {
             type: 'comment',
             title: probe_text,
+            description: 'You may continue to the next page after 30 seconds.',
             name: 'probe',
             isRequired: debug ? false : true,
           },
         ],
       },
       {
-        name: 'page3',
+        name: 'page2',
         elements: [
           {
             type: 'matrix',
@@ -271,6 +291,37 @@ const survey = {
           },
         ],
       },
+      {
+        name: 'page1',
+        elements: [
+          {
+            type: 'radiogroup',
+            title: 'Please indicate your gender',
+            choices: ['Male', 'Female', 'Other'],
+            isRequired: debug ? false : true,
+            colCount: 0,
+            name: 'gender',
+          },
+          {
+            type: 'radiogroup',
+            title: 'Please indicate your handedness',
+            choices: ['Right', 'Left', 'Ambidextrous/Other'],
+            isRequired: debug ? false : true,
+            colCount: 0,
+            name: 'handedness',
+          },
+          {
+            type: 'text',
+            title: 'How old are you?',
+            name: 'age',
+            isRequired: debug ? false : false,
+            inputType: 'number',
+            min: 18,
+            max: 100,
+            defaultValue: 18,
+          },
+        ],
+      }
     ],
   },
 };
@@ -323,8 +374,8 @@ const object_moving_practice = {
 };
 
 if (debug) {
-  timeline.push(survey);
   timeline.push(debrief);
+
 }
 
 if (!debug) {
@@ -343,6 +394,7 @@ if (!debug) {
   timeline.push(pre_task_instructions);
   timeline.push(lobby_fast);
   timeline.push(object_moving_trials);
+  timeline.push(pre_survey_info);
   timeline.push(survey);
   timeline.push(debrief);
 }