tpartner wrote: Okay, here is updated JavaScript for 3.x.

[EDIT]24/08/2018 - Submit function modified to fix "Save and Resume Later" bug.[/EDIT]

Code:

<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify the questions
    var qArrayID = {QID};
    var qArray = $('#question'+qArrayID);
    var arrayLength = $('tr.answers-list', qArray).length;
    var qComments = qArray.nextAll('.text-long:lt('+arrayLength+')');
 
    // Add some classes
    qArray.addClass('array-with-comments-question');
    $(qComments).each(function(i) {
      $(this).addClass('comments-question index-'+i).css({
        'position': 'absolute',
        'left': '-9999em'
      });
    });
 
    // Insert the comments buttons
    $('table.questions-list colgroup', qArray).append('<col />');
    var tableWidth = $('table.questions-list:eq(0)', qArray).width();
    var answerWidth = $('col.ls-col-odd:eq(0)', qArray).width();
    var answerWidthPercent = (answerWidth/tableWidth)*100;
    var answersLength = $('col.ls-col-odd, col.ls-col-even', qArray).length;
    var answerWidthPercent2 = (answerWidthPercent*answersLength)/(answersLength+1)
    $('table.questions-list col', qArray).removeAttr('width');
    $('table.questions-list col:not(.col-answers)', qArray).css('width', answerWidthPercent2+'%');
    $('table.questions-list col:not(.col-answers)', qArray).css('width', 'auto');
    $('table.questions-list thead tr', qArray).append('<td />');
    $('tr.answers-list', qArray).each(function(i) {
      $(this).append('<td class="answer-item">\
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#comments-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Comments</button>\
              </td>');
    });
 
    // Handle comments
    $(qComments).each(function(i) {
      // Create modals
      $('body').append('<div class="modal comments-modal" id="comments-'+qArrayID+'-'+(i+1)+'" tabindex="-1" role="dialog">\
                <div class="modal-dialog" role="document">\
                  <div class="modal-content">\
                    <div class="modal-header">\
                      <h5 class="modal-title">'+$('.ls-label-question', this).html()+'</h5>\
                    </div>\
                    <div class="modal-body">\
                    </div>\
                    <div class="modal-footer">\
                      <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Okay</button>\
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Clear</button>\
                    </div>\
                  </div>\
                </div>\
              </div>');
 
      // Move textareas into modals
      $('#comments-'+qArrayID+'-'+(i+1)+' .modal-body').append($('textarea', this));
 
      // Modal button events
      $('#comments-'+qArrayID+'-'+(i+1)+' .modal-footer .btn-secondary').on('click', function(e) {
        $('#comments-'+qArrayID+'-'+(i+1)+' textarea').val('');
      });
 
    });
 
    // Interrupt the Next/Submit function (to put comments back in the form)
    $('#limesurvey').submit(function(e) {  
      $('.comments-modal').each(function(i) {
        var qID = $('textarea:eq(0)', this).attr('id').split('X')[2];
        $('#question'+qID+' .answer-item:eq(0)').append($('textarea:eq(0)', this));
      });
    });  
  });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...1749.lss
File Size:23 KB

Hi Tony!

Could you please test the script again, as the Next/Submit part is still not working properly. It is kinda buggy. When used in an active survey with tokens, then it does not allow both 'Resume later' link or 'Index menu' to save or change groups. Only the Next button works. Also, when you click on the Previous button to check that page, sometimes you see another column created and what was written in text boxes is lost (see the screenshot below).

I have several surveys that rely on these workarounds and it will be a disaster.
If you manage to correct that it would help a lot, since this problem occurs in all other similar scripts. For example, the list-with-comments questions in modals that you posted the last here.
I have tested in LS 3.15 & 16.
Many thanks in advance!

EDIT: I have also found that the issue occurs when there are at least two of such a question on the same page.
I have created a text survey where one of the issues happens - the Resume later and Index menu do not work unless you click on Next afterwards. But it doesn't clear the text when you then click on Previous, like in other cases. It is strange that it behaves differently.
monitoringhsd.limequery.com/681749?token=TEST&newtest=Y

Disable AJAX in the survey theme options.

tpartner wrote: Disable AJAX in the survey theme options.

Thanks, Tony! Disabling AJAX has solved the issue with creating extra copies of the column, but it didn't solve the issue with Resume later & Question Index when there are two questions with this workaround in the same question group. Please see the link to an active survey or the attached copy. Do 'Resume later' and 'Question Index' work for you?

Here is an updated script that fixes that bug:


Sample survey attached:

Excellent! Many thanks. :woohoo: I can see what you have changed.
So, I have used the update to correct the other scripts in this thread too.

If using the list-with-comments version with resume, previous, or index active, then two lines after "// Interrupt the Next/Submit function (to put comments back in the form)" (the last comment),
change: $('.comments-modal').each(function(i) {
to: $('.comments-modal[id^="comments-'+qArrayID+'-"]').each(function(i) {


(This is the same change that @krosser refers to in the post just before this for updating the long free text comment version.)