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.

You can now see a complete breakdown of your survey, including the number of items, pages, and question types, along with an automatic estimate of participants’ response time.

Collaboration is smoother than ever, with the ability to leave comments on specific questions and see when others are also viewing the same survey.

Whether you're refining a short feedback form or building a complex study, this helps you stay organized and create a better experience for your respondents.

🛠️ Try it in your next survey and build with more clarity and control.

This utility dynamically carries forward the options selected in one question and displays them as the available options in the next question.

It allows respondents to first select multiple items and then answer a follow-up question based only on those selected options.

This approach is useful when respondents must first identify relevant items and then choose their preferred option from that subset.

Typical use cases include:

• Selecting preferred brands and then choosing the favorite

• Selecting services used and then identifying the most important

• Selecting challenges and then choosing the biggest one
  

Example

Question 1

Which fruits do you like? (Multiple choice – checkboxes)

• Apple

• Banana

• Orange

• Mango

The respondent selects:

✔ Apple
✔ Orange

Question 2

Which one do you like the most? (Single choice – radio buttons)

Only the previously selected options will appear:

• Apple

• Orange

All other options will automatically be hidden.

Step 1. Create a Variable

Create a survey variable with the following configuration:

• Name: firstQuestionSelectedOption

• Type: From URL

This variable will temporarily store the selected option text from the first question.

Step 2. First Question

Question Type

Multiple Choice (Checkboxes)

Placement

Add the following code under:

JS – On Next Button Click

//// First Question (JS - On Next Button Click)

(function () {
  var root =
    (document.activeElement && document.activeElement.closest && document.activeElement.closest("app-select-form")) ||
    document.querySelector("app-select-form");

  if (!root) return;

  var selectedCheckboxes = null;
  try { selectedCheckboxes = root.querySelectorAll('[role="checkbox"][aria-checked="true"]'); } catch(e) {}

  if (!selectedCheckboxes || selectedCheckboxes.length === 0) return;

  var selectedTexts = [];
  for (var i = 0; i < selectedCheckboxes.length; i++) {
    var cb = selectedCheckboxes[i];
    var labelId = cb.getAttribute("aria-labelledby");
    var labelEl = labelId ? root.querySelector("#" + CSS.escape(labelId)) : null;
    var text = (labelEl && labelEl.textContent) ||
               (cb.querySelector && cb.querySelector(".p-button-label") && cb.querySelector(".p-button-label").textContent) ||
               "";
    text = (text || "").trim();
    if (text) selectedTexts.push(text);
  }

  PolyedaClientApi.setVariable("firstQuestionSelectedOptions", JSON.stringify(selectedTexts));
})();

Step 3. Second Question

Question Type

Multiple Choice (Radio Buttons)

Placement

Add the following code under:

JS – On Load

//// Second Question (JS - On Load)

