Add an "NA" option to star rating question | XM Community
Skip to main content

Hello everyone, 

I hope you are doing good :)

Does anyone know how can I add a “N/A” option to a 5 star rating question : 

 

 

Thanks in advance for your help !

@andrecarma10 It will work without showing any values if you turn off "Show value" in the Builder and then change

const elements = document.querySelectorAll('.slider-value');

to

const elements = document.querySelectorAll('.slider-control');

If you want to have “Show value” enabled but not display the “0” when the checkbox is checked, try the below. Since the element in the function is the ‘slider-value’, I just added a visibility property to it in the event listeners:

var that = this;

function addCheckboxToElements() {
const elements = document.querySelectorAll('.slider-value'); // Get all elements with the class

elements.forEach((element, i) => {

const checkbox = document.createElement('input'); // Create a checkbox
checkbox.type = 'checkbox';
checkbox.className = 'notApplicable'; // Use className instead of class
checkbox.id = 'notApplicable-'+i;
checkbox.name = 'notApplicable'+i;
checkbox.style.height='20px';
checkbox.style.width='20px';

const label = document.createElement('label'); // Create a label for the checkbox
label.textContent = 'Not Applicable';
label.style.paddingLeft='3px';

// Append the checkbox and label to the element
element.after(label);
element.after(checkbox);

checkbox.addEventListener('click', function () {
checkbox.checked = true;
});

// Add event listener to each checkbox
checkbox.addEventListener('change', function () {
// Clear selected stars if checkbox is checked
if (this.checked) {
that.setChoiceValue(i+1,0); // Set the value of the slider to 0
element.style.visibility="hidden";
}
});

//Uncheck the box when slider is interacted
var sliderContainer = document.querySelector("#slider-statement-" + that.questionId + "-" + (i+1) + " > div.slider-control-container > div > div.slider-container");
// Define the event handler
var eventHandler = function(e) {
checkbox.checked = false;
element.style.visibility="visible";
};
// Add the event listeners
sliderContainer.addEventListener("click", eventHandler);
sliderContainer.addEventListener("touchstart", eventHandler);

});
};

// Call the function when the page loads or when necessary
addCheckboxToElements();


 


@Tom_1842 thank you so much! Now is working great!


@Tom_1842  How would I change the code to show NA on the second row not the 3rd? And also, How would I change the code to have it on the second and the third row? I’ve tried playing with your code but I couldn’t figure it out.

Cheers!


Leave a Reply