Likert Matrix - Statements on the Right | XM Community
Skip to main content
Solved

Likert Matrix - Statements on the Right

  • July 27, 2020
  • 2 replies
  • 88 views
D
Forum|alt.badge.img

Hello,
I am wondering if there is a way of reconfiguring the Likert Matrix question, such that each row statement appears on the right side of the page rather than the left.
To give some more specifics: currently I have a question that looks something like this:
image.pngFor reasons I won't go into here, ideally I would like the positions of "Option 1" and "Option 2" flipped, such that the left option reads "Charity keeps $5" and the right option reads "You receive the money on the right, charity loses $5 with 1/3 chance." However, I do not know how to make the values of money ($0, $0.10, $0.20, etc.) appear on the right, rather than the left.
I tried using a Bipolar Matrix, but Qualtrics squeezed the headings into a very narrow space, such that it made the headings very difficult to read:
image.pngIf anyone has any tips, I'd be very grateful. This isn't something that is absolutely essential, but would improve the survey experience for the respondent.
Thanks,
David

Best answer by moowil

I don't think there's a "real" way to do this (via the admin UI) but this CSS might work for you. I haven't tested it in the real world so grain of salt, etc. Would almost certainly need media queries involved so that the mobile views aren't broken.
Still, hopefully it'll get you started. You can see it in action here: https://codepen.io/willthemoor/full/JjGQjXE
table.ChoiceStructure {
  max-width: 95%;
}
table.ChoiceStructure,
table.ChoiceStructure thead,
table.ChoiceStructure tbody {
  display: block;
  width: 500px;
  overflow: hidden;
}
table.ChoiceStructure tr {
  display: block;
  float: right;
  width: 100%;
}
table.ChoiceStructure th, table.ChoiceStructure td {
  display: block;
  float: right;
  width: 25%;
}
table.ChoiceStructure tbody th {
  text-align: left;
  font-weight: 300;
}

2 replies

M
  • moowil
  • Answer
  • July 29, 2020

I don't think there's a "real" way to do this (via the admin UI) but this CSS might work for you. I haven't tested it in the real world so grain of salt, etc. Would almost certainly need media queries involved so that the mobile views aren't broken.
Still, hopefully it'll get you started. You can see it in action here: https://codepen.io/willthemoor/full/JjGQjXE
table.ChoiceStructure {
  max-width: 95%;
}
table.ChoiceStructure,
table.ChoiceStructure thead,
table.ChoiceStructure tbody {
  display: block;
  width: 500px;
  overflow: hidden;
}
table.ChoiceStructure tr {
  display: block;
  float: right;
  width: 100%;
}
table.ChoiceStructure th, table.ChoiceStructure td {
  display: block;
  float: right;
  width: 25%;
}
table.ChoiceStructure tbody th {
  text-align: left;
  font-weight: 300;
}

    D
    Forum|alt.badge.img
    • dz123
    • Author
    • August 3, 2020

    Thank you, this was a great starting point and proved quite helpful!

    Terms & ConditionsAccessibility statement