Dynamic choice options in Multiple choice question type in survey | XM Community
Skip to main content

Hi,

I have a requirement of a survey in which a multiple choice question needs to be created. It is for customer manager to login. Based on login, the corresponding customer account names need to appear as choice options for the question. It allows only single choice. The account names are placed in an embedded field with pipe separator. Below code does it visually by manipulating the DOM element. But how to add it as choice in survey response :

 

Refine this code to add the selected value to set the selected choice of the question Qualtrics.SurveyEngine.addOnload(function () {
  var qid = this.getQuestionInfo().QuestionID;
  var custString = "${e://Field/GP_AGP-Name}";
  if (!custString) return;

  var customers = custString.split("|").map(c => c.trim()).filter(c => c);
  var $qContainer = jQuery("#" + qid);
  var $ul = $qContainer.find("ul.ChoiceStructure");

  // Remove placeholder choices
  $ul.empty();

  // Build new Qualtrics-style choices
  customers.forEach((cust, i) => {
    var inputId = "QR~" + qid + "~" + (i + 1);
    var labelId = qid + "-" + (i + 1) + "-label";

    // <li class="Selection">
    var $li = jQuery("<li>", { class: "Selection" });

    // <span class="LabelWrapper">
    var $span = jQuery("<span>", { class: "LabelWrapper" });

    // <input>
    var $input = jQuery("<input>", {
      type: "radio",
      name: "QR~" + qid,
      id: inputId,
      value: cust,
      class: "InputElement QWatchTimer"
    });

    // <span class="q-radio"> (for Qualtrics circle)
    var $decor = jQuery("<span>", { class: "q-radio" });

    // <label>
    var $label = jQuery("<label>", {
      for: inputId,
      id: labelId,
      class: "SingleAnswer ChoiceTextPositionLeft",
      text: cust
    });

    $span.append($input).append($decor).append($label);
    $li.append($span);
    $ul.append($li);
  });

  // 🪄 Force Qualtrics to apply its custom styling logic again
  if (typeof Qualtrics !== "undefined" && Qualtrics.SurveyEngine) {
    Qualtrics.SurveyEngine.Page.autoRadio();
  }

  // 🧩 Fallback: manually toggle q-checked for visual feedback
  jQuery("#" + qid + " input[type=radio]").on("change", function () {
    jQuery("#" + qid + " .q-radio").removeClass("q-checked");
    jQuery(this).siblings(".q-radio").addClass("q-checked");
  });
});

 

Thanks in advance.

Regards,

Neha Tank

​@Neha Tank,

You can’t dynamically add a choice and have it show up in response data.  You’ll need to change your approach. You could do the following:

  1. Instead of removing the existing choices, dynamically change the choice text to your account names
  2. Save the account names to embedded data fields to record which choice maps to each account name (e.g., choice1 = Account Name 1)

​@TomG , thanks for the response.

I cannot dynamically change as the number of choices vary depending on the customer manager. It depends on number of accounts that a customer Manager handles. ChatGPT suggested that if I use AddChoice instead of just manipulating DOM elements, it can be stored as dynamic choice. So was trying to do that.

Ya, the option of embedded fields is what I have thought of as a back up plan.

Any idea how Addchoice code can be written ?

​@TomG , thanks for the response.

I cannot dynamically change as the number of choices vary depending on the customer manager. It depends on number of accounts that a customer Manager handles. ChatGPT suggested that if I use AddChoice instead of just manipulating DOM elements, it can be stored as dynamic choice. So was trying to do that.

Ya, the option of embedded fields is what I have thought of as a back up plan.

Any idea how Addchoice code can be written ?

You can’t always believe what ChatGPT says.  There is no such thing as AddChoice. There is an update question API (not JS), but it can’t be used to modify a survey for an in-process response.

There are a number of ways you could go:

  1. Using my original suggestion, you can set up the question so it has the maximum number of choices, then hide the extra choices.
  2. You could set up the question so it has all the possible accounts as choices, then hide the ones that don’t apply. This would make the data cleaner since there would be one choice per account that doesn’t change.
  3. You could make it a text entry question, have the JS ‘create’ the choices like you did in your JS, then save the selected choice to the text entry box.

​@TomG , Let me explore any of these options and let you know if it worked for me. Thanks for your guidance.

Regards,

Neha Tank

Terms & ConditionsAccessibility statement