Likert Tables | XM Community
Skip to main content

I was curious if we can make a likert table with the choices being vertical on the side. If anyone has suggestions, that would be great. 

 

 

@LoriGoff Yes, this can be achieved, but you will have to change the question format to a multi-select question and add as many questions as you have options without any page breaks. Then, you will need to add the following CSS to each of the questions. The CSS will remain the same for all the questions; just change the 'QID' as per your question's ID.

 

Example of Multi-select question, please add the custom validation/force response as per your requirement.

 

--- CSS ---

Service available for clients   
<style type="text/css">#question-display-QID1{
    margin-left: -29%;
    position: absolute;
}
.mc .choice-label{
    padding: 0px !important;
}

#question-QID1{
    margin-bottom: 0px;
    border-bottom: 1px solid white;
}

#question-display-QID1{
    height: 220px;
    position: absolute;
    top: -25px;
    border-right: 1px solid white !important;
    margin-right: 5px;
    padding-top: 22px;
}

#question-display-QID1,.question-error-wrapper{
    border: 1px solid black;
}
</style>


It can by adding CSS to the Matrix question text.  The matrix question should be the only one on the page:

<style>
.Skin .Matrix table tr.ChoiceRow td { display:block;text-align:left;padding:5px 2px;border-left:1px solid #666;border-right:1px solid #666; }
.Skin .Matrix table th.c1 { border-left:1px solid #666;border-bottom:1px solid #666; }
.Skin .Matrix table tr.ChoiceRow td:last-of-type { border-bottom:1px solid #666; }
.Skin .Matrix table tr.ChoiceRow:first-of-type td:first-of-type,
.Skin .Matrix table tr.ChoiceRow:first-of-type th { border-top:1px solid #666; }
.JFEScope .Skin .desktop .mobile { display:inline!important; }
.JFEScope .Skin .desktop .mobile.dropdown-arrow { display:none!important; }
tr.Answers { display:none; }
</style>

 


Thank you. I am not figuring out how to add the CSS to the question.To clarify we should use multiple choice question and the choices we should enter the questions as choices? 


@LoriGoff,

You can use a Matrix question and the code I provided above.  Go to the question text and click on HTML view. Then paste the code provided below the existing question text.


I appreciate everyone’s help. It is not working within the question. I have tried both ways and it is not changing the format. :( 

 


Are you using simple layout? It so, that’s why it isn’t working.


It can by adding CSS to the Matrix question text.  The matrix question should be the only one on the page:

<style>
.Skin .Matrix table tr.ChoiceRow td { display:block;text-align:left;padding:5px 2px;border-left:1px solid #666;border-right:1px solid #666; }
.Skin .Matrix table th.c1 { border-left:1px solid #666;border-bottom:1px solid #666; }
.Skin .Matrix table tr.ChoiceRow td:last-of-type { border-bottom:1px solid #666; }
.Skin .Matrix table tr.ChoiceRow:first-of-type td:first-of-type,
.Skin .Matrix table tr.ChoiceRow:first-of-type th { border-top:1px solid #666; }
.JFEScope .Skin .desktop .mobile { display:inline!important; }
.JFEScope .Skin .desktop .mobile.dropdown-arrow { display:none!important; }
tr.Answers { display:none; }
</style>

 

Tested. Work like a charm @LoriGoff 

Check with your layout, don’t use simple

 


It worked. Thank you so much. I will be updating my all my surveys now. I really appreciate everyone’s help. 


Here is what it looks like in Classic layout (Flat layout looks similar):

I think @dxconnamnguyen used Modern layout, which is why there are horizontal lines between the choices.


@TomG @dxconnamnguyen Thank you both. I did use the modern layout. It looks great. I will need to learn how to do the CSS codes for future surveys. I appreciate the help from both of you. 


@TomG @dxconnamnguyen Thank you both. I did use the modern layout. It looks great. I will need to learn how to do the CSS codes for future surveys. I appreciate the help from both of you. 

I’m just testing stuff. All the work done by @TomG 


Leave a Reply