In Page Display Logic is unavailable for Sliders | XM Community
Skip to main content
Question

In Page Display Logic is unavailable for Sliders

  • June 30, 2020
  • 1 reply
  • 37 views
V

I would like to display 1 out of 3 slider bars depending on the choices of a previous question on the same page - thus without a page break. Unfortunately the "in page display logic" is not available for sliders. If the slider bar is a forced response I also get the message that you can see in the second image.
Is there a way to display the slider bar depending on the choices from the previous question with JS? Does anyone could provide JS code for this?
Thank you very much!

image.pngimage.png

1 reply

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • February 15, 2023

Hi there, if you still need, I was able to put this in place by adapting the code in this post.
First, create a Multiple Choice question that is Single select and has 3 choice options. After this question and on the same page, create a Slider question that has 3 statements. Note the Question ID of this Slider question.
Back in the Multiple Choice question, add the below to the question's JavaScript in the OnReady section, updating the Question ID bit from "#QID25" to whatever the Question ID is for the Slider question.
var sliderqid = "#QID25";
var slider1 = sliderqid+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(2)";
var slider2 = sliderqid+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(3)";
var slider3 = sliderqid+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(4)";

// hide slider question from start
  jQuery(sliderqid).hide();

  // when current question is clicked
  this.questionclick = function(event, element) { 

    // create variable with clicked answer and check
    var selectedChoice = this.getSelectedChoices();

    // show sliders if condition is met
    if (selectedChoice == "1") {
      jQuery(sliderqid).show('.QuestionText');
      jQuery(sliderqid).show('.labels-container');
      jQuery(slider1).show();
jQuery(slider2).hide();
jQuery(slider3).hide();
    }
    if (selectedChoice == "2") {
      jQuery(sliderqid).show('.QuestionText');
      jQuery(sliderqid).show('.labels-container');
      jQuery(slider2).show();
jQuery(slider1).hide();
jQuery(slider3).hide();
    }
    if (selectedChoice == "3") {
      jQuery(sliderqid).show('.QuestionText');
      jQuery(sliderqid).show('.labels-container');
      jQuery(slider3).show();
jQuery(slider1).hide();
jQuery(slider2).hide();
    } 
  
  }
Finally, as noted in the community post, the width of the track changes when the slider container is displayed which makes it unusable. To tackle this, add the below CSS to the Style section of the survey's Look & Feel:
.JFEScope .Skin .horizontalbar.MobileFriendly .track {
    width: 100% !important;
}

Terms & ConditionsAccessibility statement