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

Last Updated: 28 May 2015Hits: 3990
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. CSSColorsAndNames.zip