Evaluative Space Grid - once again...

More
6 years 6 months ago - 6 years 6 months ago #57886 by jesterstear
jesterstear created the topic: Evaluative Space Grid - once again...
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: 6 years 6 months ago by jesterstear.

Please Log in to join the conversation.

More
6 years 1 week ago #65480 by gribouts
gribouts replied the topic: Evaluative Space Grid - once again...
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.

Please Log in to join the conversation.

More
6 years 1 week ago - 6 years 1 week ago #65487 by holch
holch replied the topic: Evaluative Space Grid - once again...
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.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
Last Edit: 6 years 1 week ago by holch.

Please Log in to join the conversation.

More
6 years 1 week ago #65502 by tpartner
tpartner replied the topic: Evaluative Space Grid - once again...
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.

Please Log in to join the conversation.

More
6 years 1 week ago #65505 by gribouts
gribouts replied the topic: Evaluative Space Grid - once again...
gonna check it tomorrow, would be cool to find a way to make it work. Thanks for your comments guys :)

Please Log in to join the conversation.

More
6 years 1 week ago - 6 years 1 week ago #65514 by tpartner
tpartner replied the topic: Evaluative Space Grid - once again...
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.
Last Edit: 6 years 1 week ago by tpartner.

Please Log in to join the conversation.

More
6 years 1 week ago - 6 years 1 week ago #65516 by tpartner
tpartner replied the topic: Evaluative Space Grid - once again...
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.



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.
Attachments:
Last Edit: 6 years 1 week ago by tpartner.
The following user(s) said Thank You: c_schmitz, jesterstear

Please Log in to join the conversation.

More
6 years 1 week ago #65517 by gribouts
gribouts replied the topic: Evaluative Space Grid - once again...
waow ! gonna check this asap, looks absolutely amazing !
thanks a million for sharing such an idea :)

Please Log in to join the conversation.

More
6 years 1 week ago #65570 by gribouts
gribouts replied the topic: Evaluative Space Grid - once again...
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.

Please Log in to join the conversation.

More
6 years 1 week ago #65572 by gribouts
gribouts replied the topic: Evaluative Space Grid - once again...
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.

Please Log in to join the conversation.

More
5 years 10 months ago #67609 by jesterstear
jesterstear replied the topic: Evaluative Space Grid - once again...
this seems to be a nice solution!

best regards, jester.

Please Log in to join the conversation.

More
5 years 10 months ago - 5 years 10 months ago #67611 by jesterstear
jesterstear replied the topic: Evaluative Space Grid - once again...
holch, the idea behind is that you can have, for instance, both positive and negative (or ambiguous) feelings toward an object at the same time. If posivity and negativity are high it's ambiguity, if they are low it's indifference. Think about a movie like "triumph of the will" or several dramatic or non-happy endings of films. For instance, they leave you probably with a bittersweet taste, and you cannot measure this with other single item measures.
best regards, jester
Last Edit: 5 years 10 months ago by jesterstear.

Please Log in to join the conversation.

More
5 years 10 months ago - 5 years 10 months ago #67614 by Mazi
Mazi replied the topic: Evaluative Space Grid - once again...
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</a> 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:
<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.



Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"
Last Edit: 5 years 10 months ago by Mazi.

Please Log in to join the conversation.

More
5 years 10 months ago #67649 by tpartner
tpartner replied the topic: Evaluative Space Grid - once again...
Not yet...

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

Please Log in to join the conversation.

More
5 years 10 months ago #67655 by tpartner
tpartner replied the topic: Evaluative Space Grid - once again...

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

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now