JavaScript issue | XM Community
Skip to main content

Hi there,

I wanted to have labels appear on top of each slider in my Qualtrics survey,  so I wrote some code into javascript. When I preview my question block, everything looks fine. However, when I go to preview my whole survey, the labels repeat a couple of times about slider 2. I cannot locate where the issue is, but I assume it is something in the code I wrote. Is anyone able to help? 

I have attached a document which includes screenshots of the previews, links to my survey and the javascript code I wrote.

Just move all your jquery code to the places where it says /*Place your JavaScript here to run when the page is fully displayed*/

It should be like this:

Qualtrics.SurveyEngine.addOnReady(function () {
	jQuery(".labels-container").clone().appendTo(".slider-container:eq(0)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(1)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(2)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(3)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(4)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(5)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(6)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(7)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(8)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(9)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(10)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(11)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(12)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(13)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(14)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(15)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(16)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(17)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(18)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(19)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(20)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(21)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(22)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(23)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(24)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(25)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(26)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(27)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(28)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(29)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(30)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(31)");
	jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(32)");
});

 

Hi, 

I tried this but it is still duplicating. Really strange because it only does it for slider 2. 

This is the current javascript code I have:

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery(".labels-container").clone().appendTo(".slider-container:eq(0)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(1)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(2)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(3)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(4)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(5)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(6)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(7)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(8)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(9)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(10)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(11)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(12)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(13)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(14)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(15)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(16)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(17)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(18)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(19)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(20)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(21)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(22)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(23)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(24)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(25)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(26)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(27)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(28)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(29)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(30)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(31)");
    jQuery(".labels-container").first().clone().appendTo(".slider-container:eq(32)");
});

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

});

 

  • I also tried putting the code in the other spots where is says /*Place your JavaScript here to run when the page is unloaded*/, but then everything just duplicated a load of times 

​@aparylo,

Perhaps it is because you haven’t limited the scope to the current question. Anyway, you are doing it the hard way. Try:

Qualtrics.SurveyEngine.addOnload(function() {
	var q = jQuery(this.questionContainer);
	var labels = q.find("ul.labels");
    q.find(".slider-container").each(function() {
		labels.clone().insertAfter(jQuery(this));
	});	
});

 

Thanks so much !

Leave a Reply


Terms & Conditions