How to change the value for the stars slider | XM Community
Skip to main content
Michael_Cooksey
Administrator
22 days ago
Solved

How to change the value for the stars slider

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!

Best answer by MohammedAli_Rajapkar

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
View original

    10 replies

    MohammedAli_Rajapkar
    QPN Level 5 ●●●●●
    Forum|alt.badge.img+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
    Y
    YouOnlyLiveOnce
    jdiffee
    3 people like this
    • Y
      Yin
    • YouOnlyLiveOnce
      YouOnlyLiveOnce
    • jdiffee
      jdiffee
    A
    • Anonymous
    • 0 replies
    • September 5, 2018
    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
    • Anonymous
    • 0 replies
    • September 5, 2018
    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
    YouOnlyLiveOnce
    2 people like this
    • Y
      Yin
    • YouOnlyLiveOnce
      YouOnlyLiveOnce
    Y
    • Yin
    • Author
    • 1 reply
    • September 5, 2018
    Thank you, @Mohammedali_Rajapakar_Ugam and @Shashi ! Both answers work for me! Thanks for solving my question!
    M
    Level 1 ●
    Forum|alt.badge.img+1
    • markw
    • Level 1 ●
    • 5 replies
    • January 2, 2019
    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
    Forum|alt.badge.img+1
    • jdiffee
    • 8 replies
    • December 13, 2019
    > @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
    Forum|alt.badge.img+1
    • jdiffee
    • 8 replies
    • January 21, 2020
    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>"); } } });
    Tom_1842
    1 person likes this
    • Tom_1842
      Tom_1842
    B
    • Benfica
    • 2 replies
    • February 10, 2020
    > @"[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
    C
    Forum|alt.badge.img
    • cedok4711
    • 1 reply
    • September 4, 2024
    Anonymous wrote:

    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:

    !fa_3y42pk9zbtw0.png

     

    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 ?

    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • 5926 replies
    • September 4, 2024

    @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

    Leave a Reply


    Terms & Conditions