MaxDiff Type Question

Question

Hello there! I'm trying to create a MaxDiff type question in my survey using Free Format but I'm running into issues.

When I paste the code from the help documentation and then modify it, it doesn't work. Here's the code:

<table>
 <tr class="clickable">
         <td class="input_cell">
                 [%RadioSelect(Q34_b, 1)%]
         </td>
         <td class="option_cell">
                 <div class="options">
                         <label for="Q34_b_1">All</label>
                 </div>
         </td>
         <td class="input_cell">
                 [%RadioSelect(Q34_w, 1)%]
         </td>
 </tr>
 
 <tr class="clickable">
         <td class="input_cell">
                 [%RadioSelect(Q34_b, 2)%]
         </td>
         <td class="option_cell">
                 <div class="options">
                         <label for="Q34_b_2">Some</label>
                 </div>
         </td>
         <td class="input_cell">
                 [%RadioSelect(Q34_w, 2)%]
         </td>
 </tr>

 <tr class="clickable">
         <td class="input_cell">
                 [%RadioSelect(Q34_b, 3)%]
         </td>
         <td class="option_cell">
                 <div class="options">
                         <label for="Q34_b_3">None</label>
                 </div>
         </td>
         <td class="input_cell">
                 [%RadioSelect(Q34_w, 3)%]
         </td>
 </tr>
</table>

What's happening is the best column (first one) can be selected, but the worst column (third one) won't select as if the entire row is one radio button.

Any help?

Answer 1

The "clickable" class is what causes the behavior where clicking on an element or a child element results in a radio button or checkbox getting clicked.  To get this behavior to apply to individual table cells rather than full rows, you just need to move this class to the "td" elements instead.

<tr>
    <td class="input_cell clickable">
        ...
    </td>
</tr>