How to use a star question?

Thanks lizb311 !
I've reviewed this question type, but It doesn't work for me properly. This question type works with 2 stars lines at least, but I want only one line to measure the overall satisfaction as you could view in the previous image.
Do you know another way to do this?
Thanks in advance!
Have a nice day.

Hi Liz thanks for your quick response.
I couldn't see it on the new platform, but I've checked it on the old platform, this's great.
It's better, but It doesn't work for us, because contacts will see "Click to write Choice 1" when they will be answering.
I had emailed Qualtrics Support some days ago, and they said a developer of the Qualtrics XM Community to see if other users know how to implement this with custom code.
Thanks again and I stay tuned.
Carlos Godoy

Carlos Godoy Ah, I see. Well you could always just type an empty space (or type

@DavidGermany This is working well for me, thank you for sharing! Something I see come up in other threads about the star slider is how it is tough to customize because the stars are static images. This code makes it easy to set the size and color of the stars.

I've tweaked it slightly to add this.questionId to the querySelectors so it can be used with multiple questions on the same page.

Added some CSS about hiding just the ChoiceStructure so that the question text still displays.

Added some floating labels to the top left and top right after the questionBody.

JS:

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/
const questionBody = document.querySelector('#'+this.questionId+' .QuestionBody');
const radios = questionBody.querySelectorAll('#'+this.questionId+' input[type="radio"]');

// Create top left label
const topLeftLabel = document.createElement('div');
topLeftLabel.className = 'label top-left';
topLeftLabel.innerText = 'Left Label 1';
questionBody.appendChild(topLeftLabel);

// Create top right label
const topRightLabel = document.createElement('div');
topRightLabel.className = 'label top-right';
topRightLabel.innerText = 'Right Label 1';
questionBody.appendChild(topRightLabel);	

// Create star rating container
const starContainer = document.createElement('div');
starContainer.className = 'star-rating';
questionBody.appendChild(starContainer);

// Create stars
 radios.forEach((radio, index) => {
        const star = document.createElement('span');
        star.className = 'star not-rated';
        star.innerHTML = '★'; // Star character
        star.dataset.value = radio.value;
        starContainer.appendChild(star);

        star.addEventListener('click', () => {
            radios[index].checked = true;
            updateStars(starContainer, index);
        });
    });

    function updateStars(container, index) {
        const stars = container.querySelectorAll('.star');
        stars.forEach((star, i) => {
            if (i <= index) {
                star.classList.remove('not-rated');
            } else {
                star.classList.add('not-rated');
            }
        });
    }

});

CSS:

.label {
    font-size: 14px;
}

.top-left {
float: left;
padding-top: 10px;
padding-left: 20px;
}

.top-right {
float: right;
padding-top: 10px;
padding-right: 20px;
}

.star-rating{
width: 100%;
display: flex; 
justify-content: center; 
align-items: center;
}

.star-rating .star {
    font-size: calc(50px + 2vw);
    cursor: pointer;
    color: gold;
    display: inline-block;
    margin-right: 5px;
}

.star-rating .star.not-rated {
    color: #e3e3e3;
}

/*update with questionIDs*/
#QID1 .ChoiceStructure, #QID2 .ChoiceStructure {
display: none;
}

@psbhatia  Try using the above on a Multiple Choice question type in survey that has a Flat, Classic, or Modern layout. It works by hiding the Multiple Choice answer options, appending a container full of star characters to the Multiple Choice question, and setting a value for the Multiple Choice question when one of the stars is clicked.