first demo

index.js

@@ -3,13 +3,25 @@ import "jspsych/css/jspsych.css";
 import "./styles.css";
 import { delayed_redirect } from "./utils/helpers.js";
 import jsPsychHtmlKeyboardResponse from "@jspsych/plugin-html-keyboard-response";
-import { textStimuli } from './scripts/text_stimuli';
+import { textStimuli } from './scripts/text-stimuli.js';
+import jsPsychHtmlButtonResponse from '@jspsych/plugin-html-button-response';
+import jsPsychSurvey from '@jspsych/plugin-survey';
+import jsPsychRecordCall from './scripts/record-call.js';
+import jsPsychMarkCall from './scripts/mark-call.js';
+import '@jspsych/plugin-survey/css/survey.css'
+import jsPsychInitializeMicrophone from '@jspsych/plugin-initialize-microphone';
+import jsPsychBrowserCheck from '@jspsych/plugin-browser-check';
+
+const debug = import.meta.env.VITE_DEBUG === 'true';
 
-const debug = import.meta.env.VITE_DEBUG;
 
 const jsPsych = initJsPsych({
   on_finish: function() {
-    jsPsych.getDisplayElement().innerHTML = textStimuli.complete;
+    if(debug) {
+      jsPsych.data.displayData('json');
+    } else {
+      jsPsych.getDisplayElement().innerHTML = textStimuli.complete;
+    }
   },
   on_close: function() {
     delayed_redirect(import.meta.env.VITE_CLOSED_URL);
@@ -21,12 +33,158 @@ const jsPsych = initJsPsych({
   },
 });
 
-const demo_trial = {
-  type: jsPsychHtmlKeyboardResponse,
-  stimulus: `<h1 class="text-2xl font-bold">Hello, world!</h1>`,
-  choices: [''],
+const browser_check = {
+  type: jsPsychBrowserCheck,
+  inclusion_function: data => {
+    console.log(data.browser);
+    return ['chrome', 'edge-chromium'].includes(data.browser);
+  },
+  exclusion_message: data => {
+    return `<p>You must use Google Chrome or Microsoft Edge to complete this experiment.</p>`;
+  },
 };
 
-const timeline = [demo_trial];
+const info_consent = {
+  type: jsPsychHtmlButtonResponse,
+  stimulus: textStimuli.info_consent,
+  choices: ['Continue'],
+  on_load: function() {
+    const continue_button = document.getElementsByClassName('jspsych-btn')[0];
+    continue_button.disabled = true;
+
+    const info_consent_checkbox = document.getElementById('info_consent_checkbox');
+    info_consent_checkbox.addEventListener('change', function() {
+      if (info_consent_checkbox.checked) {
+        continue_button.disabled = false;
+      }
+    });
+  },
+};
+
+const publication_consent = {
+  type: jsPsychHtmlButtonResponse,
+  stimulus: textStimuli.publication_consent,
+  choices: ['Continue'],
+  on_load: function() {
+    const continue_button = document.getElementsByClassName('jspsych-btn')[0];
+    continue_button.disabled = true;
+    
+    let timeLeft = 15;
+
+    if(debug) {
+      timeLeft = 0;
+    }
+
+    const originalText = continue_button.textContent;
+
+    const statement_1_checkbox = document.getElementById('statement_1_checkbox');
+    const statement_2_checkbox = document.getElementById('statement_2_checkbox');
+
+    let statement_1_checked = false;
+    let statement_2_checked = false;
+
+    jsPsych.data.addProperties({
+      statement_1_consent: statement_1_checked,
+      statement_2_consent: statement_2_checked,
+    });
+
+    statement_1_checkbox.addEventListener('change', function() {
+      statement_1_checked = statement_1_checkbox.checked;
+      jsPsych.data.addProperties({
+        statement_1_consent: statement_1_checked,
+        statement_2_consent: statement_2_checked,
+      });
+    });
+
+    statement_2_checkbox.addEventListener('change', function() {
+      statement_2_checked = statement_2_checkbox.checked;
+      jsPsych.data.addProperties({
+        statement_1_consent: statement_1_checked,
+        statement_2_consent: statement_2_checked,
+      });
+    });
+
+    const countdown = setInterval(() => {
+      timeLeft--;
+      continue_button.textContent = `Continue (${timeLeft}s)`;
+      
+      if (timeLeft <= 0) {
+        clearInterval(countdown);
+        continue_button.disabled = false;
+        continue_button.textContent = originalText;
+      }
+    }, 1000);
+  },
+};
+
+const initialize_microphone = {
+  type: jsPsychInitializeMicrophone
+};
+
+const recording_page = {
+  type: jsPsychRecordCall,
+};
+
+const mark_page = {
+  type: jsPsychMarkCall,
+};
+
+const data_quality_warning = {
+  type: jsPsychHtmlButtonResponse,
+  stimulus: textStimuli.data_quality_warning,
+  choices: ['Continue'],
+};
+
+const exit_page = {
+  type: jsPsychHtmlKeyboardResponse,
+  stimulus: textStimuli.recording_saved,
+  choices: ['r', 'q'],
+};
+
+const recording_loop = {
+  timeline: [recording_page, mark_page, exit_page],
+  loop_function: function(data){
+    const last_trial_data = jsPsych.data.getLastTrialData();
+    if(jsPsych.pluginAPI.compareKeys(last_trial_data.trials[0].response, 'q')){
+          return false;
+      } else {
+          return true;
+      }
+  }
+}
+const post_experiment_survey = {
+  type: jsPsychSurvey,
+  survey_json: {
+    elements:
+      [
+        {
+          type: 'comment',
+          title: "Did you have any thoughts or observations about this study?", 
+          name: 'thoughts_observations', 
+          isRequired: !debug,
+        }, 
+    ]
+  }
+};
+
+let timeline = []
+
+if (debug) {
+  timeline.push(data_quality_warning);
+  timeline.push(browser_check);
+
+  timeline.push(initialize_microphone);
+  timeline.push(recording_loop);
+  timeline.push(post_experiment_survey);
+} else {
+  timeline.push(browser_check);
+  timeline.push(info_consent);
+  timeline.push(publication_consent);
+  timeline.push(initialize_microphone);
+  timeline.push(data_quality_warning);
+  timeline.push(recording_loop);
+  timeline.push(post_experiment_survey);
+}
+
 
 jsPsych.run(timeline);