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,
Page 1 / 1
Check below
https://www.qualtrics.com/community/discussion/comment/5686#Comment_5686
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");
}
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!
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");
}
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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.