Array (Text): Combining sliders with Yes/No question

More
6 months 3 weeks ago #154962 by zschaerer
zschaerer created the topic: Array (Text): Combining sliders with Yes/No question
Hello,

I want to create a question array combining sliders and radio buttons (yes/no). From a combination of two other topics ( www.limesurvey.org/forum/design-issues/1...han-textboxes#139987 and www.limesurvey.org/forum/can-i-do-this-w...,-slider-col3#143079 ), I have managed to manipulate the question type array (text) and change the text inputs to sliders and check boxes or drop downs. I don't know, though, how to get the yes/no buttons.

Thanks in advance for any help!

P.S: Limesurvey version 2.64.7+ Build 170404.

Please Log in to join the conversation.

More
6 months 3 weeks ago #154970 by tpartner
tpartner replied the topic: Array (Text): Combining sliders with Yes/No question
Can you attach a test survey containing only that array question and your JavaScript?

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 months 3 weeks ago #154975 by zschaerer
zschaerer replied the topic: Array (Text): Combining sliders with Yes/No question
I just sent you a pm with a link.

I would like to change the check boxes in the right column to yes/no radio buttons.

Also, I thought it would be easy to change the split sliders that I copied from www.limesurvey.org/forum/can-i-do-this-w...,-slider-col3#143079 into normal sliders. However, my very limited Javascript knowledge does not allow this. I'll open an own thread for that, though.

Cheers, z

Please Log in to join the conversation.

More
6 months 3 weeks ago #154979 by tpartner
tpartner replied the topic: Array (Text): Combining sliders with Yes/No question
I didn't mean a link to a survey, I meant attach an export of a test survey. I don't have time to recreate everyone's survey for testing.

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 months 3 weeks ago #154980 by zschaerer
zschaerer replied the topic: Array (Text): Combining sliders with Yes/No question
Sorry, here is the file.



File Attachment:

File Name: limesurvey...6649.lss
File Size:20 KB
Attachments:

Please Log in to join the conversation.

More
6 months 3 weeks ago #154981 by tpartner
tpartner replied the topic: Array (Text): Combining sliders with Yes/No question
What would you like the slider max/min/step values to be?

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 months 3 weeks ago #154982 by zschaerer
zschaerer replied the topic: Array (Text): Combining sliders with Yes/No question
min: -5
max: 5
step: 0.1

Please Log in to join the conversation.

More
6 months 3 weeks ago - 6 months 3 weeks ago #154983 by tpartner
tpartner replied the topic: Array (Text): Combining sliders with Yes/No question
In that case, you can use this script. It will insert single-value sliders in column 1 and radios in column 2.

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){	
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Assign column-specific classes
		$('table.subquestion-list tr', thisQuestion).each(function(i) {
 
			$('> *:gt(0)', this).each(function(i){
				$(this).addClass('column-'+(i+1));
				$(this).attr('data-column', i+1);
			});
		});
 
      	// Insert the sliders
		$('.answer-item.column-1 input[type="text"]', thisQuestion).each(function(i) {
			$(this).closest('td').addClass('with-slider');
			var thisValue = $(this).val();
 
			$(this).bootstrapSlider({
				'min': -5,
				'max': 5,
				'step': 0.1,
				'range': false,
				'value': Number(thisValue),
				'tooltip': 'always'
			});
 
			// Initialization stuff
			if(thisValue == '') {
				$(this).val('');
				$(this).closest('td').find('.tooltip').hide();
			}
			else {
				updateCallOut($(this).closest('td'));
			}
		});
 
		// A function to update the slider callout
		function updateCallOut(el) {
			var thisTooltip = $(el).find('.tooltip');
			//$('.tooltip-inner', thisTooltip).text(callOutText);
			thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
		}
 
		// Listener on sliders
		$('td.with-slider .slider').on('mousedown', function(event, ui) {
			updateCallOut($(this).closest('td'));
		});			
		$('td.with-slider input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) {
			updateCallOut($(this).closest('td'));
			checkconditions($(this).val(), $(this).attr('name'), 'text');
		});
 
		// Listener on resizing (override the bootstrap callout behaviour)
		$(window).resize(function() {
			$('td.with-slider', thisQuestion).each(function(i) {
				if($('input[type="text"]', this).val() != '') {
					updateCallOut(this);
				}
			});
		});
 
		// Some clean-up styles (could be placed in template.css
		$('thead th, .answer-item.column-1', thisQuestion).css({
			'text-align': 'center'
		});
		$('.slider.slider-horizontal', thisQuestion).css({
			'margin': '1.7em auto 1em'
		});
		$('.slider-handle', thisQuestion).css({
			'top': '-4px'
		});
 
		// Hide the text inputs in columns 2
		$('.column-2 input[type="text"]', thisQuestion).hide();
 
 
		// Loop through all column-2 inputs
		$('.answer-item.column-2 input[type="text"]', thisQuestion).each(function(i) {
			var thisID = $(this).attr('id');
			var thisValue = $(this).val();
 
			// Insert the radios into
			$(this).parent().addClass('radio').append('<span class="inserted-radio-wrapper">\
										<input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
										<label class="control-label radio-label" for="'+thisID+'-Y">Yes</label>\
									</span>\
									<span class="inserted-radio-wrapper">\
										<input id="'+thisID+'-N" class="radio" value="N" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
										<label class="control-label radio-label" for="'+thisID+'-N">No</label>\
									</span>');
 
			// Initial radio states
			$(this).closest('td').find('input[type="radio"][value="'+thisValue+'"]').prop('checked', true);
		});
 
		// Listener on the radios
		$('.answer-item.column-2 input[type="radio"]', thisQuestion).on('click', function() {
			var thisInput = $(this).closest('td').find('input[type="text"]');
			$(this).closest('td').find('input[type="text"]').val($(this).val());
			checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
		});
 
		// Some clean-up styles (could be placed in template.css
		$('thead th, .answer-item.column-2', thisQuestion).css({
			'text-align': 'center'
		});
		$('.answer-item.column-2 .inserted-radio-wrapper', thisQuestion).css({
			'display': 'inline-block',
			'margin': '25px 10px 0 20px'
		});
		$('.answer-item.column-2 label', thisQuestion).css({
			'padding': '0'
		});
		$('.answer-item.column-2 .radio-label', thisQuestion).css({
			'padding-left': '3px',
			'margin-right': '3px'
		});
	});
</script>

You may want to add this to the end of template.css to clean it up a bit on phones:

.column-2.radio label.read::before {
	display:none !important;
}



Sample survey attached:

File Attachment:

File Name: limesurvey...6491.lss
File Size:22 KB

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

Please Log in to join the conversation.

More
6 months 3 weeks ago #154993 by zschaerer
zschaerer replied the topic: Array (Text): Combining sliders with Yes/No question
Thanks a lot, this works perfectly!

Please Log in to join the conversation.

More
6 months 2 weeks ago #155152 by zschaerer
zschaerer replied the topic: Array (Text): Combining sliders with Yes/No question
There are two more things I would like to adapt:
1. Add labels to the slider in the way it was done here: www.limesurvey.org/forum/design-issues/1...in-dual-array#121844
2. Change the visual appearance of the sliders so that the left and right side of the button look the same (i.e. so that it doesn't look like the left side "fills up" when you move the slider button to the right).

Any hints on that?

Please Log in to join the conversation.

More
6 months 2 weeks ago #155154 by tpartner
tpartner replied the topic: Array (Text): Combining sliders with Yes/No question
Use a script like this:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){	
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Assign column-specific classes
		$('table.subquestion-list tr', thisQuestion).each(function(i) {
 
			$('> *:gt(0)', this).each(function(i){
				$(this).addClass('column-'+(i+1));
				$(this).attr('data-column', i+1);
			});
		});
 
      	// Insert the sliders
		$('.answer-item.column-1 input[type="text"]', thisQuestion).each(function(i) {
			$(this).closest('td').addClass('with-slider');
			var thisValue = $(this).val();
 
			$(this).bootstrapSlider({
				'min': -5,
				'max': 5,
				'step': 0.1,
				'range': false,
				'value': Number(thisValue),
				'tooltip': 'always'
			});
 
			// Initialization stuff
			if(thisValue == '') {
				$(this).val('');
				$(this).closest('td').find('.tooltip').hide();
			}
			else {
				updateCallOut($(this).closest('td'));
			}
		});
 
		// A function to update the slider callout
		function updateCallOut(el) {
			var thisTooltip = $(el).find('.tooltip');
			//$('.tooltip-inner', thisTooltip).text(callOutText);
			thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
		}
 
		// Listener on sliders
		$('td.with-slider .slider').on('mousedown', function(event, ui) {
			updateCallOut($(this).closest('td'));
		});			
		$('td.with-slider input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) {
			updateCallOut($(this).closest('td'));
			checkconditions($(this).val(), $(this).attr('name'), 'text');
		});
 
		// Listener on resizing (override the bootstrap callout behaviour)
		$(window).resize(function() {
			$('td.with-slider', thisQuestion).each(function(i) {
				if($('input[type="text"]', this).val() != '') {
					updateCallOut(this);
				}
			});
		});
 
		// Insert slider left/right text
		var leftText = 'Left text';
		var rightText = 'Right text';
		$('td.with-slider', thisQuestion).append('<div class="left-text">'+leftText+'</div><div class="right-text">'+rightText+'</div>');
 
		// Some clean-up styles for the sliders (could be placed in template.css)
		$('thead th, .answer-item.column-1', thisQuestion).css({
			'text-align': 'center'
		});
		$('.slider.slider-horizontal', thisQuestion).css({
			'margin': '1.7em auto 1em'
		});
		$('.slider-selection', thisQuestion).css({
			'background': 'transparent none',
			'box-shadow': 'none'
		});
		$('.slider-handle', thisQuestion).css({
			'top': '-4px'
		});
		$('.left-text, .right-text', thisQuestion).css({
			'margin-top': '-0.5em',
			'font-size': '90%'
		});
		$('.left-text', thisQuestion).css({
			'float': 'left'
		});
		$('.right-text', thisQuestion).css({
			'float': 'right'
		});
 
		// Hide the text inputs in columns 2
		$('.column-2 input[type="text"]', thisQuestion).hide();
 
		// Loop through all column-2 inputs
		$('.answer-item.column-2 input[type="text"]', thisQuestion).each(function(i) {
			var thisID = $(this).attr('id');
			var thisValue = $(this).val();
 
			// Insert the radios
			$(this).parent().addClass('radio').append('<span class="inserted-radio-wrapper">\
										<input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
										<label class="control-label radio-label" for="'+thisID+'-Y">Yes</label>\
									</span>\
									<span class="inserted-radio-wrapper">\
										<input id="'+thisID+'-N" class="radio" value="N" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
										<label class="control-label radio-label" for="'+thisID+'-N">No</label>\
									</span>');
 
			// Initial radio states
			$(this).closest('td').find('input[type="radio"][value="'+thisValue+'"]').prop('checked', true);
		});
 
		// Listener on the radios
		$('.answer-item.column-2 input[type="radio"]', thisQuestion).on('click', function() {
			var thisInput = $(this).closest('td').find('input[type="text"]');
			$(this).closest('td').find('input[type="text"]').val($(this).val());
			checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
		});
 
		// Some clean-up styles for the radios (could be placed in template.css)
		$('thead th, .answer-item.column-2', thisQuestion).css({
			'text-align': 'center'
		});
		$('.answer-item.column-2 .inserted-radio-wrapper', thisQuestion).css({
			'display': 'inline-block',
			'margin': '25px 10px 0 20px'
		});
		$('.answer-item.column-2 label', thisQuestion).css({
			'padding': '0'
		});
		$('.answer-item.column-2 .radio-label', thisQuestion).css({
			'padding-left': '3px',
			'margin-right': '3px'
		});
	});
