Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Likert scale with picture on the right side of the scale

Hi,

I want to include a select question (likert scale from 1 to 10) and on the right side of the scale I want to include a picture (same size like the scale). Do you know if that is possible and how can I implement it?  I will appreciate any help.
asked Nov 18 by Yordanka (200 points)
So the response options still appear in a vertical line but an image appears on the right of them?  Should that same behavior apply on mobile where the screen is more narrow?
yes, exactly. Regarding the mobile version we are still not sure how it would be better. Maybe to show the picture above the scale. Is there any script we can use for this?

1 Answer

0 votes
Please try adding this to your select question:

<div id="likertImage">
    <img src="[%GraphicsPath()%]example.png" alt="" border="0"/>
</div>

<style>
#[% QuestionName() %]_div {
    visibility: hidden;
}

#[% QuestionName() %]_div .question_body {
    display: flex;
}

@media only screen and (min-width: 801px) {
    #[% QuestionName() %]_div .question_body {
        flex-direction: row-reverse;
    }
    
    #[% QuestionName() %]_div .response_body, #likertImage {
        width: 50%;
    }
}

@media only screen and (max-width: 800px) {
    #[% QuestionName() %]_div .question_body {
        flex-direction: column;
    }
}
</style>

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div .question_body').prepend($('#likertImage'));
    $('#[% QuestionName() %]_div').css('visibility', 'visible');
})
</script>


"example.png" can be replaced with whatever image you want shown.  I used 800px / 801px as the boundary for mobile behavior, but you could change that to your liking in the CSS.
answered Nov 23 by Zachary Platinum Sawtooth Software, Inc. (188,925 points)
...