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.

Leave a Reply


Terms & Conditions