This utility allows you to measure the time it takes for a respondent to select their first answer after a page loads.

The measured time is stored in a variable and can later be used for analysis.

⚠️ Note: The measurement is recorded in milliseconds, where:
1000 milliseconds = 1 second.

Example:
If a respondent enters a page and selects their first answer after 8 seconds, the value 8000 will be saved.

The timer stops only when the respondent interacts with an answer (e.g., selects an option or clicks into an open-text field).
Clicks elsewhere on the screen do not stop the timer.

This is useful for:

• Measuring hesitation before answering

• Identifying complex or unclear questions

• Analyzing respondent engagement

• Verifying that respondents spent enough time reading instructions, viewing content, or reviewing materials before answering (e.g., a story, an image, or a detailed explanation)

Step 1. Create a Variable

Create a survey variable with the following configuration:

• Name: [PageName]_TimeTillFirstAnswer

• Type: Variable

This variable will store the time (in milliseconds) it takes for the respondent to select their first answer on the page.

Important

You must replace [PageName] with your actual page name.

The page name refers to the page where the question (with the JavaScript) is located.

For example:
If your question is on a page called Page1, the variable name should be:

Page1_TimeTillFirstAnswer

⚠️ Note:

• This value must be manually updated by you

• The name is case-sensitive

• It must exactly match the page name used inside the JavaScript code

• If the page name is changed at any point, you must also update it in the JavaScript code and the variable name accordingly

Step 2. Add JavaScript to the Question

Placement

Add the JavaScript under:

JS – On Load

Step 3. View the Data

The recorded time will appear in your data file under the variable you created.

Example:
If your page name is Page1, the data column will be:

Page1_TimeTillFirstAnswer

The value represents the time in milliseconds that passed before the respondent selected their first answer.

JavaScript Code

(function () {
  const pageCode = "Page1"; // change per page only
  const variableName = pageCode + "_TimeTillFirstAnswer";
  const startedAt = new Date().getTime();
  let wasSaved = false;
  const isInsideQuestion = function (el) {
    while (el) {
      if (el.classList && el.classList.contains("question")) {
        return true;
      }
      el = el.parentNode;
    }
    return false;
  };
  const hasClass = function (el, className) {
    return !!(el && el.classList && el.classList.contains(className));
  };
  const getAttr = function (el, name) {
    if (!el || !el.getAttribute) {
      return null;
    }
    return el.getAttribute(name);
  };
  const isTextLikeInput = function (el) {
    if (!el || !el.tagName) {
      return false;
    }
    const tag = el.tagName.toLowerCase();
    if (tag === "textarea") {
      return true;
    }
    if (tag !== "input") {
      return false;
    }
    const type = (el.type || "").toLowerCase();
    return (
      type === "" ||
      type === "text" ||
      type === "search" ||
      type === "email" ||
      type === "number" ||
      type === "tel" ||
      type === "url"
    );
  };
  const isMeaningfulTarget = function (el) {
    if (!el) {
      return false;
    }
    if (isTextLikeInput(el)) {
      return true;
    }
    if (hasClass(el, "p-dropdown-label")) {
      return true;
    }
    if (hasClass(el, "p-dropdown-trigger")) {
      return true;
    }
    if (hasClass(el, "p-dropdown-item")) {
      return true;
    }
    if (hasClass(el, "p-button")) {
      return true;
    }
    if (hasClass(el, "p-togglebutton")) {
      return true;
    }
    if (hasClass(el, "mat-slider")) {
      return true;
    }
    if (getAttr(el, "role") === "slider") {
      return true;
    }
    if (getAttr(el, "role") === "checkbox") {
      return true;
    }
    if (getAttr(el, "role") === "radio") {
      return true;
    }
    if (getAttr(el, "role") === "option") {
      return true;
    }
    return false;
  };
  const findRelevantElement = function (el) {
    while (el) {
      if (isMeaningfulTarget(el)) {
        return el;
      }
      if (hasClass(el, "question")) {
        return null;
      }
      el = el.parentNode;
    }
    return null;
  };
  const saveFirstAnswerTime = function () {
    if (wasSaved) {
      return;
    }
    wasSaved = true;
    const elapsedMs = new Date().getTime() - startedAt;
    console.log("Time elapsed: " + String(elapsedMs));
    PolyedaClientApi.setVariable(variableName, String(elapsedMs));
    console.log(variableName + " was set to: " + PolyedaClientApi.getVariable(variableName));
  };
  const handleInteraction = function (ev) {
    if (wasSaved) {
      return;
    }
    const target = ev.target;
    if (!target) {
      return;
    }
    if (!isInsideQuestion(target)) {
      return;
    }
    const relevantEl = findRelevantElement(target);
    if (!relevantEl) {
      return;
    }
    if (ev.type === "input" || ev.type === "change") {
      if (isTextLikeInput(relevantEl)) {
        if ((relevantEl.value || "").trim() === "") {
          return;
        }
      }
      saveFirstAnswerTime();
      return;
    }
    if (ev.type === "click") {
      saveFirstAnswerTime();
      return;
    }
    if (ev.type === "keyup") {
      const key = ev.key || "";
      if (key === "Enter" || key === " " || key === "Spacebar" || key === "ArrowLeft" || key === "ArrowRight" || key === "ArrowUp" || key === "ArrowDown") {
        saveFirstAnswerTime();
      }
    }
  };
  document.addEventListener("input", handleInteraction, true);
  document.addEventListener("change", handleInteraction, true);
  document.addEventListener("click", handleInteraction, true);
  document.addEventListener("keyup", handleInteraction, true);
})();

You can now monitor different measures side by side, compare results, and stay up to date as new data comes in — without switching between views.

Whether you're tracking performance, analyzing trends, or reviewing results, this feature helps you stay organized and focused on what matters most.

🧭 Open your analytics and switch to the gallery view to start exploring.