Array - Text (Col1), Dropdown (Col2), Slider(Col3) - by: tpartner

<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-3 input[type="text"]', thisQuestion).each(function(i) {
			$(this).closest('td').addClass('with-slider');
			var thisValue = $(this).val();
			var thisValueArr = thisValue.split(',');
			var sliderValues = [];
			if(thisValueArr.length > 1) {
				$(thisValueArr).each(function(i) {
					sliderValues.push(Number(this));
				});
			}
			else {
				sliderValues = [1, 12];
			}
 
			$(this).bootstrapSlider({
				'min': 1,
				'max': 12,
				'step': 1,
				'range': true,
				'value': sliderValues,
				'tooltip': 'always'
			});
 
			// Initialization stuff
			if(thisValue == '') {
				$(this).val('');
				$(this).closest('td').find('.tooltip').hide();
			}
			else {
				updateCallOut($(this).closest('td'));
			}
		});
 
		// A function to insert months in the slider callout
		function updateCallOut(el) {
			var thisTooltip = $(el).find('.tooltip');
			var thisValueArr = $(el).find('input[type="text"]').val().split(',');
			var months = {
				1: 'January',
				2: 'February',
				3: 'March',
				4: 'April',
				5: 'May',
				6: 'June',
				7: 'July',
				8: 'August',
				9: 'September',
				10: 'October',
				11: 'November',
				12: 'December'
			};
			var startMonth = months[thisValueArr[0]];
			var endMonth = months[thisValueArr[1]];
			var callOutText = startMonth;
			if(startMonth != endMonth) {
				callOutText = startMonth+'-'+endMonth;
			}
			$('.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
		$('.slider.slider-horizontal', thisQuestion).css({
			'margin': '1.7em auto 1em'
		});
		$('.slider-handle', thisQuestion).css({
			'top': '-4px'
		});
	});
</script>

<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);
			});
		});
 
		// Hide the text inputs in columns 2
		$('.column-2 input[type="text"]', thisQuestion).hide();
 
		// Define the select element (dropdown)
		var select1 = '<select class="inserted-select"> \
							<option value="">-- Please Choose --</option> \
							<option value="Not started">Not started</option> \
							<option value="In progress">In progress</option> \
							<option value="Completed">Completed</option> \
						</select>';
 
		// Insert the select elements into column 2
		$('.answer-item.column-2').append(select1);
 
		// Initial dropdown values in column 2 (if the question has already been answered)
		$('.answer-item.column-2 input[type="text"]').each(function(i){
			if($.trim($(this).val()) != '') {
				$(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
			}
		});
 
		// Listener on the dropdowns (insert selected values into hidden text input)
		$('.inserted-select').change(function() {
			var thisInput = $(this).closest('td').find('input[type="text"]');
			$(thisInput).val($(this).val());
			checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
		});
 
 
		// Insert the sliders
		$('.answer-item.column-3 input[type="text"]', thisQuestion).each(function(i) {
			$(this).closest('td').addClass('with-slider');
			var thisValue = $(this).val();
			var thisValueArr = thisValue.split(',');
			var sliderValues = [];
			if(thisValueArr.length > 1) {
				$(thisValueArr).each(function(i) {
					sliderValues.push(Number(this));
				});
			}
			else {
				sliderValues = [1, 12];
			}
 
			$(this).bootstrapSlider({
				'min': 1,
				'max': 12,
				'step': 1,
				'range': true,
				'value': sliderValues,
				'tooltip': 'always'
			});
 
			// Initialization stuff
			if(thisValue == '') {
				$(this).val('');
				$(this).closest('td').find('.tooltip').hide();
			}
			else {
				updateCallOut($(this).closest('td'));
			}
		});
 
		// A function to insert months in the slider callout
		function updateCallOut(el) {
			var thisTooltip = $(el).find('.tooltip');
			var thisValueArr = $(el).find('input[type="text"]').val().split(',');
			var months = {
				1: 'January',
				2: 'February',
				3: 'March',
				4: 'April',
				5: 'May',
				6: 'June',
				7: 'July',
				8: 'August',
				9: 'September',
				10: 'October',
				11: 'November',
				12: 'December'
			};
			var startMonth = months[thisValueArr[0]];
			var endMonth = months[thisValueArr[1]];
			var callOutText = startMonth;
			if(startMonth != endMonth) {
				callOutText = startMonth+'-'+endMonth;
			}
			$('.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
		$('select', thisQuestion).css({
			'border': '2px solid #dce4ec',
			'padding': '0.7em',
			'border-radius': '4px'
		});
		$('.slider.slider-horizontal', thisQuestion).css({
			'margin': '1.7em auto 1em'
		});
		$('.slider-handle', thisQuestion).css({
			'top': '-4px'
		});
	});
</script>