<script type="text/javascript" charset="utf-8">  
  $(document).ready(function() {
    // Call the "sideBySide" function with number of rows, columns and start position
    sideBySide(11, 3, 5);
    sideBySide(4, 3, 42);
  });
 
  function sideBySide(rows, columns, startQuestion) {
 
  /*********** Display multiple questions side by side ***********/
 
    var rowNum = 0;
    var colNum = 1;
    var rowList = new Array();
    var numQuestions = rows*columns;
    var arrayID = $('div[id^="question"]:eq('+(startQuestion-1)+')').attr('id').replace(/question/, '');
 
    //////// Add question classes for later use ////////
 
    // Loop through all questions and add row and column specific classes
    $('div[id^="question"]:lt('+((startQuestion+numQuestions)-1)+'):gt('+(startQuestion-2)+')').each(function(i) {
      $(this).addClass('qRow-'+arrayID+'-'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion');
      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-'+arrayID+'-'+rowNum+'');
        rowNum++;
        colNum = 1;
      }
      else {
        colNum++;
      }
    });
 
    //////// Survey layout manipulation ////////
 
    // Fix the width of the survey
    $('table.outerframe').css({
      'width': '900px'
    });
 
    // Wrap each "row" in a wrapper div
    $(rowList).each(function(i) {
      $('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow array-'+arrayID+'-row" />');
    });
    $('.array-'+arrayID+'-row').append('<div style="clear:both;" >');
    $('.array-'+arrayID+'-row:last').after('<div style="clear:both; padding-bottom: 20px;" >');
 
    // Style the wrapper divs
    $('.inlineRow').css({
      'width': '850px',
      'margin': '0 auto 0 auto',
      'clear': 'both'
    });
 
    $( '.inlineRow:first' ).css({
      'margin-top': '10px'
    });
 
    // Get all the questions to sit politely side by side
    $( '.inlineQuestion' ).css({
      'float': 'left',
      'height':'41px',
      'overflow':'hidden',
      'margin-bottom': '-8px'
    });
    $( '.inlineQuestion .questionhelp' ).hide();
    $( '.inlineQuestion .survey-question-help' ).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': '20%'
    });
 
    $( '.qCol2, .qCol3, .qCol4, .qCol5' ).css({
      'width': '39%'
    });
 
    //////// 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({ 'height':'50px' });
    $( '#inlineWrapper0 td.questiontext' ).css({
        'height':'50px'
    });
 
    // Yes-no question styles
    $( 'div.yes-no ul' ).css({
      'text-align': 'center',
      'font-size': '90%',
      'margin': '0',
      'padding-bottom': '5px'
    });
    $( 'div.yes-no li' ).css({
      'padding-right': '1.5em'
    });
    $( 'div.yes-no td.answer' ).css({
      'padding-bottom': '0'
    });
 
    // Short-text question styles
    $( 'div.text-short input' ).css({
      'width': '125px',
      'margin-left': '0'
    });
 
    // Numeric question styles
    $( 'div.numeric input' ).css({
      'width': '125px',
      'margin-left': '0'
    });
    $( 'div.numeric p.tip' ).css({
      'display': 'none'
    });
 
    // Get rid of the margins around select boxes
    $( 'p.question' ).css({ 'margin':'0' });
  }
</script>