How do I add a way to separate a scale point from the rest of the scale in a horizontal MC question | Experience Community
Skip to main content
Question

How do I add a way to separate a scale point from the rest of the scale in a horizontal MC question

  • March 27, 2020
  • 4 replies
  • 213 views
F
I am currently making a questionnaire and using a format which uses horizontal multiple choice format to incorporate a 7-point likert scale. On a couple of items I have to add a "I prefer not to answer" option besides the 7-point scale. The format looks like this: ! My question is: How do I implement a feature (such as a vertical line or maybe put the option on a new row) that separates the last option in a clear way. I have been looking at these threads: https://www.qualtrics.com/community/discussion/7787 https://www.qualtrics.com/community/discussion/6000/how-to-add-a-vertical-line-before-last-column-in-a-multiple-choice-question-with-horizontal-layout But I can not seem to make it work since I am not really familiar with qualtrics or javascript. Can someone please help me and explain in layman terms what I can do. I would be very grateful for any kind of input.

    4 replies

    rondev
    Level 6 ●●●●●●
    Forum|alt.badge.img+22
    • rondev
    • Level 6 ●●●●●●
    • March 27, 2020
    Thanks to @TomG for this Paste the code present in below link on the JS of the question https://gist.github.com/marketinview/cd5d385d8803124078a0#file-qualtrics_matrixverticallinebeforelastcolumn-js
    Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • March 27, 2020
    Thanks @rondev, but I think @FlorisR is asking about a MC instead of a Matrix. @FlorisR - Using the CSS media rules from the posts you sited, are you using HTML mode to paste the `<style>` tag into your question text?
    F
    • FlorisR
    • Author
    • March 27, 2020
    Thank you for your responses! I am indeed asking about a MC instead of Matrix. I added the following code to the html view of the question text: <style> @media only screen and (min-width:481px) { td:last-of-type { border-left: 1px solid grey; } td:last-of-type label { margin-left:10px; } } </style> This caused the vertical lines to appear on the page that I wanted it to, but did not appear on the mobile version (and it weirdly shows the vertical lines on every single questions in my survey on the edit screen). I got lost with the QID part of your explanation and am not sure what to paste in the html view, in order to make it work for both versions on specific questions.
    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • March 27, 2020
    > @FlorisR said: > This caused the vertical lines to appear on the page that I wanted it to, but did not appear on the mobile version (and it weirdly shows the vertical lines on every single questions in my survey on the edit screen). I got lost with the QID part of your explanation and am not sure what to paste in the html view, in order to make it work for both versions on specific questions. > One of the posts you sited has answers to your questions - mobile and specific QID. You need a different media rule for mobile. You'll have to use the correct QID number for your question. ``` @media only screen and (min-width:481px) { #QID59 td:last-of-type { border-left: 1px solid grey; } #QID59 td:last-of-type label { margin-left:10px; } } @media only screen and (max-width:480px) { #QID59 td:last-of-type { border-top: 1px solid grey; } #QID59 td:last-of-type label { margin-top:25px; } } ```
    Terms & ConditionsAccessibility statement