Combine several questions types into one grid, using newest template - by: tpartner

<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
 
		// Call the "sideBySide" function with number of rows and columns
		sideBySide(4, 5, 3);
    });
 
	function sideBySide(rows, columns, startQuestion) {
 
		/***********
		Display multiple questions side by side
		***********/
 
		if ($('div.qRow1').length == 0) {
 
			var rowNum = 0;
			var colNum = 1;
			var rowList = new Array();
 
			//////// Add question classes for later use ////////
 
			// Loop through all questions and add row and column specific classes
			$('div[id^="question"]').each(function(i) {
				if(i >= (startQuestion-1) && rowNum < rows) { // This IF condition only needed if there are questions following the "inline" questions
					$(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion').removeClass('col-xs-12');
					if(rowNum == 0 && colNum > 1) {
						$(this).addClass('columnLabel');
					}
					if(rowNum > 0 && colNum == 1) {
						$(this).addClass('rowLabel');
					}
					else if(rowNum > 0 && colNum > 1) {
						$(this).addClass('questionCell');
					}
					if(colNum == columns) {
						rowList.push('qRow'+rowNum+'');
						rowNum++;
						colNum = 1;
					}
					else {
						colNum++;
					}
				}
				else {
					$(this).addClass('normalQuestion');
				}
			});
 
			//////// Survey layout manipulation ////////
 
			// Fix the width of the survey
			$('.outerframe').css({
				'min-width': '900px'
			});
 
			// Wrap each "row" in a wrapper div
			$(rowList).each(function(i) {
				$('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />');
			});
			$('.inlineRow').append('<div style="clear:both" />');
 
			// Style the wrapper divs
			$('.inlineRow').css({
				'clear': 'both',
				'margin':'0',
				'border-right':'1px solid #DBDBDB'
			});
 
			// Header row
			$( '#inlineWrapper0' ).css({
				'background-color': '#233140',
				'height':'auto',
				'border-right':'1px solid #233140'
			});
			$( '#inlineWrapper0 .inlineQuestion' ).css({ 'height':'50px' });
 
			// Last row
			$( '.inlineRow:last' ).css({
				'margin-bottom': '30px',
				'border-bottom':'1px solid #DBDBDB'
			});
 
			// Get all the questions to sit politely side by side
			$( '.inlineQuestion' ).css({
				'float': 'left',
				'margin-bottom': '0',
			});
			$( '.inlineQuestion > div' ).css({
				'border': '0 none'
			});
			$( '.inlineQuestion .question-wrapper' ).css({
				'margin': '0'
			});
			$( '.inlineQuestion .question-title-container' ).css({
				'padding': '1em 0',
				'margin': '0',
				'text-align': 'center'
			});
			$( '.inlineQuestion .answer-container' ).css({
				'padding': '5px 0'
			});
			$( '.inlineQuestion p.answer-item' ).css({
				'margin': '0'
			});
			$( '.inlineQuestion .answer-container div' ).removeClass('col-xs-12 col-sm-7');
			$( '.inlineQuestion .answer-container p' ).removeClass('col-sm-4');
			$( '.inlineQuestion .answer-container div.answer-item, .inlineQuestion .answer-container div.answer-item div' ).css({
				'margin': '0',
				'padding': '0'
			});
			$( '.inlineQuestion .questionhelp, .inlineQuestion .question-help-container' ).hide();
			$( '.inlineQuestion .survey-question-help, .inlineQuestion .questionhelp, .inlineQuestion .questionvalidcontainer' ).parent().hide();
 
			// Any questions not displayed inline (this is only needed if there are questions following the "inline" questions)
			$( '.normalQuestion' ).css({
				'clear': 'both'
			});
 
			//////// Column manipulation ////////
 
			// Set the column widths - can be set individually if necessary
			// Must add up to less than 100%
			$( '.qCol1' ).css({
				'width': '12%'
			});
			$( '.qCol2, .qCol3, .qCol4, .qCol5' ).css({
				'width': '22%'
			});
 
			//////// Question manipulation ////////
 
			// Hide the answer element in boilerplate questions
			$( 'div.boilerplate.inlineQuestion .answer-container' ).hide();
 
			// Hide the question text elements in non-boilerplate questions
			$('div.questionCell .question-title-container').hide();
 
			// Get everything to line up nicely vertically
			$( '.inlineQuestion td.questiontext, .inlineQuestion td.answer p' ).css({
				'text-align': 'center'
			});
 
			// Yes-no question styles
			$( '.inlineQuestion.yes-no ul' ).css({
				'text-align': 'center',
				'font-size': '90%',
				'margin': '0',
				'padding-bottom': '5px'
			});
			$( '.inlineQuestion.yes-no li' ).css({
				'display': 'inline-block',
				'padding': '10px 10px 0 10px'
			});
 
			// Numeric question styles
			$( '.inlineQuestion.text-short input, div.numeric input' ).css({
				'width': '100%',
				'height': 'auto',
				'margin': '0 auto',
				'padding': '5px'
			});
 
			// Dropdown question styles
			$( '.inlineQuestion.list-dropdown select' ).css({
				'height': 'auto',
				'margin': '0 auto',
				'padding': '5px'
			});
 
		}
	}
 
</script>