Stars Labels on mobile | XM Community
Skip to main content

Hi,
I was trying to upgrade the code jdiffee provided (https://www.qualtrics.com/community/discussion/1822/how-to-change-the-value-for-the-stars-slider) to make it possible to use the functionality of Star Labels on mobile. As for now, it doesn't respond on touchstart events, but it works good on click.
Unfortunately, as I am very new in JS, I failed.
Could you please help me to make it right? This is one of my last attempts.

Qualtrics.SurveyEngine.addOnload(function()
{
this.addEventListener('click', 'touchstart');
});

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("" + _descd_val-1] + "");

    }

}

 });

Hi there, the code that jdiffee wrote is pretty cool! I was unfortunately also unable to adapt it for touchstart events. Instead, I went more with MohammedAli_Rajapkar's approach in that thread where each statement is directly referenced and I made it so the text updates from click or touchstart on the question. The below is set up for 5 statements that use 5 stars, but configuring it for more would just be adding more width and right vars and adjusting what the width equals. Also, I added some CSS that helps ensure the text has room to display on Mobile.
First, in the Style section of the survey's Look & Feel, add the below CSS:
.Skin .STAR .horizontalbar table.sliderGrid tr td.value {
    max-width: 1px !important;
    min-width: 1px !important;
}

.Skin .horizontalbar .RightBorder {
    min-width: 60px;
}

.Skin .horizontalbar table.sliderGrid tr td.value input, .Skin .horizontalbar tr.Stars td.value input {
    display: none;
}
Then, head over to the Builder and create a Slider question and set the number of statements and stars to 5. Add the below to the question's JavaScript in the OnReady section:
var qid = this.questionId;
var question = document.getElementById('Questions');
var width1 = document.getElementById(qid+'~1~result');
var right1 = document.getElementById(qid+'~1~RightBorder');
var width2 = document.getElementById(qid+'~2~result');
var right2 = document.getElementById(qid+'~2~RightBorder');
var width3 = document.getElementById(qid+'~3~result');
var right3 = document.getElementById(qid+'~3~RightBorder');
var width4 = document.getElementById(qid+'~4~result');
var right4 = document.getElementById(qid+'~4~RightBorder');
var width5 = document.getElementById(qid+'~5~result');
var right5 = document.getElementById(qid+'~5~RightBorder');

jQuery(question).on("click , touchstart", function() {

//Statement1//
var widthval1 = parseInt(jQuery(width1).val());

if(widthval1==1){
        jQuery(right1).text("Terrible").css({"font-size":"14px"});
    }
if(widthval1==2){
        jQuery(right1).text("Poor").css({"font-size":"14px"});
    }
if(widthval1==3){
        jQuery(right1).text("Average").css({"font-size":"14px"});
    }
if(widthval1==4){
        jQuery(right1).text("Good").css({"font-size":"14px"});
    }
if(widthval1==5){
        jQuery(right1).text("Excellent").css({"font-size":"14px"});
    }

//Statement2//
var widthval2 = parseInt(jQuery(width2).val());

if(widthval2==1){
        jQuery(right2).text("Terrible").css({"font-size":"14px"});
    }
if(widthval2==2){
        jQuery(right2).text("Poor").css({"font-size":"14px"});
    }
if(widthval2==3){
        jQuery(right2).text("Average").css({"font-size":"14px"});
    }
if(widthval2==4){
        jQuery(right2).text("Good").css({"font-size":"14px"});
    }
if(widthval2==5){
        jQuery(right2).text("Excellent").css({"font-size":"14px"});
    }

//Statement3//
var widthval3 = parseInt(jQuery(width3).val());

if(widthval3==1){
        jQuery(right3).text("Terrible").css({"font-size":"14px"});
    }
if(widthval3==2){
        jQuery(right3).text("Poor").css({"font-size":"14px"});
    }
if(widthval3==3){
        jQuery(right3).text("Average").css({"font-size":"14px"});
    }
if(widthval3==4){
        jQuery(right3).text("Good").css({"font-size":"14px"});
    }
if(widthval3==5){
        jQuery(right3).text("Excellent").css({"font-size":"14px"});
    }

//Statement4//
var widthval4 = parseInt(jQuery(width4).val());

if(widthval4==1){
        jQuery(right4).text("Terrible").css({"font-size":"14px"});
    }
if(widthval4==2){
        jQuery(right4).text("Poor").css({"font-size":"14px"});
    }
if(widthval4==3){
        jQuery(right4).text("Average").css({"font-size":"14px"});
    }
if(widthval4==4){
        jQuery(right4).text("Good").css({"font-size":"14px"});
    }
if(widthval4==5){
        jQuery(right4).text("Excellent").css({"font-size":"14px"});
    }

//Statement5//
var widthval5 = parseInt(jQuery(width5).val());

if(widthval5==1){
        jQuery(right5).text("Terrible").css({"font-size":"14px"});
    }
if(widthval5==2){
        jQuery(right5).text("Poor").css({"font-size":"14px"});
    }
if(widthval5==3){
        jQuery(right5).text("Average").css({"font-size":"14px"});
    }
if(widthval5==4){
        jQuery(right5).text("Good").css({"font-size":"14px"});
    }
if(widthval5==5){
        jQuery(right5).text("Excellent").css({"font-size":"14px"});
    }

})

@Tom_1842  Thank you so much for creating the code! I wonder if it is possible to make some adjustment so that the statements carried over from the previous questions can also have this label showed on mobile. 

@Fay1988 glad it helps! I think I see what you mean. When the choice’s are Carried Forward to become the statements for the star sliders, an “x” is added to the element Ids. Try updating the JavaScript of the star slider question with the below:

var qid = this.questionId;
var question = document.getElementById('Questions');
var width1 = document.getElementById(qid+'~x1~result');
var right1 = document.getElementById(qid+'~x1~RightBorder');
var width2 = document.getElementById(qid+'~x2~result');
var right2 = document.getElementById(qid+'~x2~RightBorder');
var width3 = document.getElementById(qid+'~x3~result');
var right3 = document.getElementById(qid+'~x3~RightBorder');
var width4 = document.getElementById(qid+'~x4~result');
var right4 = document.getElementById(qid+'~x4~RightBorder');
var width5 = document.getElementById(qid+'~x5~result');
var right5 = document.getElementById(qid+'~x5~RightBorder');

jQuery(question).on("click , touchstart", function() {

//Statement1//
var widthval1 = parseInt(jQuery(width1).val());

if(widthval1==1){
        jQuery(right1).text("Terrible").css({"font-size":"14px"});
    }
if(widthval1==2){
        jQuery(right1).text("Poor").css({"font-size":"14px"});
    }
if(widthval1==3){
        jQuery(right1).text("Average").css({"font-size":"14px"});
    }
if(widthval1==4){
        jQuery(right1).text("Good").css({"font-size":"14px"});
    }
if(widthval1==5){
        jQuery(right1).text("Excellent").css({"font-size":"14px"});
    }

//Statement2//
var widthval2 = parseInt(jQuery(width2).val());

if(widthval2==1){
        jQuery(right2).text("Terrible").css({"font-size":"14px"});
    }
if(widthval2==2){
        jQuery(right2).text("Poor").css({"font-size":"14px"});
    }
if(widthval2==3){
        jQuery(right2).text("Average").css({"font-size":"14px"});
    }
if(widthval2==4){
        jQuery(right2).text("Good").css({"font-size":"14px"});
    }
if(widthval2==5){
        jQuery(right2).text("Excellent").css({"font-size":"14px"});
    }

//Statement3//
var widthval3 = parseInt(jQuery(width3).val());

if(widthval3==1){
        jQuery(right3).text("Terrible").css({"font-size":"14px"});
    }
if(widthval3==2){
        jQuery(right3).text("Poor").css({"font-size":"14px"});
    }
if(widthval3==3){
        jQuery(right3).text("Average").css({"font-size":"14px"});
    }
if(widthval3==4){
        jQuery(right3).text("Good").css({"font-size":"14px"});
    }
if(widthval3==5){
        jQuery(right3).text("Excellent").css({"font-size":"14px"});
    }

//Statement4//
var widthval4 = parseInt(jQuery(width4).val());

if(widthval4==1){
        jQuery(right4).text("Terrible").css({"font-size":"14px"});
    }
if(widthval4==2){
        jQuery(right4).text("Poor").css({"font-size":"14px"});
    }
if(widthval4==3){
        jQuery(right4).text("Average").css({"font-size":"14px"});
    }
if(widthval4==4){
        jQuery(right4).text("Good").css({"font-size":"14px"});
    }
if(widthval4==5){
        jQuery(right4).text("Excellent").css({"font-size":"14px"});
    }

//Statement5//
var widthval5 = parseInt(jQuery(width5).val());

if(widthval5==1){
        jQuery(right5).text("Terrible").css({"font-size":"14px"});
    }
if(widthval5==2){
        jQuery(right5).text("Poor").css({"font-size":"14px"});
    }
if(widthval5==3){
        jQuery(right5).text("Average").css({"font-size":"14px"});
    }
if(widthval5==4){
        jQuery(right5).text("Good").css({"font-size":"14px"});
    }
if(widthval5==5){
        jQuery(right5).text("Excellent").css({"font-size":"14px"});
    }

})

And because the formatting from the first post was lost, below is the CSS:

.Skin .STAR .horizontalbar table.sliderGrid tr td.value {
    max-width: 1px !important;
    min-width: 1px !important;
}

.Skin .horizontalbar .RightBorder {
    min-width: 60px;
}

.Skin .horizontalbar table.sliderGrid tr td.value input, .Skin .horizontalbar tr.Stars td.value input {
    display: none;
}

 

@Tom_1842  Wow, it worked perfectly! Speaking from someone who has zero knowledge of JavaScript, you saved me from hours of searching for the right code for the matrix star question. Thank you so much!

Leave a Reply


Terms & Conditions