- Posts: 22
- Thank you received: 1
Ask the community, share ideas, and connect with other LimeSurvey users!
extensions.sondages.pro/contactLeftyMaus wrote: ....
It might be too late for this implementation, but I would definitely like to fix it up for the next one.
LeftyMaus wrote: However, the project sponsor is specifically asking for a grid. Essentially they have judged that the convenience of one grid of questions far outweighs the convenience of entering data on a mobile device.
<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>
// Multiple numerical input question styles $( 'div.numeric-multi input' ).css({ 'width': '80px' }); $( 'div.numeric-multi.inlineQuestion ul' ).css({ 'margin-left': '0' }); $( 'div.numeric-multi.inlineQuestion li label' ).css({ 'display': 'none' });
// reference to FinLine1Dollars "Remaining:" and "Total:" text // all <div> of the class multiplenumerichelp that are contained within <td>, appearing on the row id of inlineWrapper1 $( '#inlineWrapper1 td div.multiplenumerichelp' ).css({ 'display':'none' }); // attempt to identify the boundary of Multiple numerical input // all <div> of the class "answer-container" that are contained within <div> of the "numeric-multi" class, appearing on the row id of inlineWrapper1 $( '#inlineWrapper1 div.numeric-multi div.answer-container' ).css({ 'color': 'blue', 'background-color': 'rgba(0,0,255,0.3)', 'border':'1px solid blue' });