</script>



Sample survey:

File Attachment:

File Name: limesurvey...6649.lss
File Size:22 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: zschaerer

Please Log in to join the conversation.

More
6 months 2 weeks ago #155178 by zschaerer
zschaerer replied the topic: Array (Text): Combining sliders with Yes/No question
Is it possible to have different labels for each slider?

Please Log in to join the conversation.

More
6 months 2 weeks ago #155184 by tpartner
tpartner replied the topic: Array (Text): Combining sliders with Yes/No question
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){	
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Assign column-specific classes
		$('table.subquestion-list tr', thisQuestion).each(function(i) {
 
			$('> *:gt(0)', this).each(function(i){
				$(this).addClass('column-'+(i+1));
				$(this).attr('data-column', i+1);
			});
		});
 
      	// Insert the sliders
		$('.answer-item.column-1 input[type="text"]', thisQuestion).each(function(i) {
			$(this).closest('td').addClass('with-slider');
			var thisValue = $(this).val();
 
			$(this).bootstrapSlider({
				'min': -5,
				'max': 5,
				'step': 0.1,
				'range': false,
				'value': Number(thisValue),
				'tooltip': 'always'
			});
 
			// Initialization stuff
			if(thisValue == '') {
				$(this).val('');
				$(this).closest('td').find('.tooltip').hide();
			}
			else {
				updateCallOut($(this).closest('td'));
			}
		});
 
		// A function to update the slider callout
		function updateCallOut(el) {
			var thisTooltip = $(el).find('.tooltip');
			//$('.tooltip-inner', thisTooltip).text(callOutText);
			thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
		}
 
		// Listener on sliders
		$('td.with-slider .slider').on('mousedown', function(event, ui) {
			updateCallOut($(this).closest('td'));
		});			
		$('td.with-slider input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) {
			updateCallOut($(this).closest('td'));
			checkconditions($(this).val(), $(this).attr('name'), 'text');
		});
 
		// Listener on resizing (override the bootstrap callout behaviour)
		$(window).resize(function() {
			$('td.with-slider', thisQuestion).each(function(i) {
				if($('input[type="text"]', this).val() != '') {
					updateCallOut(this);
				}
			});
		});
 
		// Define the slider left/right labels
		var sliderLeftLabels = ['Left text 1', 'Left text 2','Left text 3','Left text 4','Left text 5'];
		var sliderRightLabels = ['Right text 1', 'Right text 2', 'Right text 3', 'Right text 4', 'Right text 5'];
 
		// Insert slider left/right labels
		$('td.with-slider', thisQuestion).append('<div class="left-text"></div><div class="right-text"></div>');
		$('.left-text', thisQuestion).each(function(i) {
			$(this).text(sliderLeftLabels[i]);
		});
		$('.right-text', thisQuestion).each(function(i) {
			$(this).text(sliderRightLabels[i]);
		});
 
		// Some clean-up styles for the sliders (could be placed in template.css)
		$('thead th, .answer-item.column-1', thisQuestion).css({
			'text-align': 'center'
		});
		$('.slider.slider-horizontal', thisQuestion).css({
			'margin': '1.7em auto 1em'
		});
		$('.slider-selection', thisQuestion).css({
			'background': 'transparent none',
			'box-shadow': 'none'
		});
		$('.slider-handle', thisQuestion).css({
			'top': '-4px'
		});
		$('.left-text, .right-text', thisQuestion).css({
			'margin-top': '-0.5em',
			'font-size': '90%'
		});
		$('.left-text', thisQuestion).css({
			'float': 'left'
		});
		$('.right-text', thisQuestion).css({
			'float': 'right'
		});
 
		// Hide the text inputs in columns 2
		$('.column-2 input[type="text"]', thisQuestion).hide();
 
		// Loop through all column-2 inputs
		$('.answer-item.column-2 input[type="text"]', thisQuestion).each(function(i) {
			var thisID = $(this).attr('id');
			var thisValue = $(this).val();
 
			// Insert the radios
			$(this).parent().addClass('radio').append('<span class="inserted-radio-wrapper">\
										<input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
										<label class="control-label radio-label" for="'+thisID+'-Y">Yes</label>\
									</span>\
									<span class="inserted-radio-wrapper">\
										<input id="'+thisID+'-N" class="radio" value="N" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
										<label class="control-label radio-label" for="'+thisID+'-N">No</label>\
									</span>');
 
			// Initial radio states
			$(this).closest('td').find('input[type="radio"][value="'+thisValue+'"]').prop('checked', true);
		});
 
		// Listener on the radios
		$('.answer-item.column-2 input[type="radio"]', thisQuestion).on('click', function() {
			var thisInput = $(this).closest('td').find('input[type="text"]');
			$(this).closest('td').find('input[type="text"]').val($(this).val());
			checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
		});
 
		// Some clean-up styles for the radios (could be placed in template.css)
		$('thead th, .answer-item.column-2', thisQuestion).css({
			'text-align': 'center'
		});
		$('.answer-item.column-2 .inserted-radio-wrapper', thisQuestion).css({
			'display': 'inline-block',
			'margin': '25px 10px 0 20px'
		});
		$('.answer-item.column-2 label', thisQuestion).css({
			'padding': '0'
		});
		$('.answer-item.column-2 .radio-label', thisQuestion).css({
			'padding-left': '3px',
			'margin-right': '3px'
		});
	});
</script>



File Attachment:

File Name: limesurvey...5-24.lss
File Size:23 KB

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
6 months 2 weeks ago #155193 by zschaerer
zschaerer replied the topic: Array (Text): Combining sliders with Yes/No question
Thank you very much for your help, this is now just how I need it.

Please Log in to join the conversation.

More
6 months 1 week ago #155360 by zschaerer
zschaerer replied the topic: Array (Text): Combining sliders with Yes/No question
I have noticed a bug in this workaround: the random display of the questions does not work properly. If the random display function is activated, the rows of the first column (questions) are displayed randomly but the rows of the other columns (answer options) are not. Is it possible to fix this?

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!