Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Problems with sliders within dual array

user45497_d
Topic Author
Offline
Banned

More

11 years 3 months ago - 11 years 3 months ago #121826 by user45497_d

Problems with sliders within dual array was created by user45497_d

Dear Forum,

this great workaround helped me to create a dual array containing sliders:
www.limesurvey.org/manual/Workarounds:_Q...20in%20Array-Numbers

I love this function, but still have two problems:
1. When the handle of one slider is moved more than once, sometimes the shown number doesn't change anymore. So, if you move the handle from the 2-position to 3, 4, or anywhere else, it still shows 2. Also, the wrong number is taken as value. Is there any possibility to fix this?
2. Is it possible to label the sliders separately for each column? I'd like to label the first column-sliders with something like rarely|often and the second column-sliders with something like weak|strong.

Thanks!

--
Version 2.05+ Build 150520

...stion_2496.lsq

Last edit: 11 years 3 months ago by user45497_d.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

11 years 3 months ago - 11 years 3 months ago #121831 by tpartner

Replied by tpartner on topic Problems with sliders within dual array

That workaround was for an old version of jQuery - I have updated it for 2.05.

Here is the new JavaScript:

Code:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {

		insertSlider ({QID});

		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[value!=""]:last', el).val());

				// Insert a container for the slider
				var container = $('<div class="customSliderWrapper"></div>').insertAfter(el);

				// 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 ) {
						$(el).val(ui.value);
						$('#callOut-'+id).text($(el).val());
					}
				});

				// Insert a callout
				var callout = $('<div id="callOut-'+id+'" class="slider_callout slider-callout"></div>').appendTo($('#slider-'+id+' .ui-slider-handle')).text($('option:selected', el).val());

				// Set a value as soon as the slider handle is clicked
				$('#slider-'+id+' .ui-slider-handle').mousedown(function() {
					$(el).val(slider.slider('value'));
					$('#callOut-'+id).text($(el).val());
				});
			});
		}
	});
</script>

And the new CSS:

Code:

.customSliderWrapper {
	position: relative;
	margin: 0 10px;
	padding-top: 1.75em;
}

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

Last edit: 11 years 3 months ago by tpartner.

The following user(s) said Thank You: user45497_d

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

11 years 3 months ago #121832 by tpartner

Replied by tpartner on topic Problems with sliders within dual array

Regarding question 2, there isn't a lot of room in the array cells for left and right labels. Can you provide a mockup of what you want?

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

The topic has been locked.

user45497_d
Topic Author
Offline
Banned

More

11 years 3 months ago #121841 by user45497_d

Replied by user45497_d on topic Problems with sliders within dual array

Thanks so much! The script works fine.
You are right, there's not a lot of room for labels except maybe below the slider? I thought of something like this:

Slider.png

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

11 years 3 months ago #121844 by tpartner

Replied by tpartner on topic Problems with sliders within dual array

Okay, to insert slider left/right text, you would need to use JavaScript like this (modify the "column1LeftText, column1RightText , column2LeftText , column2RightText" variables as necessary):

Code:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {

		insertSlider ({QID});

		function insertSlider (qID) {

			// Define slider left and right texts
			var column1LeftText = 'selten';
			var column1RightText = 'häufig';
			var column2LeftText = 'schwach';
			var column2RightText = 'stark';
			
			$('#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[value!=""]:last', el).val());

				// Insert a container for the slider
				var container = $('<div class="customSliderWrapper"></div>').insertAfter(el);

				// 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 ) {
						$(el).val(ui.value);
						$('#callOut-'+id).text($(el).val());
					}
				});

				// Insert a callout
				var callout = $('<div id="callOut-'+id+'" class="slider_callout slider-callout"></div>').appendTo($('#slider-'+id+' .ui-slider-handle')).text($('option:selected', el).val());

				// Set a value as soon as the slider handle is clicked
				$('#slider-'+id+' .ui-slider-handle').mousedown(function() {
					$(el).val(slider.slider('value'));
					$('#callOut-'+id).text($(el).val());
				});
				
				// Insert the slider left/right text elements
				var thisCellIndex =  $('td.answer-item', $(this).closest('tr.questions-list')).index($(this).closest('.answer-item'));
				var insertedLeftText = column1LeftText;
				var insertedRightText = column1RightText;
				if(thisCellIndex > 0) {
				var insertedLeftText = column2LeftText;
				var insertedRightText = column2RightText;
				}
				$('#slider-'+id).after('<div class="inserted-slider-text-wrapper">\
											<div class="inserted-slider-left-text">'+insertedLeftText+'</div>\
											<div class="inserted-slider-right-text">'+insertedRightText+'</div>\
										</div>');
			});
		}
	});
</script>

And, CSS like this:

Code:

.customSliderWrapper {
	position: relative;
	margin: 0 10px;
	padding-top: 1.75em;
}

.inserted-slider-text-wrapper {
	margin-top: 5px;
}

.inserted-slider-left-text,
.inserted-slider-right-text {
	font-size: 10px;
}

.inserted-slider-left-text {
	float: left;
}

.inserted-slider-right-text {
	float: right;
}

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

capture-6.png

The following user(s) said Thank You: user45497_d

The topic has been locked.

user45497_d
Topic Author
Offline
Banned

More

11 years 3 months ago #121870 by user45497_d

Replied by user45497_d on topic Problems with sliders within dual array

Wow- looks great! Thanks!
It works out very well with my modified basic and default themes! I tested it also with the the clear_logo theme, where the labels present centered though.

The topic has been locked.