- Posts: 29
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Multiple question types in array modifiy
- phpsurvey
-
Topic Author
- Offline
- Junior Member
-
Less
More
13 years 4 months ago #53489
by phpsurvey
Replied by phpsurvey on topic Multiple question types in array modifiy
I'm curious about it.
The topic has been locked.
- tpartner
-
- Offline
- LimeSurvey Community Team
-
Less
More
- Posts: 10109
- Thank you received: 3595
13 years 4 months ago #53534
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Multiple question types in array modifiy
I have updated the code in the
workaround
to work in IE8 and to be a little more XHTML valid.
The new code is:
The new code is:
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { /*********** Display multiple questions side by side ***********/ if ($('div.qRow1').length == 0) { //////// Add question classes for later use //////// // Give questions row specific attributes so we can easily manipulate them by row $('#question190, #question191, #question192, #question193, #question194').addClass('qRow1 inlineQuestion'); $('#question195, #question196, #question197, #question198, #question199').addClass('qRow2 inlineQuestion'); $('#question200, #question201, #question202, #question203, #question204').addClass('qRow3 inlineQuestion'); $('#question205, #question206, #question207, #question208, #question209').addClass('qRow4 inlineQuestion'); // Give questions column specific classes so we can easily manipulate them by column $('#question190, #question195, #question200, #question205').addClass('qCol1'); $('#question191, #question196, #question201, #question206').addClass('qCol2'); $('#question192, #question197, #question202, #question207').addClass('qCol3'); $('#question193, #question198, #question203, #question208').addClass('qCol4'); $('#question194, #question199, #question204, #question209').addClass('qCol5'); //////// Survey layout manipulation //////// // Fix the width of the survey $( 'table.outerframe' ).css({ 'width': '900px' }); // Wrap each row in a div $('.qRow1').wrapAll('<div id="inlineWrapper1" />'); $('.qRow2').wrapAll('<div id="inlineWrapper2" />'); $('.qRow3').wrapAll('<div id="inlineWrapper3" />'); $('.qRow4').wrapAll('<div id="inlineWrapper4" />'); // Style the wrapper divs $( '#inlineWrapper1, #inlineWrapper2, #inlineWrapper3, #inlineWrapper4' ).css({ 'width': '850px', 'margin': '0 auto 0 auto', 'clear': 'both' }); // Get all the questions to sit politely side by side $( '.qRow1, .qRow2, .qRow3, .qRow4' ).css({ 'float': 'left' }); $( '.inlineQuestion .survey-question-help' ).parent().hide(); //////// 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.text-short td.questiontext, div.list-dropdown td.questiontext, div.yes-no td.questiontext, div.numeric td.questiontext').parent().hide(); // Push the question tables to 100% $( 'div.qRow1 table, div.qRow2 table, div.qRow3 table, div.qRow4 table' ).css({ 'width': '100%' }); // Get everything to line up nicely vertically $( 'td.questiontext, td.answer p' ).css({ 'text-align': 'center' }); // Adjust cell heights so everything lines up nicely horizontally $( 'td.answer, td.questiontext' ).css({ 'height':'35px', 'overflow':'hidden' }); $( '.inlineQuestion' ).css({ 'height':'40px', 'overflow':'hidden' }); // 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'}); // Reduce the space caused by the question help table $( '.qRow1, .qRow2, .qRow3' ).css({ 'margin-bottom': '-8px' }); } }); </script>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- phpsurvey
-
Topic Author
- Offline
- Junior Member
-
Less
More
- Posts: 29
- Thank you received: 0
13 years 4 months ago #53540
by phpsurvey
Replied by phpsurvey on topic Multiple question types in array modifiy
nice.... :silly:
The topic has been locked.
- holch
-
- Away
- LimeSurvey Community Team
-
Less
More
- Posts: 11658
- Thank you received: 2742
13 years 4 months ago #53543
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on topic Multiple question types in array modifiy
I am still wondering what the trailing slash is doing here:
<div id="inlineWrapper1" />
I thought that a DIV always needs an opening tag and an closing tag and can not be used like IMG or similar with just one tag?
<div id="inlineWrapper1" />
I thought that a DIV always needs an opening tag and an closing tag and can not be used like IMG or similar with just one tag?
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
- tpartner
-
- Offline
- LimeSurvey Community Team
-
Less
More
- Posts: 10109
- Thank you received: 3595
13 years 4 months ago - 13 years 4 months ago #53545
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Multiple question types in array modifiy
Hi holch, that trailing slash does close the tag and is valid XHTML.
In this case it doesn't matter though because that tag is just in the script and the actual generated HTML will be:
In this case it doesn't matter though because that tag is just in the script and the actual generated HTML will be:
Code:
<div id="inlineWrapper1">...</div>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 13 years 4 months ago by tpartner.
The topic has been locked.
- tpartner
-
- Offline
- LimeSurvey Community Team
-
Less
More
- Posts: 10109
- Thank you received: 3595
13 years 4 months ago #53546
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on 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.
The topic has been locked.
- holch
-
- Away
- LimeSurvey Community Team
-
Less
More
- Posts: 11658
- Thank you received: 2742
13 years 4 months ago #53548
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on 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.
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 answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
- phpsurvey
-
Topic Author
- Offline
- Junior Member
-
Less
More
- Posts: 29
- Thank you received: 0
13 years 4 months ago #53601
by phpsurvey
Replied by phpsurvey on topic Multiple question types in array modifiy
My questions have a different size(height). I want to set the height variable like
or
But this doesn't works. How can I set the questions to a different height???
Code:
'height':'100%'
or
Code:
'min-height':'30px'
But this doesn't works. How can I set the questions to a different height???
Code:
// Adjust cell heights so everything lines up nicely horizontally $( 'td.answer, td.questiontext' ).css({ 'height':'35px', 'overflow':'hidden' });
The topic has been locked.
- tpartner
-
- Offline
- LimeSurvey Community Team
-
Less
More
- Posts: 10109
- Thank you received: 3595
13 years 1 month ago #58772
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Multiple question types in array modifiy
Option 5?
Can you provide a screenshot showing what you want?
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.
The topic has been locked.
- phpsurvey
-
Topic Author
- Offline
- Junior Member
-
Less
More
- Posts: 29
- Thank you received: 0
13 years 1 month ago - 13 years 1 month ago #58773
by phpsurvey
Replied by phpsurvey on topic Aw: Re:Multiple question types in array modifiy
this is what i wanted to post :
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 !!!
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.
Code:<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: 13 years 1 month ago by phpsurvey.
The topic has been locked.
- phpsurvey
-
Topic Author
- Offline
- Junior Member
-
Less
More
- Posts: 29
- Thank you received: 0
13 years 1 month ago #58789
by phpsurvey
Replied by phpsurvey on 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
$('.inlineWrapper *').css({
'padding': '0',
'margin':'0',
'margin-top':'-5px'
});
with margin-top - 5px you get it
The topic has been locked.
- BodasDeSangre
-
- Offline
- New Member
-
Less
More
- Posts: 3
- Thank you received: 0
13 years 1 week ago #59641
by BodasDeSangre
Replied by BodasDeSangre on 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.
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:
The topic has been locked.