Welcome to the LimeSurvey Community Forum

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

Multiple question types in array modifiy

More
10 years 11 months ago #94449 by arpsh
Replied by arpsh on topic Multiple question types in array modifiy

zunch2000 wrote: Since i didn't succeed i was wondering if someone could help me adjusting the code for the multiple question types in array which was planned for the default template, to fit the "Limespired" template?


I've had exactly the same problem with the limespired template in getting this workaround to operate - all it ever does is hide the subsequent questions! I have a bank of six short text questions (for people to write in their age) which I want to put next to bank of 6 male/female radio buttons, and I simply can't make it do it!

If you, or anyone else, has had any joy in working this out I would be very interested to know how you did it! ;)

Adam
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 11 months ago #94464 by tpartner
Replied by tpartner on topic Multiple question types in array modifiy
Can you attach a sample survey?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
10 years 11 months ago #94470 by arpsh
Replied by arpsh on topic Multiple question types in array modifiy

tpartner wrote: Can you attach a sample survey?


I would be delighted to ;)


File Attachment:

File Name: Limespired...rray.lss
File Size:21 KB


I think it should be be pretty simple stuff, but I've never got the workarounds to work in Limespired, and my usual method of tinkering with CSS/javascript (i.e. google plus educated guesswork at the expense of any other skills!) has failed me!

Muchas gracias for any help you can give!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 11 months ago #94472 by tpartner
Replied by tpartner on topic Multiple question types in array modifiy
Ah, I see. The "Multiple question types in array" workaround won't work for you because it's designed for individual questions, not array type or multiple-text type questions.

In your case I think it would be easiest to simply create a new column in your array and insert the "Age" text inputs into it.

Here's your survey back with the array question placed before the multiple-text question. The source of the array question contains the script below which:
- Automatically detects the two question elements
- Hides the multiple-text question
- Removes any column width styles imposed by LS on the array
- Inserts a new column in the array
- Inserts a new "Age" header in the array
- Moves the text inputs into the appropriate rows of the array

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
 
    var newHeader = 'Age';
 
    // Identify the questions
    var q1ID = '{QID}';
    var q1 = $('#question'+q1ID+'');
    var q2 = $(q1).nextAll('.multiple-short-txt:eq(0)');
    var q2ID = $(q2).attr('id').split('question')[1];
 
    // Hide the second question
    $(q2).hide();
 
    // Clean up the array widths imposed by LS
    $('.subquestions-list col', q1).css({ 'width':'auto' });
 
    // Insert a new header in the array
    $('.subquestions-list thead td', q1).after('<th>'+newHeader+'</th>');
 
    // Move the age inputs into the array
    $('.answers-list', q1).each(function(i) {
      $('.answertext', this).after('<td class="answer_cell_000"></td>');
    });
    $('input[type="text"]', q2).each(function(i) {
      $('.answer_cell_000:eq('+i+')', q1).append($(this));
    });
 
    // Some styles for the array (this could be done in template.css)
    $('.subquestions-list th, .subquestions-list td', q1).css({ 'padding':'3px 7px' });
  });
</script>


File Attachment:

File Name: Limespired...puts.lss
File Size:22 KB




Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: arpsh
The topic has been locked.
  • lsorg
  • lsorg's Avatar
  • Visitor
  • Visitor
10 years 8 months ago #98523 by lsorg
Replied by lsorg on topic Multiple question types in array modifiy
Hey,

I have successfully insert the workaround in my survey. Thank you very much for the very good workaround in the manual it is very simple and useful.

But one thing I have not find in the code. All Words in the first column are written in bold. How can I format the font in the first column?
In the workaround demo it is the column where stands A), B), C).

Thanks for your help.

Best regards,
lsorg
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 8 months ago #98524 by tpartner
Replied by tpartner on topic Multiple question types in array modifiy
Can you activate a test survey for me to see?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • lsorg
  • lsorg's Avatar
  • Visitor
  • Visitor
10 years 8 months ago #98528 by lsorg
Replied by lsorg on topic Multiple question types in array modifiy
Hello tpartner

here is the test link: Link

Thanks for your efforts.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 8 months ago #98529 by tpartner
Replied by tpartner on topic Multiple question types in array modifiy
Add this to the end of template.css:
Code:
.inlineRow td.questiontext {
  font-weight: normal;
}
 
#inlineWrapper0 td.questiontext {
  font-weight: bold;
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • lsorg
  • lsorg's Avatar
  • Visitor
  • Visitor
10 years 8 months ago - 10 years 8 months ago #98553 by lsorg
Replied by lsorg on topic Multiple question types in array modifiy
Amazing. Thank you very much. It works perfectly now.

Thanks for your help.

Best regards
lsorg


P.S. Now it is time for me to spend some money for this great project. :)
Last edit: 10 years 8 months ago by lsorg.
The topic has been locked.
More
10 years 7 months ago #99427 by arpsh
Replied by arpsh on topic Multiple question types in array modifiy

tpartner wrote: Ah, I see. The "Multiple question types in array" workaround won't work for you because it's designed for individual questions, not array type or multiple-text type questions.

In your case I think it would be easiest to simply create a new column in your array and insert the "Age" text inputs into it.

Here's your survey back with the array question placed before the multiple-text question. The source of the array question contains the script below


A much belated thank you to tpartner for his gracious help getting an alternate workaround for this scenario, which seems to be working perfectly. Your assistance is greatly appreciated, even if it took me a few months to realise I hadn't actually posted a response .... :blush:
The topic has been locked.
More
10 years 4 months ago #101409 by dh_ffm
Hello -

I successfully adopted the 'multiple questions in array' example ( manual.limesurvey.org/images/5/59/Limesurvey_survey_62584.lss ) for my purposes and it worked great - as Long as I used the Default template.

However, we are working with a template which is based on blueandgrey. We discovered an entry in this Forum where this issue was discussed and my colleague made several attempts to adjust the code but so far the result is that either None of the questions is displayed or - and this is the case with this latest Version - all questions are not listed side by side in an Array but one after the other (stacked vertically). And it does this now with both templates - Default and blueandgrey.

Any idea how to fix this?

This is what it Looks like at the Moment:
Test Survey multiple question types in array

Here is the code:
Code:
<script type="text/javascript" charset="utf-8">
 
  $(document).ready(function() { 
 
    // Call the "sideBySide" function with number of rows, columns and start question (?)
    sideBySide(3, 5, 1);   
    });
 
  function sideBySide(rows, columns, startQuestion) {
 
    /*********** 
    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 &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');
        }
      }); 
 
      //////// 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' ).parent().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>
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 4 months ago - 10 years 4 months ago #101486 by tpartner
You have an typo in your script causing a fatal JavaScript error.

This:
Code:
if(rowNum <= rows {

Should be this:
Code:
if(rowNum <= rows) {

Cheers,
Tony Partner

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

Lime-years ahead

Online-surveys for every purse and purpose