New Survey Experience Matrix Table Change Color of a Single Column

Question

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.

vgayraud · Accepted Answer

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%'      });    });});

PGR · Answer

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!

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded