Welcome, Guest
Username: Password: Remember me

TOPIC: Evaluative Space Grid - once again...

Evaluative Space Grid - once again... 3 years 4 months ago #57886

I've already posted this a year ago, but I cannot find it anymore in this forum. There is still no solution to the following problem:

Is there any possibility to include an evaluative space grid?

The evaluative space grid (ESG) is a two-dimensional grid that
provides a single-item measure of positivity and negativity (Larsen et al, 2009)[for a picture and further instructions see p.4]

Of course, it is possible to label the x-axis and the y-axis with different label sets. For instance, valence (very bad to very good) is represented on the x-axis, whereas importance (not important at all/very unimportant to very important) is represented on the y-axis.

However, if there are 5x5 radiobuttons, you shouldn't be able to check one in each column; only 1 of 25 radiobuttons should be allowed to become checked. I guess this can be done by javascript. Does anybody know a solution?

Thanks,
Jester.
Last Edit: 3 years 4 months ago by jesterstear.
The administrator has disabled public write access.

Re: Evaluative Space Grid - once again... 2 years 10 months ago #65480

  • gribouts
  • gribouts's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 6
  • Karma: 0
heya, would be really interested in using such a measure as well. I'd say we could do the grid in flash but the problem would be to record the answer in a database imho and for this, I have no clue...

This type of thing (seawitchery.tumblr.com/post/4070384205) could be a good base for the coding as well I'd guess (eventhough I really suck in coding and thus, I may be wrong). Grib.
The administrator has disabled public write access.

Re: Evaluative Space Grid - once again... 2 years 10 months ago #65487

  • holch
  • holch's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 2549
  • Thank you received: 285
  • Karma: 102
What I find strange is the scales. Positive and negative at the same time.

Wouldn't it be weird if someone rates "extremely negative" AND "extremely positive" at the same time (upper right corner). Wouldn't that be a contraction [how I love spell checks] contradiction? (didn't have time to read the whole theory behind it.

However, for other cases I think this would be a nice thing.

It should be possible with javascript though. You could include a image and measure with javascript where the respondent clicked, pass this on into a hidden text field. I am not an expert on Javascript, but this should be possible.
Have a look at the manual! It is a really valuable source for information. Here some helpful links:
Manual (EN) | Question Types | Question Attributes | Workarounds

If you found this answer helpful and it saved you some time please consider a donation to the project to keep Limesurvey going!
Last Edit: 2 years 10 months ago by holch.
The administrator has disabled public write access.

Re: Evaluative Space Grid - once again... 2 years 10 months ago #65502

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4049
  • Thank you received: 739
  • Karma: 341
You could do it with a simple array (radios) and a little JavaScript.

See this post - www.limesurvey.org/en/forum/can-i-do-thi...forcing-a-rank#59543
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Evaluative Space Grid - once again... 2 years 10 months ago #65505

  • gribouts
  • gribouts's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 6
  • Karma: 0
gonna check it tomorrow, would be cool to find a way to make it work. Thanks for your comments guys :)
The administrator has disabled public write access.

Re: Evaluative Space Grid - once again... 2 years 10 months ago #65514

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4049
  • Thank you received: 739
  • Karma: 341
Here's a simple script to allow only one radio in an Array question to be checked. Replace "QQ" with the array question ID.
<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>
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 2 years 10 months ago by tpartner.
The administrator has disabled public write access.

Re: Evaluative Space Grid - once again... 2 years 10 months ago #65516

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4049
  • Thank you received: 739
  • Karma: 341
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,JavaScript loads the coordinates of the cell into the question inputs.

Capture3_2011-09-10.PNG


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:
<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:
.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:
$(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.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 2 years 10 months ago by tpartner.
The administrator has disabled public write access.
The following user(s) said Thank You: c_schmitz, jesterstear

Re: Evaluative Space Grid - once again... 2 years 10 months ago #65517

  • gribouts
  • gribouts's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 6
  • Karma: 0
waow ! gonna check this asap, looks absolutely amazing !
thanks a million for sharing such an idea :)
The administrator has disabled public write access.

Re: Evaluative Space Grid - once again... 2 years 10 months ago #65570

  • gribouts
  • gribouts's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 6
  • Karma: 0
hmm, does not work so far. I've tried it with two versions of LS.

1) version 1.73 : I can make the grid appear but there isn't the template.js file. Thus, the grid remains as a screenshot .. I use this version most of the time as I dont do anything technical usually with LS.

2) version 1.87RC2: The grid refuses to appear.. I dont see any mistakes in the code, though, I don't really understand what happens on this version.

After, those two tests, I wanted to knoy which version of LS you've used when you pasted your screenshot. I'm also wondering about what will be printed in the database after using such type of question. We will see the two answers in it isnt it ? One on X and the other on Y ? Thanks a million for your help, I feel like a solution is nearly found !

Regards, grib.
The administrator has disabled public write access.

Re: Evaluative Space Grid - once again... 2 years 10 months ago #65572

  • gribouts
  • gribouts's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 6
  • Karma: 0
worked perfectly with the 1.91 ! Thanks a million for your help, that's wonderful ! Wish I could understand smthg about javascript oneday...

Regards,
grib.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.161 seconds
Donation Image