Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

2 arrays in the same group using "Multiple question types in array"

  • RaCMJS
  • RaCMJS's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 10 months ago #119682 by RaCMJS
Is it possible to use 2 arrays in the same group using "Multiple question types in array" ( manual.limesurvey.org/Workarounds:_Quest...ayout_and_templating )?

I can't get this to work and I can't figure out whether this just cant be done or whether I am not specifying the start position for the second array correctly.

I have 3 "regular" questions, then the array (3 rows (including header) 3 columns) and then another 3 "regular" questions and then the second array (3 rows (including header) 3 columns). Is the position in the second array the actual position - number of question preceding?

Thanks.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 10 months ago #119722 by tpartner
That workaround was not intended to be used with arrays.

I think you'll need to place the 2 groups of 3 "regular" questions in <div> elements and then use CSS to align those divs side-by-side with the array questions. CSS and jQuery details would depend on the question types and template.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • RaCMJS
  • RaCMJS's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 10 months ago #119737 by RaCMJS
Tony,
Thanks for the reply. I don't understand why you said that this work around is not for arrays - the code I copied from the page I mentioned is specifically for arrays. I am uploading the survey so you can see what I mean (should have done this the first time). For some reason, the layout is not perfect on the default template, but it's good enough to demonstrate the issue. The code that creates the first side by side array for the first array is in the "blanskpace" questions source code in the survey. This bit works fine. Then, for the second side by side array the code is placed in the source code of r921q0.

In the example given on the workaround page, the instructions say that the code should specify number of rows, columns and start position of the side by side.

$(document).ready(function() {
// Call the "sideBySide" function with number of rows, columns and start position
sideBySide(4, 5, 3);
});

I am not sure if the reason this is not working in the second array is that position is variable based on the number of rows in the first array. If that is an issue - how do you get around that?

Many thanks!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 10 months ago - 8 years 10 months ago #119738 by tpartner

I don't understand why you said that this work around is not for arrays...

Because I wrote the " Multiple question types in array " workaround and it is not for array type questions - it is to simulate an array with different single-answer question types.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 8 years 10 months ago by tpartner.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 10 months ago - 8 years 10 months ago #119746 by tpartner
After looking at your survey, I see that you are not using array type questions but are applying the sideBySide() function more than once on a page which it was not intended to handle. Additionally, you have the wrong start number for the second group (should be 42) and I don't understand your use of long-text questions instead of text-displays.

Having said that, here is a modified script that should handle your case:

Code:
<script type="text/javascript" charset="utf-8">  
  $(document).ready(function() {
    // Call the "sideBySide" function with number of rows, columns and start position
    sideBySide(11, 3, 5);
    sideBySide(4, 3, 42);
  });
 
  function sideBySide(rows, columns, startQuestion) {
 
  /*********** Display multiple questions side by side ***********/
 
    var rowNum = 0;
    var colNum = 1;
    var rowList = new Array();
    var numQuestions = rows*columns;
    var arrayID = $('div[id^="question"]:eq('+(startQuestion-1)+')').attr('id').replace(/question/, '');
 
    //////// Add question classes for later use ////////
 
    // Loop through all questions and add row and column specific classes
    $('div[id^="question"]:lt('+((startQuestion+numQuestions)-1)+'):gt('+(startQuestion-2)+')').each(function(i) {
      $(this).addClass('qRow-'+arrayID+'-'+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-'+arrayID+'-'+rowNum+'');
        rowNum++;
        colNum = 1;
      }
      else {
        colNum++;
      }
    });
 
    //////// 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 array-'+arrayID+'-row" />');
    });
    $('.array-'+arrayID+'-row').append('<div style="clear:both;" >');
    $('.array-'+arrayID+'-row:last').after('<div style="clear:both; padding-bottom: 20px;" >');
 
    // 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': '-8px'
    });
    $( '.inlineQuestion .questionhelp' ).hide();
    $( '.inlineQuestion .survey-question-help' ).parent().hide();
 
    // 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': '20%'
    });
 
    $( '.qCol2, .qCol3, .qCol4, .qCol5' ).css({
      'width': '39%'
    });
 
    //////// 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 the sample group with that script in the source of "blankspace" (q5):

File Attachment:

File Name: limesurvey...96TP.lss
File Size:136 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 8 years 10 months ago by tpartner.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose