adding space between options in MC questions with Text box entry | XM Community
Solved

adding space between options in MC questions with Text box entry

  • 25 July 2023
  • 8 replies
  • 273 views
M
Rank
Userlevel 4
Badge +4

Hi All,

I’m trying to add space between my MC text box entry options and I have tried javascript, custom css and html but it does not seem to work. I increased space to “60” instead of 10 in the following code nd tried to “no wrap” otpion as well. Highlighted what I’ve been tryin to change. Does not help does someone know how to fix the code in Qualtrics? I’m not a coder. this was off some community posts. 

 

Qualtrics.SurveyEngine.addOnload(function() {
  // Adjust the following value (in pixels) to control the space between the options
  var spaceBetweenOptions = 10;

  // Create a style tag and add it to the head of the document
  var styleTag = document.createElement('style');
  styleTag.type = 'text/css';
  document.head.appendChild(styleTag);

  // Add CSS rules to the style tag to increase the spacing between the options
  var css = '';
  css += 'div[id^=QID][id$=_MC] .q-checkbox, div[id^=QID][id$=_MC] .q-radio {';
  css += '    margin-bottom: ' + spaceBetweenOptions + 'px;';
  css += '}';
  css += 'div[id^=QID][id$=_MC] .q-radio, div[id^=QID][id$=_MC] .q-checkbox {';
  css += '    display: inline-block;';
  css += '    white-space: nowrap;';
  css += '}';
  styleTag.appendChild(document.createTextNode(css));
});
 

 

icon

Best answer by rgupta15 26 July 2023, 01:05

View original
1 Attachment

8 replies

SaurabhPujare_Ugam
Rank
Userlevel 6
Badge +18

Hi @mdaruka,

As you have already tried fair bit of custom programming, my suggestion to add a simple “<br>” tags at the end of the option choice.

Basically <br> (which means break) adds a new line after your text, thus, may provide some blank spaces between answer options.

Ex. If you statement says “Brand I love”, your HTML view of the text should be  : 

Brand I love <br>

 Hopefully this works :)

Best, Saurabh
M
Rank
Userlevel 4
Badge +4

@SaurabhPujare_Ugam  this does not seem to work either.

thanks though. 

krbhavya
Rank
Userlevel 6
Badge +20

HI @mdaruka 

Try this :

Qualtrics.SurveyEngine.addOnload(function() {
  // Adjust the following value (in pixels) to control the space between the options
  var spaceBetweenOptions = 60;

  // Create a style tag and add it to the head of the document
  var styleTag = document.createElement('style');
  styleTag.type = 'text/css';
  document.head.appendChild(styleTag);

  // Add CSS rules to the style tag to increase the spacing between the options
  var css = '';
  css += 'div[id^=QID][id$=_MC] .q-checkbox, div[id^=QID][id$=_MC] .q-radio {';
  css += '    margin-right: ' + spaceBetweenOptions + 'px;'; 
  css += '    display: block;'; 
  css += '    white-space: normal;'; 
  css += '}';
  styleTag.appendChild(document.createTextNode(css));
});
 

 

 

 

 

 

Bhavya Kumar
Sachin Nandikol
Rank
Userlevel 6
Badge +21

Hi @mdaruka,

You can do this in 2 ways,

  1. Just click on the statement and go to ‘Rich content editor’. Now after the sentence click on enter and press space once. Please refer below screenshot for your reference:

 

  1. Just click on statement and enter <br/> code as shown in below screenshot:

 

Let me know if this helps.

Sachin
rgupta15
Rank
Userlevel 5
Badge +8

Just add a padding with the percentage instead of px example 10% of ul li 

example:Here 2 means the 3rd statement in the MC choices.

jQuery(‘ul li’).eq(2).css(‘padding’,’10%’)

#Use appropriate padding technique

Rahul Gupta
M
Rank
Userlevel 4
Badge +4

@krbhavya 

Thanks it seems to work, is it possible to not wrap text? make them appear in one line?

krbhavya
Rank
Userlevel 6
Badge +20

@mdaruka 

You can try change this 

 white-space: nowrap

 

Hope this will work!!

Bhavya Kumar
M
Rank
Userlevel 4
Badge +4

@krbhavya did not work.:/ 

Leave a Reply


Terms & Conditions