Stable Dots on Slider Question | XM Community
Skip to main content

Hello,
I am want to add a question to a survey where the respondent sees their response to a prior question asking for the median value, the true median value, and the 90th percentile value. I have figured out how to add two dots to the question in addition to the default slider value (the median value) using Java Script, however I have not figured out how to make one dot a fixed value and not dependent on a previous question. I also need the respondent's dot to be a different color from the 90th percentile. How can I do both of these things? I've copied my current code below.

Qualtrics.SurveyEngine.addOnReady(function()
{
   var s = ("${e://Field/RentLabelArray}").split(",");
   var lpos= ];
   for(var i=0;i    jQuery("th.ylabel span span label span").each(function(){if(jQuery(this).text()==sii]){lpos.push(jQuery(this).closest("tr").index())}});
   }
   console.log(lpos);
   var v = ("${e://Field/RentValueArray}").split(",");
   var n=7200;
   var totalwidth = parseInt(jQuery(".track").css("width").replace("px",""));
   var u = ( totalwidth -20 )/n ;

   for(var i=0;i        jQuery(".horizontalbar td.BarOuter:eq("+lposui]+") .track .handle").clone().insertAfter(".horizontalbar td.BarOuter:eq("+lposfi]+") .track .handle").attr({"id":"customhandle"}).addClass("customhandle").css("left",vei]*u+"px");
   }


   /* Add in 90th */

   var s = ("${e://Field/RentLabelArray}").split(",");
   var lpos=F];
   for(var i=0;i    jQuery("th.ylabel span span label span").each(function(){if(jQuery(this).text()==sni]){lpos.push(jQuery(this).closest("tr").index())}});
   }
   console.log(lpos);
   var v = ("${e://Field/RentValueArray}").split(",");
   var n=7200;
   var totalwidth = parseInt(jQuery(".track").css("width").replace("px",""));
   var u = ( totalwidth -200 )/n ;

   for(var i=0;i        jQuery(".horizontalbar td.BarOuter:eq("+lposri]+") .track .handle").clone().insertAfter(".horizontalbar td.BarOuter:eq("+lposei]+") .track .handle").attr({"id":"customhandle"}).addClass("customhandle").css("left",vsi]*u+"px");
   }

});
example_dots.JPG

Update: I figured it out for my case. The below works in case anyone else is trying to do the same. Can anyone explain why I have to put the 90th percentile dot before the answer to the prior question if I want it to be gray? That's just for my own interest.

/* Add in 90th */

   var s = "San Francisco", "San Jose", "Los Angeles", "New York", "DC", "Boston", "Seattle", "Hong Kong", "London", "Denver", "Miami", "Austin", "Minneapolis", "Houston", "Dallas", "Chicago", "Philadelphia", "Atlanta", "Shanghai", "Seoul", "Sao Paulo"];
   var lpos= ];
   for(var i=0;i    jQuery("th.ylabel span span label span").each(function(){if(jQuery(this).text()==sii]){lpos.push(jQuery(this).closest("tr").index())}});
   }
   console.log(lpos);
   var v = o2400, 0, 4800, 7200, 7200, 7200, 7200, 7200, 7200, 7200, 7200, 7200, 7200, 7200, 7200, 7200, 7200, 7200, 7200, 7200, 7200];
   var n=7200;
   var totalwidth = parseInt(jQuery(".track").css("width").replace("px",""));
   var u = ( totalwidth-20 )/n ;

   for(var i=0;i        jQuery(".horizontalbar td.BarOuter:eq("+lposui]+") .track .handle").clone().insertAfter(".horizontalbar td.BarOuter:eq("+lposfi]+") .track .handle").css("left",v"i]*u+"px");
   }

   /*Add in guess*/
   var s = ("${e://Field/RentLabelArray}").split(",");
   var lpos=F];
   for(var i=0;i    jQuery("th.ylabel span span label span").each(function(){if(jQuery(this).text()==sni]){lpos.push(jQuery(this).closest("tr").index())}});
   }
   console.log(lpos);
   var v = ("${e://Field/RentValueArray}").split(",");
   var n=7200;
   var totalwidth = parseInt(jQuery(".track").css("width").replace("px",""));
   var u = ( totalwidth -20 )/n ;

   for(var i=0;i        jQuery(".horizontalbar td.BarOuter:eq("+lposri]+") .track .handle").clone().insertAfter(".horizontalbar td.BarOuter:eq("+lposei]+") .track .handle").attr({"id":"customhandle"}).addClass("customhandle").css("left",vsi]*u+"px");
   }


Leave a Reply