How to custom code to vary the spacing between choices? | Experience Community
Skip to main content
Solved

How to custom code to vary the spacing between choices?

  • February 6, 2020
  • 3 replies
  • 216 views
KevinD
Hi All, I am trying to create a scale question where I can vary the spacing between choices, and could use help with custom coding. In this case, I want a 7 point scale to be vertically oriented, so I am using a "Multiple Choice - Single Answer, Vertical" question format. Can you help, please? So far, I am using this bit of Custom Code, which I am applying in the "Edit Question JavaScript" function: ! Here it is in text format: Qualtrics.SurveyEngine.addOnReady(function() { jQuery(".LabelWrapper").css({"margin":"0 auto 100px auto"}) }); However, that code applies the same spacing (in this case, 100 px) between all of the choices. I want to be able to vary the spacing _between_ choices. This is approximately what I would like: Between Choices 1 and 2 - 60 px Between Choices 2 and 3 - 30 px Between Choices 3 and 4 - 10 px Between Choices 4 and 5 - 10 px Between Choices 5 and 6 - 30 px Between Choices 6 and 7 - 60 px If anyone could help with the coding, I would greatly appreciate it!

Best answer by TJUH_Kai

Try Qualtrics.SurveyEngine.addOnReady(function() { jQuery(".Selection:nth-child(1) .LabelWrapper").css({"margin":"0 auto 60px auto"}) jQuery(".Selection:nth-child(2) .LabelWrapper").css({"margin":"0 auto 30px auto"}) jQuery(".Selection:nth-child(3) .LabelWrapper").css({"margin":"0 auto 10px auto"}) jQuery(".Selection:nth-child(4) .LabelWrapper").css({"margin":"0 auto 10px auto"}) jQuery(".Selection:nth-child(5) .LabelWrapper").css({"margin":"0 auto 30px auto"}) jQuery(".Selection:nth-child(6) .LabelWrapper").css({"margin":"0 auto 60px auto"}) }); You can learn more about how CSS works here: https://www.w3schools.com/css/ and how CSS selector works here: https://www.w3schools.com/cssref/css_selectors.asp

3 replies

KevinD
  • KevinD
  • Author
  • February 10, 2020
My guess is that (".LabelWrapper") generally applies for spacing between all choices in the question. How can I specify the code further to change the spacing between each pair of choices?
T
Level 2 ●●
Forum|alt.badge.img+2
  • TJUH_Kai
  • Level 2 ●●
  • Answer
  • February 12, 2020
Try Qualtrics.SurveyEngine.addOnReady(function() { jQuery(".Selection:nth-child(1) .LabelWrapper").css({"margin":"0 auto 60px auto"}) jQuery(".Selection:nth-child(2) .LabelWrapper").css({"margin":"0 auto 30px auto"}) jQuery(".Selection:nth-child(3) .LabelWrapper").css({"margin":"0 auto 10px auto"}) jQuery(".Selection:nth-child(4) .LabelWrapper").css({"margin":"0 auto 10px auto"}) jQuery(".Selection:nth-child(5) .LabelWrapper").css({"margin":"0 auto 30px auto"}) jQuery(".Selection:nth-child(6) .LabelWrapper").css({"margin":"0 auto 60px auto"}) }); You can learn more about how CSS works here: https://www.w3schools.com/css/ and how CSS selector works here: https://www.w3schools.com/cssref/css_selectors.asp
    KevinD
    • KevinD
    • Author
    • February 12, 2020
    Yes, that worked! Thanks @TJUH_Kai! I will check out those CSS instructional links, and see if I can learn more.
    Terms & ConditionsAccessibility statement