- Posts: 17
- Thank you received: 1
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Question groups and array of multiple question types
- AdrianB
- Topic Author
- Offline
- New Member
Less
More
10 years 5 months ago #101917
by AdrianB
Question groups and array of multiple question types was created by AdrianB
Hi all,
I have been working to get an array of multiple question types, using this page as my guide: manual.limesurvey.org/Workarounds:_Quest...stion_types_in_array
It's working well when I have one "array layout" per question group, but things break down when I try to have another of these array layouts in the same question group.
I have tried using separate blocks of the <script> code for each array layout, and I've also tried using a single block with two calls (with different parameters) to the sideBySide() function. In all cases, the first array layout works as expected, but the second is spread vertically, like a regular question layout.
I've attached a LS group file to demonstrate the problem. In the attachment, I have used separate <script> blocks in the questions: 01R01C01 and 02R01C01.
Any ideas?
Thanks,
A.
I have been working to get an array of multiple question types, using this page as my guide: manual.limesurvey.org/Workarounds:_Quest...stion_types_in_array
It's working well when I have one "array layout" per question group, but things break down when I try to have another of these array layouts in the same question group.
I have tried using separate blocks of the <script> code for each array layout, and I've also tried using a single block with two calls (with different parameters) to the sideBySide() function. In all cases, the first array layout works as expected, but the second is spread vertically, like a regular question layout.
I've attached a LS group file to demonstrate the problem. In the attachment, I have used separate <script> blocks in the questions: 01R01C01 and 02R01C01.
Any ideas?
Thanks,
A.
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
10 years 5 months ago - 10 years 2 months ago #101946
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Question groups and array of multiple question types
That workaround was never intended to work with multiple "sets" on a page. However, here is a quick-and-dirty adaptation to suit your needs (styles are for the default template):
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Call the "sideBySide" function with number of rows, columns and start position sideBySide(2, 3, 3); sideBySide(2, 3, 11); }); function sideBySide(rows, columns, startQuestion) { /*********** Display multiple questions side by side ***********/ if ($('.qRow0-'+startQuestion+'').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).addClass('qRow'+rowNum+' qRow'+rowNum+'-'+startQuestion+' qCol'+colNum+' inlineQuestion').removeClass('normalQuestion'); 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+'-'+startQuestion+''); rowNum++; colNum = 1; } else { colNum++; } } else if(!$(this).hasClass('inlineQuestion')) { $(this).addClass('normalQuestion'); } }); //////// Survey layout manipulation //////// // Fix the width of the survey $('table.innerframe').css({ 'width': '900px' }); // Wrap each "row" in a wrapper div $(rowList).each(function(i) { $('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'-'+startQuestion+'" class="inlineWrapper'+i+' inlineRow inlineRow-'+startQuestion+'" />'); }); // Wrap each "question set" in an outer wrapper div $('.inlineRow-'+startQuestion).wrapAll('<div id="inlineOuterWrapper-'+startQuestion+'" class="inlineOuterWrapper" />'); $('#inlineOuterWrapper-'+startQuestion).append('<div style="clear:both; width: 100%;" />'); // Handle mandatory questions $('span.errormandatory').closest('div.mandatory').find('td.answer').css({ 'background': 'pink' }); // Style the wrapper elements $('.inlineOuterWrapper').css({ 'width': '75%', 'margin': '0 auto 15px auto', 'clear': 'both' }); $('.inlineRow').css({ 'width': '100%', 'margin': '0', 'clear': 'both' }); $( '.inlineRow:first' ).css({ 'margin-top': '10px' }); // Get all the questions to sit politely side by side $( '.inlineQuestion' ).css({ 'float': 'left', 'clear': 'none', 'height':'41px', 'overflow':'hidden', 'margin-bottom': '-8px' }); $( '.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': '20%' }); $( '.qCol2, .qCol3' ).css({ 'width': '40%' }); //////// 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({ 'margin-bottom': '-14px' }); $( '.inlineRow:not(.inlineWrapper0) .inlineQuestion td.questiontext' ).css({ 'background':'#FFFFFF' }); $( '.inlineWrapper0 td.questiontext' ).css({ 'height':'auto' }); // Radio question styles $( 'div.inlineQuestion.list-radio .answer-item' ).css({ 'float': 'left', 'text-align': 'center' }); $( 'div.inlineQuestion.list-radio .answer-item label' ).css({ 'text-align': 'center' }); // Short-text question styles $( 'div.inlineQuestion.text-short input' ).css({ 'width': '125px', 'margin-left': '0' }); } } </script>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 10 years 2 months ago by tpartner.
The following user(s) said Thank You: AdrianB
The topic has been locked.
- AdrianB
- Topic Author
- Offline
- New Member
Less
More
- Posts: 17
- Thank you received: 1
10 years 4 months ago #101965
by AdrianB
Replied by AdrianB on topic Question groups and array of multiple question types
Great help, excellent!
Thanks so much.
A.
Thanks so much.
A.
The topic has been locked.
- MikeConom
- Offline
- Junior Member
Less
More
- Posts: 31
- Thank you received: 1
10 years 4 months ago #102439
by MikeConom
Replied by MikeConom on topic Question groups and array of multiple question types
I tried this question (side by side) with the Template limespired but i cant see the mixed question.
Any one has test it?
Any one has test it?
The topic has been locked.
- AdrianB
- Topic Author
- Offline
- New Member
Less
More
- Posts: 17
- Thank you received: 1
10 years 4 months ago #102461
by AdrianB
Replied by AdrianB on topic Question groups and array of multiple question types
Hi tpartner,
Thanks again for your help. I'm having some trouble getting things looking nice with our customised template. The issue is that the white coloured question row has insufficient height, so some of the question text gets cutoff for radio button labels (see screenshot). More generally, I'd like to have a way of adjusting the amount of white padding below the inline questions.
I put a bit of time into this today but my CSS knowledge isn't very advanced. I've attached an example .lss (script in question 01R01C01) and attached the template .zip.
Any ideas?
Thanks,
A.
Thanks again for your help. I'm having some trouble getting things looking nice with our customised template. The issue is that the white coloured question row has insufficient height, so some of the question text gets cutoff for radio button labels (see screenshot). More generally, I'd like to have a way of adjusting the amount of white padding below the inline questions.
I put a bit of time into this today but my CSS knowledge isn't very advanced. I've attached an example .lss (script in question 01R01C01) and attached the template .zip.
Any ideas?
Thanks,
A.
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
10 years 4 months ago #102478
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Question groups and array of multiple question types
You can modify the inline question height in this block:
Code:
// Get all the questions to sit politely side by side $( '.inlineQuestion' ).css({ 'float': 'left', 'clear': 'none', 'height':'41px', 'overflow':'hidden', 'margin-bottom': '-8px' });
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.