New Survey Experience Matrix Table Change Color of a Single Column | XM Community
Skip to main content

BLUF: Code to change background color of a single column in a Matrix Table

----------

Hello Qualtrics user community,

          I’m desperate for an assist in getting some functional code that will allow changing color of a single column in a Matrix Table question.  In my particular case, it’s a 7-point Likert scale and we want to make option/column 8 (Not Applicable) a different color from the rest of the matrix, so that respondents don’t accidentally select N/A when they really Strongly Agree.  The goal is to get something that looks like this:

          This topic has been addressed multiple times over the years on the Qualtrics forums, with multiple code/solutions offered.  But unfortunately, previously accepted solutions/code from certified Qualtrics wizards like ​@TomG and others aren’t working for me.  I’ve tried every solution offered across all the discussion threads, including Javascript within the question, Custom CSS applied to the whole survey, and strategically adding !important to the code.  I even wrestled with ChatGPT to generate something that works, and also tried multiple codes offered to insert a vertical line before the last column in case there’s something prohibitive about background color.  But in all cases, still no luck.  Nothing kicks back an error (i.e., the Javascript and/or CSS terminals accept the code), but the question display does not change. 

          It’s been a few years since this topic has come up, so I wonder if there have been changes on the Qualtrics backend, if something about the New Survey Taking Experience is throwing a wrench, if something about new/modern browsers has changed and the elements of the table now use different words, or if Javascript and/or CSS languages themselves have changed rendering previously effective code ineffective.  Alas, I am no coder and have no idea.

         My colleagues and I would very gratefully welcome any ideas, suggestions, or solutions, and I suspect many others would also benefit from updated Matrix Table customization code.  Or if it’s just no longer do-able, that would be good to know too.  Either way, we appreciate the user community’s time and consideration.

Hi,

I don’t see an easy solution for your request because of the use of groups, but here’s something to work from in the new layout.

We start by removing the padding in the rows and we add it to the cells themselves to avoid uncolored padding gaps between the rows. Then we change the background color of the last cell for each row.

Note that this will look weird on mobile. Maybe you should use labels and numbered choices instead of directly using the labels as answers. You could also target and color N/A choices on mobile for consistency.

Qualtrics.SurveyEngine.addOnReady(function() {

  document.querySelectorAll('#question-' + this.questionId + ' .statement-wrapper')
    .forEach(wrapper => {
      Object.assign(wrapper.style, {
        paddingTop: '0',
        paddingBottom: '0'
      });
    });

  document.querySelectorAll('#question-' + this.questionId + ' .matrix-statement-items')
    .forEach(row => {
      const lastCell = row.querySelectorAll('.grid-cell:last-of-type')[0];
      Object.assign(lastCell.style, {
        backgroundColor: 'lightgrey',
        paddingTop: '10px',
        paddingBottom: '10px'
      });
    });
});

 

​@vgayraud  Thanks so much for your help!  Targeting cells and padding instead of whole column(s) is a brilliant approach.  Critically, the code you generously provided actually worked!  With so many failed attempts of previously successful code, I was beginning to wonder if my institution’s account just didn’t allow running JS.

This looks great, with flexibility on padding size and colors baked into the code.  I think going by cell instead of whole column actually looks better with the grouped matrix, as it maintains the separation between groups.  Re mobile, it looks the same with or without this coding, so no harm done. 

The only limitation(s) are that the column header (N/A) cell does not match the response cells, but that is a relatively trivial detail.  I can work around that by highlighting the N/A text itself to match the color of the response cells, which does transfer to mobile providing some visual separation.  The only other limitation (and I use that term lightly) is with some questions spanning 1, 2, or 3 lines, a fixed padding amount (e.g. 10px) sometimes leaves gaps between questions. But these are mostly aesthetic issues with no functional risk, the goal of visually separating the N/A option is maintained even with padding at 0px.

Thanks again!

Hi,

This should resolve your issues.

Qualtrics.SurveyEngine.addOnReady(function () {

  // Remove padding for .statement-wrapper
  document.querySelectorAll('#question-' + this.questionId + ' .statement-wrapper')
    .forEach(wrapper => {
      Object.assign(wrapper.style, {
        paddingTop: '0',
        paddingBottom: '0'
      });
    });

  // Style last item in each scale-points group
  document.querySelectorAll('#question-' + this.questionId + ' .matrix-scale-points-items')
    .forEach(scaleRow => {
      const lastScaleItem = scaleRow.querySelector('.matrix-scale-points-item:last-of-type');
      lastScaleItem.style.backgroundColor = 'lightgrey';
    });

  // Change background color of last likert-input in each foldout
  document.querySelectorAll('#question-' + this.questionId + ' .foldout-items')
    .forEach(foldout => {
      const lastLikertInput = foldout.querySelector('.likert-input:last-of-type');
      lastLikertInput.style.backgroundColor = 'lightgrey';
    });

  // Set full height and style last grid-cell in each matrix-statement row
  document.querySelectorAll('#question-' + this.questionId + ' .matrix-statement-items')
    .forEach(row => {
      row.style.height = '100%';
      const lastCell = row.querySelector('.grid-cell:last-of-type');
      Object.assign(lastCell.style, {
        backgroundColor: 'lightgrey',
        paddingTop: '10px',
        paddingBottom: '10px',
        width: '100%'
      });
    });
});

 

Brilliant!  Merci beaucoup!  This fully resolves all issues, looks great, and the header color also transfers to mobile view maintaining visual separation of the N/A option.  I hope everyone who has wrestled with this issue or will construct a survey with an N/A column sees this--you will save the world thousands of hours and much unnecessary pain.  Many thanks again for your expertise and support!

Terms & ConditionsAccessibility statement