Showing chosen response in slider | XM Community
Skip to main content
Solved

Showing chosen response in slider

  • July 19, 2022
  • 2 replies
  • 150 views
G
Level 2 ●●
Forum|alt.badge.img+10

Hello everyone,
I am implementing a survey for a client that includes a lot of slider questions. We are using the modern layout that shows the answer chosen above the slider.
image.pngWhen you go on on the survey and come back to the page, or when an unanswered question does not let you leave the page, the number disappears.
image.pngIs there a way to keep the number showing in any circumstance?

Thank you in advance

Best answer by Tom_1842

Hi there, I'm pretty pleased with this one. I adapted the below from this thread and it is set up to work for a slider question with 3 statements. Just add to the Onload section of the question's JS.
var qid = this.questionId;

var slider1 = jQuery("#"+this.questionId+" .ResultsInput:eq(0)").val();
var left1 = document.getElementById(qid + '~1~handle').style.left;

var slider2 = jQuery("#"+this.questionId+" .ResultsInput:eq(1)").val();
var left2 = document.getElementById(qid + '~2~handle').style.left;

var slider3 = jQuery("#"+this.questionId+" .ResultsInput:eq(2)").val();
var left3 = document.getElementById(qid + '~3~handle').style.left;


document.getElementById(qid + '~1~toolTip').style.left = left1;
document.getElementById(qid + '~1~toolTip').style.top = '-84px';
document.getElementById(qid + '~1~toolTipBox').innerHTML = slider1;
document.getElementById(qid + '~2~toolTip').style.left = left2;
document.getElementById(qid + '~2~toolTip').style.top = '-84px';
document.getElementById(qid + '~2~toolTipBox').innerHTML = slider2;
document.getElementById(qid + '~3~toolTip').style.left = left3;
document.getElementById(qid + '~3~toolTip').style.top = '-84px';
document.getElementById(qid + '~3~toolTipBox').innerHTML = slider3;

2 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • Answer
  • July 26, 2022

Hi there, I'm pretty pleased with this one. I adapted the below from this thread and it is set up to work for a slider question with 3 statements. Just add to the Onload section of the question's JS.
var qid = this.questionId;

var slider1 = jQuery("#"+this.questionId+" .ResultsInput:eq(0)").val();
var left1 = document.getElementById(qid + '~1~handle').style.left;

var slider2 = jQuery("#"+this.questionId+" .ResultsInput:eq(1)").val();
var left2 = document.getElementById(qid + '~2~handle').style.left;

var slider3 = jQuery("#"+this.questionId+" .ResultsInput:eq(2)").val();
var left3 = document.getElementById(qid + '~3~handle').style.left;


document.getElementById(qid + '~1~toolTip').style.left = left1;
document.getElementById(qid + '~1~toolTip').style.top = '-84px';
document.getElementById(qid + '~1~toolTipBox').innerHTML = slider1;
document.getElementById(qid + '~2~toolTip').style.left = left2;
document.getElementById(qid + '~2~toolTip').style.top = '-84px';
document.getElementById(qid + '~2~toolTipBox').innerHTML = slider2;
document.getElementById(qid + '~3~toolTip').style.left = left3;
document.getElementById(qid + '~3~toolTip').style.top = '-84px';
document.getElementById(qid + '~3~toolTipBox').innerHTML = slider3;

G
Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • November 6, 2022

Hi, hope you are doing well. I was working with sliders recently and noticed that the above code does not appear to work for Classic laout. I've updated the code so that the tooltip's display if the sliders are activated from being answered:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
var qid = this.questionId;

var slider1 = jQuery("#"+this.questionId+" .ResultsInput:eq(0)").val();
var left1 = document.getElementById(qid + '~1~handle').style.left;

var slider2 = jQuery("#"+this.questionId+" .ResultsInput:eq(1)").val();
var left2 = document.getElementById(qid + '~2~handle').style.left;

var slider3 = jQuery("#"+this.questionId+" .ResultsInput:eq(2)").val();
var left3 = document.getElementById(qid + '~3~handle').style.left;

document.getElementById(qid + '~1~toolTip').style.left = left1;
document.getElementById(qid + '~1~toolTip').style.top = '-51px';
document.getElementById(qid + '~1~toolTipBox').innerHTML = slider1;

document.getElementById(qid + '~2~toolTip').style.left = left2;
document.getElementById(qid + '~2~toolTip').style.top = '-51px';
document.getElementById(qid + '~2~toolTipBox').innerHTML = slider2;

document.getElementById(qid + '~3~toolTip').style.left = left3;
document.getElementById(qid + '~3~toolTip').style.top = '-51px';
document.getElementById(qid + '~3~toolTipBox').innerHTML = slider3;


});


Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

var qid = this.questionId;

if (document.getElementById(qid + '~1~holder').className=='trackHolderRel activated') {
        document.getElementById(qid + '~1~toolTip').style.display = "block";
    };

if (document.getElementById(qid + '~2~holder').className=='trackHolderRel activated') {
        document.getElementById(qid + '~2~toolTip').style.display = "block";
    };

if (document.getElementById(qid + '~3~holder').className=='trackHolderRel activated') {
        document.getElementById(qid + '~3~toolTip').style.display = "block";
    };

});


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

});
Also, I updated the above to use -51 which works on Classic layout. If anyone needs to update for Modern or Flat, Modern is -84 on both desktop and mobile but Flat is -65 on desktop and -59 because the font changes at 480px. To get around that, set the JS for -65 and add the below CSS to the survey's Look & Feel in the Style section:
@media (max-width: 480px) {
.JFEScope .BarContainer .sliderToolTipBox {
  font-size: 18px !important;
}
}

G
Terms & ConditionsAccessibility statement