- Posts: 1
- 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 - hiding question "area"
- glesko
- Topic Author
- Offline
- New Member
Less
More
8 years 7 months ago #123387
by glesko
Multiple question types in array - hiding question "area" was created by glesko
Hello,
I am using version 2.05 build 150310. What I'm trying to achieve is a 3-column table question, where in each row:
- first column containts some statement, ie. "I like dogs"
- second column has choice selection (radio), only 2 options
- third columns contains some other statement ie. "I prefer cats"
(in each row, respondent has to select the statement with which they agree more)
Ideally it should look like this:
Statement 1a ○ ○ Statement 1b
Statement 2a ○ ○ Statement 2b
Statement 3a ○ ○ Statement 3b
Statement Na ○ ○ Statement Nb
Of course, I could go just for series of normal single choice questions, but I specifically want to make it fit in a table (series of rows in fact), to make the filling of the survey less painful for the respondents (I am planning to add lots of statements)
I have read the workaround section in the manual and used the "Multiple question types in array" workaround to achieve something which is close (see attachment and code below), but I have problem hiding the gray question field in the second column, so that I just display the radio selection, between the statements.
Do you have an idea how I could achieve that? Or maybe are there some alternative ways of achieving that kind of question? Thank you in advance!
I am using version 2.05 build 150310. What I'm trying to achieve is a 3-column table question, where in each row:
- first column containts some statement, ie. "I like dogs"
- second column has choice selection (radio), only 2 options
- third columns contains some other statement ie. "I prefer cats"
(in each row, respondent has to select the statement with which they agree more)
Ideally it should look like this:
Statement 1a ○ ○ Statement 1b
Statement 2a ○ ○ Statement 2b
Statement 3a ○ ○ Statement 3b
Statement Na ○ ○ Statement Nb
Of course, I could go just for series of normal single choice questions, but I specifically want to make it fit in a table (series of rows in fact), to make the filling of the survey less painful for the respondents (I am planning to add lots of statements)
I have read the workaround section in the manual and used the "Multiple question types in array" workaround to achieve something which is close (see attachment and code below), but I have problem hiding the gray question field in the second column, so that I just display the radio selection, between the statements.
Do you have an idea how I could achieve that? Or maybe are there some alternative ways of achieving that kind of question? Thank you in advance!
Code:
Sentence 1<script type="text/javascript" charset="utf-8"> $(document).ready(function() { sideBySide(3, 3, 2); }); function sideBySide(rows, columns, startQuestion) { if ($('div.qRow1').length == 0) { var rowNum = 0; var colNum = 1; var rowList = new Array(); $('div[id^="question"]').each(function(i) { if(i >= (startQuestion-1) && rowNum < rows) { $(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'); } }); $('table.outerframe').css({ 'width': '1200px' }); $(rowList).each(function(i) { $('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />'); }); $('.inlineRow').css({ 'width': '1100px', 'margin': '0 auto 0 auto', 'clear': 'both' }); $( '.inlineRow:first' ).css({ 'margin-top': '10px' }); $( '.inlineQuestion' ).css({ 'float': 'left', 'height':'80px', 'overflow':'hidden', 'margin-bottom': '-15px' /* 'margin-top': '-30px' */ }); $( '.inlineQuestion .questionhelp' ).hide(); $( '.inlineQuestion .survey-question-help' ).parent().hide(); $( '.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': '35%' }); $( '.qCol2' ).css({ 'width': '14%' }); $( '.qCol3' ).css({ 'width': '35%' }); //////// Question manipulation //////// // Hide the answer element in boilerplate questions $( 'div.boilerplate td.answer' ).parent().hide(); /* hidden $('div.boilerplate td.questiontext').parent().show(); */ // Hide the question text elements in non-boilerplate questions $('div.questionCell td.questiontext').hide(); /* below line seems to not change anything */ $('div.array td.questiontext').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' ).css({ 'height':'35px', 'overflow':'hidden', 'padding':'0.5em' }); $( '.inlineQuestion td.questiontext' ).css({ 'height':'5px', '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': '0%', 'margin-top': '-20px', '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>
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10612
- Thank you received: 3691
8 years 7 months ago #123423
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 - hiding question "area"
Please refer to the manual - Array, Semantic Differential -
manual.limesurvey.org/Question_type_-_Array
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.