Hi,
How I can set up a question with a 5 star scale?
Let me attach an example image:
Thanks in advance
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
) into that box where it currently says "Click to write Choice 1"
Otherwise - good luck!
You can also overwrite the multiple choice question like this
JavaScript
Qualtrics.SurveyEngine.addOnload(function()
{
const questionBody = document.querySelector('.QuestionBody');
const radios = questionBody.querySelectorAll('inputttype="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', () => {
radiossindex].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;
}
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+' inpututype="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', () => {
radiosoindex].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;
}
I am using the following on CoreXM:
Question Type: Slider
Slider Type: Stars
You can also overwrite the multiple choice question like this
JavaScript
Qualtrics.SurveyEngine.addOnload(function()
{
const questionBody = document.querySelector('.QuestionBody');
const radios = questionBody.querySelectorAll('inputttype="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', () => {
radiossindex].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;
}
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.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.