(function () {
  function log(msg) { try { console.log("[my-script] " + msg); } catch (e) {} }

  function normalizeText(s) {
    s = (s == null) ? "" : String(s);
    s = s.split("\u00A0").join(" ");
    for (var k = 0; k < 5; k++) s = s.split("  ").join(" ");
    return s.trim();
  }

  function isVisible(el) {
    try {
      if (!el) return false;
      if (el.getClientRects && el.getClientRects().length === 0) return false;
      if (el.offsetParent === null) return false;
      return true;
    } catch (e) { return false; }
  }

  function strongHide(el) {
    if (!el) return;
    try { el.style.setProperty("display", "none", "important"); } catch (e) {}
    try { el.style.setProperty("visibility", "hidden", "important"); } catch (e) {}
    try { el.style.setProperty("height", "0", "important"); } catch (e) {}
    try { el.style.setProperty("margin", "0", "important"); } catch (e) {}
    try { el.style.setProperty("padding", "0", "important"); } catch (e) {}
    try { el.style.setProperty("pointer-events", "none", "important"); } catch (e) {}
  }

  // 1) Read the stored options array (JSON string)
  var firstQuestionSelectedOptions = null;
  try { 
    firstQuestionSelectedOptions = PolyedaClientApi.getVariable("firstQuestionSelectedOptions");
  } catch (e) {}

  if (!firstQuestionSelectedOptions) {
    log("firstQuestionSelectedOptions empty -> abort");
    return;
  }

  // Parse JSON array safely
  var selectedOptionsArray = [];
  try {
    selectedOptionsArray = JSON.parse(firstQuestionSelectedOptions);
  } catch(e) {
    log("Error parsing firstQuestionSelectedOptions JSON: " + e);
    return;
  }

  // Normalize all selected options texts
  for (var idx = 0; idx < selectedOptionsArray.length; idx++) {
    selectedOptionsArray[idx] = normalizeText(selectedOptionsArray[idx]);
  }
  log("Selected options array: [" + selectedOptionsArray.join(", ") + "]");

  // 2) Find the current question container by title text (like your example)
  var titles = null;
  try { titles = document.querySelectorAll(".question-title"); } catch (e) {}

  var questionRoot = null;
  if (titles && titles.length) {
    for (var i = 0; i < titles.length; i++) {
      var t = titles[i];
      var txt = normalizeText(t.textContent || "");
      if (txt.indexOf("בחירה שנייה") >= 0) {
        questionRoot = (t.closest && t.closest(".question")) ? t.closest(".question") : null;
        if (!questionRoot) {
          questionRoot = (t.parentNode && t.parentNode.parentNode) ? t.parentNode.parentNode : null;
        }
        break;
      }
    }
  }

  if (!questionRoot) {
    log("questionRoot not found by title -> fallback to first app-select-form");
    try { questionRoot = document.querySelector("app-select-form"); } catch (e) {}
  }

  if (!questionRoot) {
    log("no usable root found -> abort");
    return;
  }

  // 3) Hide options that are NOT included in selectedOptionsArray
  function hideUnselectedOptions(root) {
    if (!root) return 0;
    var count = 0;

    // Hide by role="radio" using aria-labelledby match
    var radios = null;
    try { radios = root.querySelectorAll('[role="radio"]'); } catch (e) {}

    if (radios && radios.length) {
      for (var r = 0; r < radios.length; r++) {
        var radio = radios[r];
        var al = "";
        try { al = normalizeText(radio.getAttribute ? radio.getAttribute("aria-labelledby") : ""); } catch (e) {}

        if (selectedOptionsArray.indexOf(al) === -1) {
          var block = (radio.closest && radio.closest(".select-question")) ? radio.closest(".select-question") : null;
          if (!block) block = radio.parentNode;

          log("Hiding block by aria-labelledby (visible=" + (isVisible(block) ? "true" : "false") + "): " + al);
          strongHide(block);
          count++;
        }
      }
    }

    // Additional check using label text
    var labels = null;
    try { labels = root.querySelectorAll(".select-question .p-button-label"); } catch (e) {}

    if (labels && labels.length) {
      for (var j = 0; j < labels.length; j++) {
        var labelEl = labels[j];
        var lt = normalizeText(labelEl.textContent || "");

        if (selectedOptionsArray.indexOf(lt) === -1) {
          var block2 = (labelEl.closest && labelEl.closest(".select-question")) ? labelEl.closest(".select-question") : null;
          if (!block2) block2 = labelEl.parentNode;

          log("Hiding block by label text (visible=" + (isVisible(block2) ? "true" : "false") + "): " + lt);
          strongHide(block2);
          count++;
        }
      }
    }

    return count;
  }

  var hiddenCount = hideUnselectedOptions(questionRoot);
  log("Hidden inside questionRoot: " + hiddenCount);

  // 4) Global safety pass to hide duplicates rendered elsewhere
  var globalHidden = hideUnselectedOptions(document);
  log("Hidden in global pass: " + globalHidden);

  // 5) Attach MutationObserver to reapply hiding after rerender
  try {
    var observer = new MutationObserver(function () {
      var c1 = hideUnselectedOptions(questionRoot);
      var c2 = hideUnselectedOptions(document);
      if (c1 || c2) log("Observer reapplied hide (question=" + c1 + ", global=" + c2 + ")");
    });

    observer.observe(questionRoot, { childList: true, subtree: true });
    log("MutationObserver attached on questionRoot");
  } catch (e) {
    log("MutationObserver blocked/unavailable");
  }
})();

This utility allows you to dynamically hide a specific answer option in a question based on a respondent’s selection in a previous question.

Example:
If the respondent selects option “C” in Question 1, option “C” will be hidden in Question 2.

This is useful for:

• Preventing duplicate selections

• Creating elimination-style logic

Step 1. Create a Variable

Create a survey variable with the following configuration:

• Name: firstQuestionSelectedOption

• Type: From URL

This variable will temporarily store the selected option text from the first question.

Step 2. First Question

Placement

Add the following code under:

JS – On Next Button Click

//// First Question (JS - On Next Button Click)

(function () {
  // Scope to the current question only:
  // 1) Prefer the container that contains the currently focused element (after click/keyboard select)
  // 2) Fallback to the first rendered <app-select-form> (still safe because this hook runs per-question)
  var root =
    (document.activeElement && document.activeElement.closest && document.activeElement.closest("app-select-form")) ||
    document.querySelector("app-select-form");

  if (!root) return;

  // In your markup, the chosen option is reflected via aria-checked="true"
  var selectedRadio = root.querySelector('[role="radio"][aria-checked="true"]');
  console.log('selected radio: ',selectedRadio);
  if (!selectedRadio) return;

  // Best source: aria-labelledby -> element id -> textContent
  var labelId = selectedRadio.getAttribute("aria-labelledby");
  var labelEl = labelId ? root.querySelector("#" + CSS.escape(labelId)) : null;
console.log('labelId: ',labelId);
console.log('labelEl: ',labelEl);
  // Fallback: the visible label span inside the button
  var text =
    (labelEl && labelEl.textContent) ||
    (selectedRadio.querySelector && selectedRadio.querySelector(".p-button-label") && selectedRadio.querySelector(".p-button-label").textContent) ||
    "";
    console.log('text: ',text);

  text = (text || "").trim();
  if (!text) return;

  // Store it in the survey variable
  PolyedaClientApi.setVariable("firstQuestionSelectedOption", text);
  console.log('firstQuestionSelectedOption set to '+text);
})();

Step 3. Second Question

Placement

Add the following code under:

JS – On Load

//// Second Question (JS - On Load)
(function () {
  function log(msg) { try { console.log("[my-script] " + msg); } catch (e) {} }

  function normalizeText(s) {
    s = (s == null) ? "" : String(s);
    s = s.split("\u00A0").join(" ");
    for (var k = 0; k < 5; k++) s = s.split("  ").join(" ");
    return s.trim();
  }

  function isVisible(el) {
    try {
      if (!el) return false;
      if (el.getClientRects && el.getClientRects().length === 0) return false;
      if (el.offsetParent === null) return false;
      return true;
    } catch (e) { return false; }
  }

  function strongHide(el) {
    if (!el) return;
    try { el.style.setProperty("display", "none", "important"); } catch (e) {}
    try { el.style.setProperty("visibility", "hidden", "important"); } catch (e) {}
    try { el.style.setProperty("height", "0", "important"); } catch (e) {}
    try { el.style.setProperty("margin", "0", "important"); } catch (e) {}
    try { el.style.setProperty("padding", "0", "important"); } catch (e) {}
    try { el.style.setProperty("pointer-events", "none", "important"); } catch (e) {}
  }

  // 1) Read the stored option text
  var firstQuestionSelectedOption = null;
  try { firstQuestionSelectedOption = PolyedaClientApi.getVariable("firstQuestionSelectedOption"); } catch (e) {}

  firstQuestionSelectedOption = normalizeText(firstQuestionSelectedOption);
  log("firstQuestionSelectedOption = [" + firstQuestionSelectedOption + "]");

  if (!firstQuestionSelectedOption) {
    log("firstQuestionSelectedOption empty -> abort");
    return;
  }

  // 2) Find the current question container by title text
  var titles = null;
  try { titles = document.querySelectorAll(".question-title"); } catch (e) {}

  var questionRoot = null;
  if (titles && titles.length) {
    for (var i = 0; i < titles.length; i++) {
      var t = titles[i];
      var txt = normalizeText(t.textContent || "");
      if (txt.indexOf("באפשרות שנייה") >= 0) {
        questionRoot = (t.closest && t.closest(".question")) ? t.closest(".question") : null;
        if (!questionRoot) {
          // fallback: walk up a bit
          questionRoot = (t.parentNode && t.parentNode.parentNode) ? t.parentNode.parentNode : null;
        }
        break;
      }
    }
  }

  if (!questionRoot) {
    log("questionRoot not found by title -> fallback to first app-select-form");
    try { questionRoot = document.querySelector("app-select-form"); } catch (e) {}
  }

  if (!questionRoot) {
    log("no usable root found -> abort");
    return;
  }

  // 3) Hide inside the current question: match by aria-labelledby FIRST (most exact)
  var hiddenCount = 0;

  function hideMatchesUnder(root) {
    if (!root) return 0;

    var count = 0;

    // (A) Match by aria-labelledby = saved text (your DOM uses aria-labelledby equal to that id)
    var radios = null;
    try { radios = root.querySelectorAll('[role="radio"]'); } catch (e) {}

    if (radios && radios.length) {
      for (var r = 0; r < radios.length; r++) {
        var radio = radios[r];
        var al = "";
        try { al = normalizeText(radio.getAttribute ? radio.getAttribute("aria-labelledby") : ""); } catch (e) {}

        if (al === firstQuestionSelectedOption) {
          var block = (radio.closest && radio.closest(".select-question")) ? radio.closest(".select-question") : null;
          if (!block) block = radio.parentNode;

          log("match by aria-labelledby -> hiding block (visible=" + (isVisible(block) ? "true" : "false") + ")");
          strongHide(block);
          count++;
        }
      }
    }

    // (B) Fallback: match by label text
    var labels = null;
    try { labels = root.querySelectorAll(".p-button-label"); } catch (e) {}

    if (labels && labels.length) {
      for (var j = 0; j < labels.length; j++) {
        var labelEl = labels[j];
        var lt = normalizeText(labelEl.textContent || "");
        if (lt === firstQuestionSelectedOption) {
          var block2 = (labelEl.closest && labelEl.closest(".select-question")) ? labelEl.closest(".select-question") : null;
          if (!block2) block2 = labelEl.parentNode;

          log("match by label text -> hiding block (visible=" + (isVisible(block2) ? "true" : "false") + ")");
          strongHide(block2);
          count++;
        }
      }
    }

    return count;
  }

  hiddenCount += hideMatchesUnder(questionRoot);
  log("hidden inside questionRoot: " + hiddenCount);

  // 4) Global safety pass: if PrimeNG/Angular rendered a visible clone elsewhere, hide it too
  var globalHidden = hideMatchesUnder(document);
  log("hidden in global pass: " + globalHidden);

  // 5) Keep watching for rerenders and re-apply once more when nodes change
  try {
    var obs = new MutationObserver(function () {
      var c1 = hideMatchesUnder(questionRoot);
      var c2 = hideMatchesUnder(document);
      if (c1 || c2) log("observer reapplied hide (question=" + c1 + ", global=" + c2 + ")");
    });

    obs.observe(questionRoot, { childList: true, subtree: true });
    log("observer attached on questionRoot");
  } catch (e) {
    log("MutationObserver blocked/unavailable");
  }
})();