Combining upload with Arrays

Plus d'informations
il y a 4 mois 2 semaines - il y a 4 mois 2 semaines #171947 par krosser
krosser a créé le sujet : 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.
Pièces jointes :
Dernière édition: il y a 4 mois 2 semaines par krosser.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 1 semaine #171964 par tpartner
tpartner a répondu au sujet : 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.
Les utilisateur(s) suivant ont remercié: krosser

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 1 semaine - il y a 4 mois 1 semaine #171965 par krosser
krosser a répondu au sujet : 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.
Dernière édition: il y a 4 mois 1 semaine par krosser.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 1 semaine #171972 par LouisGac
LouisGac a répondu au sujet : 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.
Pièces jointes :
Les utilisateur(s) suivant ont remercié: tpartner, krosser

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 1 semaine - il y a 4 mois 1 semaine #171975 par LouisGac
LouisGac a répondu au sujet : 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
Dernière édition: il y a 4 mois 1 semaine par LouisGac.
Les utilisateur(s) suivant ont remercié: tpartner, krosser

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 1 semaine #171978 par tpartner
tpartner a répondu au sujet : 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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 1 semaine #172048 par krosser
krosser a répondu au sujet : Combining upload with Arrays

LouisGac écrit: 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.
Les utilisateur(s) suivant ont remercié: LouisGac

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 1 semaine #172058 par krosser
krosser a répondu au sujet : 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.
Les utilisateur(s) suivant ont remercié: LouisGac

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 5 jours #172218 par krosser
krosser a répondu au sujet : 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.
Pièces jointes :

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 5 jours #172219 par tpartner
tpartner a répondu au sujet : 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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 5 jours #172220 par krosser
krosser a répondu au sujet : Combining upload with Arrays

tpartner écrit: 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.

Fichier attaché :

Nom du fichier : limesurvey...09-2.lss
Taille du ficher :36 ko

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.
Pièces jointes :

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 5 jours #172223 par tpartner
tpartner a répondu au sujet : 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:

Fichier attaché :

Nom du fichier : limesurvey...5262.lss
Taille du ficher :35 ko

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Pièces jointes :
Les utilisateur(s) suivant ont remercié: krosser

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 5 jours #172225 par krosser
krosser a répondu au sujet : 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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 5 jours #172228 par krosser
krosser a répondu au sujet : 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>

Fichier attaché :

Nom du fichier : limesurvey...2637.lss
Taille du ficher :41 ko

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.
Pièces jointes :

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 5 jours #172237 par tpartner
tpartner a répondu au sujet : 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.

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!