How to use a star question?

Change the question type to a Slider, then change the slider type to Stars.
I don't think you can currently have both labels (the "nada satisfecho" and "muy satisfecho" labels in your example) and stars, though, which is a bit disappointing. I think that would be a nice feature to have in the future.

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.

Carlos Godoy The question won't let you do one line of stars? That's odd. This is what the set up looks like for me, in the old survey builder (we haven't switched over to the new builder yet). I did 1 choice (but didn't edit the default text here) and 5 stars.
And here's what that looks like for me when I preview the question.
It's not necessarily as pretty as your example, but it should work okay. Can you show me how yours is set up?

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

Sorry lizb311, I didn't mention you well.

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

You can also overwrite the multiple choice question like this 

JavaScript

Qualtrics.SurveyEngine.addOnload(function()
{
const questionBody = document.querySelector('.QuestionBody');
    const radios = questionBody.querySelectorAll('input[type="radio"]');

    // 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');
            }
        });
    }
});

And add the following CSS

.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;
}
/*Use ID or Class or both as selector and hide the original Question-Set*/{
display: none;
}

@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;
}

@Tom - I tried the above, but it did not work for me. I want the same output as you have on yours with the labels to the left and right of the stars. Please let me know any tips or changes I would need to make to the code.

I am using the following on CoreXM: 

Question Type: Slider 

Slider Type: Stars 

@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.

Qualtrics.SurveyEngine.addOnload(function()
{
const questionBody = document.querySelector('.QuestionBody');
    const radios = questionBody.querySelectorAll('input[type="radio"]');

    // 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');
            }
        });
    }
});

.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;
}
/*Use ID or Class or both as selector and hide the original Question-Set*/{
display: none;
}

I pasted the JS into a multiple choice question with five answer choices, pasted the CSS into the CSS field of Look & Feel → Style and it still isn’t working. Anything I’m missing here? I’m not really well versed with JS or CSS.