- Posts: 21
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
<button class="btn btn-default btn-xs" data-backdrop="static" data-keyboard="false" data-target="#comments-{QID}-1" data-toggle="modal" type="button">Click to add a comment</button>
<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' }); }); // 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[id^="comments-'+qArrayID+'-"]').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>
Joffm has already supplied a sample survey.kratugoel wrote: Hi
I am trying to implement this solution but I am not able to. Would you happen to have a sample survey depicting this solution? Thank you for the assistance.
This will implement Joffm's last solution in an array-numbers question:I was wondering how to implement the same comment box for array (numbers)
Q1<br /> <button class="btn btn-default btn-xs" data-backdrop="static" data-keyboard="false" data-target="#comments-{QID}" data-toggle="modal" type="button">Click to add a comment</button> <script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ // Identify the questions var qArrayID = {QID}; var qArray = $('#question'+qArrayID); var qComments = qArray.nextAll('.text-long:eq(0)'); // Add some classes qArray.addClass('array-with-comments-question'); $(qComments).each(function(i) { $(this).addClass('comments-question index-'+i).css({ 'position': 'absolute', 'left': '-9999em' }); }); // Create the modal $('body').append('<div class="modal comments-modal" id="comments-'+qArrayID+'" 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', qComments).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 textarea into modal $('#comments-'+qArrayID+' .modal-body').append($('textarea', qComments)); // Modal button events $('#comments-'+qArrayID+' .modal-footer .btn-secondary').on('click', function(e) { $('#comments-'+qArrayID+' textarea').val(''); }); // Interrupt the Next/Submit function (to put comments back in the form) $('#limesurvey').submit(function(e) { $('.answer-item:eq(0)', qComments).append($('#comments-'+qArrayID+' textarea:eq(0)')); }); }); </script>
You will need to be more specific - there are over 75 posts in this thread.Additionally, I was actually seeking a sample survey for the earlier solution provided by him where the large text box appears below the question(without the comment box).
I was actually seeking a sample survey for the earlier solution provided by him where the large text box appears below the question(without the comment box).
<style type="text/css"> .mytext .question-title-container, .mytext .question-valid-container { display:none; } .myarray .question-container { margin-bottom: 0em; } </style>