Combining upload with Arrays

Mehr
2 Wochen 3 Tage her - 2 Wochen 3 Tage her #171947 von krosser
krosser erstellte das Thema 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.14 hosted by LS team, not installed locally.
Anhang:
Letzte Änderung: 2 Wochen 3 Tage her von krosser.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 3 Tage her #171964 von tpartner
tpartner antwortete auf das Thema: 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.
Folgende Benutzer bedankten sich: krosser

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 3 Tage her - 2 Wochen 3 Tage her #171965 von krosser
krosser antwortete auf das Thema: 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.14 hosted by LS team, not installed locally.
Letzte Änderung: 2 Wochen 3 Tage her von krosser.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 2 Tage her #171972 von LouisGac
LouisGac antwortete auf das Thema: 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.
Anhang:
Folgende Benutzer bedankten sich: tpartner, krosser

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 2 Tage her - 2 Wochen 2 Tage her #171975 von LouisGac
LouisGac antwortete auf das Thema: 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
Letzte Änderung: 2 Wochen 2 Tage her von LouisGac.
Folgende Benutzer bedankten sich: tpartner, krosser

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 2 Tage her #171978 von tpartner
tpartner antwortete auf das Thema: 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.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 22 Stunden her #172048 von krosser
krosser antwortete auf das Thema: Combining upload with Arrays

LouisGac schrieb: 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.14 hosted by LS team, not installed locally.
Folgende Benutzer bedankten sich: LouisGac

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Wochen 21 Stunden her #172058 von krosser
krosser antwortete auf das Thema: 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.14 hosted by LS team, not installed locally.
Folgende Benutzer bedankten sich: LouisGac

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 2 Tage her #172218 von krosser
krosser antwortete auf das Thema: 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.14 hosted by LS team, not installed locally.
Anhang:

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 2 Tage her #172219 von tpartner
tpartner antwortete auf das Thema: 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.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 2 Tage her #172220 von krosser
krosser antwortete auf das Thema: Combining upload with Arrays

tpartner schrieb: 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.

Dateianhang:

Dateiname: limesurvey...09-2.lss
Dateigröße:36 KB

I'm using the latest LS 3.14 hosted by LS team, not installed locally.
Anhang:

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 1 Tag her #172223 von tpartner
tpartner antwortete auf das Thema: 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:

Dateianhang:

Dateiname: limesurvey...5262.lss
Dateigröße:35 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Anhang:
Folgende Benutzer bedankten sich: krosser

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 1 Tag her #172225 von krosser
krosser antwortete auf das Thema: 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.14 hosted by LS team, not installed locally.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 1 Tag her #172228 von krosser
krosser antwortete auf das Thema: 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>

Dateianhang:

Dateiname: limesurvey...2637.lss
Dateigröße:41 KB

I'm using the latest LS 3.14 hosted by LS team, not installed locally.
Anhang:

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 1 Tag her #172237 von tpartner
tpartner antwortete auf das Thema: 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.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Jetzt loslegen!

Melden Sie sich jetzt an, und erstellen Sie in wenigen Minuten Ihre erste Umfrage.

Account einrichten

Abonnieren Sie unseren Newsletter

Abonnieren Sie unseren Newsletter für alle Neuigkeiten rund um LimeSurvey
captcha