tpartner wrote: After a little thought, I think the Evaluative Space Grid can be better accomplished by using a multiple-numeric question. A table can be shown in the question. When a respondent clicks a grid cell in the table,<a href=' docs.limesurvey.org/tiki-index.php?page=...eg._JavaScript_etc._ '>JavaScript loads the coordinates of the cell into the question inputs.

1) Create a Multiple Numeric question with two sub-questions labelled "X" and "Y".

2) Add the following HTML to the source of the question to create the table:

Code:

<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>

3) Add the following styles to the end of your template.css file:

Code:

.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;
}

4) Add the following to the end of your template.js file:

Code:

$(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);
    });
 
  });

The script should automatically handle different grid sizes.