Vertical lines separating each answer column for matrix table (likert) | XM Community
Skip to main content
I have a matrix table (likert) with a 5 point scale. I would like to have a vertical line between each column of answers for visual clarity. I have used JS to create a vertical line separating the last multiple choice option (to separate "Don't know" from the rest of the options) but how can I create this vertical separator line for all columns?



Thanks,
Check below



https://www.qualtrics.com/community/discussion/comment/5686#Comment_5686
That implementation works but only for the rightmost column-- I would like to have that for all columns, if possible.
@kisobe ,



The below code will work for 5 scale points



var jfe = false;

if(/^\\/jfe/.test(window.location.pathname)) jfe = true;

var q = jQuery("#"+this.questionId);



var cl = q.find('td.ColumnLabels:first');

if(cl.length > 0) cl.attr('colspan', cl.attr('colspan') - 1);



if(!jfe || (jfe && q.find('div.desktop').length > 0)) {

q.find('.c4').css("border-left", "1px solid #BBBBBB");

q.find('.c5').css("border-left", "1px solid #BBBBBB");

q.find('.c6').css("border-left", "1px solid #BBBBBB");

q.find('.c7').css("border-left", "1px solid #BBBBBB");

q.find('.c8').css("border-left", "1px solid #BBBBBB");



}
Hi RKT,



This is awesome, thank you! It worked perfectly for me.



Perhaps I should make this a separate discussion, but do you know how you could implement this for rows (horizontal line between rows) as well?



Thank you very much for the answer regardless!
Hello @kisobe ,



Paste the following code in the js(onLoad) of matrix (5-scale) question



var jfe = false;

if(/^\\/jfe/.test(window.location.pathname)) jfe = true;

var q = jQuery("#"+this.questionId);



var cl = q.find('td.ColumnLabels:first');

if(cl.length > 0) cl.attr('colspan', cl.attr('colspan') - 1);



if(!jfe || (jfe && q.find('div.desktop').length > 0)) {

q.find("table").css("border-collapse","collapse");

q.find('.c4').css("border-left", "1px solid #BBBBBB");

q.find('.c5').css("border-left", "1px solid #BBBBBB");

q.find('.c6').css("border-left", "1px solid #BBBBBB");

q.find('.c7').css("border-left", "1px solid #BBBBBB");

q.find('.c8').css("border-left", "1px solid #BBBBBB");

q.find('.ChoiceRow').css("border", "1px solid #BBBBBB");



}
Thank you both so much for the help! This is exactly what I needed.

Leave a Reply