Add an "NA" option to star rating question

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