Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Multiples arrays (with multiples questions types inside) in the same page

Multiples arrays (with multiples questions types inside) in the same page 1 year 8 months ago #90027

  • PEGASO_UAB
  • PEGASO_UAB's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
Hi!
I am developing a survey where I need to put severale arrays (with multiples question types in each one)on the same page.
Like the one attached but repeating it 16 times.

Composition1.jpg



I had no problem for doing the first array of the page using the code gived there:
docs.limesurvey.org/tiki-index.php?page=...stion_types_in_array

But I couldn't find a way to make it for the next arrays of the pages.
(It is precised in the document with the code that:Any extra questions on the page should follow this grid of questions, not precede them)

Anyway it would be great if anybody know a way to do it.
Thank you very much!

François
Last Edit: 1 year 8 months ago by PEGASO_UAB. Reason: archivo no encontrado
The administrator has disabled public write access.

Re: Multiples arrays (with multiples questions types inside) in the same page 1 year 8 months ago #90036

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4141
  • Thank you received: 768
  • Karma: 349
Hmm...that workaround was developed for dissimilar question types but since you are using all drop-downs, there may be an easier approach.

Can you attach a sample group with at least 3 sets of questions?
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.

Re: Multiples arrays (with multiples questions types inside) in the same page 1 year 8 months ago #90054

  • PEGASO_UAB
  • PEGASO_UAB's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
Hi, thanks for the quick reply!

First I tried do it with only one array, like above but then I had not sufficient space to put all the columns that I need.


surveyonearray.jpg




Therefore I tried with the solution I showed in my question ((on array+ one question) by question group--> and then one question group by thematic (e.g. nutrient, aquaculture, etc...).

Please find attached the sample of the survey and a sample of one group of the same survey.
I precise that the dropdown are all with different questions inside.
Thanks a lot for the help!

François
Attachments:
The administrator has disabled public write access.

Re: Multiples arrays (with multiples questions types inside) in the same page 1 year 8 months ago #90062

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4141
  • Thank you received: 768
  • Karma: 349
François, do you need to support multiple languages for this survey?
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.

Re: Multiples arrays (with multiples questions types inside) in the same page 1 year 8 months ago #90063

  • PEGASO_UAB
  • PEGASO_UAB's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
Just English.
The administrator has disabled public write access.

Re: Multiples arrays (with multiples questions types inside) in the same page 1 year 8 months ago #90083

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4141
  • Thank you received: 768
  • Karma: 349
Okay, I think it would be easier to use a small jQuery plugin and some CSS to move the drop-downs around.

1) For each group of drop-downs, create a text-display question for the group title followed by the six drop-downs and a long-text.

1) Make a new copy of your template and add the following to the end of template.js. This plugin will:
- find a text-display question
- hide the following drop-downs questions
- move the drop-downs into a table in the text-display question
- add column titles that you define in the plugin call (see below)
// A custom plugin to display several dropdowns side-by-side
// Author - Tony Partner
(function( $ ){
 
	$.fn.alignDropdowns = function(options) {
 
		// The defaults, extended and modified with any passed in the function call - no defaults for this plugin
		var opts = $.extend( {
			//xx: '';						
		}, options);
 
		return this.each(function(i) {
 
			if($(this).hasClass('boilerplate')) {
 
				var thisQuestion = $(this);
				var ddGroup = (i);
				var bID = $(thisQuestion).attr('id').split('question')[1];
 
				// Add some classes
				$(thisQuestion).addClass('alignedDropdowns');
				$(thisQuestion).nextAll('.list-dropdown').each(function(i){
					if(i < opts.dropdownCount) {
						$(this).addClass('dd-group-'+ddGroup+' dd-'+i+'');
					}
					else {
						return false;
					}
				});
				$(thisQuestion).nextAll('.text-long:eq(0)').addClass('dd-long-text dd-long-text-'+ddGroup+'');
 
				// Hide the dropdown questions
				$('.dd-group-'+ddGroup).hide();
 
 
				// Insert a table for the dropdowns
				$('input:hidden[id$="X'+bID+'"]').parent().append('<table class="ddTable ddTable-'+bID+'"><thead><tr></tr></thead><tbody><tr></tr></tbody></table>');
 
				// Insert the column labels
				$(opts.columnLabels).each(function(i){
					$('table.ddTable-'+bID+' thead tr').append('<th>'+this+'</th>');
				});
 
				// Insert the dropdowns
				$('.dd-group-'+ddGroup+' select').each(function(i, el){
					$('table.ddTable-'+bID+' tbody tr').append('<td></td>');
					$('table.ddTable-'+bID+' tbody td:eq('+i+')').append(el);
				});
 
				// Equalize column widths
				$('table.ddTable-'+bID+' th, table.ddTable-'+bID+' td').css({ 'width':100/opts.dropdownCount+'%' });
			}
		});
	};
})( jQuery );

