<script type="text/javascript" charset="utf-8">
 
  $(document).ready(function() {
 
    var qID = QQ;
 
    // Listener on radio buttons to allow only one checked
    $('#question'+qID+' .question input.radio').click(function(){
 
      $('#question'+qID+' input.radio:checked').attr('checked', false);
    });
 
    // Listener on radio cells to allow only one checked
    $('#question'+qID+' .question tbody td').click(function(){
 
      $('#question'+qID+' input.radio:checked').attr('checked', false);
      $('input.radio', this).attr('checked', true);
    });
 
  });
 
</script>

<table class="spaceGrid">
    <tr>
        <td rowspan="5" class="yAxisLabel">How NEGATIVE<br>
            do you feel about<br>
        the stimulus?</td>
        <td class="yLabel">Extremely</td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
    </tr>
    <tr>
        <td class="yLabel">Quite a bit</td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
    </tr>
    <tr>
        <td class="yLabel">Moderately</td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
    </tr>
    <tr>
        <td class="yLabel">Slightly</td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
    </tr>
    <tr>
        <td class="yLabel">Not at all</td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
        <td class="gridCell"></td>
    </tr>
    <tr>
        <td class="blankCell"></td>
        <td class="blankCell"></td>
        <td class="xLabel">Not at all</td>
        <td class="xLabel"><span class="yLabel">Slightly</span></td>
        <td class="xLabel"><span class="yLabel">Moderately</span></td>
        <td class="xLabel"><span class="yLabel">Quite a bit</span></td>
        <td class="xLabel"><span class="yLabel">Extremely</span></td>
    </tr>
    <tr>
        <td class="blankCell"></td>
        <td class="blankCell"></td>
        <td colspan="5" class="xAxisLabel">How POSITIVE do you feel about the stimulus?</td>
    </tr>
</table>

.spaceGrid {
  border: 0 none;
  border-collapse: collapse;
}
 
.spaceGrid td {
  padding: 0 3px;
  text-align: center !important;
  border: 0 none;
}
 
td.xAxisLabel {
  padding-top: 10px;
}
 
td.yAxisLabel {
  padding-right: 10px;
  width: 125px;
}
 
td.xLabel {
  height: 20px;
  font-weight: normal;
}
 
td.yLabel {
  text-align: right !important;
  font-weight: normal;
}
 
td.gridCell {
  width: 70px;
  height: 70px;
  border: 1px solid #666666;
  background-color: #FFFFFF;
  cursor: pointer;
}
 
td.checkedCell {
  background-color: #66FF00;
}

$(document).ready(function() {
 
    // Listener on the grid cells
    $('.gridCell').click(function(){
 
      // Define some vars
      var parentQ = $(this).parents('div[id^="question"]:eq(0)');
      var parentTable = $(this).parents('table.spaceGrid:eq(0)');
      var parentRow = $(this).parent();
      var numGridCell = $('.gridCell').length;
      var numCols = $('.gridCell', parentRow).length;
      var numRows = numGridCell/numCols;
 
      // Add class to checked cell
      $('.checkedCell', parentQ).removeClass('checkedCell');      
      $(this).addClass('checkedCell');
 
      // Find the cell coordinates
      var reverseRowIndex = (numRows - $('tr', parentTable).index($(parentRow)));
      var colIndex = $('.gridCell', parentRow).index($(this)) + 1;
 
      // Load coordinates into inputs
      $('input.text:eq(0)', parentQ).val(colIndex);
      $('input.text:eq(1)', parentQ).val(reverseRowIndex);
    });
 
  });