Sawtooth Software: The Survey Software of Choice

Using CSS to Display Graphics and/or Text from a Single List

I have a select/radio button question where I want to display several colored boxes. On the next page I want to display the name of the chosen color, such as blue, red, or green. What is the easiest way to do this?

SSI Web 8+ has a mirror function that you may use, but if you are using an earlier version, you can accomplish this with one list and a little CSS (Cascading Style Sheets).

For each item in your predefined list, you are going to insert two pieces of information: (1) the colored box graphic, and (2) the textual name of the color. We are going to do that with the <span> tag. For example here is a list item with two spans in it. Each span has a CSS <class> assignment, either graphics or text:

<span class="graphics"><img src="/[%GraphicsPath()%]black.gif" alt="" border="0"></span>
<span class="text">black</span>

On the page that contains the question, which is named "color", we're going to drop in the following CSS script to hide the text class from appearing but allows the graphic class to display. This code can go anywhere on that question's page, such as in the question's footer section.

<style>.text {display:none;}</style>

Then, on the page that displays the label of the chosen text, we're going to drop in a line of CSS code to hide the graphic but show the text.

You chose the color <b>[% label(color) %]</b>.
<style>.graphics {display:none;}</style>

Here is a link to a sample SSI Web 7.0.30 survey which contains the above code.

Sawtooth Software

6:30 AM to 5:30 PM Mountain Time
(GMT-6; GMT-7 Autumn/Winter)
Monday through Friday

Phone: +1 801 477 4700
Fax: +1 801 434 5493

SKIM Software

9:00 AM to 5:30 PM Central European
(GMT+2; GMT+1 Autumn/Winter)
Monday through Friday

Phone: +31 10 282 3500
Fax: +31 10 282 3560

Lighthouse Studio

Lighthouse Studio is our flagship software for producing and analyzing online and offline surveys. It contains modules for general interviewing, choice-based conjoint, adaptive choice-based conjoint, adaptive choice analysis, choice-value analysis, and maxdiff exercises.

Try Lighthouse Studio

  Buy Lighthouse Studio