2) Add the following script to the source of a question on the page. This will call the plugin with two parameters:
- the number of drop-downs in each group (6, in this case)
- a comma-separated list of column titles
This example applies the plugin to all text-displays on a page but could be used for specific questions.
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() { 
 
		// Apply the "alignDropdowns" plugin to all text-display questions on the page
		$('.boilerplate').alignDropdowns({
			columnLabels: [
				'Pressure', 
				'Impact distance', 
				'Functional Impact', 
				'Resistance', 
				'Recovery time', 
				'Confidence'
			],				
			dropdownCount: 6	
		});   
    });
</script>

3) Add the following styles to the end of template.css (these are for the default template):
/** alignDropdowns plugin styles **/
 
table.innerframe {
	min-width: 850px;
}
 
.question-wrapper {
    width: 95%;
}
 
.ddTable {
	border-collapse: collapse;
	width: 100%;
}
 
.ddTable th,
.ddTable td {
	text-align: center;
	padding: 3px;
}
 
.ddTable th {
	font-weight: bold;
	font-size: 90%;
}
 
.ddTable td select {
	width: 100%;
}

Here is a sample survey with the plugin call in the source of the first question in the first group.

File Attachment:

File Name: side_by_side_dropdowns.lss
File Size: 69 KB


And a screenshot:
Capture3_2012-12-13.JPG
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.

Re: Multiples arrays (with multiples questions types inside) in the same page 1 year 8 months ago #90133

  • PEGASO_UAB
  • PEGASO_UAB's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
Hi Tony,
Thank you very much!
I try it now.
Speak soon.

Cheers,

François
The administrator has disabled public write access.

Re: Multiples arrays (with multiples questions types inside) in the same page 1 year 8 months ago #90144

  • PEGASO_UAB
  • PEGASO_UAB's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
Works perfectly!!
I jsut wonder how I can use the plugin just for the questions with the dropdown lists because I have other text display in the survey.
Thank you very much!
François
The administrator has disabled public write access.

Re: Multiples arrays (with multiples questions types inside) in the same page 1 year 8 months ago #90147

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4141
  • Thank you received: 768
  • Karma: 349
The code that you insert in step 2 will only affect text-display question on the page shown, not those in later pages of the survey.

If you have some "normal" text-displays on the same page, do this instead of step 2.

2) Add the following script to the source of EVERY text-display question on the page that is a "group title".
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() { 
 
		// Apply the "alignDropdowns" plugin to THIS text-display question
		$('#question{QID}').alignDropdowns({
			columnLabels: [
				'Pressure', 
				'Impact distance', 
				'Functional Impact', 
				'Resistance', 
				'Recovery time', 
				'Confidence'
			],				
			dropdownCount: 6	
		});   
    });
</script>
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: 1 year 8 months ago by tpartner.
The administrator has disabled public write access.

Re: Multiples arrays (with multiples questions types inside) in the same page 1 year 8 months ago #90235

  • PEGASO_UAB
  • PEGASO_UAB's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
Works perfectly!
Thank you for your great help!
All the best,

François
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.161 seconds
Donation Image