Vertical lines separating each answer column for matrix table (likert) | XM Community
Solved

Vertical lines separating each answer column for matrix table (likert)

  • 20 September 2018
  • 6 replies
  • 380 views
T
Badge +1
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,
icon

Best answer by Anonymous 20 September 2018, 19:32

View original

6 replies

PeeyushBansal
Rank
Userlevel 7
Badge +33
Check below

https://www.qualtrics.com/community/discussion/comment/5686#Comment_5686
Best Regards, Peeyush
T
Badge +1
That implementation works but only for the rightmost column-- I would like to have that for all columns, if possible.
RKT
Rank
Userlevel 2
Badge +1
@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");

}
T
Badge +1
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!
A
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");

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

Leave a Reply


Terms & Conditions