Alchemer

Single Followup Question

To add a single followup question after an open-end in Alchemer, follow these steps:

Create your open-ended question (e.g., Q1).
Add a Hidden Value action to store the followup question (e.g., followup_question).
Add a Text Entry question for the respondent’s answer.
Add a JavaScript Action after the respondent’s answer and before displaying the followup question.
Paste the following code into the JavaScript editor:
- Update the PREPPOP_MAPPINGS array to match your hidden value question IDs and the JSON keys you want to map.
- Set hiddenAnswerQID to the Question ID of your answer field.
- Set URL and apiKey as needed.

document.addEventListener("DOMContentLoaded", function () {
  const PREPPOP_MAPPINGS = [
    { jsonKey: "followupQuestion", qid: 20 }, // Update 20 to your hidden value QID
  ];

  const URL = "https://surveys.getaftercare.com/api/v1/followups";
  const apiKey = ""; // Update to your API key
  const hiddenAnswerQID = 27; // Update to your answer field QID

  const getHiddenInputValue = (qid) => {
    const surveyId = SGAPI.survey.surveyObject.id;
    const pageId = SGAPI.survey.pageId;
    const inputId = `sgE-${surveyId}-${pageId}-${qid}-element`;
    const input = document.getElementById(inputId);
    return input ? input.value : "";
  };

  const getElemByQid = (qid, section = "element") => {
    const id = `sgE-${SGAPI.survey.surveyObject.id}-${SGAPI.survey.pageId}-${qid}-${section}`;
    return document.getElementById(id);
  };

  const hidePageContent = () => {
    const content = document.querySelector(".sg-page-content");
    if (content) content.style.display = "none";
  };

  const prepop = (mappings, data) => {
    mappings.forEach(({ jsonKey, qid }) => {
      const val = data[jsonKey];
      const elem = getElemByQid(qid);
      if (elem) elem.value = val || "";
    });
  };

  const clickNextButton = () => {
    const nextButton =
      document.querySelector("#sg_NextButton") ||
      document.querySelector("#sg_SubmitButton");
    if (nextButton) {
      nextButton.disabled = false;
      nextButton.style.display = "block";
      try {
        nextButton.click();
        setTimeout(() => {
          const clickEvent = new MouseEvent("click", {
            bubbles: true,
            cancelable: true,
            view: window,
          });
          nextButton.dispatchEvent(clickEvent);
        }, 300);
      } catch (e) {
        console.error("Error clicking button:", e);
      }
    } else {
      setTimeout(clickNextButton, 200);
    }
  };

  const executeMain = () => {
    try {
      const answer = getHiddenInputValue(hiddenAnswerQID);
      const payload = {
        question: "Question", // replace with the text of the topic question
        answer: answer,
        guidanceBehavior: "Verbose",
      };
      hidePageContent();
      fetch(URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-Aftercare-Key": apiKey,
        },
        body: JSON.stringify(payload),
      })
        .then((res) => res.json())
        .then((data) => {
          console.log("API response:", data);
          prepop(PREPPOP_MAPPINGS, data);
          setTimeout(clickNextButton, 200);
        })
        .catch((err) => {
          console.error("API error:", err);
          setTimeout(clickNextButton, 500);
        });
    } catch (e) {
      console.error("Main execution error:", e);
    }
  };

  executeMain();
});

Data Quality Evaluation

To evaluate response quality in Alchemer using JavaScript, follow these steps:

Add a Hidden Value action for each field you want to store from the API response (e.g., qualityScore, isFlagged).
Add a Text Entry question for the respondent’s answer.
Add a JavaScript Action after the answer.
Paste the following code into the JavaScript editor:
- Update the mappings array in CONFIG to match your hidden value question IDs and the JSON keys you want to map.
- Set hiddenAnswerQID to the Question ID of your answer field.
- Set api.url and api.key as needed.

document.addEventListener("DOMContentLoaded", function () {
  // Configuration constants
  const CONFIG = {
    mappings: [
      { jsonKey: "qualityScore", qid: 34 },
      { jsonKey: "isFlagged", qid: 35 },
    ],
    api: {
      url: "https://surveys.getaftercare.com/api/v1/data-quality",
      key: "", // Update to your API key
    },
    hiddenAnswerQID: 27, // Update to your answer field QID
    retryDelay: 200,
    buttonClickDelay: 300,
  };

  // Helper functions
  const helpers = {
    getElementId: (qid, section = "element") =>
      `sgE-${SGAPI.survey.surveyObject.id}-${SGAPI.survey.pageId}-${qid}-${section}`,

    getElement: (qid, section = "element") =>
      document.getElementById(helpers.getElementId(qid, section)),

    getHiddenInputValue: (qid) => {
      const input = helpers.getElement(qid);
      return input ? input.value : "";
    },

    hidePageContent: () => {
      const content = document.querySelector(".sg-page-content");
      if (content) content.style.display = "none";
    },

    prepopFields: (mappings, data) => {
      mappings.forEach(({ jsonKey, qid }) => {
        const value = data[jsonKey];
        const element = helpers.getElement(qid);
        if (element) element.value = value || "";
      });
    },

    clickNextButton: () => {
      const nextButton =
        document.querySelector("#sg_NextButton") ||
        document.querySelector("#sg_SubmitButton");

      if (!nextButton) {
        return setTimeout(helpers.clickNextButton, CONFIG.retryDelay);
      }

      nextButton.disabled = false;
      nextButton.style.display = "block";

      try {
        // Try native click first
        nextButton.click();

        // Fallback to dispatching click event
        setTimeout(() => {
          const clickEvent = new MouseEvent("click", {
            bubbles: true,
            cancelable: true,
            view: window,
          });
          nextButton.dispatchEvent(clickEvent);
        }, CONFIG.buttonClickDelay);
      } catch (error) {
        console.error("Failed to click button:", error);
      }
    },

    // Save data to localStorage
    saveData: (data) => {
      try {
        localStorage.setItem(
          "aftercareDataQualityResults",
          JSON.stringify(data)
        );
        console.log("Data saved successfully to localStorage");
      } catch (error) {
        console.error("Failed to save data to localStorage:", error);
      }
    },
  };

  // Main function
  const main = async () => {
    try {
      // Get the answer value
      const answer = helpers.getHiddenInputValue(CONFIG.hiddenAnswerQID);

      // Prepare the API payload
      const payload = {
        surveyName: "Response Quality Evaluation",
        surveyEntries: [
          {
            question: "Question", // Replace this with the text of the question
            answer: answer,
          },
        ],
      };

      // Hide the page content while processing
      helpers.hidePageContent();

      try {
        // Make the API request
        const response = await fetch(CONFIG.api.url, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-Aftercare-Key": CONFIG.api.key,
          },
          body: JSON.stringify(payload),
        });

        if (!response.ok) {
          throw new Error(`API returned status ${response.status}`);
        }

        const data = await response.json();

        // Save the API response data
        helpers.saveData(data);

        // Populate the form fields with API response
        helpers.prepopFields(CONFIG.mappings, data);

        // Proceed to next page
        setTimeout(helpers.clickNextButton, CONFIG.retryDelay);
      } catch (apiError) {
        console.error("API request failed:", apiError);
        setTimeout(helpers.clickNextButton, CONFIG.retryDelay * 2.5);
      }
    } catch (error) {
      console.error("Main execution error:", error);
      // Still try to proceed to next page on error
      setTimeout(helpers.clickNextButton, CONFIG.retryDelay);
    }
  };

  // Start execution
  main();
});

You can either:

Store these values in your survey data and export for analysis
Or, you can access the Aftercare platform to view and download the quality evaluations.

If you have any questions, please contact our support team.

Get Started

Core Products

Single Followup Question

Data Quality Evaluation

​Single Followup Question

​Data Quality Evaluation

Single Followup Question

Data Quality Evaluation