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> </th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th> </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> </th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th> </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.
