How to custom code to vary the spacing between choices? | XM Community
Skip to main content
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!
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?
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
Yes, that worked! Thanks @TJUH_Kai! I will check out those CSS instructional links, and see if I can learn more.