Welcome to the LimeSurvey Community Forum

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

Display number of rows in array question based on previous numerical input

  • ricardo01
  • ricardo01's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
10 years 10 months ago - 10 years 10 months ago #95371 by ricardo01
I'd like to create an array question that only displays certain number of rows based on a response to a previous numerical input.

In this example, if a person says that she teaches 2 courses (#1), question 2 should display only 2 rows (#2)






is it possible to do this?

Thanks
Last edit: 10 years 10 months ago by ricardo01. Reason: wrong pic
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 10 months ago #95385 by tpartner
If both questions are on the same page as your image indicates, add this to the source of the numeric question.
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
 
    // Identify the questions
    var q1ID = '{QID}';
    var q1 = $('#question'+q1ID+'');
    var q2 = $(q1).nextAll('.array-multi-flexi-text:eq(0)'); 
    var q2ID = $(q2).attr('id').split('question')[1];
 
    // Initial row handling
    handleRows($('input[type="text"]', q1));
 
    // Listener on the numeric input
    $('input[type="text"]', q1).change(function(){
      var maxRows = $('tr:[id^="javatbd"]', q2).length;
      if($(this).val() > maxRows) {
        alert('You can only display a maximum of '+maxRows+' rows!');
        $(this).val('');
      }
      else {
        handleRows(this);
      }
    });
 
    function handleRows(el) {
      var numRows = $(el).val();
      $('tr:[id^="javatbd"]', q2).hide();
      $('tr:[id^="javatbd"]', q2).each(function(i){
        if(i >= numRows) {
          $('input[type="text"], select', this).val('');
        }
        else {
          $(this).show();
        }
      })
    }
  });
</script>

Here's a sample survey:

File Attachment:

File Name: limesurvey...4-28.lss
File Size:19 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • ricardo01
  • ricardo01's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
10 years 10 months ago #95387 by ricardo01
As always, Thank you very much, Tony.

ricardo
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 10 months ago #95391 by tpartner
You're welcome :). Enjoy your Sunday.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • ricardo01
  • ricardo01's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
10 years 10 months ago #95763 by ricardo01
Hi Tony,

There small glitch in this workaround

The rows don't display as soon as the number is entered...they only show up after clicking somewhere else...is there a way to make the rows appear as soon as the number is entered.




this is a link to the question broaderimpacts.org/surveys/limesurvey/index.php/289571/lang-en

rg
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 10 months ago #95776 by tpartner
That is not a "glitch", it is by design.

The handleRows() function is not fired until the respondent is finished inputting their value (the input is de-focussed) to avoid "bouncing" if you have more than 9 rows. (if someone enters 12, it would first show 2 rows and then 12)

