Add an "NA" option to star rating question

I gave it a try with ChatGPT and the below seems to be working okay using Flat Layout with “Show value” disabled. This thread helped me a bit too. Add to the OnReady section of the star slider’s JavaScript.

It adds a checkbox to the right side of each star slider and sets the slider rating to “0” when checked. Since the “Show value” toggle is disabled and respondents can’t type in their rating, a rating of “0” should only show up if the Not Applicable was selected.

You can also approach this with display logic/carry forward so that the respondent is only shown things that are relevant.

var that = this;	

// Function to add checkboxes to elements with the same class
function addCheckboxToElements() {
  const elements = document.querySelectorAll('.ResultsInput'); // Get all elements with the class

  elements.forEach((element, i) => {
    const checkbox = document.createElement('input'); // Create a checkbox
    checkbox.type = 'checkbox';
	checkbox.class = 'notApplicable';
	checkbox.id = 'notApplicable-'+i;
    checkbox.name = 'notApplicable'+i;

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

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

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

  });
}

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

//Allow checkboxes to appear
jQuery('input:checkbox').css({
    "position": "relative",
    "opacity": "1",
    "z-index": "999",
    "height": "20px",
    "width": "20px",
});

Thank you for the additional details. I've updated the code so that it only applies to the 3rd slider and is compatible with the code that puts the stars on their own rows. It will work with Force Response because selecting the Not Applicable checkbox sets the value to "0". I've included the OnReady piece if it helps with the copy/pasting.

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

//stars on own row
jQuery("#"+this.questionId+" tr").each(function() {
var row = jQuery(this);
var th = row.before("<tr></tr>").find("th").attr("colspan","4").css("text-align","left");
row.prev("tr").append(th);
});	


//create checkbox row
jQuery("#"+this.questionId+" tr[choiceid=3]").after('<tr><td id="checkboxtd"></td></tr>');


// create checkbox
  const element = document.getElementById(this.questionId+'~3~result'); // Get element

    const checkbox = document.createElement('input'); // Create a checkbox
    checkbox.type = 'checkbox';
	checkbox.class = 'notApplicable';
	checkbox.id = 'notApplicable-3';
    checkbox.name = 'notApplicable-3';

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


// Append the checkbox and label to the element
   jQuery('#checkboxtd').attr("colspan","4").append(checkbox).append(label);


// Add event listener to each checkbox
var that = this;
    checkbox.addEventListener('change', function () {
        // Clear selected stars if checkbox is checked
        if (this.checked) {
          that.setChoiceValue(3,0); // Set the value of the slider to 0
      }
    });


//Allow checkboxes to appear
jQuery('input:checkbox').css({
    "position": "relative",
    "opacity": "1",
    "z-index": "999",
    "height": "20px",
    "width": "20px",
});


});

Hmm the choiceid not actually being 3 is what I would check next. One way to do this is to use the Builder's Support Mode by going to the Builder, then holding "Ctrl"+"Shift" and clicking "Tools", then toggling Support Mode. The numbers in red will be the choiceids. Updating the JS with wherever it says "3" with the choiceid should work. Or if you haven't collected data yet, create a new star slider question.

Or, you can use JS to save the choiceid attribute value of the 3rd star slider based on order of appearance. Updated JS below, where the 3rd star slider is in the 6th row because of the JS that puts the stars on their own row.

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

//stars on own row
jQuery("#"+this.questionId+" tr").each(function() {
var row = jQuery(this);
var th = row.before("<tr></tr>").find("th").attr("colspan","4").css("text-align","left");
row.prev("tr").append(th);
});	


const thirdRowVal = jQuery('#'+this.questionId+' tbody tr:nth-child(6)').attr('choiceid');		
console.log(thirdRowVal);

//create checkbox row
jQuery("#"+this.questionId+" tr[choiceid="+thirdRowVal+"]").after('<tr><td id="checkboxtd"></td></tr>');


//create checkbox
    const checkbox = document.createElement('input'); // Create a checkbox
    checkbox.type = 'checkbox';
	checkbox.class = 'notApplicable';
	checkbox.id = 'notApplicable-'+thirdRowVal;
    checkbox.name = 'notApplicable-'+thirdRowVal;

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


// Append the checkbox and label to the element
   jQuery('#checkboxtd').attr("colspan","4").append(checkbox).append(label);


// Add event listener to each checkbox
var that = this;
    checkbox.addEventListener('change', function () {
        // Clear selected stars if checkbox is checked
        if (this.checked) {
          that.setChoiceValue(thirdRowVal,0); // Set the value of the slider to 0
      }
    });


//Allow checkboxes to appear
jQuery('input:checkbox').css({
    "position": "relative",
    "opacity": "1",
    "z-index": "999",
    "height": "20px",
    "width": "20px",
});


});

Glad it's working! I see what you mean. While setting the value to "0" with JS retains the "0" value in Piped Text and registers as an answer for Force Response, it is blank in data downloads/reports. I think this is actually preferable for reporting and treats it like how "Not Applicable" options work for other questions when "Exclude from analysis" is toggled.

Since the whole question is Force Response and only the 3rd slider has a "Not Applicable" option, any blank value alongside any rated items can be inferred to have selected "Not Applicable". You can also capture the "0" by creating an Embedded Data field at the bottom of the Survey Flow and piping in the value of the 3rd star slider, like the below:

Hello @Tom_1842, 

How you clear the checkbox if stars is selected?

Thank you!

Hi @Tom_1842 - this solution works great thanks! Is there a way to get this to work but instead of just showing the N/A option for the third row to also show it for all the other rows (so four in total in this instance), while still maintaining the exclusivity rule that if you select N/A you cannot select a star rating for that row and vice versa? Currently If i use your code or an amended version of the code to add the N/A for each of the four star rating statements i can’t get the exclusivity part right. Thanks in advance!

@Tom_1842 Many thanks Tom! This seems to be working a treat!

@Henri from ilem hmm there are a couple implementations of the Not Applicable checkbox for Star Sliders on this thread, but they all should clear out the stars when the box is checked. Not sure what you are running into, but attached is a QSF where 3 of the implementations are working for me:

1. Star sliders on their own row and then adds a Not Applicable checkbox to each star slider that will clear out the stars when checked, and uncheck when the stars are selected. Supports any number of star sliders.
2. Star sliders on same row and then adds a Not Applicable checkbox to each star slider that will clear out the stars when checked, and uncheck when the stars are selected. Supports any number of star sliders.
3. Star sliders on their own row and then adds a Not Applicable checkbox to the 3rd star slider that will clear out the stars when checked, and uncheck when the stars are selected. Also reads "Not Applicable" for English language and "NA" for French language.