Have an idea?

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

Replace button with image

Hello,

I have questions below and need some guidelines from you all.

1. May I know how to replace the button with image for the Grid question? I'm not referring to one graphic for the whole study, I want to replace the image for each button. For examples, Strongly satisfied (5) change to Happy image, Strongly dissatisfied (1) change to Unhappy image for each line.

2. How to add borders for the Grid box/table?

Thanks.
asked Mar 19 by kbng (120 points)

1 Answer

+2 votes
Assuming you are already using graphical radio buttons and this is a row-oriented grid, try adding this to your grid question:

$(document).ready(function(){
    $('#[% QuestionName() %]_r1_1_graphical').css('background', 'url(http://example.com/myimg1.jpg) no-repeat center center');
})


This should update the first radio button.  You'll need to replace the example URL with your image.

Here's a simple bit of CSS to add borders:

<style>
#[% QuestionName() %]_div .inner_table > tbody > tr > td {
    border: 1px solid black;
}
</style>
answered Mar 19 by Zachary Platinum Sawtooth Software, Inc. (110,850 points)
...