If have less than 10 rows, change this:
Code:
$('input[type="text"]', q1).change(function(){

To this:
Code:
$('input[type="text"]', q1).mouseup(function(){

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • ricardo01
  • ricardo01's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
10 years 10 months ago #95786 by ricardo01
thanks, Tony

Also, is it possible to make the array question mandatory? This is what it looks now. In this example, only info about 3 courses should be entered...but still the person gets the warning


Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 10 months ago #95798 by tpartner
The easiest way to handle that would be to populate all of the hidden text inputs with an "N/A" value.

So, the script in the "How many courses..." question would become:
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
 
    // Identify the questions
    var q1ID = '{QID}';
    var q1 = $('#question'+q1ID+'');
    var q2 = $(q1).nextAll('.array-multi-flexi-text:eq(0)'); 
    var q2ID = $(q2).attr('id').split('question')[1];
 
    // Initial row handling
    handleRows($('input[type="text"]', q1));
 
    // Listener on the numeric input
    $('input[type="text"]', q1).mouseup(function(){
      var maxRows = $('tr:[id^="javatbd"]', q2).length;
      if($(this).val() > maxRows) {
        alert('You can only display a maximum of '+maxRows+' rows!');
        $(this).val('');
      }
      else {
        handleRows(this);
      }
    });
 
    function handleRows(el) {
      var numRows = $(el).val();
      $('tr:[id^="javatbd"]', q2).hide();
      $('tr:[id^="javatbd"]', q2).each(function(i){
        if(i >= numRows) {
          $('input[type="text"], select', this).val('');
        }
        else {
          $(this).show();
        }
      })
    }
 
    // Interrupt next/submit function
    $('form#limesurvey').submit(function(){
 
      // Load hidden inputs
      $('.subquestions-list tr:hidden input[type="text"]', q2).val('N/A');
 
      // Carry on with submit
      return true;
    });
  });
</script>

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: oppur
The topic has been locked.
More
10 years 9 months ago #96331 by oppur

tpartner wrote: If both questions are on the same page as your image indicates, add this to the source of the numeric question.

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
 
    // Identify the questions
    var q1ID = '{QID}';
    var q1 = $('#question'+q1ID+'');
    var q2 = $(q1).nextAll('.array-multi-flexi-text:eq(0)'); 
    var q2ID = $(q2).attr('id').split('question')[1];
 
    // Initial row handling
    handleRows($('input[type="text"]', q1));
 
    // Listener on the numeric input
    $('input[type="text"]', q1).change(function(){
      var maxRows = $('tr:[id^="javatbd"]', q2).length;
      if($(this).val() > maxRows) {
        alert('You can only display a maximum of '+maxRows+' rows!');
        $(this).val('');
      }
      else {
        handleRows(this);
      }
    });
 
    function handleRows(el) {
      var numRows = $(el).val();
      $('tr:[id^="javatbd"]', q2).hide();
      $('tr:[id^="javatbd"]', q2).each(function(i){
        if(i >= numRows) {
          $('input[type="text"], select', this).val('');
        }
        else {
          $(this).show();
        }
      })
    }
  });
</script>

Here's a sample survey:

File Attachment:

File Name: limesurvey...4-28.lss
File Size:19 KB


Thank you. This work fine in Chrome, Safari, IE8. But not in IE10.
The topic has been locked.
More
10 years 9 months ago - 10 years 9 months ago #96350 by oppur
I found a temporary solution:
If I add to template startpage.pstpl
Code:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
then this script work on IE10
Last edit: 10 years 9 months ago by oppur.
The topic has been locked.
More
9 years 4 months ago - 9 years 4 months ago #113895 by envitera
Hi, after variety solutions and posts red on this forum i consider myself no more than a fresh beginner in LS environment and even less in javascript.

As an introduction to my survey I'd like to construct a set of similar questions as the OP. That is reading a number which toggles row visibility in the following question. Does this solution here work with version 2.05+ ?

Alternative convenient solution would be to use Variable Length Array , which also didn't work for me. I've found this correction , but without luck. Finally i've tried to alter the simplified version to make it work with "array-multi-flexi-text", but without success.

Can someone give a feedback about functionality of those codes with the latest version of LS ?

As I am not at all experienced with javascript I was bouncing during a long time around the idea of subquestion relevance , but then found out that this might be implemented in the version 2.06.
Last edit: 9 years 4 months ago by envitera. Reason: expressions correction
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 4 months ago #113906 by tpartner
This works in 2.05:

Code:
<script type="text/javascript" charset="utf-8">  
  $(document).ready(function(){
 
    // Identify the questions
    var q1ID = '{QID}';
    var q1 = $('#question'+q1ID+'');
    var q2 = $(q1).nextAll('.array-multi-flexi-text:eq(0)'); 
    var q2ID = $(q2).attr('id').split('question')[1];
 
    // Initial row handling
    handleRows($('input[type="text"]', q1));
 
    // Listener on the numeric input
    $('input[type="text"]', q1).change(function(){
      var maxRows = $('tr.subquestion-list', q2).length;
      if($(this).val() > maxRows) {
        alert('You can only display a maximum of '+maxRows+' rows!');
        $(this).val('');
      }
      else {
        handleRows(this);
      }
    });
 
    function handleRows(el) {
      var numRows = $(el).val();
      $('tr.subquestion-list', q2).hide();
      $('tr.subquestion-list', q2).each(function(i){
        if(i >= numRows) {
          $('input[type="text"], select', this).val('');
        }
        else {
          $(this).show();
        }
      })
    }
  });
</script>

File Attachment:

File Name: limesurvey...4517.lss
File Size:19 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: envitera
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose