Make stars more visible in star rating question | XM Community
Skip to main content

Hello everyone, 

Wish you all the best for this new year :)

Find below a screenshot of one of my survey star rating question, as you can see I feel like we don’t see the stars enough, is there anything I can do to highlight them or maybe add square around them.

 

Note that I already have below Javascript for the question : 

Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId+" tr").each(function() {
var row = jQuery(this);
var th = row.after("<tr></tr>").find("th").attr("colspan","4").css("text-align","left");
th.remove();
});
$('thead').remove();
});

Let me know if you have any idea :)

 

Hi, the stars themselves are tough to customize because they are static images. To modify how the stars in the slider look, you have to replace the below CSS rule with your own background image, discussed a bit here:

.Skin .STAR .StarsContainer, .Skin .STAR .StarsContainer .Filled, .Skin .STAR .StarsEventWatcher {
    height: 26px;
    background: transparent url(/jfe/themes/base-templates/qualtrics/2014/version-1686077302048-6a2726/files/stars.png) 0 0;
}

Another option is, like you mention, to change the background of the space behind the stars. Adding the below CSS to the Style section of the Look & Feel will do this:

.Skin .STAR .StarsOuterContainer {
padding: 10px;
background-color: #454545;
}

Another option is to use the Multiple Choice question that has been modified to select an answer choice when a star character is clicked. The stars in this method are easier to customize in terms of size and color. That option is discussed in this post.

Hello @Tom_1842 

Thank you so much for your answer I tried the second option it seems to work pretty good ! 

Is there a way I can out square the stars without filling it just a black rectangle aroud the stars maybe ? 

Try using the outline property in the CSS:

.Skin .STAR .StarsOuterContainer {
padding: 10px;
outline: 1px solid;
}

 

Hello @Tom_1842 

Tried it (check below) and it works perfectly many thanks !

 

Hey,

Is anybody succeded to customise the stars question with the simple layout ?

With this layout, there is not CSS, everything is manage with SVG.

I think maybe it’s possible to change the SVG parameter with JQuery request ?

Tks

Leave a Reply


Terms & Conditions