- Posts: 27
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
zunch2000 wrote: Since i didn't succeed i was wondering if someone could help me adjusting the code for the multiple question types in array which was planned for the default template, to fit the "Limespired" template?
tpartner wrote: Can you attach a sample survey?
<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) {