Make stars more visible in star rating question | XM Community
Skip to main content
Michael_Cooksey
Administrator
21 days ago
Solved

Make stars more visible in star rating question

T
Level 3 ●●●
Forum|alt.badge.img+3
  • Tata C
  • Level 3 ●●●
  • 67 replies

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 :)

 

Best answer by Tom_1842

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.

View original

5 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • 876 replies
  • Answer
  • January 2, 2024

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.

T
Level 3 ●●●
Forum|alt.badge.img+3
  • Tata C
  • Author
  • Level 3 ●●●
  • 67 replies
  • January 3, 2024

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 ? 

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • 876 replies
  • January 3, 2024

Try using the outline property in the CSS:

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

 

T
Level 3 ●●●
Forum|alt.badge.img+3
  • Tata C
  • Author
  • Level 3 ●●●
  • 67 replies
  • January 3, 2024

Hello @Tom_1842 

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

 

JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • JR33
  • QPN Level 2 ●●
  • 75 replies
  • January 30, 2024

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