Weird behaviour after changing label position in slider questions

Question

Hi all I have multiple slider questions throughout my survey and the same behaviour emerges throughout. I wanted to change the position of the labels for my slider question. I used the following to move the labels: Qualtrics.SurveyEngine.addOnload(function(){    jQuery(".numbers li").hide();    var labels = jQuery("#"+this.questionId+" ul.labels");    if (labels.length > 0 && jQuery("div.slider-container").length > 0) {        labels.insertAfter("div.slider-container");        labels.css('font-weight', '700');    }}); When I preview the question on its own, it works like a charm!  But, when I preview the block or test out the survey after it is published, this is what happens:   Immediately below this question, I have a second, similar question which uses the following (identical to the first): Qualtrics.SurveyEngine.addOnload(function(){    jQuery(".numbers li").hide();    var labels = jQuery("#"+this.questionId+" ul.labels");    if (labels.length > 0 && jQuery("div.slider-container").length > 0) {        labels.insertAfter("div.slider-container");        labels.css('font-weight', '700');    }});  Again, previewing the question on its own works fine but here it is only producing two labels when it is in the published form. This slider question and the first one referenced in this post are literally immediately after one another in the same block.Can anyone tell me what’s happening here? Why is it tripling/doubling the labels like that? If there is a mistake in my java code, please feel free to correct it and post the corrected code. Alternative work-arounds would also be welcome!

Mangi · Answer

You are applying your changes to all elements on the page multiple times depending on how often you execute the code.Always select all your elements with the question ID (like you do for labels) and you should be ok.Thanks ​@vgayraud! I modified the code thusly:Qualtrics.SurveyEngine.addOnReady(function(){// Target labels within the current questionvar questionContainer = jQuery("#" + this.questionId);var labels = questionContainer.find("ul.labels");var slider = questionContainer.find("div.slider-container");if (labels.length && slider.length){// Move labels below their respective sliderlabels.insertAfter(slider);// Optional styling adjustmentslabels.css({ 'font-weight': '700', 'margin-top': '15px' });// Hide original number indicators if neededquestionContainer.find(".numbers li").hide();}});It seems to have done the trick!

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded