Combining upload with Arrays

More
2 months 2 weeks ago - 2 months 2 weeks ago #171947 by krosser
krosser created the topic: Combining upload with Arrays
Hi guys,

I would like to move file uploads to an Array, similar to this...



I wonder if it's possible with JavaScript and if this combo would actually work?

Thanks in advance!

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.
Attachments:
Last Edit: 2 months 2 weeks ago by krosser.

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #171964 by tpartner
tpartner replied the topic: Combining upload with Arrays
You may be able to put the upload questions in modal pop-ups. See here for inspiration - www.limesurvey.org/community/forums/can-...e-text-fields#169932 .

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: krosser

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago - 2 months 2 weeks ago #171965 by krosser
krosser replied the topic: Combining upload with Arrays
That's an interesting idea, Tony. Thank you.
Well, I've tested that survey in the LS 3.13 and the code doesn't work in this version. Unfortunately, my JS level isn't high enough for adjusting the code to that extent yet. I'll play with it.. :)

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.
Last Edit: 2 months 2 weeks ago by krosser.

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #171972 by LouisGac
LouisGac replied the topic: Combining upload with Arrays
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.
Attachments:
The following user(s) said Thank You: tpartner, krosser

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago - 2 months 2 weeks ago #171975 by LouisGac
LouisGac replied the topic: Combining upload with Arrays
here an online Demo for it:
louissseb.limequery.com/672747?newtest=Y&lang=en

(note that any theme extending vanilla can extend mixed_array )

here the same survey with vanilla theme, so you can see the real structure of the survey:

louissseb.limequery.com/894297?lang=en
Last Edit: 2 months 2 weeks ago by LouisGac.
The following user(s) said Thank You: tpartner, krosser

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #171978 by tpartner
tpartner replied the topic: Combining upload with Arrays
@krosser, yes, that solution was developed for 2.x so will need tweaking for 3.x. I am away from the office this week but try Louis' solution and if that doesn't work, I can get you something next week.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #172048 by krosser
krosser replied the topic: Combining upload with Arrays

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.


Thank you very much for sharing this theme, Louis!
Well, I've played with it and, unfortunately, it doesn't fit what I need... It works only for the 5-point-choice question type for radio items and it doesn't spread vertical radios. The structure of questions for such an array is a bit too much for large arrays. So, it seems moving upload buttons over the radio buttons (or putting into a modal) would be less complicating than that.

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.
The following user(s) said Thank You: LouisGac

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #172058 by krosser
krosser replied the topic: Combining upload with Arrays
I've just seen this thread with Tony's awesome workaround for a similar case...
www.limesurvey.org/forum/can-i-do-this-w...omment-fields/168906
I guess this can be modified for uploads in modals rather than comments.

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.
The following user(s) said Thank You: LouisGac

Please Log in or Create an account to join the conversation.

More
2 months 1 week ago #172218 by krosser
krosser replied the topic: Combining upload with Arrays
Okay, so I'm trying to figure out the part of the code that needs modification. I think it's this
// Move textareas into modals
			$('#comments-'+qArrayID+'-'+(i+1)+' .modal-body').append($('textarea', this));

Since it's also a modal, I think it would be stackable modals (a modal inside a modal).. :laugh:

Tony, can you please help with the code on how to move the upload questions?

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.
Attachments:

Please Log in or Create an account to join the conversation.

More
2 months 1 week ago #172219 by tpartner
tpartner replied the topic: Combining upload with Arrays
In your case, you will need to place the entire upload question into a modal. Can you provide a small test survey?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in or Create an account to join the conversation.

More
2 months 1 week ago #172220 by krosser
krosser replied the topic: Combining upload with Arrays

tpartner wrote: In your case, you will need to place the entire upload question into a modal. Can you provide a small test survey?


Yes, sure.

Array + Upload

I'm also trying to include textboxes in the same array for weblinks. This I've done.

File Attachment:

File Name: limesurvey...09-2.lss
File Size:36 KB

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.
Attachments:

Please Log in or Create an account to join the conversation.

More
2 months 1 week ago #172223 by tpartner
tpartner replied the topic: Combining upload with Arrays
This script will place the Upload type questions in modals:

<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-toggle="modal" data-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-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>

Sample survey attached:

File Attachment:

File Name: limesurvey...5262.lss
File Size:35 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: krosser

Please Log in or Create an account to join the conversation.

More
2 months 1 week ago #172225 by krosser
krosser replied the topic: Combining upload with Arrays
Cool! Thanks, Tony.

I see that the code breaks the text fields relocation part when executed simultaneously. I thought two scripts can be run together. I'm going to try to include your text field script into the modals alongside file upload - basically moving two into one modal.

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.

Please Log in or Create an account to join the conversation.

More
2 months 1 week ago #172228 by krosser
krosser replied the topic: Combining upload with Arrays
Is it possible to make them run simultaneously?

So far I could combine your two codes (from here and for the long text fields), adding two modals.


<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+')');
		var qComments = qArray.nextAll('.text-long:lt('+arrayLength+')');
 
 
		// Add some classes COMMENTS
		qArray.addClass('array-with-comments-question');
		$(qComments).each(function(i) {
			$(this).addClass('comments-question index-'+i).css({
				'position': 'absolute',
				'left': '-9999em'
			});
		});
 
 
		// Add some classes UPLOADS
		qArray.addClass('array-with-uploads-question');
		$(qUploads).each(function(i) {
			$(this).addClass('uploads-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-toggle="modal" data-target="#comments-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">WebLink</button>\
							</td>');
		});
 
 
		// 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-toggle="modal" data-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-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'
			});
		});
 
 
 
// 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-dismiss="modal">Okay</button>\
											<button type="button" class="btn btn-secondary" data-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 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));
			});
		});	
 
 
		// Interrupt the Next/Submit function (to put comments back in the form)
		$('#ls-button-submit').on('click', 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>

File Attachment:

File Name: limesurvey...2637.lss
File Size:41 KB

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.
Attachments:

Please Log in or Create an account to join the conversation.

More
2 months 1 week ago #172237 by tpartner
tpartner replied the topic: Combining upload with Arrays
Do you want the "Weblink" in modals or simply a short-text input directly in the array?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!