<script type="text/javascript" charset="utf-8">  
 
  $(document).ready(function() {
 
    // Identify the questions
    var qArray = $('#question{QID}');
    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);
      $(this).append('<div class="modal-footer file-upload-modal-footer"><button class="comment-btn btn btn-success"  type="button">Save changes</button></div>');
    });
 
    // Insert the comments buttons
    $('table.questions-list col', qArray).removeAttr('width');
    $('table.questions-list thead tr', qArray).append('<td />');
    $('tr.answers-list', qArray).each(function(i) {
      $(this).append('<td><button class="comment-button" style="width:86px" type="button" data-index="'+i+'">Comments</button></td>');
    });
 
    // Put the comments questions into modal dialogs    
    $(qComments).dialog({
      autoOpen: false,
      width: 372,
      modal: true,
      resizable: false,
      draggable: false,
      closeOnEscape: true
    });
 
    // Click events for comments buttons
    $('.comment-button').click(function() {
      var thisIndex = $(this).attr('data-index');
      $('.comments-question.index-'+thisIndex).dialog('open');
    });
    $('.comment-btn').click(function() {
      $(qComments).dialog('close');
    }); 
 
    // Interrupt the Next/Submit function (to put comments back in the form)
    $('#movenextbtn, #movesubmitbtn').bind('click', function () {      
      qComments.hide();
      $('#limesurvey').append(qComments);
    });    
 
  });
 
</script>

<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>

<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
    console.log(new Date());
 
    // Identify the questions
    var qArrayID = {QID};
    var qArray = $('#question'+qArrayID);
    var arrayLength = $('tr.answers-list', qArray).length;
    var qComments = qArray.nextAll('.list-with-comment: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
    if($('button[data-bs-toggle="modal"]', qArray).length == 0) {
      $('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 list-with-comments questions into modals
        $('#comments-'+qArrayID+'-'+(i+1)+' .modal-body').append($('div.answer-container', this)).append($('<div class="clearfix" />'));
 
        // Modal button events
        $('#comments-'+qArrayID+'-'+(i+1)+' .modal-footer .btn-secondary').on('click', function(e) {
          $('#comments-'+qArrayID+'-'+(i+1)+' input:radio').each(function(i) {
            $(this).prop('checked', false);
            checkconditions($(this).attr('value'), $(this).attr('name'), 'radio');
          });
          $('#comments-'+qArrayID+'-'+(i+1)+' textarea').val('').trigger('change');
        });
 
      });
 
      // Interrupt the Next/Submit function (to put comments back in the form)
      $('#limesurvey').submit(function(e) {
        $('.comments-modal').each(function(i) {
          var qID = $('input:radio:eq(0)', this).attr('name').split('X')[2];
          $('#question'+qID).append($('div.answer-container', this));
        });
      });  
    }
  });
</script>