Multiple question types in array modifiy

More
6 years 11 months ago #53546 by tpartner
tpartner replied the topic: Multiple question types in array modifiy
Oh, and some XHTML validators might whine about those elements being there but that's just because they're not smart enough to realize that the tags are just quoted inside a script.

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.

More
6 years 11 months ago #53548 by holch
holch replied the topic: Multiple question types in array modifiy
Hi TPartner!

Thanks for letting me know. I am little "out" of the whole XHTML and CSS stuff. I know that the trailing slash is closing the element, but I was not aware that DIVs could be used this way. I thought this would be limited to some elements like IMG, HR, etc.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in to join the conversation.

More
6 years 11 months ago #53601 by phpsurvey
phpsurvey replied the topic: Multiple question types in array modifiy
My questions have a different size(height). I want to set the height variable like
'height':'100%'

or

'min-height':'30px'

But this doesn't works. How can I set the questions to a different height???

 // Adjust cell heights so everything lines up nicely horizontally
            $( 'td.answer, td.questiontext' ).css({
                'height':'35px',
                'overflow':'hidden'
            });

Please Log in to join the conversation.

More
6 years 7 months ago #58772 by tpartner
tpartner replied the topic: Multiple question types in array modifiy
Option 5?

Can you provide a screenshot showing what you want?

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.

More
6 years 7 months ago - 6 years 7 months ago #58773 by phpsurvey
phpsurvey replied the topic: Aw: Re:Multiple question types in array modifiy
this is what i wanted to post :

tpartner wrote: This should do the trick.

Create a short-text question and an array question with only one answer. Insert the following script in the source of one of them. Replace "11" (line 5) with the ID of the short-text and "22" (line 6) with the ID of the array you want inline.

Note that the styles inserted here only apply to the default template and you my need to adjust the padding in line 40 if any of your array labels wrap.

<script type="text/javascript" charset="utf-8">
 
    $(document).ready(function() {
 
        var qText = 11;       
        var qArray = 22;
 
        // Fix the width of the survey
        $( 'table.outerframe' ).css({'width': '900px'});
 
        // Wrap the 2 questions ina 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>


Hi,
I have a question to this solution. How can I reduce the distance between the first and the second block? Betwenn Option 5 and the short-text is a too big distance. Can you show me the part in tpartners source code to reduce this distance.
Thank you !!!
Last Edit: 6 years 7 months ago by phpsurvey.

Please Log in to join the conversation.

More
6 years 7 months ago #58789 by phpsurvey
phpsurvey replied the topic: Aw: Re:Multiple question types in array modifiy
the solution is very easy:

$('.inlineWrapper *').css({
'padding': '0',
'margin':'0',
'margin-top':'-5px'
});

with margin-top - 5px you get it

Please Log in to join the conversation.

More
6 years 7 months ago #59641 by BodasDeSangre
BodasDeSangre replied the topic: Multiple question types in array modifiy
Hello, I have been following all this post and it's very interesting... Here is the solution to my problem...

But I have a problem and I appreciate if you can help me.

I tried to do the example... but something is wrong. The questions are shown individually and the idea is that the questions are shown in an array.

In the image, we can see the result of the example.



Attachments:

Please Log in to join the conversation.

More
6 years 7 months ago #59650 by tpartner
tpartner replied the topic: Multiple question types in array modifiy
BodasDeSangre, I've re-written the "Multiple question types in array" workaround to simplify the code and implementation. Try with the new code.

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.

More
6 years 7 months ago #59652 by BodasDeSangre
BodasDeSangre replied the topic: Multiple question types in array modifiy
I'll try it and tell you the results,

Thank you very much for the reply.

PD: I apologize for my English, I'm learning.

Please Log in to join the conversation.

More
6 years 7 months ago #59666 by tpartner
tpartner replied the topic: Multiple question types in array modifiy

PD: I apologize for my English, I'm learning.

It's MUCH better than my Spanish! :cheer:

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.

More
6 years 6 months ago #59723 by BodasDeSangre
BodasDeSangre replied the topic: Multiple question types in array modifiy
Thanks Tony!, it works!.

I have a last question (I hope), The code works with the default template, I tried to do it with a custom template but all the questions disappear. What things should i modified to adapt the code to my template?

Thank you very much.

Please Log in to join the conversation.

More
6 years 6 months ago #59736 by tpartner
tpartner replied the topic: Multiple question types in array modifiy

What things should i modified to adapt the code to my template?

I cannot say without seeing the template.

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.

More
6 years 6 months ago #59973 by Joey_T
Joey_T replied the topic: Aw: Multiple question types in array modifiy
Hi guys!

Thanks to your great help I managed to get this type of question style working. However I would rather like to use the blue and grey template but with that I have to change something of the code to get it working. I am not familiar with js so i need your help! :)

cheers Joey

Please Log in to join the conversation.

More
6 years 6 months ago #59975 by tpartner
tpartner replied the topic: Aw: Multiple question types in array modifiy
You may want to tweak the styles a bit, but this should get you going.
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() { 
 
		// Call the "sideBySide" function with number of rows and columns
		sideBySide(4, 5);   
    });
 
	function sideBySide(rows, columns) {
 
		/// 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) {
				if(rowNum <= rows) { // This IF condition only needed if there are questions following the "inline" questions
					$(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.container').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',
				'overflow':'hidden',
				'margin-bottom': '-1px'    
			});
			$( '.inlineQuestion div.question' ).css({
				'padding':'0',
				'height':'41px',
				'margin': '0',
				'border': '0 none',
				'width': '100%'    
			});
			$( '.inlineQuestion .questionhelp' ).hide();
			$( '.inlineQuestion .survey-question-help' ).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 .answers' ).hide();
 
			// Hide the question text elements in non-boilerplate questions
			$('div.questionCell .questiontext').hide();
 
			// Push the question tables to 100%
			$( 'div.inlineRow table' ).css({
				'width': '100%'
			});
 
			// Get everything to line up nicely vertically
			$( '.inlineQuestion .questiontext, .inlineQuestion .answers p' ).css({
				'text-align': 'center'
			});
 
			// Adjust cell heights so everything lines up nicely horizontally
			$( '.inlineQuestion .answers, .inlineQuestion .questiontext' ).css({
				'height':'35px',
				'overflow':'hidden',
				'padding':'0.5em'
			});
			//$( '#inlineWrapper0 .inlineQuestion' ).css({'height':'50px'});
			$( '#inlineWrapper0 .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 .answers' ).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>

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.

More
6 years 6 months ago #60130 by Joey_T
Joey_T replied the topic: Aw: Multiple question types in array modifiy
Thank you tony!

Now I've got another question: In the same question group I want to put "normal" style questions after the javascripted array question. What do I need to do to make them not follow the styling of the questions beforehand? The following question wont line up normally and is horribly displaced.

cheers, Joey

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!