Welcome to the LimeSurvey Community Forum

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

How to create a question with the option to add another line?

  • DOwen
  • DOwen's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 5 months ago #126453 by DOwen
Hey Ben, thanks for this!

However just tried it out but can't seem to get it working; no '+' symbols are showing...
The topic has been locked.
  • DOwen
  • DOwen's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 5 months ago #126455 by DOwen

Mazi wrote:

DOwen wrote: The survey should now be public so you can check it out. (May take 10 mins as of this email)

Though there are no JavaScript errors the structure of your survey HTML seems to differ so the JavaScript can't access the needed elements.

Check the JS and compare the elements it deals with step by step. I assume due to different HTML elements the script doesn't trigger the correct elements.


Just tried to see if I could pick out any issues with the HTML vs the JS, but struggling. Javascript is not my best skill unfortunately!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 5 months ago #126458 by tpartner
DOwen, the linked survey is not accessible. Can you please attach a sample exported .lss file containing only your array question and the associated JavaScript and an exported zip of your template?

I am just returning from vacation so won't have a lot of free time for the next few days but I'll try to have a quick look.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • DOwen
  • DOwen's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 5 months ago #126459 by DOwen
Hi tpartner, thanks for this!

I had just temporarily taken down the survey but its back up again now. The questions haven't been edited much, just want to make sure the functionality we need works first.

I appreciate you taking time to take a look, thanks!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 5 months ago #126462 by tpartner
Hmm, that workaround is outdated. Can you please attach a sample exported .lss file containing only your array question and the associated JavaScript?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • DOwen
  • DOwen's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 5 months ago - 8 years 5 months ago #126463 by DOwen
Hey tpartner, I've uploaded a LSQ file, is this OK? Is there a particular method to follow to send you what you require?

Thanks!
Last edit: 8 years 5 months ago by DOwen.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 5 months ago - 8 years 5 months ago #126466 by tpartner
Here is an updated script to apply the expandable array workaround to an array-texts type question in LS 2.06. (You will find this script in the source of the array question in the attached survey below.)

Code:
<script type="text/javascript" charset="utf-8">    
  $(document).ready(function(){
    variableLengthTextArray({QID});
  })
 
  function variableLengthTextArray(qID) {  
 
    var thisQuestion = $('#question'+qID);
    thisQuestion.addClass('variable-length-text-array');
 
    // Insert some styles
    $('<style type="text/css">\
      .hidden {\
        display: none !important;\
        visibility: hidden !important;\
      }\
      .expandable-control:disabled {\
      opacity: 0.3;\
      }\
    </style>').appendTo('head');
 
    // Insert the controls
    $('table.subquestions-list', thisQuestion).after('<div class="expandable-controls-wrapper">\
                              <button type="button" class="expandable-control remove">-</button>\
                              <button type="button" class="expandable-control add">+</button>\
                            </div>');
 
    // Click events
    $('.expandable-control.add', thisQuestion).click(function (event) {
      $('tr.subquestion-list.hidden:first', thisQuestion).removeClass('hidden').addClass('shown');
      handleArrayControls();
      $('.expandable-control', thisQuestion).blur();
    });
    $('.expandable-control.remove', thisQuestion).click(function (event) {
      $('tr.subquestion-list.shown:last', thisQuestion).removeClass('shown').addClass('hidden');
      clearRows();
      handleArrayControls();
      $('.expandable-control', thisQuestion).blur();
    });
 
    function handleArrayControls() {
      $('.expandable-control.remove', thisQuestion).prop('disabled', true);
      if($('tr.subquestion-list:visible', thisQuestion).length > 1) {
        $('.expandable-control.remove', thisQuestion).prop('disabled', false);
      }
      $('.expandable-control.add', thisQuestion).prop('disabled', false);
      if($('tr.subquestion-list:visible', thisQuestion).length == $('tr.subquestion-list', thisQuestion).length) {
        $('.expandable-control.add', thisQuestion).prop('disabled', true);
      }
    }
 
    function clearRows() {
      $('tr.subquestion-list.hidden input:text', thisQuestion).val('');
    }
 
    // Initially shown rows
    $('tr.subquestion-list:eq(0)', thisQuestion).addClass('shown');
    $('tr.subquestion-list:gt(0)', thisQuestion).addClass('hidden');
    $('tr.subquestion-list input:text', thisQuestion).filter(function () {return !!this.value;}).closest('tr.subquestion-list').addClass('answered-row');
    var thisQTable = $('table.subquestions-list', thisQuestion);
    var thisQRows = $('.answered-row', thisQuestion);
    var lastAnsweredRow = $('.answered-row:last', thisQuestion);
    var lastAnsweredIndex = $('tr.subquestion-list', thisQTable).index(lastAnsweredRow);
    $('tr.subquestion-list:lt('+(lastAnsweredIndex+1)+')', thisQuestion).removeClass('hidden').addClass('shown');
    handleArrayControls();
  }
</script>

File Attachment:

File Name: limesurvey...55-2.lss
File Size:19 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 8 years 5 months ago by tpartner.
The following user(s) said Thank You: Ben_V, DOwen
The topic has been locked.
  • DOwen
  • DOwen's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 5 months ago #126472 by DOwen
Oh excellent, thank you Tony! Really useful and appreciate your time putting this together.

At present, it adds just one line at a time. What I need it to do is present all 3 fields (3 fields per product), then when the + button is clicked, another 3 fields will appear to add another product. Have just attempted to solve this myself but looks like I keep breaking it...
The topic has been locked.
More
8 years 5 months ago #126479 by first
tpartner.. the setup looks just awwwsoooooome:). I also created similar setup in a different programming tool 2 days before but this one is very nice.....I will adapt my code according to yours...

Survey Designer and Programmer
The topic has been locked.
  • DOwen
  • DOwen's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 5 months ago #126483 by DOwen
Hey Tony,

Sorry ignore my previous reply. I had a dull moment! Didn't create the answer fields correctly.

Works great! I was wondering if some array fields can be larger than others? Is this possible? The 'Additional Information' field may need a paragraph of text...
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 5 months ago #126539 by tpartner
The only way I see to do that would be to insert following long-text questions and then use JavaScript to move those textareas into the array cells. I don't have time to code that but you may find similar examples in the forum.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • DOwen
  • DOwen's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 5 months ago #126562 by DOwen
Not sure I'll be able to move anything around with JS myself but ill take a look around and see if I can find anything that might help.

Would it be possible to drop Additional Information (ie, the third and last array field) onto a second row underneath? I also have another question to create which has 5 array fields instead of 3 so it would be good to display these over 2 or more rows...
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose