experiment.js

/* ---------- Initialize jsPsych ---------- */
const jsPsych = initJsPsych({
  on_finish: () => {
  }
});


// Create timeline array
const timeline = [];

// Create subject ID and filename
const subject_id = jsPsych.randomization.randomID(10);
const filename = `${subject_id}.csv`;

/* ---------- Word list organized by categories ---------- */
const word_categories = {
  animals: [
    { zh: "蚂蚁", en: "ant" },
    { zh: "猫", en: "cat" },
    { zh: "大象", en: "elephant" },
    { zh: "长颈鹿", en: "giraffe" },
    { zh: "熊猫", en: "panda" },
    { zh: "兔子", en: "rabbit" },
    { zh: "老鼠", en: "rat" },
    { zh: "麻雀", en: "sparrow" },
    { zh: "老虎", en: "tiger" },
    { zh: "乌龟", en: "tortoise" }
  ],
  body_parts: [
    { zh: "脚踝", en: "ankle" },
    { zh: "胳膊", en: "arm" },
    { zh: "耳朵", en: "ear" },
    { zh: "眼睛", en: "eye" },
    { zh: "手指", en: "finger" },
    { zh: "膝盖", en: "knee" },
    { zh: "嘴唇", en: "lips" },
    { zh: "鼻子", en: "nose" },
    { zh: "肩膀", en: "shoulder" },
    { zh: "大腿", en: "thigh" }
  ],
  artifacts: [
    { zh: "空调", en: "air conditioner" },
    { zh: "斧头", en: "ax" },
    { zh: "床", en: "bed" },
    { zh: "扫帚", en: "broom" },
    { zh: "柜子", en: "cabinet" },
    { zh: "椅子", en: "chair" },
    { zh: "筷子", en: "chopsticks" },
    { zh: "鼠标", en: "computer mouse" },
    { zh: "锤子", en: "hammer" },
    { zh: "钥匙", en: "key" },
    { zh: "微波炉", en: "microwave" },
    { zh: "铅笔", en: "pencil" },
    { zh: "冰箱", en: "refrigerator" },
    { zh: "剪刀", en: "scissors" },
    { zh: "沙发", en: "sofa" },
    { zh: "勺子", en: "spoon" },
    { zh: "桌子", en: "table" },
    { zh: "电视", en: "television" },
    { zh: "牙刷", en: "toothbrush" },
    { zh: "洗衣机", en: "washing machine" }
  ],
  emotional_nonobject: [
    { zh: "愤怒", en: "anger" },
    { zh: "反感", en: "antipathy" },
    { zh: "冷漠", en: "apathy" },
    { zh: "慈善", en: "charity" },
    { zh: "舒心", en: "comfortable" },
    { zh: "死亡", en: "death" },
    { zh: "债务", en: "debt" },
    { zh: "沮丧", en: "depressed" },
    { zh: "疾病", en: "disease" },
    { zh: "纠纷", en: "dispute" },
    { zh: "错误", en: "error" },
    { zh: "兴奋", en: "excited" },
    { zh: "缘分", en: "fate" },
    { zh: "过失", en: "fault" },
    { zh: "恐惧", en: "fear" },
    { zh: "骗局", en: "fraud" },
    { zh: "友情", en: "friendship" },
    { zh: "快乐", en: "happy" },
    { zh: "天堂", en: "heaven" },
    { zh: "敌意", en: "hostility" },
    { zh: "爱心", en: "loving heart" },
    { zh: "魔力", en: "magic power" },
    { zh: "婚姻", en: "marriage" },
    { zh: "奇迹", en: "miracle" },
    { zh: "骄傲", en: "proud" },
    { zh: "难过", en: "sad" },
    { zh: "风景", en: "scenery" },
    { zh: "光彩", en: "splendor" },
    { zh: "创伤", en: "trauma" },
    { zh: "暴力", en: "violence" }
  ],
  nonemotional_nonobject: [
    { zh: "协议", en: "agreement" },
    { zh: "买卖", en: "business" },
    { zh: "性质", en: "characteristic" },
    { zh: "概念", en: "concept" },
    { zh: "内容", en: "content" },
    { zh: "数据", en: "data" },
    { zh: "纪律", en: "discipline" },
    { zh: "作用", en: "effect" },
    { zh: "身份", en: "identity" },
    { zh: "方法", en: "method" },
    { zh: "义务", en: "obligation" },
    { zh: "现象", en: "phenomenon" },
    { zh: "过程", en: "process" },
    { zh: "原因", en: "reason" },
    { zh: "关系", en: "relationship" },
    { zh: "结果", en: "result" },
    { zh: "社会", en: "society" },
    { zh: "地位", en: "status" },
    { zh: "制度", en: "system" },
    { zh: "团队", en: "team" }
  ]
};

// Combine all categories into single array for main trial
// This part was generated by Claude. Prompt: I need to combine multiple arrays of objects into a single array in JavaScript. Each object has 'zh' and 'en' properties. The arrays are named animals, body_parts, artifacts, emotional_nonobject, and nonemotional_nonobject. 
const bilingual_words = [
  { zh: "骄傲", en: "proud" },
  { zh: "冰箱", en: "refrigerator" },
  { zh: "兔子", en: "rabbit" },
  { zh: "反感", en: "antipathy" },
  { zh: "协议", en: "agreement" },
  { zh: "嘴唇", en: "lips" },
  { zh: "剪刀", en: "scissors" },
  { zh: "长颈鹿", en: "giraffe" },
  { zh: "制度", en: "system" },
  { zh: "过失", en: "fault" },
  { zh: "友情", en: "friendship" },
  { zh: "方法", en: "method" },
  { zh: "蚂蚁", en: "ant" },
  { zh: "沮丧", en: "depressed" },
  { zh: "沙发", en: "sofa" },
  { zh: "暴力", en: "violence" },
  { zh: "筷子", en: "chopsticks" },
  { zh: "概念", en: "concept" },
  { zh: "麻雀", en: "sparrow" },
  { zh: "椅子", en: "chair" },
  { zh: "买卖", en: "business" },
  { zh: "魔力", en: "magic power" },
  { zh: "结果", en: "result" },
  { zh: "敌意", en: "hostility" },
  { zh: "纠纷", en: "dispute" },
  { zh: "关系", en: "relationship" },
  { zh: "铅笔", en: "pencil" },
  { zh: "愤怒", en: "anger" },
  { zh: "团队", en: "team" },
  { zh: "洗衣机", en: "washing machine" },
  { zh: "大腿", en: "thigh" },
  { zh: "慈善", en: "charity" },
  { zh: "手指", en: "finger" },
  { zh: "性质", en: "characteristic" },
  { zh: "猫", en: "cat" },
  { zh: "眼睛", en: "eye" },
  { zh: "床", en: "bed" },
  { zh: "鼠标", en: "computer mouse" },
  { zh: "微波炉", en: "microwave" },
  { zh: "原因", en: "reason" },
  { zh: "锤子", en: "hammer" },
  { zh: "勺子", en: "spoon" },
  { zh: "缘分", en: "fate" },
  { zh: "胳膊", en: "arm" },
  { zh: "老鼠", en: "rat" },
  { zh: "兴奋", en: "excited" },
  { zh: "耳朵", en: "ear" },
  { zh: "社会", en: "society" },
  { zh: "牙刷", en: "toothbrush" },
  { zh: "过程", en: "process" },
  { zh: "光彩", en: "splendor" },
  { zh: "空调", en: "air conditioner" },
  { zh: "乌龟", en: "tortoise" },
  { zh: "地位", en: "status" },
  { zh: "创伤", en: "trauma" },
  { zh: "死亡", en: "death" },
  { zh: "快乐", en: "happy" },
  { zh: "身份", en: "identity" },
  { zh: "婚姻", en: "marriage" },
  { zh: "错误", en: "error" },
  { zh: "脚踝", en: "ankle" },
  { zh: "老虎", en: "tiger" },
  { zh: "冷漠", en: "apathy" },
  { zh: "疾病", en: "disease" },
  { zh: "扫帚", en: "broom" },
  { zh: "难过", en: "sad" },
  { zh: "钥匙", en: "key" },
  { zh: "天堂", en: "heaven" },
  { zh: "义务", en: "obligation" },
  { zh: "数据", en: "data" },
  { zh: "爱心", en: "loving heart" },
  { zh: "内容", en: "content" },
  { zh: "现象", en: "phenomenon" },
  { zh: "柜子", en: "cabinet" },
  { zh: "奇迹", en: "miracle" },
  { zh: "恐惧", en: "fear" },
  { zh: "膝盖", en: "knee" },
  { zh: "舒心", en: "comfortable" },
  { zh: "债务", en: "debt" },
  { zh: "大象", en: "elephant" },
  { zh: "作用", en: "effect" },
  { zh: "纪律", en: "discipline" },
  { zh: "电视", en: "television" },
  { zh: "肩膀", en: "shoulder" },
  { zh: "鼻子", en: "nose" },
  { zh: "斧头", en: "ax" },
  { zh: "风景", en: "scenery" },
  { zh: "熊猫", en: "panda" },
  { zh: "骗局", en: "fraud" },
  { zh: "桌子", en: "table" }
];

/* ---------- Helper functions ---------- */
// Claude instruction: code to choose the language to display for the task.
function getWordsByLanguage(lang, wordList = bilingual_words) {
  return wordList.map(w => w[lang]);
}


// This whole function is generated by Claude. Instruction: I want to implement a word arrangement task in jspsych where
// words are arranged in a circle. The words should be initially placed outside the circle, and the user can drag them into the circle.
// The circle should indicate when particpants are dragging a word into it. The circle should be in the middle of the screen.

function generateWordCircleHTML(words, circleSize = 700, containerSize = null) {
  // dropZoneSize is the size of the circle where words can be dropped
  // containerSize is the total container that includes space for words outside the circle
  const dropZoneSize = circleSize;
  const numWords = words.length;
  
  // If no container size specified, calculate it to fit words outside circle
  if (!containerSize) {
    // Add space for words placed outside + word width/height
    containerSize = dropZoneSize + 160; // Extra space for words outside
  }
  
  // Circle center is at center of container
  const centerX = containerSize / 2;
  const centerY = containerSize / 2;
  
  // Circle radius (from center to edge of the drop zone circle)
  const circleRadius = dropZoneSize / 2;
  
  // Place words OUTSIDE the circle - further out for more words
  // Words should be just outside the circle edge, aligned with it
  let wordPlacementRadius;
  if (numWords <= 15) {
    wordPlacementRadius = circleRadius + 70; // 70px outside circle
  } else if (numWords <= 30) {
    wordPlacementRadius = circleRadius + 75; // 75px outside circle
  } else {
    wordPlacementRadius = circleRadius + 80; // 80px outside circle for 90 words
  }

  // Wrap in container for centering
  let html = `
  <style>
    .jspsych-content-wrapper {
      background: transparent !important;
    }
    .jspsych-content {
      background: transparent !important;
    }
    #task-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
    }

    #word-container { 
      display: flex; 
      justify-content: center; 
      align-items: center;
      width: ${containerSize}px;
      height: ${containerSize}px;
      position: relative;
    }

    #drop-zone { 
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: ${dropZoneSize}px; 
      height: ${dropZoneSize}px; 
      border-radius: 50%; 
      border: 5px solid #444; 
      box-sizing: border-box; 
      background: white;
    }
    /* active state when a draggable is over the circle */
    #drop-zone.drop-zone-active { 
      border-color: #0a0; 
      box-shadow: 0 0 0 10px rgba(0,150,0,0.15); 
    }
    .word { 
      position: absolute; 
      transform: translate(-50%, -50%); 
      cursor: grab; 
      padding: 2px 4px; 
      background: #f2f2f2; 
      border-radius: 6px; 
      user-select: none; 
      font-size: 14px;
      white-space: nowrap;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .word:active {
      cursor: grabbing;
    }
    .word.dragging { 
      opacity: 0.6; 
      z-index: 1000;
      cursor: grabbing;
    }
    #controls {
      text-align: center;
      margin-top: 10px;
    }
    #finish-btn {
      padding: 12px 24px;
      font-size: 16px;
      cursor: pointer;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
    }
    #finish-btn:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    #finish-btn:not(:disabled):hover {
      background: #45a049;
    }
  </style>
  <div id="task-wrapper" draggable="false">
  <div id="word-container" draggable="false">
  <div id="drop-zone" draggable="false"></div>`;

  words.forEach((word, i) => {
    const angle = (2 * Math.PI * i) / words.length;
    const x = centerX + wordPlacementRadius * Math.cos(angle);
    const y = centerY + wordPlacementRadius * Math.sin(angle);

    html += `<div class="word" draggable="true" style="left:${x}px; top:${y}px;">${word}</div>`;
  });

  // add controls OUTSIDE the word-container
  html += '</div>' + // close word-container
          '<div id="controls">' +
            '<button id="finish-btn" disabled>Finished arranging</button>' +
          '</div>' +
          '</div>'; // close task-wrapper
  return html;
}

/* ---------- Consent Form ---------- */
const consent_form = {
  type: jsPsychHtmlButtonResponse,
  stimulus: `
    <div style="max-width:800px; margin:0 auto; text-align:left; font-size: 16px; padding: 10px 0;">
      <h1>Informed Consent Form</h1>
      <p>You are being invited to participate in a research study titled <strong>"Reproducibility of Psychological Science and Instruction."</strong> This study is being done by Dr. Bria Long from UC San Diego and associated graduate students in the Experimental Methods course. You were selected to participate in this study because you are an adult in the U.S. and have been a represented population in previous psychology studies.</p>
      
      <p>The purpose of this study is to better understand how well previously published studies in the psychological field replicate online and with different populations. Your participation in this research should last approximately <strong>5-30 minutes</strong>. If you agree to take part in this study, you may be asked to view a set of stimuli, including pictures, sounds, written text, or videos and then giving some responses via key-presses, verbally, or with paper-and-pencil. We may also observe your choices or preferences among an array of stimuli. These stimuli will be taken directly from or closely adapted from studies that already exist in the published psychological literature. Stimuli will include, e.g., pictures of objects and human faces, audio and video clips, short text passages, etc. None of the stimuli will be disturbing, threatening, or offensive. The online and in-person experiments described in this protocol will take no more than 30 minutes. An example game you might play would be to click on an image on the screen that matches a word you hear being said out loud. Your total expected time commitment for this study is between 5-30 minutes, and is specified in the study description.</p>
      
      <p>Your participation in this study is completely voluntary and you can withdraw at any time. Choosing not to participate or withdrawing will result in no penalty or loss of benefits to which you are entitled. You are free to skip any question that you choose.</p>
      
      <p>We will not be asking for any personally identifying information, and we will handle responses as confidentially as possible. Your SONA or Prolific IDs will never be tied to your responses on this survey. However, we cannot guarantee the confidentiality of information transmitted over the Internet. To minimize this risk, data containing anything that might be personally identifying (e.g. Prolific IDs or IP addresses) will be encrypted on transfer and storage and will only be accessible to qualified lab personnel. We will be keeping data collected as part of this experiment indefinitely. This anonymized data (containing neither Prolific IDs nor IP addresses) may be shared with the scientific community or with other participants to be used as stimuli in future studies.</p>
      
      <p>If you have questions about this project or if you have a research-related problem, you may contact the researcher(s), <strong>Dr. Bria Long, <a href="mailto:brlong@ucsd.edu">brlong@ucsd.edu</a></strong>. If you have any questions concerning your rights as a research subject, you may contact the UC San Diego Office of IRB Administration at <a href="mailto:irb@ucsd.edu">irb@ucsd.edu</a> or 858-246-4777.</p>
      
      <h3 style="margin-top: 25px;">Consent Statement</h3>
      <p style="font-weight: bold;">By participating in this research you are indicating that you are at least 18 years old, have read this consent form, and agree to participate in this research study. Please keep this consent form for your records.</p>
    </div>
  `,
  choices: ['I Agree to Participate'],
  data: {
    trial_id: 'consent_form'
  }
};


  // Create an automatic participant number (short, unique)
  const autoId = `${subject_id}_${Date.now().toString(36).slice(-6)}`;
  window.participantNumber = autoId;

  // Add to global jsPsych properties so it appears on all trials
  jsPsych.data.addProperties({ participant_number: window.participantNumber });

  const datetime_entry = {
  type: jsPsychSurveyHtmlForm,
  preamble: '<h3>Study Information</h3><p>Before we begin, please record your registered slot date and time so that we can assign your credits.</p>',
  html: `
    <div class="jspsych-survey-html-form-item">
      <label for="participant_date"><strong>Slot Date (MM/DD/YYYY):</strong></label>
      <input type="text" id="participant_date" name="participant_date" placeholder="MM/DD/YYYY" required>
    </div>
    <br>
    
    <div class="jspsych-survey-html-form-item">
      <label for="participant_time"><strong>Slot time (HH:MM AM/PM):</strong></label>
      <input type="text" id="participant_time" name="participant_time" placeholder="HH:MM AM/PM" required>
    </div>
  `,
  button_label: 'Continue'
};

const language_choice = {
  type: jsPsychHtmlButtonResponse,
  stimulus: `
    <div style="max-width:600px; margin:auto; text-align:center;">
      <h2>Select Language</h2>
      <p>Please choose the language in which you want to see the words.</p>
    </div>
  `,
  choices: ["中文 (Mandarin)", "English"],
  on_finish: (data) => {
    window.language = data.response === 0 ? "zh" : "en";
  }
};


/* ---------- Instructions ---------- */
const warning_screen = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: `
    <div style="display:flex; align-items:center; justify-content:center; height:100vh; font-family:sans-serif;">
      <div style="max-width:900px; margin:0 auto; text-align:center;">
        <h1 style= "font-size: 24px;">Welcome! Thank you for participating in the study.</h1>
        <h2 style= "font-size: 22px;">The study will be in Madarin Chinese.</h2>
        <h2 style= "font-size: 22px;">Please use desktop computers or laptops for the study. Tablets and phones are not allowed.</h2>
        <p style="font-size:16px; margin-top:30px;"><em>Press any key to continue.</em></p>
      </div>
    </div>
  `,
  choices: "ALL_KEYS"
};

const start_screen = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: `
    <div style="display:flex; align-items:center; justify-content:center; height:100vh; font-family:sans-serif;">
      <div style="max-width:900px; margin:0 auto; text-align:center;">
        <p style="font-size:18px; line-height:1.6;">
          In this task, you will be presented with <strong>90 words</strong> arranged <strong>outside a circle</strong>.<br>
          Your job is to <strong>drag these words into the circle</strong> and <strong>rearrange them</strong> based on their <strong>meaning similarity</strong>.<br><br>
          Words that are <strong>similar in meaning</strong> should be placed <strong>closer together</strong>.<br>
          Words that are <strong>different in meaning</strong> should be placed <strong>farther apart</strong>.<br><br>
          You can place the words <strong>anywhere inside the circle</strong>. There is no single correct answer — 
          we are interested in <strong>your personal judgment</strong> of how these words relate to each other.<br><br>
          <strong>You must move all words into the circle before you can finish.</strong><br>
          After the initial arrangement, you will arrange words from specific categories.
        </p>
        <p style="font-size:16px; margin-top:30px;"><em>Press any key to continue.</em></p>
      </div>
    </div>
  `,
  choices: "ALL_KEYS"
};

/* ---------- Fullscreen ---------- */
const enter_fullscreen = {
  type: jsPsychFullscreen,
  fullscreen_mode: true,
  message: '<p>This task will switch to full screen mode when you press the button below. Please remain in fullscreen for accurate data collection.</p>'
};

/* ---------- Function to create a circle trial ---------- */
// This part was generated along with the wordcircle html code.
function createCircleTrial(words, trialCategory = "all_words", instructionText = null) {
  return {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: () => {
      const wordsToUse = getWordsByLanguage(window.language, words);
      
      // Determine circle size and container size based on number of words
      let circleSize, containerSize;
      
      if (wordsToUse.length <= 15) {
        // Small trials: 10-15 words
        circleSize = 500;
        containerSize = 660; // 500 + 160 for words outside
      } else if (wordsToUse.length <= 25) {
        // Medium trials: 16-25 words  
        circleSize = 600;
        containerSize = 760;
      } else if (wordsToUse.length <= 40) {
        // Large trials: 26-40 words
        circleSize = 700;
        containerSize = 860;
      } else {
        // Extra large trials: 90 words
        circleSize = 700; // Keep it manageable
        containerSize = 860; // Total with words outside
      }
      
      let instruction = "";
      if (instructionText) {
        instruction = `<div style="text-align:center; margin-bottom:20px; font-size:18px; font-weight:bold; color:#333;">${instructionText}</div>`;
      }
      
      return instruction + generateWordCircleHTML(wordsToUse, circleSize, containerSize);
    },
    choices: "NO_KEYS",
    trial_duration: null,
    data: {
      trial_type: 'word_circle_arrangement',
      trial_category: trialCategory,
      n_words: words.length
    },
    on_load: () => {
      const dropZone = document.getElementById('drop-zone');
      const words = document.querySelectorAll('.word');
      const finishBtn = document.getElementById('finish-btn');
      const container = document.getElementById('word-container');
      const taskWrapper = document.getElementById('task-wrapper');

      let draggedWord = null;
      let moved = new Set();

      words.forEach(word => {

        word.draggable = true;
      });

        
      // Drag start
      words.forEach(word => {
        word.addEventListener('dragstart', e => {
          draggedWord = word;
          word.classList.add('dragging');
          dropZone.classList.add('drop-zone-active');
          e.dataTransfer.effectAllowed = 'move';
          e.dataTransfer.setData('text/html', word.innerHTML);
        });
        
        word.addEventListener('dragend', e => {
          word.classList.remove('dragging');
          dropZone.classList.remove('drop-zone-active');
          draggedWord = null;
        });
      });

      // Allow dragover on container
      container.addEventListener('dragover', e => {
        e.preventDefault();
        e.stopPropagation();
        e.dataTransfer.dropEffect = 'move';
      });

      // Handle drops on container
      container.addEventListener('drop', e => {
        e.preventDefault();
        e.stopPropagation();
        if (!draggedWord) return;

        // Get mouse position
        const mouseX = e.clientX;
        const mouseY = e.clientY;

        // Get positions relative to the drop zone (circle)
        const dzRect = dropZone.getBoundingClientRect();
        const x_relative_to_dropzone = mouseX - dzRect.left;
        const y_relative_to_dropzone = mouseY - dzRect.top;

        // Check if drop is within circle
        const centerX_dropzone = dropZone.offsetWidth / 2;
        const centerY_dropzone = dropZone.offsetHeight / 2;
        const dx = x_relative_to_dropzone - centerX_dropzone;
        const dy = y_relative_to_dropzone - centerY_dropzone;
        const distFromCenter = Math.sqrt(dx * dx + dy * dy);
        const maxRadius = dropZone.offsetWidth / 2;

        if (distFromCenter > maxRadius) {
          return; // Outside circle, don't allow drop
        }

        // Convert to word-container coordinates
        const containerRect = container.getBoundingClientRect();
        const x_relative_to_container = mouseX - containerRect.left;
        const y_relative_to_container = mouseY - containerRect.top;

        // Set word position relative to container
        draggedWord.style.left = x_relative_to_container + 'px';
        draggedWord.style.top = y_relative_to_container + 'px';
        moved.add(draggedWord);

        if (moved.size === words.length) {
          finishBtn.disabled = false;
        }
      });

      // Calculate final positions and metadata
      finishBtn.addEventListener('click', () => {
        const placements = [];

        words.forEach(wordEl => {
          const text = wordEl.textContent;
          
          // Get word's bounding box
          const rect = wordEl.getBoundingClientRect();
          const dzRect = dropZone.getBoundingClientRect();
          const containerRect = document.getElementById('word-container').getBoundingClientRect();
          
          // Calculate center position relative to drop zone (circle)
          const cx = rect.left + rect.width/2 - dzRect.left;
          const cy = rect.top + rect.height/2 - dzRect.top;
          
          // Calculate top-left position relative to drop zone
          const x_relative_dropzone = rect.left - dzRect.left;
          const y_relative_dropzone = rect.top - dzRect.top;

          const centerX = dropZone.offsetWidth / 2;
          const centerY = dropZone.offsetHeight / 2;
          const dx_c = cx - centerX;
          const dy_c = cy - centerY;
          const angle_rad = Math.atan2(dy_c, dx_c);
          const angle_deg = (angle_rad * 180 / Math.PI + 360) % 360;

          placements.push({
            word: text,
            x: Math.round(x_relative_dropzone * 10) / 10,
            y: Math.round(y_relative_dropzone * 10) / 10,
            cx: Math.round(cx * 10) / 10,
            cy: Math.round(cy * 10) / 10,
            angle_rad: Math.round(angle_rad * 1000) / 1000,
            angle_deg: Math.round(angle_deg * 10) / 10
          });
        });

        // Enhance data with ISC calculations
        const iscData = window.ISCProcessor ? 
          window.ISCProcessor.enhanceDataWithISC({placements: placements}) : 
          {placements: placements};

        // Store for this trial
        window.__lastPlacementsData = iscData;

        // Add to jsPsych data
        jsPsych.data.get().last(1).values()[0].raw_payload = JSON.stringify(iscData);
        jsPsych.data.get().last(1).values()[0].placements = iscData.placements;
        jsPsych.data.get().last(1).values()[0].dissimilarity_vector = iscData.dissimilarity_vector;
        jsPsych.data.get().last(1).values()[0].n_words = iscData.n_words;


        jsPsych.finishTrial({
          placements: iscData.placements,
          dissimilarity_vector: iscData.dissimilarity_vector,
          distance_matrix: iscData.distance_matrix,
          n_words: iscData.n_words,
          raw_payload: JSON.stringify(iscData)
        });
      });
    }
  };
}

/* ---------- Main trial: All 90 words ---------- */
const circleTrial = createCircleTrial(
  bilingual_words, 
  "all_words",
  "Please think carefully about the meanings of the words as you arrange them and accurately reflect their relationships.");

/* ---------- Category trials ---------- */
const animalsTrial = createCircleTrial(
  word_categories.animals, 
  "animals",
  "Now arrange these words using the same method.",
  "Please think carefully about the meanings of the words as you arrange them and accurately reflect their relationships."
);

const bodyPartsTrial = createCircleTrial(
  word_categories.body_parts,
  "body_parts",
  "Now arrange these words using the same method.",
  "Please think carefully about the meanings of the words as you arrange them and accurately reflect their relationships."
);

const artifactsTrial = createCircleTrial(
  word_categories.artifacts,
  "artifacts",
  "Now arrange these words using the same method.",
  "Please think carefully about the meanings of the words as you arrange them and accurately reflect their relationships."
);

const emotionalTrial = createCircleTrial(
  word_categories.emotional_nonobject,
  "emotional_nonobject",
  "Now arrange these words using the same method.",
  "Please think carefully about the meanings of the words as you arrange them and accurately reflect their relationships."
);

const nonemotionalTrial = createCircleTrial(
  word_categories.nonemotional_nonobject,
  "nonemotional_nonobject",
  "Now arrange these words using the same method.",
  "Please think carefully about the meanings of the words as you arrange them and accurately reflect their relationships."
);

/* ---------- DataPipe check ---------- */
// This part was helped by Claude. I had a hard time getting DataPipe to work with my code, so I debugged it with Claude
// for many rounds. Basically, I copied and pasted error messages into Claude and told it that data was not saved through
// DataPipe.
const check_datapipe = {
  type: jsPsychCallFunction,
  func: () => {
    console.log('=== DataPipe Integration Check ===');
    try {
      console.log('jsPsych.plugins["pipe"]:', jsPsych.plugins ? jsPsych.plugins["pipe"] : 'undefined');
    } catch (e) {
      console.warn('Could not read jsPsych.plugins["pipe"]', e);
    }
    try {
      const withPlacements = jsPsych.data.get().filter(tr => tr.raw_payload !== undefined).values();
      console.log('Trials with raw_payload count:', withPlacements.length);
      if (withPlacements.length > 0) console.log('Example raw_payload (first):', withPlacements[0]);
      console.log('window.__lastPlacementsData:', window.__lastPlacementsData);
    } catch (e) {
      console.warn('Error checking jsPsych.data', e);
    }
  }
};

function createProficiencySelect(name, required = true) {
  return `
      <select id="${name}" name="${name}" ${required ? 'required' : ''}>
          <option value="">--Select Proficiency--</option>
          <option value="Native">Native Speaker</option>
          <option value="Advanced">Advanced (Fluent, near-native)</option>
          <option value="Intermediate">Intermediate (Conversational)</option>
          <option value="Basic">Basic (Simple phrases, travel use)</option>
          <option value="None">None</option>
      </select>
  `;
}

/* ---------- Demographics Survey ---------- */
const demographics_survey = {
  type: jsPsychSurveyHtmlForm,
  preamble: '<h2>Demographic Information</h2><p>Please answer the following questions. Your responses will remain confidential.</p>',
  html: `
    <div class="jspsych-survey-html-form-item">
      <label for="age"><strong>1. Age:</strong></label>
      <input type="number" id="age" name="age" min="18" max="100" required>
    </div>
    <br>

    <div class="jspsych-survey-html-form-item">
      <label><strong>2. Gender:</strong></label><br>
      <input type="radio" id="gender_female" name="gender" value="Female" required>
      <label for="gender_female">Female</label><br>
      <input type="radio" id="gender_male" name="gender" value="Male">
      <label for="gender_male">Male</label><br>
      <input type="radio" id="gender_nonbinary" name="gender" value="Non-binary">
      <label for="gender_nonbinary">Non-binary</label><br>
      <input type="radio" id="gender_other" name="gender" value="Other">
      <label for="gender_other">Other (Please specify):</label>
      <input type="text" name="gender_other_text" style="width: 150px;">
    </div>
    <br>

    <div class="jspsych-survey-html-form-item">
      <label for="education"><strong>3. Highest Education Level Completed:</strong></label>
      <select id="education" name="education" required>
        <option value="">--Select One--</option>
        <option value="High School">High School Diploma/GED</option>
        <option value="Some College">Some College (No Degree)</option>
        <option value="Associate">Associate's Degree</option>
        <option value="Bachelor">Bachelor's Degree</option>
        <option value="Master">Master's Degree</option>
        <option value="Doctorate">Doctoral Degree (e.g., PhD, EdD)</option>
        <option value="Professional">Professional Degree (e.g., MD, JD)</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <br>

    <div class="jspsych-survey-html-form-item">
      <label for="english_proficiency"><strong>4. English Proficiency:</strong></label>
      ${createProficiencySelect('english_proficiency')}
    </div>
    <br>

    <div class="jspsych-survey-html-form-item">
      <label for="mandarin_proficiency"><strong>5. Mandarin Chinese Proficiency:</strong></label>
      ${createProficiencySelect('mandarin_proficiency')}
    </div>
    <br>

    <div class="jspsych-survey-html-form-item">
      <label for="other_languages"><strong>6. List any other languages you speak/understand, and your proficiency level in each:</strong></label><br>
      <textarea id="other_languages" name="other_languages" rows="4" cols="50"></textarea>
      <p style="font-size: small; color: gray;">Example: Spanish: Basic; French: None.</p>
    </div>
  `,
  button_label: 'Continue'
};


/* ---------- save data ---------- */
const save_data = {
  type: jsPsychPipe,
  action: "save",
  experiment_id: "dsYOUzAvTYUp",
  filename: filename,
  data_string: () => {
    return "\uFEFF" + jsPsych.data.get().csv();
  }
};

const debrief = {
  type: jsPsychHtmlButtonResponse,
  stimulus: `
    <div style="max-width:900px; margin:0 auto; text-align:left;">
      <h2>Debriefing</h2>
      <p>Thank you for participating in our study!
      <p> This research investigates how people mentally organize word meanings — in other words, how individuals represent and connect concepts in their "semantic networks." We are especially interested in whether there are consistent individual differences in how people group words based on meaning, and whether these differences depend on the type of word — for example, whether the words refer to concrete things (like apple or chair) or to more abstract ideas (like justice or freedom).
      By examining patterns across participants, we aim to better understand how people's mental representations of language vary and what factors might shape those differences. This work may ultimately contribute to our understanding of how experience, culture, and cognition influence the way we structure meaning.
      If you have any questions about the study, please contact the research team at apc003@ucsd.edu.</p>
      <p>Thank you again for your time and contribution!</p>
      <p>If you have any questions about the study please contact the experimenter.</p>
    </div>
  `,
  choices: ['Finish'],
  on_finish: () => {
    if (typeof jsPsych !== 'undefined' && jsPsych.pluginAPI) {
      try { document.exitFullscreen && document.exitFullscreen(); } catch (e) {}
    }
  }
};


/* ---------- Experiment timeline ---------- */
timeline.push(consent_form);
timeline.push(datetime_entry);
timeline.push(language_choice);
timeline.push(warning_screen);
timeline.push(start_screen);
timeline.push(enter_fullscreen);

// Main trial with all 90 words
timeline.push(circleTrial);
timeline.push(animalsTrial);
timeline.push(bodyPartsTrial);
timeline.push(artifactsTrial);
timeline.push(emotionalTrial);
timeline.push(nonemotionalTrial);

timeline.push(check_datapipe);
timeline.push(demographics_survey); 
timeline.push(save_data);
timeline.push(debrief);   

/* ---------- Run experiment ---------- */
jsPsych.run(timeline);