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

kisobekisobe Boston, MACommunity Member Qubie ✭

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

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,

Tagged:

Best Answers

  • RKTRKT Guru ✭✭
    edited September 2018 Accepted Answer

    @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");
    
            }
    
  • [Deleted User][Deleted User] Qubie ✭
    Accepted Answer

    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");
    
            }
    

Answers

Sign In to Comment