<script type="text/javascript" charset="utf-8">
 
  $(document).ready(function() {
    // Call the "sideBySide" function with number of rows, columns and start position
    sideBySide(2, 3, 3);
    sideBySide(2, 3, 11);
  });
 
  function sideBySide(rows, columns, startQuestion) {
 
    /*********** Display multiple questions side by side ***********/
 
    if ($('.qRow0-'+startQuestion+'').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) &amp;&amp; rowNum < rows) { 
          $(this).addClass('qRow'+rowNum+' qRow'+rowNum+'-'+startQuestion+' qCol'+colNum+' inlineQuestion').removeClass('normalQuestion');
          if(rowNum == 0 &amp;&amp; colNum > 1) {
            $(this).addClass('columnLabel');
          }  
          if(rowNum > 0 &amp;&amp; colNum == 1) {
            $(this).addClass('rowLabel');
          }
          else if(rowNum > 0 &amp;&amp; colNum > 1) {
            $(this).addClass('questionCell');
          }
          if(colNum == columns) {
            rowList.push('qRow'+rowNum+'-'+startQuestion+'');
            rowNum++;
            colNum = 1;
          }
          else {
            colNum++;
          }
        }
        else if(!$(this).hasClass('inlineQuestion')) {
          $(this).addClass('normalQuestion');
        }
      });
 
      //////// Survey layout manipulation ////////
 
      // Fix the width of the survey
      $('table.innerframe').css({
        'width': '900px'
      });
 
      // Wrap each "row" in a wrapper div
      $(rowList).each(function(i) {
        $('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'-'+startQuestion+'" class="inlineWrapper'+i+' inlineRow inlineRow-'+startQuestion+'" />');
      });
      // Wrap each "question set" in an outer wrapper div
      $('.inlineRow-'+startQuestion).wrapAll('<div id="inlineOuterWrapper-'+startQuestion+'" class="inlineOuterWrapper" />');
      $('#inlineOuterWrapper-'+startQuestion).append('<div style="clear:both; width: 100%;" />');
 
      // Handle mandatory questions
      $('span.errormandatory').closest('div.mandatory').find('td.answer').css({
        'background': 'pink'
      });
 
      // Style the wrapper elements
      $('.inlineOuterWrapper').css({
        'width': '75%',
        'margin': '0 auto 15px auto',
        'clear': 'both'
      });
 
      $('.inlineRow').css({
        'width': '100%',
        'margin': '0',
        'clear': 'both'
      });
 
      $( '.inlineRow:first' ).css({
        'margin-top': '10px'
      });
 
      // Get all the questions to sit politely side by side
      $( '.inlineQuestion' ).css({
        'float': 'left',
        'clear': 'none',
        'height':'41px',
        'overflow':'hidden',
        'margin-bottom': '-8px'
      });
 
      $( '.inlineQuestion .questionhelp' ).hide();
      $( '.inlineQuestion .survey-question-help' ).parent().hide();
 
      // A little space under the last row
      $( '.inlineRow:last .inlineQuestion' ).css({
                'margin-bottom': '10px'
      });
 
      // 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': '20%'
      });
 
      $( '.qCol2, .qCol3' ).css({
        'width': '40%'
      });
 
      //////// Question manipulation ////////
 
      // Hide the answer element in boilerplate questions
      $( 'div.boilerplate td.answer' ).parent().hide();
 
      // Hide the question text elements in non-boilerplate questions
      $('div.questionCell td.questiontext').parent().hide();
 
      // Push the question tables to 100%
      $( 'div.inlineRow table' ).css({
        'width': '100%'
      });
 
      // Get everything to line up nicely vertically
      $( '.inlineQuestion td.questiontext, .inlineQuestion td.answer p' ).css({
        'text-align': 'center'
      });
 
      // Adjust cell heights so everything lines up nicely horizontally
      $( '.inlineQuestion td.answer, .inlineQuestion td.questiontext' ).css({
        'height':'35px',
        'overflow':'hidden',
        'padding':'0.5em'
      });
      $( '.inlineWrapper0 .inlineQuestion' ).css({ 
        'margin-bottom': '-14px' 
      });
      $( '.inlineRow:not(.inlineWrapper0) .inlineQuestion td.questiontext' ).css({
        'background':'#FFFFFF'
      });
      $( '.inlineWrapper0 td.questiontext' ).css({
        'height':'auto'
      });
 
      // Radio question styles
      $( 'div.inlineQuestion.list-radio .answer-item' ).css({
        'float': 'left',
        'text-align': 'center'
      });
      $( 'div.inlineQuestion.list-radio .answer-item label' ).css({
        'text-align': 'center'
      });
 
      // Short-text question styles
      $( 'div.inlineQuestion.text-short input' ).css({
        'width': '125px',
        'margin-left': '0'
      });
    }
  }
</script>

// Get all the questions to sit politely side by side
$( '.inlineQuestion' ).css({
  'float': 'left',
  'clear': 'none',
  'height':'41px',
  'overflow':'hidden',
  'margin-bottom': '-8px'
});