0 votes
in SoSci Survey (English) by s291395 (135 points)

Hi,

I'm running a vignette experiment but have some troubles with the presentation of the text. The vignette is made up of a short text and then a bullet list, like this:

Please rate how likely you would be to buy a car with the following
attributes:
- Expensive
- White
- Automatic
- Four wheel drive
- No seat warmer
- Two doors
- Little storage space
- Electric

I do this by adding a text item with placeholders like this

<div style="margin: 0 auto 0; font-size: 120%">
    Please imagine a situation where a person with the following characteristics is about to become your %domain%. There are no right or wrong answers, we are just interested in your opinions. This person:   <br>
    <ul>
        <li> %first% </li>
        <li> %second% </li>
        <li> %third% </li>
        <li> %fourth% </li>
        <li> %fifth% </li>
        <li> %sixth% </li>
        <li> %seventh% </li>
    </ul>
    
</div>

I ask respondents to rate the vignette with slider question, and a scale question with four items. The questionnaire page therefore has 1. some php code 2. the text item 3. the slider question 4. the scale question

When viewing the page, it is possible to answer the slider with the stimuli still in view, but when you scroll down to the scales the stimuli is "scrolled out" and you see the slider on top instead. As vignettes are quite cognitively demanding on respondents I would like to limit the scrolling.

I tried adding

position: sticky; top: 40px;

to the text element to keep it always visible, but now the slider "scrolls through" the text so that the slider is visible behind the vignette text.

Any ideas on how to keep the text stimuli visible when viewing the scale question?

1 Answer

0 votes
by SoSci Survey (328k points)

but now the slider "scrolls through" the text so that the slider is visible behind the vignette text.

That's easy: Give the text element a (white) background, so it's not transparent anymore.

<div style="margin: 0 auto; font-size: 120%; position: sticky; top: 40px; background-color: white;">

Eventually add some padding-bottom: 1em;, so that the background covers more space then just the text.

by s291395 (135 points)
Thanks for the quick response!

It works well for the question text (headings?), however the slider and scales with their levels are still visible.
by SoSci Survey (328k points)
Using "z-index" and "position" allows you to modify the layer.

Start with adding  "position: relative;"

If that does not work, add "z-index: 150;"
by s291395 (135 points)
Thank you that worked. My final solution with z-index was:

<div style="margin: 0 auto; font-size: 100%; position: sticky; top: 5px;
    background-color: white;z-index: 150;border: 2px solid black;
    padding: 10px 0 10px 20px; ">

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...