work-calls-corpus/index.js

import { initJsPsych } from "jspsych";
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.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 jsPsych = initJsPsych({
  on_finish: function() {
    if(debug) {
      jsPsych.data.displayData('json');
    } else {
      jsPsych.getDisplayElement().innerHTML = textStimuli.complete;
    }
  },
  on_close: function() {
    delayed_redirect(import.meta.env.VITE_CLOSED_URL);
  },
  on_data_update: function() {
    if (debug) {
      console.log(jsPsych.data.get().json());
    }
  },
});

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 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);