Semantic differential question with a slider

More
7 years 2 months ago #118847 by arpsh
I suspect that the answer is currently 'no', but does anyone have a way of using a slider with a semantic differential question?

A semantic differential is where you have two items, one on either end of the scale, and you choose which of the two you prefer, and by how much. You can currently do this with checkboxes in an array, but a slider is obviously a more intuitive way that respondents could use to respond to this type of question!
The topic has been locked.
More
7 years 2 months ago #118848 by eloner
You can use semantic differential also with LimeSurvey.
Simply create a new question of type: Multiple numerical input.
Then in Advanced settings you will find a group called Slider. Here you can select Use slider layout.
In the forum you will find some good extension created by Tony Partner on this type of question.
Cheers,
ELo
The following user(s) said Thank You: arpsh
The topic has been locked.
More
7 years 2 months ago #118849 by arpsh
Thanks - I knew that you could do the sliders with the multiple numerical input, but I couldn't work out how to add labels to both ends of the scale.

I now realise that in the advanced options for this question type there is a field for a "Slider left/right text separator", which is exactly what i was looking for.

Now, if only you could replace the slider callout boxes with text rather than the underlying number!
The topic has been locked.
More
7 years 2 months ago #118850 by eloner
For this you have to use javascript.
Tony Partner wrote something about this here:
new.limesurvey.org/en/forum/design-issue...mber-of-slide-layout
cheers, Elo
The following user(s) said Thank You: arpsh
The topic has been locked.
More
7 years 2 months ago #118851 by arpsh
Thanks Elo

I've got the hiding to work already (Tony normally some sort of answer already!), but I suspect actually replacing the label text will be beyond my javascript abilities!

I think it would be a variant on the theme of Tony's solution here: but rather than necessarily just changing the style, you would also change the text - for example on a five point scale you would replace 1,2,3,4,5 values with <<,<,=,>,>>
The topic has been locked.
More
7 years 2 months ago #118853 by eloner
Hello arpsh, actually I am not a javascript expert, but I would strongly suggest you to use a slider without numbers or other characters. From a methodological point of view any character or number might influence the answer of your respondents.
The topic has been locked.
More
7 years 2 months ago #118855 by arpsh
However, you do of course need to make sure that what think the respondent is saying with a particular answer, and what you as a researcher assume they are saying, align with one another!

The problem I find with semantic differential scales is that although it seems obvious to many people what you need to do, it is surprising how many respondents actually struggle to understand the concept without help.

If we run one with tick boxes, we label them as "this side is more important", "both are equally important" etc. to really hammer home what the intention of the question is. Even then, when we do them on paper the number of people who just don't get it and do two ticks, or in a bank always veer to one side, is astounding!
The topic has been locked.
More
7 years 2 months ago - 7 years 2 months ago #118872 by tpartner
If you want to override the callout values, you can hide the original callouts and add clones of them. Then you can use the slide event to update the new clones.

Add this to the source of the question (this is for a 1-5 slider):

<script type="text/javascript" charset="utf-8">	
	$(document).ready(function() {
 
		// Identify this question
		var thisQuestion = $('#question{QID}')
 
		// Insert fake slider callouts
		$('.slider-callout', thisQuestion).hide().after('<div class="slider_callout slider-callout slider-callout-2" />');
 
		// Listener on the sliders
		$('.ui-slider', thisQuestion).on('slide', function(event, ui) {
			updateCallout($(this), ui.value);
		});
 
		// Initial states
		$('li.question-item', thisQuestion).each(function(i) {
			// Only if question has a value
			if($('input[type="text"]', this).val() != '') {
				updateCallout($('.ui-slider', this), $('.ui-slider', this).slider('option', 'value'));
			}
		});
 
		// A function to load the slider callout
		function updateCallout(thisSlider, thisValue) {
			var callOutText = '';
			switch(Number(thisValue)) {
				case 1:
					callOutText = '<<'
					break;
				case 2:
					callOutText = '<'
					break;
				case 3:
					callOutText = '='
					break;
				case 4:
					callOutText = '>'
					break;
				case 5:
					callOutText = '>>'
					break;
			}			
			$('.slider-callout-2', thisSlider).text(callOutText);
		}
	});
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 7 years 2 months ago by tpartner. Reason: Fix initial states
The following user(s) said Thank You: arpsh
The topic has been locked.
More
7 years 2 months ago #118873 by arpsh
Hi Tony

I just knew you would turn up with a Javascript fix - you're a star!! ;)
The topic has been locked.
More
7 years 2 months ago #119090 by tpartner
I think the problem is that you are forgetting the row label.

So, if your separator character is "|", you would need something like this with a row label:
Row Label|Indecisive|Decisive

Or this with no row label:
|Indecisive|Decisive

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
2 years 8 months ago #189986 by cseiger
Hi Tony

I am new to Limesurvey and never used Java but I'm optimistic to manage this slider-thing. Could you please help and tell me where exactly to enter the script above ("source of the question" - where is it?)? I'm embarrassed for such a simple question but this is the last item missing. I want to make a slider for a perceived change ranging form worse to better, preferable 1-10.

Thanks for your help, I highly appreciate it.

Regards,
Christine
The topic has been locked.
More
2 years 8 months ago #189995 by tpartner
To insert JavaScript, you need to...

1) Disable the XSS filter in Configuration --> Global settings --> Security.

2) Disable AJAX in the survey theme options.

3) Switch the question editor to "Source" mode and paste in the JavaScript after the question text.

The script above will not work in current versions, however something like this will:

<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function(){
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Define the text strings
		var tipTexts = {
			1:	'One',
			2:	'Two',
			3:	'Three',
			4:	'Four',
			5:	'Five',
			6:	'Six',
			7:	'Seven',
			8:	'Eight',
			9:	'Nine',
			10:	'Ten'
		};
 
		$('input:text', thisQuestion).on('slideEnabled',function(){ 
			var thisItem = $(this).closest('li');
 
			// Insert custom tooltip
			$('.tooltip-inner', thisItem).addClass('tooltip-inner-1 hidden');
			$('.tooltip', thisItem).append('<div class="tooltip-inner tooltip-inner-2">'+tipTexts[$(this).val()]+'</div>');
 
			// Listener on slider
			$(this).on('slide slideStop', function(event) {
				// Handle dynamic tooltip text
				$('.tooltip-inner-2', thisItem).text(tipTexts[$(this).val()]);
			});
		});
    });
</script>



Sample survey attached:

File Attachment:

File Name: limesurvey...0-17.lss
File Size:18 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The topic has been locked.
More
2 years 8 months ago #190240 by cseiger
Thank you! :-)
The topic has been locked.

Start now!

Just create your account and start using Limesurvey today.

Register now