How to change the value for the stars slider | XM Community
Solved

How to change the value for the stars slider

  • 5 September 2018
  • 8 replies
  • 89 views
Y
Hi,

I am new to Qualtrics and have a question about the stars slider. I wonder how can I change the value shown in the stars slider? For example, in the below graph, how can I change 3 to Acceptable?

!

Thanks!
icon

Best answer by MohammedAli_Rajapkar 5 September 2018, 19:26

View original

8 replies

MohammedAli_Rajapkar
Rank
Userlevel 7
Badge +20
Here is the demo link:
https://qimpl.az1.qualtrics.com/jfe/preview/SV_b1ngOUkCfDDJ5Ih?Q_SurveyVersionID=current&Q_CHL=preview

attached is the QSF.

Also, if this is multi-language study then you will have to create a hidden question which will have 5 choices (same rating text) and then we will piped-text the choice label in place of hardcore rating.

Please refer to JavaScript section to change the rating text
Regards, Mohammed Ali
A
Hello @Yin ,

I don't think that is possible because even if we change that number to text using custom code then it will show us an error "Please enter valid numbers." which is by default for Slider questions that the answer must be numeric See the image below.

!
A
Hello @Yin ,

The following code will work if you have one choice for slider question

Paste the following code in the js(OnReady) of the question

jQuery("input.ResultsInput").hide();
this.questionclick = function(event,element){
if(jQuery(".Filled").width() == "30"){
jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable1').css({"font-size":"14px"});
}
if(jQuery(".Filled").width() == "60"){
jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable2').css({"font-size":"14px"});
}
if(jQuery(".Filled").width() == "90"){
jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable3').css({"font-size":"14px"});
}
if(jQuery(".Filled").width() == "120"){
jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable4').css({"font-size":"14px"});
}
if(jQuery(".Filled").width() == "150"){
jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable5').css({"font-size":"14px"});
}

}

Note: The data of this question will be numeric, its just that the user is not seeing the number.
Customize the code according to your need

Output:

!
Y
Thank you, @Mohammedali_Rajapakar_Ugam and @Shashi ! Both answers work for me! Thanks for solving my question!
M
Rank
Userlevel 1
Badge +1
Did anyone test this (below) on a mobile device? It doesn't appear to work consistently, at least not on iOS.

jQuery("input.ResultsInput").hide();
this.questionclick = function(event,element){
if(jQuery(".Filled").width() == "30"){
jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable1').css({"font-size":"14px"});
}
if(jQuery(".Filled").width() == "60"){
jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable2').css({"font-size":"14px"});
}
if(jQuery(".Filled").width() == "90"){
jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable3').css({"font-size":"14px"});
}
if(jQuery(".Filled").width() == "120"){
jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable4').css({"font-size":"14px"});
}
if(jQuery(".Filled").width() == "150"){
jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable5').css({"font-size":"14px"});
}

}
jdiffee
Userlevel 1
Badge +1
> @Mohammedali_Rajapakar_Ugam said:
> Here is the demo link:
> https://qimpl.az1.qualtrics.com/jfe/preview/SV_b1ngOUkCfDDJ5Ih?Q_SurveyVersionID=current&Q_CHL=preview
>
> attached is the QSF.
>
> Also, if this is multi-language study then you will have to create a hidden question which will have 5 choices (same rating text) and then we will piped-text the choice label in place of hardcore rating.
>
> Please refer to JavaScript section to change the rating text

@Mohammedali_Rajapakar_Ugam That's fantastic. Is it possible to do this on a Slider with multiple questions? When I add the JS it only applies to the first question in the group:

!
jdiffee
Userlevel 1
Badge +1
I figured out the solution to my post above, for those that are interested in adding custom labels to multiple star sliders in a group:
Qualtrics.SurveyEngine.addOnReady(function()
{

//set descriptions
var _desc = ['Terrible','Poor','Average','Good','Excellent'];

//hide default results
jQuery("[id$='~result']").hide();

//click handler
this.questionclick = function(event,element)
{

//get selected choices
var _choices = this.getSelectedChoices();

//loop through selected choices
for (var i in _choices) {

var _prefix = (this.questionId + "~" + _choices[i]), //build element id
_result = jQuery("[id='" + _prefix + "~result" + "']"), //get element obj
_val = parseInt(_result.val()); //get element value

//remove old description element
jQuery("[id='" + _prefix + "~desc" + "']").remove();

//add new description element
_result.after("<span id='" + _prefix + "~desc'>" + _desc[_val-1] + "</span>");

}

}

});
B
> @"[Deleted User]" said:
> Hello @Yin ,
>
> The following code will work if you have one choice for slider question
>
> Paste the following code in the js(OnReady) of the question
>
> jQuery("input.ResultsInput").hide();
> this.questionclick = function(event,element){
> if(jQuery(".Filled").width() == "30"){
> jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable1').css({"font-size":"14px"});
> }
> if(jQuery(".Filled").width() == "60"){
> jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable2').css({"font-size":"14px"});
> }
> if(jQuery(".Filled").width() == "90"){
> jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable3').css({"font-size":"14px"});
> }
> if(jQuery(".Filled").width() == "120"){
> jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable4').css({"font-size":"14px"});
> }
> if(jQuery(".Filled").width() == "150"){
> jQuery(".Skin .horizontalbar td.RightBorder").text('Acceptable5').css({"font-size":"14px"});
> }
>
> }
>
> Note: The data of this question will be numeric, its just that the user is not seeing the number.
> Customize the code according to your need
>
> Output:
>
> !
>

Hello,

I was trying to implement this solution but could not do it, it accepts the JS, but nothing happens. Am I missing anything? thanks

Leave a Reply


Terms & Conditions