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.
