Multiple star sliders- how to set custom values | XM Community
Skip to main content
Hi all, I have this question and I found this code to have different values show to the respondent (ATTACHMENT) ! The problem is that the code only works for a single star slider. Can anyone please provide me with a code for multiple star sliders? Thanks so much
@BettoLamacchia - I have tweaked your code slightly to work with multiple star slider, please have a look:- Qualtrics.SurveyEngine.addOnReady(function() { /*Place your JavaScript here to run when the page is fully displayed*/ jQuery('.ResultsInput').hide(); jQuery('.ResultsInput').after("<span id='autoinsert'></span>"); jQuery('.ResultsInput').on("change input",function() { console.log('aa'); var widthvalue = parseInt(jQuery(this).val()); if (widthvalue==1) { jQuery(this).next().html("Molto insoddisfatto"); } if (widthvalue==2) { jQuery(this).next().html("Insoddisfatto"); } if (widthvalue==3) { jQuery(this).next().html("Molto 3"); } if (widthvalue==4) { jQuery(this).next().html("Molto 4"); } if (widthvalue==5) { jQuery(this).next().html("Molto 5"); } }); });
Hi @KimothiSaurabh, many thanks, it works! As I want to have this question mobile friendly, have you got a code have values show above each star slider instead of the right side? Thanks again
@BettoLamacchia - That setup is mobile friendly by default bu if you still want values to be shown above starts, you can use this code:- Qualtrics.SurveyEngine.addOnReady(function() { /*Place your JavaScript here to run when the page is fully displayed*/ jQuery('.ResultsInput').hide(); jQuery('tbody .BarOuter').prepend("<div class='autoinsert'></div>") jQuery('.ResultsInput').on("change input",function() { var widthvalue = parseInt(jQuery(this).val()); if (widthvalue==1) { jQuery(this).parent().parent().find('.autoinsert').html("Molto insoddisfatto"); } if (widthvalue==2) { jQuery(this).parent().parent().find('.autoinsert').html("Insoddisfatto"); } if (widthvalue==3) { jQuery(this).parent().parent().find('.autoinsert').html("Molto 3"); } if (widthvalue==4) { jQuery(this).parent().parent().find('.autoinsert').html("Molto 4"); } if (widthvalue==5) { jQuery(this).parent().parent().find('.autoinsert').html("Molto 5"); } }); });
> @KimothiSaurabh said: > @BettoLamacchia - That setup is mobile friendly by default bu if you still want values to be shown above starts, you can use this code:- > > Qualtrics.SurveyEngine.addOnReady(function() > { > /*Place your JavaScript here to run when the page is fully displayed*/ > jQuery('.ResultsInput').hide(); > jQuery('tbody .BarOuter').prepend("<div class='autoinsert'></div>") > jQuery('.ResultsInput').on("change input",function() > { > var widthvalue = parseInt(jQuery(this).val()); > if (widthvalue==1) > { > jQuery(this).parent().parent().find('.autoinsert').html("Molto insoddisfatto"); > } > if (widthvalue==2) > { > jQuery(this).parent().parent().find('.autoinsert').html("Insoddisfatto"); > } > if (widthvalue==3) > { > jQuery(this).parent().parent().find('.autoinsert').html("Molto 3"); > } > if (widthvalue==4) > { > jQuery(this).parent().parent().find('.autoinsert').html("Molto 4"); > } > if (widthvalue==5) > { > jQuery(this).parent().parent().find('.autoinsert').html("Molto 5"); > } > }); > > }); Many thanks, that's great :)
Hi! Do you know how to have the custom values localized if there's translations in the survey?
You can create a span and fetch text from there. Put this span in you questions text So it would be like:- <span class='rate5' style="display:none;">Molto 5</span> jQuery(this).parent().parent().find('.autoinsert').html(jQuery('.rate5').html());
Thank you @KimothiSaurabh !