Tony, I hope you have alreadyy added this at manual -> workarounds -> Javascript

We should think about opening a show room for all these great examples!

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.

Not yet...

Done - docs.limesurvey.org/Workarounds%3A+Quest...tive_Space_Grid_ESG_

As always: thanks a million!

Hi there,

I have just tried to implement an evaluative grid following the instructions. Everything worked out fine, only now it is not possible to select a cell in the grid and have Java Script insert the X and Y fields. It is only possible to insert values into these two fields manually.

I guess it must be a mistake somewhere in the process of entering the code into the template.js file because that's where this process is coded, right?

Does anyone have an idea what the problem is and how to solve it? I'm not much of an IT savant and already totally proud to have come this far on my own

Any help is much appreciated!

Can you activate a test survey so we can see the source and any JavaScript errors?

Not sure this is what you need, but maybe have a look at this:
www.sinnovativ.de/limesurvey/index.php/s...82/newtest/Y/lang/de

It's in German, but the principle is exactly the same.

The code for the question is this:

Wie haben Sie sich heute gefühlt?
<table class="spaceGrid">
<tbody>
<tr>
<td class="yAxisLabel" rowspan="5">
Wie stark haben Sie heute NEGATIVE<br />
Gefühle<br />
erlebt?</td>
<td class="yLabel">
Sehr stark</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
</tr>
<tr>
<td class="yLabel">
Ziemlich</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
</tr>
<tr>
<td class="yLabel">
Mittelmäßig</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
</tr>
<tr>
<td class="yLabel">
Ein bisschen</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
</tr>
<tr>
<td class="yLabel">
Gar nicht</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
<td class="gridCell">
&nbsp;</td>
</tr>
<tr>
<td class="blankCell">
&nbsp;</td>
<td class="blankCell">
&nbsp;</td>
<td class="xLabel">
Gar nicht</td>
<td class="xLabel">
<span class="yLabel">Ein bisschen</span></td>
<td class="xLabel">
<span class="yLabel">Mittelmäßig</span></td>
<td class="xLabel">
<span class="yLabel">Ziemlich</span></td>
<td class="xLabel">
<span class="yLabel">Sehr stark</span></td>
</tr>
<tr>
<td class="blankCell">
&nbsp;</td>
<td class="blankCell">
&nbsp;</td>
<td class="xAxisLabel" colspan="5">
Wie stark haben Sie heute POSITIVE Gefühle erlebt?</td>
</tr>
</tbody>
</table>


Can you work with this or do you need something else? I basically just copied the code from the manual into the respective places...

You have an error in the correctPNG() function in template.js. This function is no longer required. Remove everything in template.js except the following code and retest.

Perfect, this works!!!

(The test survey doesn't anymore, but the actual one works perfectly now, which is all that counts!)