Have an idea?

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

How do I create a semantic differential table in a free format question?

While I like the new semantic differential question type in SSI Web version 8, my client would like to shake up the style and substance a bit. Can you give me an example of some code which can be placed in a Free Format question that would display a table which simulates a radio-button semantic differential scale with anchor text, a header, and a footer. And, if I ask nicely, as in pretty please with cheese on top, could you alternate the color on different rows, and do it so I don't have to hard code in the colors if I change the number of rows? If it helps, I promise to study the code so I can become self-sufficient as soon as possible.
asked Jun 6, 2012 by JKincaid Bronze (805 points)

1 Answer

+1 vote
 
Best answer
Let's create a new Free Format Question. In the example below, the name of the question is ff2.

On the Question Text tab, you'll place the question in the Header 1 field (or anywhere else you want to stick it). Let's assume the question is: "How would you describe yourself? Choose an answer between the two extremes."

On the Variables/Question HTML tab, we'll need to define some variables and put in the actual HTML and CSS code.

Suppose there are five pairs of words that we want to display: Tightwad vs Big Spender, Rich vs Poor, Happy vs Sad, Introverted vs Extroverted, and Friendly vs Mean. And let us say we want each pair of words to appear on a row, separated by seven radio buttons. How is this done?

First, you'll add five variable names that contain a radio variable type. Since my question name is ff2, the variable names will be ff2_r1rad1, ff2_r1rad2, ff2_r1rad3, ff2_r1rad4, and ff2_r1rad5.

Next, we'll put some code in the HTML section to stylize and display the variables as desired. Below is the HTML5 and CSS code to do that. First we'll define the CSS styles (the code with the <style> tags, and then the div content that contains everything else.
<style>

 #table1 {
  width:100%;
 }

 #table1 p {
  padding:0;
  margin:0;
  text-align:center;
 } 

 #table1 tbody tr:nth-child(even) {
  background-color:#E0ECF8;
  border:1px solid #000000;
 }

 #table1 tbody tr:nth-child(odd) {
  background-color:#F0F0F0;
  border:1px solid #000000;
 }
 
 #table1 td {
  padding: 10px 5px;
 }
 
 #table1 thead {
  background-color:#6699FF;
  border:1px solid #000000;
  color:#FFF;
  text-align:center;
 }

 #table1 tfoot {
  background-color:#6699FF;
  border:1px solid #000000;
  color:#FFF;
  text-align:center;
 }

</style>

<div>
  <table id="table1">
    <col width="25%" />
    <col width="5%" />
    <col width="5%" />
    <col width="5%" />
    <col width="5%" />
    <col width="5%" />
    <col width="5%" />
    <col width="5%" />
    <col width="25%" /> 

    <thead>
     <tr>
      <th>&nbsp;</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>&nbsp;</th>
     </tr>
    </thead>
    
    <tbody>
     <tr>
      <td>
        <p style="color:black;text-align:right;font-weight:bold;">Tightwad</p>
      </td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad1, 1)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad1, 2)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad1, 3)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad1, 4)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad1, 5)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad1, 6)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad1, 7)%]</td>
      <td>
        <p style="color:black;text-align:left;font-weight:bold;">Big Spender</p>
      </td>
     </tr>

     <tr>
      <td>
        <p style="color:black;text-align:right;font-weight:bold;">Rich</p>
      </td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad2, 7)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad2, 6)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad2, 5)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad2, 4)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad2, 3)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad2, 2)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad2, 1)%]</td>
      <td>
        <p style="color:black;text-align:left;font-weight:bold;">Poor</p>
      </td>
     </tr>

     <tr>
      <td>
        <p style="color:black;text-align:right;font-weight:bold;">Happy</p>
      </td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad3, 1)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad3, 2)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad3, 3)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad3, 4)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad3, 5)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad3, 6)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad3, 7)%]</td>
      <td>
        <p style="color:black;text-align:left;font-weight:bold;">Sad</p>
      </td>
     </tr>

     <tr>
      <td>
        <p style="color:black;text-align:right;font-weight:bold;">Introverted</p>
      </td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad4, 1)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad4, 2)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad4, 3)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad4, 4)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad4, 5)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad4, 6)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad4, 7)%]</td>
      <td>
        <p style="color:black;text-align:left;font-weight:bold;">Extroverted</p>
      </td>
     </tr>

     <tr>
      <td>
        <p style="color:black;text-align:right;font-weight:bold;">Friendly</p>
      </td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad5, 1)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad5, 2)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad5, 3)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad5, 4)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad5, 5)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad5, 6)%]</td>
      <td class="input_cell clickable">[%RadioSelect(ff2_r1rad5, 7)%]</td>
      <td>
        <p style="color:black;text-align:left;font-weight:bold;">Mean</p>
      </td>
     </tr>
     
    </tbody>
    
    <tfoot>
     <tr>
      <th>&nbsp;</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>&nbsp;</th>
     </tr>
    </tfoot>

  </table>
</div>


Of course the beauty of a Free Format question is that you may code questions just about any way you know how. Because I'm familiar with HTML5 and CSS3, my script utilizes this syntax.

In Firefox, Opera, Chrome, and Safari, you should see different background colors in the alternating rows. In Microsoft's Internet Explorer, you will not see anything special. Here is a photo of the final output as rendered in FireFox: http://is.gd/T5MRJI

I hope that helps. Learning HTML and CSS can be as simple or as complex as you need it to be. Fortunately there are thousands of books, online videos, and other educational resources that will help you learn what you need to know if you regularly need to customize the look and feel of webpages such as those created by SSI Web.

Of course, if this is something you'll be doing a lot of, and you can't afford the time to learn what you need to know, or you can't find anyone within your organization to help you, keep in mind that Sawtooth Software has an custom consulting division known as Sawtooth Analytics. For a reasonable consulting fee, we'll be happy to code up your surveys for you with as many bells and whistles as you need. For a quote, please contact Aaron Hill, the manager of the Sawtooth Analytics team.
answered Jun 6, 2012 by Nathan Bryce Silver Sawtooth Software, Inc. (7,450 points)
edited Jun 7, 2012 by Nathan Bryce
Wow, thanks for sharing that chunk of code. While I kind-of see what you're doing, I also see that I still have lots to learn. The problem is "the spirit is willing but the flesh is weak." There are only so many hours in a day. So I may be contacting Sawtooth Analytics sooner than later.
...