I want to add custom labels to the NPS question type. I want the scale 0-6 to carry the individual labels "NO", 7-8 the labels "Maybe" and 9-10 the labels "Yes"
Solved
ADDING CUSTOM LABELS TO THE NET PROMOTER SYSTEM QUESTION TYPE
Best answer by Tom_1842
The below is working okay for me:
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var qContainer = this.getQuestionContainer();
// Hide the existing ColumnLabels row
var columnLabelsRow = qContainer.querySelector("tr .ColumnLabels");
if (columnLabelsRow) {
columnLabelsRow.parentElement.style.display = "none";
}
// Create a new row for the labels
var labelRow = document.createElement("tr");
labelRow.className = "nps-top-labels";
// Define labels
var labels = [
"No", "No", "No", "No", "No", "No", "No", "Maybe", "Maybe", "Yes", "Yes"
];
// Create and append <th> to the new row
labels.forEach(function(labelText) {
var th = document.createElement("th");
th.style.textAlign = "center";
th.style.width = "9.09%";
th.innerText = labelText;
labelRow.appendChild(th);
});
// Insert the new row before the buttons row
var table = qContainer.querySelector("table tbody");
if (table && table.children.length > 1) {
table.insertBefore(labelRow, table.children[1]);
}
});
However, it doesn't look the greatest on Mobile, and fitting 11 labels horizontally on a mobile screen might be tough. You could change the above code to only add the labels for screens above a certain width, or change the label values/font-size for screens below a certain width.
Hey
Please try the below code in your NPS question javascript.
Qualtrics.SurveyEngine.addOnReady(function() {
// Change 'Not at all likely' to 'NO' in elements with class 'ColumnLabel First'
var firstElements = document.querySelectorAll('.ColumnLabel.First');
firstElements.forEach(function(el) {
if(el.textContent.trim() === "Not at all likely") {
el.textContent = "NO";
}
});
// Change 'Neutral' to 'Maybe' in elements with class 'ColumnLabel Center'
var centerElements = document.querySelectorAll('.ColumnLabel.Center');
centerElements.forEach(function(el) {
if(el.textContent.trim() === "Neutral") {
el.textContent = "Maybe";
}
});
// Change 'Extremely Likely' to 'Yes' in elements with class 'ColumnLabel Last'
var lastElements = document.querySelectorAll('.ColumnLabel.Last');
lastElements.forEach(function(el) {
if(el.textContent.trim() === "Extremely Likely") {
el.textContent = "Yes";
}
});
});
END!
Hello
Thank you for the help. However, what I want to achieve can be seen in the image sample below. I want mine to look same way.
Please see the attached image
+28The below is working okay for me:
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var qContainer = this.getQuestionContainer();
// Hide the existing ColumnLabels row
var columnLabelsRow = qContainer.querySelector("tr .ColumnLabels");
if (columnLabelsRow) {
columnLabelsRow.parentElement.style.display = "none";
}
// Create a new row for the labels
var labelRow = document.createElement("tr");
labelRow.className = "nps-top-labels";
// Define labels
var labels = [
"No", "No", "No", "No", "No", "No", "No", "Maybe", "Maybe", "Yes", "Yes"
];
// Create and append <th> to the new row
labels.forEach(function(labelText) {
var th = document.createElement("th");
th.style.textAlign = "center";
th.style.width = "9.09%";
th.innerText = labelText;
labelRow.appendChild(th);
});
// Insert the new row before the buttons row
var table = qContainer.querySelector("table tbody");
if (table && table.children.length > 1) {
table.insertBefore(labelRow, table.children[1]);
}
});However, it doesn't look the greatest on Mobile, and fitting 11 labels horizontally on a mobile screen might be tough. You could change the above code to only add the labels for screens above a certain width, or change the label values/font-size for screens below a certain width.
Thank you so much
Thank you so much
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.