customising visual layout of the survey

Question

Dear SoSci Survey support,
I'm a researcher who studies visual clutter in online environments at the University of Potsdam. So far, SoSciSurvey platform has been a great help in collecting data for our research projects.

Given that SoSci Survey is the only survey tool allowed at our university for privacy reasons, I am interested in the possibility of making changes to the visual layout of the survey. Specifically, for my experiment, I would need a really messy, colorful, full with GIFs layout/frame within which tasks / questions will appear in the middle.
A control condition (clean layout) is already there at SoSci Survey.

Could you please let me know how to implement "messy layout" on your platform.

Thank you for your time and consideration. I look forward to hearing from you soon.

Best regards

Answer 1

I am sure, you're the first one to ask or a messy layout :)

Each questionnaire page is a HTML web page. That is: You have a blank page, and then SoSci survey takes the HTML from the template, and the HTML from your questions, put the latter into the former, and sends this to the browser.

SoSci Survey grants you nearly all freedom in what you put into your layout. Please read this manual how to change the HTML code of the layout: Questionnaire Layout

The default layout has a box on the middle, limiting the questionnaire's width:

<div class="questionary" style="position: relative">

The width limitation is defined in the CSS above:

div.questionary { min-width: 300px; max-width: %width%; margin: 14px auto 0px auto; padding: 0 10px }

So, first things to think about: What do you want to be displayed above the contents? Put it above the "questionary" <div>. If you want to place anything left and right of the content, take a look at CSS flexbox, and create a flexbox (another <div>) that contant the contents left, the <div class="questionary> and the contents to the right.

And don't worry: If your HTML is not perfect, it will look even more messy ;)