Welcome, Guest
Username: Password: Remember me

TOPIC: Multiple question types in array modifiy

Re: Multiple question types in array modifiy 2 years 4 months ago #75148

  • erregi
  • erregi's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 5
  • Karma: 0
please find attacched the survey.
The JS code is inside the question "0.1"

In this example i have only one question before the "table with questions" but i need to make it work in any position of a question group.

Thank You for your help!


File Attachment:

File Name: erregi_limesurvey_survey_18641.lss
File Size: 79 KB
The administrator has disabled public write access.

Re: Multiple question types in array modifiy 2 years 4 months ago #75157

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4054
  • Thank you received: 740
  • Karma: 341
Adding an parameter for the start question number should do the trick.

So, this:
function sideBySide(rows, columns) {
Changes to this:
function sideBySide(rows, columns, startQuestion) {

And, this:
if(rowNum <= rows) {
Changes to this:
if(rowNum <= rows && i >= startQuestion-1) {

Then, calling the function if you have 2 questions before the "inline" questions (as in my sample survey below), this
sideBySide(5, 5);
Changes to this:
sideBySide(5, 5, 3);

The complete script would be:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() { 
 
		// Call the "sideBySide" function with number of rows, columns and the start question number
		sideBySide(5, 5, 3);
	});
 
	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) {
				/* This IF condition only needed if there are questions 
				preceding or following the "inline" questions*/
				if(rowNum <= rows && i >= startQuestion-1) {
					$(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.outerframe').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',
 
				'height':'41px',
				'overflow':'hidden',
				'margin-bottom': '-5px'    
			});
			$( '.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 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({ 'height':'50px' });
			$( '#inlineWrapper0 td.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 td.answer' ).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>

Here is your sample survey back with the modified code. I have added another question before the "inline" questions so the "inlines" star at question 3.

File Attachment:

File Name: limesurvey_survey_18641_TP.lss
File Size: 81 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.
The administrator has disabled public write access.
The following user(s) said Thank You: erregi

Re: Multiple question types in array modifiy 2 years 4 months ago #75160

  • erregi
  • erregi's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 5
  • Karma: 0
the script works if you have other questions BEFORE "the grid" but it doesn't work if you have other questions after it.

I made a new example with those elements(see the attachment):

2 questions
Grid with questions
2 questions

Thanks again for your Help!


File Attachment:

File Name: erregi_limesurvey_survey_53823.lss
File Size: 90 KB
The administrator has disabled public write access.

Re: Multiple question types in array modifiy 2 years 4 months ago #75161

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4054
  • Thank you received: 740
  • Karma: 341
Change this line:
if(rowNum <= rows && i >= startQuestion-1) {

To this:
if(rowNum <= rows-1 && i >= startQuestion-1) {
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.
The following user(s) said Thank You: erregi

Aw: Re:Multiple question types in array modifiy 2 years 3 months ago #78609

  • barbarian
  • barbarian's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 13
  • Karma: 0
Hello!

I want to place one "short text question" and one "array" question (with four radio buttons) side-by-side, like Tpartner explained. But it doesn´t work for me, means it has no effect.
<script type="text/javascript" charset="utf-8">
 
    $(document).ready(function() {
 
        var qText = 18a;       
        var qArray = 18b;
 
        // Fix the width of the survey
        $( 'table.outerframe' ).css({'width': '900px'});
 
        // Wrap the 2 questions in a container div and style it
        $('#question'+qText+', #question'+qArray+'').wrapAll('<div class="inlineWrapper" />');
        $('.inlineWrapper').append('<div style="clear:both" />');
        $('.inlineWrapper').css({
            'width': '75%',
            'margin':'0 auto 10px auto',
            'background-color':'#FFFFFF'
        });
        $('.inlineWrapper *').css({
            'padding': '0',
            'margin':'0'
        });
 
        // Hide the question and the help text
        $('#question'+qText+' td.questiontext, #question'+qArray+' td.questiontext').parent().hide();
        $('#question'+qText+' > table:eq(1), #question'+qArray+' > table:eq(1)').hide();
        $('#question'+qText+' td.survey-question-help, #question'+qArray+' td.survey-question-help').parent().hide();
 
        //Hide the answer cell of the array
        $('#question'+qArray+' table.question thead tr').children(":first").hide();
        $('#question'+qArray+' table.question tbody tr').children(":first").hide();
        $('#question'+qArray+' col').attr('width', '');
 
        // Push all question tables to 100%
        $('#question'+qText+' table, #question'+qArray+' table').css({'width': '100%'});
 
        // Get the 2 questions to sit politely side by side
        $('#question'+qText+', #question'+qArray+'').css({'float':'left'});
        $('#question'+qText+'').css({'padding':'15px 0 5px 25px'});
        $('#question'+qText+'').css({'padding-top':'27px'}); // Adjust here for wrapped array labels
        $('#question'+qArray+'').css({'padding':'5px 0 10px 0'});
        $('#question'+qArray+' table.question td').css({'padding':'4px'});
        $('#question'+qText+' table:first').attr('align', 'left');
        $('#question'+qText+' label').css({
            'display':'inline', 
            'width':'auto', 
            'margin-right':'10px'
        });
 
        // Set the widths of the 2 questions
        $('#question'+qText+'').css({'width': '35%'});
        $('#question'+qArray+'').css({'width': '58%'});
 
    });
 
</script>
Maybe someone can help me please.
Using 1.92+
Last Edit: 2 years 3 months ago by barbarian.
The administrator has disabled public write access.

Re: Aw: Re:Multiple question types in array modifiy 2 years 3 months ago #78614

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5300
  • Thank you received: 291
  • Karma: 247
Please tell us which template you are using and post a link to a sample survey.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Aw: Re: Aw: Re:Multiple question types in array modifiy 2 years 3 months ago #78628

  • barbarian
  • barbarian's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 13
  • Karma: 0
Hey!

test-survey
test
key:test

It´s the default-Template, language is german

The questions 18 and 19 shall be side-by-side

Thanks for your answer:-)
The administrator has disabled public write access.

Aw: Re: Aw: Re:Multiple question types in array modifiy 2 years 3 months ago #78709

  • barbarian
  • barbarian's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 13
  • Karma: 0
or, if it´s easier, I could use Dual Array.
But then I need on the left column a Drop Down BUT on the right Radio Buttons.
(as a result I would have two questions in one question type)
The administrator has disabled public write access.

Re: Multiple question types in array modifiy 2 years 2 months ago #80285

  • AlexiaK
  • AlexiaK's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 9
  • Karma: 0
Hi all,

In my survey I will be needing something similar to what the multiple question types in an array can offer (I will need text, yes/no, then two dropdown lists). And so I decided to try the code that was provided (docs.limesurvey.org/tiki-index.php?page_...stion_types_in_array), but the result looks like what someone posted previously. And I really don't know what I'm doing that's wrong as I've just copied and pasted the code. I'm using the default template and I have the 1.92+.
LimeSurevy.jpg


Thank you in advance for your help!
The administrator has disabled public write access.

Re: Multiple question types in array modifiy 2 years 2 months ago #80305

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4054
  • Thank you received: 740
  • Karma: 341
Can you activate a sample 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.
Moderators: ITEd
Time to create page: 0.190 seconds
Donation Image