Display questions horizontally | XM Community

Display questions horizontally

D
Badge +1

Is there a way to display two questions (of any type) horizontally next to each other instead of one below the other?
The Qualtrics side-by-side function is limited to multiple choice and text entry.
Any help is highly appreciated!

11 replies

qualtrics_nerd
Rank
Userlevel 5
Badge +19

DHE ,
Provided there are no page breaks between these questions, you can achieve this using the two methods listed below. Here we are using a div container with id "Questions".
1) Here I've opened the HTML in rich content editor and added a style tag there to change the div's css property by the id set "Questions" to demonstrate when to display the questions side by side.
image.png2) Enter the JS box below in the question in the order you want the questions to start appearing side by side. I've added the following code there:
document.getElementById('Questions').style.display ='flex';
Again, I'm accomplishing the same task , but using JS.
image.pngBelow are the results obtained after applying the above methods. I hope this is what you wanted
to achieve
image.png

qualtrics_nerd
Rank
Userlevel 5
Badge +19

Hi DHE,
As per my understanding of your request you wish to show some question side by side and rest as usual.
This is a standalone code and no way is related to above code.
To achieve this you need to refer below screenshot:
image.pngapply this line of code on each question you want side by side.
Below is the result:
image.png
Hope this resolves your query😊!!
PS: Posting solution here for the benefit of the community

D
Badge +1

Thank you very much! The code works for general questions but is not compatible with display logic. I will wait some more to see if there are other ideas or workarounds.
https://community.qualtrics.com/XMcommunity/discussion/comment/54508#Comment_54508

ArunDubey
Rank
Userlevel 7
Badge +33

Hi DHE , I think you should try in page display logic and also apply click event on your JS code so on the selection of any option of Q1, JS to display Question side by side (code provided by qualtrics_nerd ) will run.

~ Arun Kumar Dubey
D
Badge +1

https://community.qualtrics.com/XMcommunity/discussion/comment/54519#Comment_54519Thanks, can you be more specific of how you recommend to change the code?

ArunDubey
Rank
Userlevel 7
Badge +33

I wish I could send you screenshot and working code ad well. But I have no laptop right now.
Let me just give you brief. When you write your logic on display logic pop up. You can see there is a checkbox at the bottom called in page display logic. You can click on that. Then you can try below Jquery code.

jQuery("#IDofOption").click(function(){
jQuery("this.questionId").css("display","inline-block");
});

Please replace the #IDofOption with that option ID of Q1' that option, on whose selection you want to show the next question.

~ Arun Kumar Dubey
Appzk
Rank
Userlevel 6
Badge +28

Hi All,
I have a similar requirement where I have close to 12 questions where I want to display first 3 questions in row 1 and next set of 3 questions in row 2 and next set in row 3 and last set of 3 in row 4.
Any help is appreciated here.

qualtrics_nerd
Rank
Userlevel 5
Badge +19

Hi Appzk ,
I believe we can achieve your request with below codes:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/


});


Qualtrics.SurveyEngine.addOnReady(function()
{
let ques=document.getElementById("Questions");

ques.style.cssText="display:grid;grid-template-columns:1fr 1fr 1fr;"


});


Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/


});
Screenshot of the preview:
image.pngHope it resolves your query😊!!!

Appzk
Rank
Userlevel 6
Badge +28

Hi qualtrics_nerd ,
This worked like magic!
Is it possible to create custom for each row, say for example I have 10 questions and 1st row has 3 questions display and 2nd row has to be only with 2 questions and row 3 with 5 questions.
Your help is much appreciated.

qualtrics_nerd
Rank
Userlevel 5
Badge +19

Hi Appzk ,
I think you are looking for below structure which you can achieve using only below style code:
image.png


Hope it resolves your query😊!!!

dekennedy7
Rank
Userlevel 4
Badge +10

Hi Appzk ,
I think you are looking for below structure which you can achieve using only below style code:
image.png


Hope it resolves your query😊!!!

I don’t see the code to do this?  Can you provide it again @qualtrics_nerd?  I basically need 4 rows with 1 question each row on the first 3 rows and then 4 questions on the last row.  I found a code generator online that gave me the code below, but couldn’t figure out how to get it to work.

 

.container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "row1 row1 row1 row1"
    "row2 row2 row2 row2"
    "row3 row3 row3 row3"
    "row4-1 row4-2 row4-3 row4-4";
}

.row1 { grid-area: row1; }

.row2 { grid-area: row2; }

.row3 { grid-area: row3; }

.row4-1 { grid-area: row4-1; }

.row4-2 { grid-area: row4-2; }

.row4-3 { grid-area: row4-3; }

.row4-4 { grid-area: row4-4; }
 

Leave a Reply


Terms & Conditions