- Posts: 222
- Thank you received: 10
Ask the community, share ideas, and connect with other LimeSurvey users!
LouisGac wrote: I recently created a survey theme to be able to create those kind of arrays. It will be available on premium themes when it will be deeply tested. You'll find it attached to this post. I've also attached a demo survey using it.
The idea is this one:
just add "row_1" in the class of the questions you want in the first row of the array, row_2 for the second row, etc
feel free to ask for more questions here.
// Move textareas into modals $('#comments-'+qArrayID+'-'+(i+1)+' .modal-body').append($('textarea', this));
tpartner wrote: In your case, you will need to place the entire upload question into a modal. Can you provide a small test survey?
<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 qUploads = qArray.nextAll('.upload-files:lt('+arrayLength+')'); // Add some classes qArray.addClass('array-with-uploads-question'); $(qUploads).each(function(i) { $(this).addClass('uploads-question index-'+i).css({ 'position': 'absolute', 'left': '-9999em' }); }); // Insert the "Upload" 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="#upload-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>\ </td>'); }); // Loop through the upload questions $(qUploads).each(function(i) { // Create a modal $('body').append('<div class="modal upload-modal" id="upload-'+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>\ </div>\ </div>\ </div>\ </div>'); // Move this question into the modal $('#upload-'+qArrayID+'-'+(i+1)+' .modal-body').append($(this)); $(this).css({ 'position': 'relative', 'left': 'auto' }); }); // Interrupt the Next/Submit function (to put upload questions back in the form) $('#ls-button-submit').on('click', function(e) { $('.upload-modal').each(function(i) { $('.upload-files', this).css({ 'position': 'absolute', 'left': '-9999em' }); $('.group-container').append($('.upload-files', this)); }); }); }); </script>