app/static/app.js

(function () {
  "use strict";
  const form = document.getElementById("study-form");
  if (!form) return;

  const startedAt = performance.now();
  const responseTime = document.getElementById("response-time-ms");
  const audioPlayed = document.getElementById("audio-played-ms");
  const audioCompleted = document.getElementById("audio-completed");
  const audio = document.getElementById("answer-audio");
  let playedMs = 0;
  let playStartedAt = null;

  if (audio) {
    audio.addEventListener("play", () => { playStartedAt = performance.now(); });
    const accumulate = () => {
      if (playStartedAt !== null) {
        playedMs += performance.now() - playStartedAt;
        playStartedAt = null;
        audioPlayed.value = String(Math.round(playedMs));
      }
    };
    audio.addEventListener("pause", accumulate);
    audio.addEventListener("ended", () => {
      accumulate();
      audioCompleted.value = "1";
    });
  }

  function wireScale(id, outputId) {
    const input = document.getElementById(id);
    const output = document.getElementById(outputId);
    const touched = document.getElementById(id + "-touched");
    if (!input || !output) return;
    const activate = () => {
      if (touched) touched.value = "1";
      output.value = input.value;
    };
    input.addEventListener("pointerdown", activate, { once: true });
    input.addEventListener("keydown", activate, { once: true });
    input.addEventListener("input", () => { output.value = input.value; });
  }
  wireScale("gate-confidence", "gate-confidence-output");
  wireScale("responsiveness", "responsiveness-output");
  wireScale("confidence", "confidence-output");

  const eligible = new Set(["substantive_answer_attempt", "explicit_disclosure_boundary"]);
  const responsivenessSection = document.getElementById("responsiveness-section");
  const deliverySection = document.getElementById("delivery-section");
  const audioRevisionSection = document.getElementById("audio-revision-section");
  document.querySelectorAll('input[name="gate"]').forEach((radio) => {
    radio.addEventListener("change", () => {
      const show = eligible.has(radio.value);
      responsivenessSection.classList.toggle("hidden", !show);
      deliverySection.classList.toggle("hidden", !show);
      if (audioRevisionSection) audioRevisionSection.classList.toggle("hidden", !show);
    });
  });

  const audibleEvent = document.getElementById("audible-event");
  const audibleOther = document.getElementById("audible-event-other");
  if (audibleEvent) {
    audibleEvent.addEventListener("change", () => {
      audibleOther.classList.toggle("hidden", audibleEvent.value !== "other");
    });
  }

  const flagToggle = document.getElementById("flag-toggle");
  const flagPanel = document.getElementById("flag-panel");
  flagToggle.addEventListener("click", () => flagPanel.classList.toggle("hidden"));

  form.addEventListener("submit", () => {
    if (playStartedAt !== null) {
      playedMs += performance.now() - playStartedAt;
      playStartedAt = performance.now();
    }
    audioPlayed.value = String(Math.round(playedMs));
    responseTime.value = String(Math.round(performance.now() - startedAt));
  });
})();