How to pipe multiselect responses into sliders | XM Community
Skip to main content

Hi all, in Q10, I ask respondents to select three issue areas they feel particularly passionate about for the upcoming election. Based on their responses, I want to populate three sliders in the next question to get the respondents ideology on each issue area they selected. As such, I need to pipe the answers from the Q10 multiselect to the Q11 slider labels. However, my code for this does not seem to be working at all. I have included a page break between the questions.

I would appreciate any help you all can provide!

Qualtrics.SurveyEngine.addOnReady(function()
{
  // Mapping from choices to slider labels
    var labelMapping = {
        'Abortion / reproductive rights': ['Pro-choice', 'Pro-life'],
        'Gun policy': ['Anti-gun', 'Pro-gun'],
        'Education': ['Public solutions', 'Private solutions'],
        'Healthcare': ['Universal healthcare', 'Private healthcare'],
        'Environmental policy / climate change': ['Aggressive regulation', 'Limited regulation'],
		'Immigration': ['Open borders', 'Restricted immigration'],
        'Size and scope of the federal government': ['Larger government with more services', 'Smaller government with fewer services'],
    };

	var policy_issues = "${q://QID10/ChoiceGroup/SelectedChoices}".split(',')

	console.log("Selected policy issues:", policy_issues);
	console.log("Type of policy_issues:", typeof policy_issues);

	// Loop through each selected issue and set slider labels
    policy_issues.forEach((issue, index) => {
        var trimmedIssue = issue.trim(); // Trim any extra whitespace
        var labels = labelMapping[trimmedIssue];

        if (labels) {
            // Target the appropriate slider using .eq(index)
            jQuery(".statement-container div").eq(index).append(labels[0]);	
            jQuery("#" + this.questionId + " .statement-container div").eq(index).append(" <span style='float:right;'>" + labels[1] + "</span>");
        }
    });

});


Qualtrics.SurveyEngine.addOnload(function()
{
   	/*Place your JavaScript here to run when the page loads*/

	// hide numbers
	jQuery("ul.numbers").hide();

	// remove tick marks
  	jQuery("#"+this.questionId+" ul.numbers li").each(function() { this.innerHTML = this.innerHTML.replace("-",""); });

  	// Remove default slider label text
    jQuery("#" + this.questionId + " .statement-container div").each(function() {
        // Find the label within the current statement container
        var defaultText = jQuery(this).find("label");

        // If a label is found, clear its text
        if (defaultText.length > 0) {
            defaultText.text("");  // Clears the default text
        }
    });

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

 

you could have used carry forward at Q11. 

Other than the carry forward portion, perhaps you can try to use branch logic in the survey flow to set embedded data for the labels based on the choices selected in Q10, then piped text the embedded data at Q11’s label.

@julien_berman As already mentioned, I would try to use carry forward. But if you want to adjust the label, then I am not sure if this is possible…

I would suggest you to temporarily place some console.log() lines in your code for few variables you have defined. This should point you to the place where some variable may not be correctly filled.

Or did you see any error log in the console?

If using simple layout, make sure jQuery is loaded.

Often some parts are not yet available in addOnload. Maybe the issue is there.

Best

Christian

@julien_berman I also made a version with slight adjustments. Maybe try this.

Qualtrics.SurveyEngine.addOnReady(function()
{
    // Mapping from choices to slider labels
    var labelMapping = {
        'Abortion / reproductive rights': ['Pro-choice', 'Pro-life'],
        'Gun policy': ['Anti-gun', 'Pro-gun'],
        'Education': ['Public solutions', 'Private solutions'],
        'Healthcare': ['Universal healthcare', 'Private healthcare'],
        'Environmental policy / climate change': ['Aggressive regulation', 'Limited regulation'],
        'Immigration': ['Open borders', 'Restricted immigration'],
        'Size and scope of the federal government': ['Larger government with more services', 'Smaller government with fewer services'],
    };

    var policy_issues = "${q://QID10/ChoiceGroup/SelectedChoices}".split(',');

    console.log("Selected policy issues:", policy_issues);
    console.log("Type of policy_issues:", typeof policy_issues);

    // Loop through each selected issue and set slider labels
    policy_issues.forEach((issue, index) => {
        var trimmedIssue = issue.trim(); // Trim any extra whitespace
        var labels = labelMapping[trimmedIssue];

        if (labels) {
            // Target the appropriate slider label container using .eq(index)
            jQuery("#" + this.questionId + " .statement-container").eq(index).find("div").first().text(labels[0]);
            jQuery("#" + this.questionId + " .statement-container").eq(index).find("div").last().text(labels[1]);
        }
    });

});

Qualtrics.SurveyEngine.addOnload(function()
{
       // Hide numbers
    jQuery("ul.numbers").hide();

    // Remove tick marks
      jQuery("#" + this.questionId + " ul.numbers li").each(function() {
        this.innerHTML = this.innerHTML.replace("-", "");
    });

      // Remove default slider label text
    jQuery("#" + this.questionId + " .statement-container div").each(function() {
        jQuery(this).text("");  // Clears the default text in each div
    });
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

The code from @chackbusch worked! Thanks so much for your help.

Terms & ConditionsAccessibility statement