LimeSurvey version: 5.x Own server or LimeSurvey Cloud: Own Survey theme/template: fruity
==================
I have a text array with 10 columns. I'd like to know how I can replace the last column with a comment button (textarea) for each row like the image attached.
PLUS: Would it also be possible to implement a flexible text array (dynamic rows)? Adding/Removing visibility of each row...
I only changed the question type to "long text", and in the script the reference from "upload-files" to "text-long". (and all other mentions of "upload" to "comment" for better readability)
Code:
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify the questions
var qArrayID = '{QID}';
var qArray = $('#question'+qArrayID);
var arrayLength = $('tr[id^="javatbd"]', qArray).length;
var qComments = qArray.nextAll('.text-long:lt('+arrayLength+')');
// Add some classes
qArray.addClass('array-with-comments-question');
$(qComments).addClass('hidden');
// Insert the "Upload" buttons
$('tr[id^="javatbd"] .answer-item:last-child', qArray).each(function(i) {
$('*', this).remove();
$(this).append('<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#comment-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Comment</button>');
});
// Loop through the upload questions
$(qComments).each(function(i) {
// Create a modal
$('body').append('<div class="modal comment-modal" id="comment-'+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()+'Please, enter your comment</h5>\
</div>\
<div class="modal-body">\
</div>\
<div class="modal-footer">\
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>\
</div>\
</div>\
</div>\
</div>');
// Move this question into the modal
$('#comment-'+qArrayID+'-'+(i+1)+' .modal-body').append($(this));
$(this).removeClass('hidden');
});
// Interrupt the Next/Submit function (to put upload questions back in the form)
$('#ls-button-submit').on('click', function(e) {
$('.comment-modal .text-long').appendTo($('.group-container:eq(0)')).addClass('hidden');
});
});
</script>
<style data-author="Tony Partner" type="text/css">
.comment-modal .comment-modal.in {
height: max-content;
}
</style>
I have a text array with 10 columns. I'd like to know how I can replace the last column with a comment button (textarea) for each row like the image attached.
