Question groups and array of multiple question types

More
3 years 4 months ago #101917 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.
Attachments:

Please Log in to join the conversation.

More
3 years 4 months ago - 3 years 1 month ago #101946 by tpartner
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):

<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>


File Attachment:

File Name: limesurvey...2-12.lss
File Size:32 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 3 years 1 month ago by tpartner.
The following user(s) said Thank You: AdrianB

Please Log in to join the conversation.

More
3 years 4 months ago #101965 by AdrianB
Great help, excellent!

Thanks so much. :)

A.

Please Log in to join the conversation.

More
3 years 3 months ago #102439 by MikeConom
I tried this question (side by side) with the Template limespired but i cant see the mixed question.

Any one has test it?

Please Log in to join the conversation.

More
3 years 3 months ago #102461 by AdrianB
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.
Attachments:

Please Log in to join the conversation.

More
3 years 3 months ago #102478 by tpartner
You can modify the inline question height in this block:

// 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.

Please Log in to join the conversation.