- Posts: 29
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { /*********** Display multiple questions side by side ***********/ if ($('div.qRow1').length == 0) { //////// Add question classes for later use //////// // Give questions row specific attributes so we can easily manipulate them by row $('#question190, #question191, #question192, #question193, #question194').addClass('qRow1 inlineQuestion'); $('#question195, #question196, #question197, #question198, #question199').addClass('qRow2 inlineQuestion'); $('#question200, #question201, #question202, #question203, #question204').addClass('qRow3 inlineQuestion'); $('#question205, #question206, #question207, #question208, #question209').addClass('qRow4 inlineQuestion'); // Give questions column specific classes so we can easily manipulate them by column $('#question190, #question195, #question200, #question205').addClass('qCol1'); $('#question191, #question196, #question201, #question206').addClass('qCol2'); $('#question192, #question197, #question202, #question207').addClass('qCol3'); $('#question193, #question198, #question203, #question208').addClass('qCol4'); $('#question194, #question199, #question204, #question209').addClass('qCol5'); //////// Survey layout manipulation //////// // Fix the width of the survey $( 'table.outerframe' ).css({ 'width': '900px' }); // Wrap each row in a div $('.qRow1').wrapAll('<div id="inlineWrapper1" />'); $('.qRow2').wrapAll('<div id="inlineWrapper2" />'); $('.qRow3').wrapAll('<div id="inlineWrapper3" />'); $('.qRow4').wrapAll('<div id="inlineWrapper4" />'); // Style the wrapper divs $( '#inlineWrapper1, #inlineWrapper2, #inlineWrapper3, #inlineWrapper4' ).css({ 'width': '850px', 'margin': '0 auto 0 auto', 'clear': 'both' }); // Get all the questions to sit politely side by side $( '.qRow1, .qRow2, .qRow3, .qRow4' ).css({ 'float': 'left' }); $( '.inlineQuestion .survey-question-help' ).parent().hide(); //////// 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 td.answer' ).parent().hide(); // Hide the question text elements in non-boilerplate questions $('div.text-short td.questiontext, div.list-dropdown td.questiontext, div.yes-no td.questiontext, div.numeric td.questiontext').parent().hide(); // Push the question tables to 100% $( 'div.qRow1 table, div.qRow2 table, div.qRow3 table, div.qRow4 table' ).css({ 'width': '100%' }); // Get everything to line up nicely vertically $( 'td.questiontext, td.answer p' ).css({ 'text-align': 'center' }); // Adjust cell heights so everything lines up nicely horizontally $( 'td.answer, td.questiontext' ).css({ 'height':'35px', 'overflow':'hidden' }); $( '.inlineQuestion' ).css({ 'height':'40px', 'overflow':'hidden' }); // 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'}); // Reduce the space caused by the question help table $( '.qRow1, .qRow2, .qRow3' ).css({ 'margin-bottom': '-8px' }); } }); </script>
<div id="inlineWrapper1">...</div>
'height':'100%'
'min-height':'30px'
// Adjust cell heights so everything lines up nicely horizontally $( 'td.answer, td.questiontext' ).css({ 'height':'35px', 'overflow':'hidden' });
tpartner wrote: This should do the trick.
Create a short-text question and an array question with only one answer. Insert the following script in the source of one of them. Replace "11" (line 5) with the ID of the short-text and "22" (line 6) with the ID of the array you want inline.
Note that the styles inserted here only apply to the default template and you my need to adjust the padding in line 40 if any of your array labels wrap.
Code:<script type="text/javascript" charset="utf-8"> $(document).ready(function() { var qText = 11; var qArray = 22; // Fix the width of the survey $( 'table.outerframe' ).css({'width': '900px'}); // Wrap the 2 questions ina container div and style it $('#question'+qText+', #question'+qArray+'').wrapAll('<div class="inlineWrapper" />'); $('.inlineWrapper').append('<div style="clear:both" />'); $('.inlineWrapper').css({ 'width': '75%', 'margin':'0 auto 10px auto', 'background-color':'#FFFFFF' }); $('.inlineWrapper *').css({ 'padding': '0', 'margin':'0' }); // Hide the question and the help text $('#question'+qText+' td.questiontext, #question'+qArray+' td.questiontext').parent().hide(); $('#question'+qText+' > table:eq(1), #question'+qArray+' > table:eq(1)').hide(); $('#question'+qText+' td.survey-question-help, #question'+qArray+' td.survey-question-help').parent().hide(); //Hide the answer cell of the array $('#question'+qArray+' table.question thead tr').children(":first").hide(); $('#question'+qArray+' table.question tbody tr').children(":first").hide(); $('#question'+qArray+' col').attr('width', ''); // Push all question tables to 100% $('#question'+qText+' table, #question'+qArray+' table').css({'width': '100%'}); // Get the 2 questions to sit politely side by side $('#question'+qText+', #question'+qArray+'').css({'float':'left'}); $('#question'+qText+'').css({'padding':'15px 0 5px 25px'}); $('#question'+qText+'').css({'padding-top':'27px'}); // Adjust here for wrapped array labels $('#question'+qArray+'').css({'padding':'5px 0 10px 0'}); $('#question'+qArray+' table.question td').css({'padding':'4px'}); $('#question'+qText+' table:first').attr('align', 'left'); $('#question'+qText+' label').css({ 'display':'inline', 'width':'auto', 'margin-right':'10px' }); // Set the widths of the 2 questions $('#question'+qText+'').css({'width': '35%'}); $('#question'+qArray+'').css({'width': '58%'}); }); </script>