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

More
6 months 1 week ago - 6 months 1 week ago #155380 by tpartner
tpartner replied the topic: Array (Text): Combining sliders with Yes/No question
This was not intended to work with the LimeSurvey random answers setting. There is no way for that to work if you have defined sequential slider labels.

You will need to disable the LimeSurvey setting and randomize the rows via JavaScript:

<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'
		});
 
		// Randomize the array rows
		function shuffleArray(array) {
			for (var i = array.length - 1; i > 0; i--) {
				var j = Math.floor(Math.random() * (i + 1));
				var temp = array[i];
				array[i] = array[j];
				array[j] = temp;
			}
			return array;
		}
		var tr = $('tr.subquestion-list', thisQuestion).detach().toArray();
        shuffleArray(tr);
        $.each(tr, function(i, el) {
            $('table.subquestion-list tbody', thisQuestion).first().append(el);
        });
 
		// Fix up the row background colours
		var rowIndex = 0;
		$('table.subquestion-list tbody tr', thisQuestion).each(function(i){
			rowIndex ++;
			$(this).removeClass('array1, array2');
			if(rowIndex % 2 == 0) {
				$(this).addClass('array1');
			}
			else {
				$(this).addClass('array2');
			}
		});
	});
</script>

File Attachment:

File Name: limesurvey...5-31.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:
Last Edit: 6 months 1 week ago by tpartner.
The following user(s) said Thank You: zschaerer

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!