Layout with Java script | XM Community
Skip to main content
Michael_Cooksey
Administrator
28 days ago
Solved

Layout with Java script

H
Level 2 ●●
Forum|alt.badge.img+3

How do I adjust a Multiple Choice Single Answer question with Java script to display its choices in a single horizontal row, with the last choice positioned below?

 

These are the choices:

${q://QID97/ChoiceDescription/1}
${q://QID97/ChoiceDescription/4}
${q://QID97/ChoiceDescription/5}
${q://QID97/ChoiceDescription/6}
${q://QID97/ChoiceDescription/7}
${q://QID97/ChoiceDescription/8}
${q://QID97/ChoiceDescription/9}
${q://QID97/ChoiceDescription/10}

I want to make it look like this below:

 

I would appreciate any help!

Best answer by ahmedA

Change the order of the options and make the second “N/A”.

Multiple Choice → Classic Layout → Alignment = Columns → Number of Columns = 7.

This way you’ll have choices 1,3,4,5,6,7 and 8 in row 1. And choice 2 in row 2.

Then expand the column in row 2 using this JS:

Qualtrics.SurveyEngine.addOnReady(function () {
	const quest = this;
	const qc = quest.getQuestionContainer();
	qc.querySelector("tr.alt td.LabelContainer").colSpan = 999;
});

 

View original

2 replies

A
Level 7 ●●●●●●●
Forum|alt.badge.img+22
  • ahmedA
  • Level 7 ●●●●●●●
  • 2028 replies
  • Answer
  • April 19, 2024

Change the order of the options and make the second “N/A”.

Multiple Choice → Classic Layout → Alignment = Columns → Number of Columns = 7.

This way you’ll have choices 1,3,4,5,6,7 and 8 in row 1. And choice 2 in row 2.

Then expand the column in row 2 using this JS:

Qualtrics.SurveyEngine.addOnReady(function () {
	const quest = this;
	const qc = quest.getQuestionContainer();
	qc.querySelector("tr.alt td.LabelContainer").colSpan = 999;
});

 

H
1 person likes this
  • H
    hachiware10
H
Level 2 ●●
Forum|alt.badge.img+3
  • hachiware10
  • Author
  • Level 2 ●●
  • 15 replies
  • April 22, 2024

@ahmedA Thank you so much!

Leave a Reply


Terms & Conditions