Custom code for commentaries below stars scale | XM Community
Skip to main content
Question

Custom code for commentaries below stars scale


Forum|alt.badge.img+1

Hi people.

 

Is it possible to adjust whenever a customer chooses 1-3 stars, open a box below the item to leave a comment specific about that subject?

 

Like this:

 

6 replies

praveengeorgeix
QPN Level 4 ●●●●
Forum|alt.badge.img+11
  • QPN Level 4 ●●●●
  • 99 replies
  • March 13, 2024

you can add a text question and set a display logic. 


Shashi
Level 8 ●●●●●●●●
Forum|alt.badge.img+32
  • Level 8 ●●●●●●●●
  • 633 replies
  • March 13, 2024

We can use in page display logic on a text entry added after the star rating question. We can also hide the question text of the text entry question using below code in the text entry question:

jQuery("#"+this.questionId+" .QuestionText").hide();

 


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 8 replies
  • March 13, 2024

I’ve tried to do both suggestions, but they didn’t work.


Sachin Nandikol
QPN Level 6 ●●●●●●
Forum|alt.badge.img+34
  • QPN Level 6 ●●●●●●
  • 468 replies
  • March 13, 2024

Hello @arezzo,

Follow these steps to achieve this:

1. After your Star Rating question, add one more question (Text Entry).
2. Set the question text as "Would you like to let us know why you gave an average answer?" (You can customize the text as needed).
3. Add display logic to this Text Entry question: "if Star Rating question is selected as 1, 2, or 3" and enable In-Page.

This setup won't look exactly like your screenshot, but it will be similar. If you want it to match the screenshot exactly, remove the question text from the Text Entry question. There will be some gap between both questions; you can use CSS to remove the gap.

 

Let me know if this helps.


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 8 replies
  • March 14, 2024

Hi, well, I need it to be exactly like the screenshot.

Is it necessary a css code?


Sachin Nandikol
QPN Level 6 ●●●●●●
Forum|alt.badge.img+34
  • QPN Level 6 ●●●●●●
  • 468 replies
  • March 15, 2024

Hello @arezzo

Yes, you'll need to utilize code for that purpose. Here's an example code snippet you can use:

.Skin .ChoiceStructure .QuestionText, .Skin .QuestionText {

padding: 0px

line-height: 0.6em;

}

.Skin .QuestionBody {

padding: 0 20px 0px 20px;

}

 

If you incorporate the code, it will appear as demonstrated in the screenshot below:

 


Leave a Reply