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
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.
!
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:
!
Thank you, @Mohammedali_Rajapakar_Ugam and
@Shashi ! Both answers work for me! Thanks for solving my question!
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"});
}
}
> @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:
!
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>");
}
}
});
> @"[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
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:
!
Thanks for the great soultion, but do you could help me building multiple language variants from there?
I tried:
jQuery("input.ResultsInput").hide();
// Check the current language using embedded data (replace Q_Language with your actual field if necessary)
var lang = "${e://Field/Q_Language}"; // Q_Language holds the language code
// Labels for English and German
var labels = {
en: {
30: 'not informed at all',
60: 'uninformed',
90: 'neither informed nor uninformed',
120: 'well informed',
150: 'very well informed'
},
de: {
30: 'überhaupt nicht informiert',
60: 'uninformiert',
90: 'weder informiert noch uninformiert',
120: 'gut informiert',
150: 'sehr gut informiert'
}
};
// Set default language to English
var activeLabels = labels.en;
// If survey language is German, use the German labels
if (lang === "de") {
activeLabels = labels.de;
}
// Function to update the label when the slider is clicked
this.questionclick = function(event, element) {
var filledWidth = jQuery(".Filled").width();
if (filledWidth == "30") {
jQuery(".Skin .horizontalbar td.RightBorder").text(activeLabels[30]).css({"font-size": "14px"});
}
if (filledWidth == "60") {
jQuery(".Skin .horizontalbar td.RightBorder").text(activeLabels[60]).css({"font-size": "14px"});
}
if (filledWidth == "90") {
jQuery(".Skin .horizontalbar td.RightBorder").text(activeLabels[90]).css({"font-size": "14px"});
}
if (filledWidth == "120") {
jQuery(".Skin .horizontalbar td.RightBorder").text(activeLabels[120]).css({"font-size": "14px"});
}
if (filledWidth == "150") {
jQuery(".Skin .horizontalbar td.RightBorder").text(activeLabels[150]).css({"font-size": "14px"});
}
};
It works fine in english but the translation doesn’t work. Any tipps ?
@cedok4711,
Qualtrics language codes are uppercase (e.g., EN).
If you are interested, I have a function named starRating, that is far superior to the solution given here:
- Displays rating labels interactively (instead of on click)
- Supports any number of stars
- Supports full and half-star ratings
- Supports translations without the need of custom code
