Need javascript code for highlighting unanswered row of matrix question

lpcollectiveacumen
Not sure if you are using a side-by-side or a matrix question that you are using hence including both; Include the below in JS of the question.
Side-by-side:
Qualtrics.SurveyEngine.addOnReady(function()
  
{
/*Place your JavaScript here to run when the page is fully displayed*/
var n=jQuery("#"+this.questionId+" .Choice").length;
  if(jQuery("#"+this.questionId+" .ValidationError").text()!=""){
      for(var i=0;i          if(jQuery("#"+this.questionId+" .Choice:eq("+i+") td input[type='radio']:checked").length==0){
                jQuery("#"+this.questionId+" .Choice:eq("+i+")").css("background","lightpink");
    jQuery("#"+this.questionId+" .Choice:eq("+i+")").css("border","solid");
          }
      } 
  }

});
Matrix : the solid border is an issue here hence included a background color
Qualtrics.SurveyEngine.addOnReady(function()
  
{
/*Place your JavaScript here to run when the page is fully displayed*/
var n=jQuery("#"+this.questionId+" .ChoiceRow").length;
  if(jQuery("#"+this.questionId+" .ValidationError").text()!=""){
      for(var i=0;i          if(jQuery("#"+this.questionId+" .ChoiceRow:eq("+i+") td input[type='radio']:checked").length==0){
              jQuery("#"+this.questionId+" .ChoiceRow:eq("+i+")").css("background","lightpink");
    jQuery("#"+this.questionId+" .ChoiceRow:eq("+i+")").css("border","solid");
          }
      } 
  }

});
Hope it helps!

Hi there, for the side by side code, it is highlighting the entire row if there is no "checked" radio buttons in it (equal to 0). For a side by side, this might make it so that if only 1 of the 2 columns is answered for any row, that row will not be highlighted, like in the below:

You could get around this by updating the code to highlight any rows where the number of checked radio buttons is not equal to the number of columns. So if there are 2 side by side columns, the below code will highlight any rows that do not contain 2 checked radio buttons.
var n=jQuery("#"+this.questionId+" .Choice").length;
  if(jQuery("#"+this.questionId+" .ValidationError").text()!=""){
      for(var i=0;i          if(jQuery("#"+this.questionId+" .Choice:eq("+i+") td input[type='radio']:checked").length!=2){
                jQuery("#"+this.questionId+" .Choice:eq("+i+")").css("background","lightpink");
    jQuery("#"+this.questionId+" .Choice:eq("+i+")").css("border","solid");
          }
      } 
  }

https://community.qualtrics.com/XMcommunity/discussion/comment/51358#Comment_51358Yes, Tom_1842 good catch!
Thank you for the updated code, I forgot to take two matrix columns into consideration.

https://community.qualtrics.com/XMcommunity/discussion/comment/51358#Comment_51358Actually, you should only highlight the sub-question that isn't answered.

TomG I agree, but admittedly I am not sure how to tackle highlighting just the intersection of the Choice row and SBS column.

https://community.qualtrics.com/XMcommunity/discussion/comment/51358#Comment_51358Tom_1842 Thank you so much for this. It worked perfectly. There are an additional three questions with three columns in stead of two. I tried to suss out how to edit the code to account for three columns, but I failed miserably. I tried adding a "+" where the code says ".Choice:eq("+i+")... and then a "3" after "length!=2, but that did not work. Can you tell me how to update the code to account for 3 columns?

https://community.qualtrics.com/XMcommunity/discussion/comment/51355#Comment_51355Thank you Deepak!

lpcollectiveacumen glad to hear! Hmm, updating the length!=2 to length!=3 is working on my end for 3 columns. Just in case, here it is updated:
var n=jQuery("#"+this.questionId+" .Choice").length;
  if(jQuery("#"+this.questionId+" .ValidationError").text()!=""){
      for(var i=0;i          if(jQuery("#"+this.questionId+" .Choice:eq("+i+") td input[type='radio']:checked").length!=3){
                jQuery("#"+this.questionId+" .Choice:eq("+i+")").css("background","lightpink");
    jQuery("#"+this.questionId+" .Choice:eq("+i+")").css("border","solid");
          }
      } 
  }

@Deepak Thanks for sharing this code! I’m trying to use the code for a Matrix question, but when I save it in the question JavaScript editor, it’s giving me an “Unexpected token if” error message. I’m not very well versed in JavaScript so I haven’t been able to debug it. Can anyone tell what I’m missing?

@MatthewM I think some of the code is not displaying right due to the platform migration. Try using the below for a Matrix question:

var n=jQuery("#"+this.questionId+" .ChoiceRow").length;
if(jQuery("#"+this.questionId+" .ValidationError").text()!=""){
for(var i=0;i<n;i++){
if(jQuery("#"+this.questionId+" .ChoiceRow:eq("+i+") td input[type='radio']:checked").length==0){
jQuery("#"+this.questionId+" .ChoiceRow:eq("+i+")").css("background","lightpink");
jQuery("#"+this.questionId+" .ChoiceRow:eq("+i+")").css("border","solid");
}
}
}

var n=jQuery("#"+this.questionId+" .ChoiceRow").length;
if(jQuery("#"+this.questionId+" .ValidationError").text()!=""){
for(var i=0;i<n;i++){
if(jQuery("#"+this.questionId+" .ChoiceRow:eq("+i+") td input[type='radio']:checked").length==0){
jQuery("#"+this.questionId+" .ChoiceRow:eq("+i+")").css("background","lightpink");
jQuery("#"+this.questionId+" .ChoiceRow:eq("+i+")").css("border","solid");
}
}
}

Good to be aware of that, and nice to hear from you, Tom! Thanks for fixing the code. It worked!

var n=jQuery("#"+this.questionId+" .ChoiceRow").length;
if(jQuery("#"+this.questionId+" .ValidationError").text()!=""){
for(var i=0;i<n;i++){
if(jQuery("#"+this.questionId+" .ChoiceRow:eq("+i+") td input[type='radio']:checked").length==0){
jQuery("#"+this.questionId+" .ChoiceRow:eq("+i+")").css("background","lightpink");
jQuery("#"+this.questionId+" .ChoiceRow:eq("+i+")").css("border","solid");
}
}
}

@Tom_1842 Thank you for this!

Any ideas maybe on how to make it work for “Request response” option rather than “force response”?

@rassy Try adding the below to the OnReady section of the Matrix question’s JavaScript to highlight unanswered rows for Request Response. It applies the code in this thread when the NextButton is clicked and doesn't check for a ValidationError:

var qid = this.questionId;

jQuery("#NextButton").click(function() {

var n=jQuery("#"+qid+" .ChoiceRow").length;
for(var i=0;i<n;i++){
if(jQuery("#"+qid+" .ChoiceRow:eq("+i+") td input[type='radio']:checked").length==0){
jQuery("#"+qid+" .ChoiceRow:eq("+i+")").css("background","lightpink");
jQuery("#"+qid+" .ChoiceRow:eq("+i+")").css("border","solid");
}
}

});

I you’re interested I have a function, matrixHighlightUnanswered, that automatically works with both force response and request response and all of the following:

• Matrix types: Likert, Bipolar, Maxdiff
• Likert Answer types: Allow one answer, Allow multiple answers
• Likert Formats: Standard Likert, Profile
• All Likert, Bipolar and Maxdiff options including Mobile friendly, Transpose table, and Position text above
• Statement groups

@Tom_1842 , Excellent.

due to platform migration, I needed to make a change for the code to work, follow for those who need it in the matrix side by side questions,

Qualtrics.SurveyEngine.addOnload(function()
{

var n=jQuery("#"+this.questionId+" .Choice").length;
  if(jQuery("#"+this.questionId+" .ValidationError").text()!=""){
      for(var i=0;i<n;i++){
          if(jQuery("#"+this.questionId+" .Choice:eq("+i+") td input[type='radio']:checked").length!=2){
                jQuery("#"+this.questionId+" .Choice:eq("+i+")").css("background","lightpink");
    jQuery("#"+this.questionId+" .Choice:eq("+i+")").css("border","solid");
          }
      } 
  }

});
 

@Tom_1842  coming in a year after the thread. This code was super helpful. Any chance you know to modify it so that it highlights columns that are unanswered instead of rows?

@newguyontheblock Try this code to highlight individual columns.

Qualtrics.SurveyEngine.addOnload(function () {
    let questionId = this.questionId;
    if (jQuery("#" + questionId + " .ValidationError").text() != "") {
        jQuery("#" + questionId + " .Choice").each(function () {
            jQuery(".AnswerCell", jQuery(this)).each(function () {
                if (jQuery("#" + questionId + " input[type='radio'][name='" + jQuery(this).find('input[name]').attr('name') + "']:checked").length == 0) {
                    jQuery(this).css("background", "lightpink");
                } else {
                    jQuery(this).css("background", "");
                }
            });
        });
    }
});

@ChiragK thank you for sharing! Unfortunately, the code did not work seem to work. Just to make sure I am doing this correctly, I scrolled down to the bottom of the “Edit Question” section, clicked on “</> Javascript” and copied the code you posted directly into the window, below the pre-populated sections.

@newguyontheblock I think you will have to replace code under </> Javascript window with the new code. Can you send screenshot of where you pasted the new code?

@ChiragK the code you posted has an issue that I can’t seem to solve. All rows are highlighted, even answered rows. And when I answer those rows and provide an answer the rows are not updated and are still highlighted.

All rows highlighted and rows so not get updated once I answer and try to submit