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

More

8 years 8 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!

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) &amp;&amp; rowNum < rows) { $(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion');
if(rowNum == 0 &amp;&amp; colNum > 1) {
$(this).addClass('columnLabel');
                                        }  
                                        if(rowNum > 0 &amp;&amp; colNum == 1) {
                                                $(this).addClass('rowLabel');
                                        }
                                        else if(rowNum > 0 &amp;&amp; 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>