Welcome, Guest
Username: Password: Remember me

TOPIC: Question groups and array of multiple question types

Question groups and array of multiple question types 4 months 3 weeks ago #101917

  • AdrianB
  • AdrianB's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Karma: 0
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:
The administrator has disabled public write access.

Question groups and array of multiple question types 4 months 3 weeks ago #101946

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 3813
  • Thank you received: 683
  • Karma: 328
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>

Capture_2013-11-25.PNG

File Attachment:

File Name: limesurvey_survey_913978_2014-02-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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 2 months 6 days ago by tpartner.
The administrator has disabled public write access.
The following user(s) said Thank You: AdrianB

Question groups and array of multiple question types 4 months 3 weeks ago #101965

  • AdrianB
  • AdrianB's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Karma: 0
Great help, excellent!

Thanks so much. :)

A.
The administrator has disabled public write access.

Question groups and array of multiple question types 4 months 1 week ago #102439

  • MikeConom
  • MikeConom's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 33
  • Thank you received: 1
  • Karma: 0
I tried this question (side by side) with the Template limespired but i cant see the mixed question.

Any one has test it?
The administrator has disabled public write access.

Question groups and array of multiple question types 4 months 1 week ago #102461

  • AdrianB
  • AdrianB's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Karma: 0
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:
The administrator has disabled public write access.

Question groups and array of multiple question types 4 months 6 days ago #102478

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 3813
  • Thank you received: 683
  • Karma: 328
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.142 seconds
Donation Image