Can I have sliders in a Matrix question?

More
6 years 5 days ago #69475 by Ralle
Ralle created the topic: Can I have sliders in a Matrix question?
Hi there,

Can you tell me if it is possible to have a dual matrix question using sliders to input numerical values?

Thank you already!
Ralle

Please Log in to join the conversation.

More
6 years 5 days ago - 6 years 5 days ago #69480 by tpartner
tpartner replied the topic: Can I have sliders in a Matrix question?
The slider is only available "out-of-the-box" in the Multiple Numerical question type.

In an array-dual-scale-dropdown, you can use custom JavaScript to:
- hide the dropdowns
- insert a slider in each array cell
- select the hidden dropdown value based on the slider value

1) Set up your survey to use JavaScript .

2) Create your array-dual-scale-dropdown question with the numerics you require as answer options for each scale.

3) Add the following script to the source of the array. Replace "QQ" with the array question ID .
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
 
		insertSlider (QQ);
 
		function insertSlider (qID) {
 
			$('#question'+qID+' select').each(function(i, el){
 
				// Hide the dropdown
				 $(el).hide();
 
				var id = $(el).attr('id').replace(/#/g,'-');
 
				// Some dropdown values
				var currentVal = Number($('option:selected', el).val());
				var firstVal = Number($('option[value!=""]:first', el).val());
				var secondVal = Number($('option[value!=""]:first', el).next('option').val());
				var lastVal = Number($('option:last', el).val());
 
				// Insert a a container for the slider
				var container = $('<div class="customSliderWrapper"></div>').insertAfter(el);
 
				// Insert a callout
				var callout = $('<div id="callOut-'+id+'" class="customCallout"></div>').appendTo(container).text($('option:selected', el).val());
 
				// Initiate the slider
				var slider = $('<div id="slider-'+id+'" class="customSlider"></div>').appendTo(container).slider({
					min: firstVal,
					max: lastVal,
					range: 'min',
					value: currentVal,
					step: secondVal - firstVal,
					slide: function( event, ui ) {
						$('option[value="'+ui.value+'"]', el).attr('selected', 'selected');
						//$('#callOut-'+id).text($('option:selected', el).val()).css({'left': $('#slider-'+id+' .ui-slider-handle').css('left')});
 
						function updateCustomCallout() {
							$('#callOut-'+id).text($('option:selected', el).val()).css({'left': $('#slider-'+id+' .ui-slider-handle').css('left')});
						}
						// Delay updating the callout because it was picking up the last postion of the slider
						setTimeout(updateCustomCallout, 10);
					}
				});
 
				// Change the slider if the dropdown is changed
				// (not required if dropdown is hidden)
				$(el).change(function() {
					slider.slider('value', Number($('option:selected', el).val()));
					$('#callOut-'+id).text($('option:selected', el).val());
				});
 
				// Set a value as soon as the slider handle is clicked
				$('#slider-'+id+' .ui-slider-handle').mousedown(function() {
					$('option[value="'+slider.slider('value')+'"]', el).attr('selected', 'selected');
					$('#callOut-'+id).text(slider.slider('value'));
				});
			});
		}
 
	});
</script>

4) Add the following styles to template.css (these are for the default template and may need to be tweaked for others):
.customCallout {
	position: relative;
	width: 50px;
	text-align: left;
	height: 1.75em; 
	font-weight: bold;
	margin-left: -0.3em;
}
 
.customSliderWrapper {
	position: relative;
	margin: 0 10px;
}


Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 6 years 5 days ago by tpartner.
The following user(s) said Thank You: Ralle, tomscher

Please Log in to join the conversation.

More
6 years 5 days ago #69490 by Ralle
Ralle replied the topic: Can I have sliders in a Matrix question?
Wow, that's great!
Thank you very, very much for supplying copy&paste-ready code solving exactly what I was asking. Awesome job!

Please Log in to join the conversation.

More
6 years 4 days ago #69492 by Mazi
Mazi replied the topic: Can I have sliders in a Matrix question?
Really cool solution! You know where to place it :-)


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

Please Log in to join the conversation.

More
6 years 3 days ago #69581 by tpartner
tpartner replied the topic: Can I have sliders in a Matrix question?
I added this solution to the workarounds section - docs.limesurvey.org/Workarounds%3A+Quest...y-Dual-Scale-Numbers

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 - 5 years 10 months ago #72086 by yuniper
yuniper replied the topic: Can I have sliders in a Matrix question?
Hi guys,

I am completely new to Limesurvey but am very intersted in the options explained above. I have tried to replicate this and succeeded in getting 2 slide scales next to eachother but I cannot move to a specific value. Instead when I click on the scale the value 1 appears above it (see picture). I am thinking I may have done something wrong when specifying the answer options?

Also in my case I would actually like the first scale to be "regular" tick the option that is applicable style and the second scale to look like a slider scale in the range of 0-100. To be more specific, I only want the respondent to fill out the slider scale question if they answered "yes" to the first question...

Any tips are highly appreciated :)
Attachments:
Last Edit: 5 years 10 months ago by yuniper.

Please Log in to join the conversation.

More
5 years 10 months ago #72095 by tpartner
tpartner replied the topic: Can I have sliders in a Matrix question?
yuniper. can you attach a sample survey with your code in it?

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 #72115 by yuniper
yuniper replied the topic: Can I have sliders in a Matrix question?
Hi tpartner

I think I can if you give me more specific instructions ;)

Please Log in to join the conversation.

More
5 years 10 months ago #72125 by tpartner
tpartner replied the topic: Can I have sliders in a Matrix question?
Create a small sample survey with your question(s) and JavaScript code in place.

Export the survey as a LimeSurvey XML survey file (*.lss).


Then attach it here.

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

Please Log in to join the conversation.

More
5 years 10 months ago #72126 by Mazi
Mazi replied the topic: Can I have sliders in a Matrix question?

yuniper wrote: Hi tpartner

I think I can if you give me more specific instructions ;)

???


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

Please Log in to join the conversation.

More
5 years 10 months ago #72133 by yuniper
yuniper replied the topic: Can I have sliders in a Matrix question?
Thanks for the instructions, have attached it to this post :)

File Attachment:

File Name: limesurvey...1274.lss
File Size:28 KB
Attachments:

Please Log in to join the conversation.

More
5 years 10 months ago #72134 by yuniper
yuniper replied the topic: Can I have sliders in a Matrix question?
PS when I preview the survey, I do get the start screen but a blank one after that. Whereas I _can_ preview the items individually..

Please Log in to join the conversation.

More
5 years 10 months ago - 5 years 10 months ago #72182 by tpartner
tpartner replied the topic: Can I have sliders in a Matrix question?

...but I cannot move to a specific value...

You have Show "No answer" enabled which screws up the workaround. Change this line:
var lastVal = Number($('option:last', el).val());
To this:
var lastVal = Number($('option[value!=""]:last', el).val());

Also in my case I would actually like the first scale to be "regular" tick the option that is applicable style and the second scale to look like a slider scale in the range of 0-100.

I think you may be better off using two questions (a radio followed by a multi-numeric) and conditions to only display the multi-numeric if the radio is "Yes".

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 5 years 10 months ago by tpartner.

Please Log in to join the conversation.

More
2 years 3 weeks ago #127870 by RossA
RossA replied the topic: Can I have sliders in a Matrix question?
Hi there,
Also new to LimeSurvey, and in the middle of writing a survey for hospital research. I'm wondering is it is possible to do this with ONLY the second column?

[/quote]

Thanks,
Alex

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!