- Posts: 10216
- Thank you received: 3635
Ask the community, share ideas, and connect with other LimeSurvey users!
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { var newHeader = 'Age'; // Identify the questions var q1ID = '{QID}'; var q1 = $('#question'+q1ID+''); var q2 = $(q1).nextAll('.multiple-short-txt:eq(0)'); var q2ID = $(q2).attr('id').split('question')[1]; // Hide the second question $(q2).hide(); // Clean up the array widths imposed by LS $('.subquestions-list col', q1).css({ 'width':'auto' }); // Insert a new header in the array $('.subquestions-list thead td', q1).after('<th>'+newHeader+'</th>'); // Move the age inputs into the array $('.answers-list', q1).each(function(i) { $('.answertext', this).after('<td class="answer_cell_000"></td>'); }); $('input[type="text"]', q2).each(function(i) { $('.answer_cell_000:eq('+i+')', q1).append($(this)); }); // Some styles for the array (this could be done in template.css) $('.subquestions-list th, .subquestions-list td', q1).css({ 'padding':'3px 7px' }); }); </script>
.inlineRow td.questiontext { font-weight: normal; } #inlineWrapper0 td.questiontext { font-weight: bold; }
tpartner wrote: Ah, I see. The "Multiple question types in array" workaround won't work for you because it's designed for individual questions, not array type or multiple-text type questions.
In your case I think it would be easiest to simply create a new column in your array and insert the "Age" text inputs into it.
Here's your survey back with the array question placed before the multiple-text question. The source of the array question contains the script below
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Call the "sideBySide" function with number of rows, columns and start question (?) sideBySide(3, 5, 1); }); 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(rowNum <= rows { // This IF condition only needed if there are questions following the "inline" questions $(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion'); 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 $('table.container').css({ 'width': '900px' }); // Wrap each "row" in a wrapper div $(rowList).each(function(i) { $('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />'); }); // 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', 'overflow':'hidden', 'margin-bottom': '-1px' }); $( '.inlineQuestion div.question' ).css({ 'padding':'0', 'height':'41px', 'margin': '0', 'border': '0 none', 'width': '100%' }); $( '.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': '12%' }); $( '.qCol2, .qCol3, .qCol4, .qCol5' ).css({ 'width': '22%' }); //////// Question manipulation //////// // Hide the answer element in boilerplate questions $( 'div.boilerplate .answers' ).hide(); // Hide the question text elements in non-boilerplate questions $('div.questionCell .questiontext').hide(); // Push the question tables to 100% $( 'div.inlineRow table' ).css({ 'width': '100%' }); // Get everything to line up nicely vertically $( '.inlineQuestion .questiontext, .inlineQuestion .answers p' ).css({ 'text-align': 'center' }); // Adjust cell heights so everything lines up nicely horizontally $( '.inlineQuestion .answers, .inlineQuestion .questiontext' ).css({ 'height':'35px', 'overflow':'hidden', 'padding':'0.5em' }); $( '#inlineWrapper0 .inlineQuestion' ).css({ 'height':'50px' }); $( '#inlineWrapper0 .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 .answers' ).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>
if(rowNum <= rows {
if(rowNum <= rows) {
tpartner wrote: You have an typo in your script causing a fatal JavaScript error.
This:Code:if(rowNum <= rows {
Should be this:Code:if(rowNum <= rows) {