Combining upload with Arrays

Plus d'informations
il y a 3 mois 6 jours - il y a 3 mois 6 jours #172238 par tpartner
tpartner a répondu au sujet : Combining upload with Arrays
It would require less clicks for the respondents if you simply insert the text inputs.

<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 qMultiText = qArray.nextAll('.multiple-short-txt:eq(0)');
 
		// Add some classes
		qArray.addClass('array-with-uploads-question');
		$(qUploads).each(function(i) {
			$(this).addClass('uploads-question index-'+i).css({
				'position': 'absolute',
				'left': '-9999em'
			});
		});
 
		// Hide the multi-short-text question
		$(qMultiText).hide();
 
 
		// Insert the "Upload" buttons and a column for the text inputs
		$('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+2)
		$('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('<th class="answer-text inserted-column-label" /><td />');
		$('tr.answers-list', qArray).each(function(i) {
			$(this).append('<td class="answer-item text-item">\
							</td>\
							<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>');
		});
 
		// Load the column label for the text inputs
		$('.inserted-column-label:eq(0)', qArray).text($('.ls-label-question', qMultiText).text());
		$('.text-item', qArray).prepend('<label class="ls-label-xs-visibility">'+$('.ls-label-question', qMultiText).text()+'</label>')
 
		// Loop through the multi-short-text sub-questions
		$('li.answer-item', qMultiText).each(function(i) {
			// Move the text inputs into the array
			$('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .text-item', qArray));
		});
 
		// 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...6371.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 :
Dernière édition: il y a 3 mois 6 jours par tpartner.
Les utilisateur(s) suivant ont remercié: krosser

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

Plus d'informations
il y a 3 mois 6 jours - il y a 3 mois 6 jours #172263 par krosser
krosser a répondu au sujet : Combining upload with Arrays
Yeah, this is what I needed originally, although wanted to position them after the "Yes" column so that when the respondents clicks "Yes", then the weblink and file upload would follow. That kind of logic.
I've looked through your code and it's not as easy for me to reposition them. Because it would also require labeling of the upload column.

BTW I've also noticed that you've set the the sub-question width to 20%. Is that required for this workaround? I've reset it and didn't notice any change in the appearance.

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.
Dernière édition: il y a 3 mois 6 jours par krosser.

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

Plus d'informations
il y a 3 mois 6 jours #172264 par tpartner
tpartner a répondu au sujet : Combining upload with Arrays
To move the columns, change this:

		$('table.questions-list thead tr', qArray).append('<th class="answer-text inserted-column-label" /><td />');
		$('tr.answers-list', qArray).each(function(i) {
			$(this).append('<td class="answer-item text-item">\
							</td>\
							<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>');
		});

To this:

		$('table.questions-list thead th.answer-text:eq(0)', qArray).after('<th class="answer-text inserted-column-label" /><td />');
		$('tr.answers-list', qArray).each(function(i) {
			$('.answer-item:eq(0)', this).after('<td class="answer-item text-item">\
							</td>\
							<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>');
		});



Sample survey attached:

Fichier attaché :

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

BTW I've also noticed that you've set the the sub-question width to 20%. Is that required for this workaround? I've reset it and didn't notice any change in the appearance.

Nope, I just did that for appearance.

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 3 mois 3 jours #172301 par krosser
krosser a répondu au sujet : Combining upload with Arrays
Tony, would it be possible to add the Upload label and another text field column?

I've managed to move the text fields and uploads to another column by changing 0 to 1 in this part:
$('table.questions-list thead th.answer-text:eq(1)', qArray).after('<th class="answer-text inserted-column-label" /><td />');
		$('tr.answers-list', qArray).each(function(i) {
			$('.answer-item:eq(1)', this).after('<td class="answer-item text-item">\
							</td>\
							<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>');



And this is what I would like to upgrade it to, with a possible reseting of text fields when "Do not know" is clicked.



I've started with adding these lines
var qMultiText2 = qArray.nextAll('.multiple-short-txt:eq(1)');
$(qMultiText2).hide();
But I can't distinguish between the Upload and text inputs lines in the code to add the 2nd text input column correctly. Could you please help out?

Fichier attaché :

Nom du fichier : limesurvey...5279.lss
Taille du ficher :52 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 3 mois 2 jours #172333 par tpartner
tpartner a répondu au sujet : Combining upload with Arrays
Wow, this is getting pretty complex.

<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 qMultiText = qArray.nextAll('.multiple-short-txt:eq(0)');
   		var qMultiText2 = qArray.nextAll('.multiple-short-txt:eq(1)');
 
		// Add some classes
		qArray.addClass('array-with-uploads-question');
		$(qUploads).each(function(i) {
			$(this).addClass('uploads-question index-'+i).css({
				'position': 'absolute',
				'left': '-9999em'
			});
		});
 
		// Hide the multi-short-text questions
		$(qMultiText).hide();
      	$(qMultiText2).hide();
 
 
		// Re-define some table widths
		$('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+2)
		$('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');
 
		// Insert the "Upload" buttons and a column for the "Weblink" inputs
		$('table.questions-list thead th.answer-text:eq(1)', qArray).after('<th class="answer-text inserted-column-label" /><th class="answer-text inserted-column-label" />');
		$('tr.answers-list', qArray).each(function(i) {
			$('.answer-item:eq(1)', this).after('<td class="answer-item text-item">\
							</td>\
							<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>');
		});
 
		// Load the column labels
		$('.inserted-column-label:eq(0)', qArray).text($('.ls-label-question', qMultiText).text());
		$('.text-item:nth-child(4)', qArray).prepend('<label class="ls-label-xs-visibility">'+$('.ls-label-question', qMultiText).text()+'</label>');
		$('.inserted-column-label:eq(1)', qArray).text('Upload');
 
		// Loop through the first multi-short-text sub-questions
		$('li.answer-item', qMultiText).each(function(i) {
			// Move the text inputs into the array
			$('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .text-item', qArray));
		});
 
		// Loop through the second multi-short-text sub-questions
		$('li.answer-item', qMultiText2).each(function(i) {
			// Move the text inputs into the array (leaving the radios in that column in place)
			$('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .radio-item:nth-child(7)', qArray));
		});
 
		// Hide the radios in the "other" column
		$('tr.answers-list .answer-item:nth-child(7)', qArray).removeClass('radio-item').addClass('text-item other-item');
		$('tr.answers-list .answer-item:nth-child(7) input[type="radio"]', qArray).css({
			'position': 'absolute',
			'left': '-9999em'
		});
 
		// 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'
			});
		});
 
		// Listeners on the "Other" text inputs
		$('.other-item input[type="text"]', qArray).on('keyup change', function(e) {
			var thisRadio = $(this).closest('.answer-item').find('input[type="radio"]');
			var radioValue = '';
			if($.trim($(this).val()) != '') {
				$(thisRadio).trigger('click');
				radioValue = $(thisRadio).val();
			}
			else {
				$(thisRadio).prop('checked', false);
			}
			checkconditions(radioValue, $(thisRadio).attr('name'), $(thisRadio).attr('type'));
		});
 
		// Listeners on the "Do not know" radios
		$('.answer-item:nth-child(8) input[type="radio"]', qArray).on('click', function(e) {
			var thisRow = $(this).closest('.answers-list');
			// Clear the text inputs in this row
			$('input[type="text"]', thisRow).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));
			});
		});	
	});
</script>

Sample survey attached:

Fichier attaché :

Nom du fichier : limesurvey...2792.lss
Taille du ficher :53 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 3 mois 2 jours #172355 par krosser
krosser a répondu au sujet : Combining upload with Arrays

tpartner écrit: To move the columns, change this:

		$('table.questions-list thead tr', qArray).append('<th class="answer-text inserted-column-label" /><td />');
		$('tr.answers-list', qArray).each(function(i) {
			$(this).append('<td class="answer-item text-item">\
							</td>\
							<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>');
		});

To this:

		$('table.questions-list thead th.answer-text:eq(0)', qArray).after('<th class="answer-text inserted-column-label" /><td />');
		$('tr.answers-list', qArray).each(function(i) {
			$('.answer-item:eq(0)', this).after('<td class="answer-item text-item">\
							</td>\
							<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>');
		});



Sample survey attached:

Fichier attaché :

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



I'm trying to adjust this version as well by adding the upload label and listeners on "Do not know".
The listeners worked nicely. Just needed to change the number to 6 here
// Listeners on the "Do not know" radios
		$('.answer-item:nth-child(6) input[type="radio"]', qArray).on('click', function(e) {
			var thisRow = $(this).closest('.answers-list');
			// Clear the text inputs in this row
			$('input[type="text"]', thisRow).val('');
		});

But the Upload label doesn't show up when I add the line (and/or adjust the eq(1) number)
$('.inserted-column-label:eq(1)', qArray).text('Upload');
I've looked through other lines of the code and can't see anything related.
What am I missing here?

Fichier attaché :

Nom du fichier : limesurvey...2328.lss
Taille du ficher :28 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 1 mois 1 jour #175442 par krosser
krosser a répondu au sujet : Combining upload with Arrays

tpartner écrit: Wow, this is getting pretty complex.


Hi Tony,
Can you please check how to adjust the code's part for loading the column labels, when you have repeated answer options?
Many thanks in advanced!



Sample survey attached...

Fichier attaché :

Nom du fichier : limesurvey...1832.lss
Taille du ficher :45 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 1 mois 1 jour #175455 par tpartner
tpartner a répondu au sujet : Combining upload with Arrays
<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 qMultiText = qArray.nextAll('.multiple-short-txt:eq(0)');
   		var qMultiText2 = qArray.nextAll('.multiple-short-txt:eq(1)');
 
		// Add some classes
		qArray.addClass('array-with-uploads-question');
		$(qUploads).each(function(i) {
			$(this).addClass('uploads-question index-'+i).css({
				'position': 'absolute',
				'left': '-9999em'
			});
		});
 
		// Hide the multi-short-text questions
		$(qMultiText).hide();
      	$(qMultiText2).hide();
 
 
		// Re-define some table widths
		$('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+2)
		$('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');
 
		// Insert the "Upload" buttons and a column for the "Weblink" inputs
		$('tr.ls-heading', qArray).each(function(i) {
			$('th.answer-text:eq(1)', this).after('<th class="answer-text inserted-column-label" /><th class="answer-text inserted-column-label" />');
		});
		$('tr.answers-list', qArray).each(function(i) {
			$('.answer-item:eq(1)', this).after('<td class="answer-item text-item">\
							</td>\
							<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>');
		});
 
		// Load the column labels
		$('tr.ls-heading', qArray).each(function(i) {
			$('.inserted-column-label:eq(0)', this).text($('.ls-label-question', qMultiText).text());
			$('.inserted-column-label:eq(1)', this).text('Upload');
		});		
		$('.text-item:nth-child(4)', qArray).prepend('<label class="ls-label-xs-visibility">'+$('.ls-label-question', qMultiText).text()+'</label>');
 
		// Loop through the first multi-short-text sub-questions
		$('li.answer-item', qMultiText).each(function(i) {
			// Move the text inputs into the array
			$('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .text-item', qArray));
		});
 
		// Loop through the second multi-short-text sub-questions
		$('li.answer-item', qMultiText2).each(function(i) {
			// Move the text inputs into the array (leaving the radios in that column in place)
			$('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .radio-item:nth-child(7)', qArray));
		});
 
		// Hide the radios in the "other" column
		$('tr.answers-list .answer-item:nth-child(7)', qArray).removeClass('radio-item').addClass('text-item other-item');
		$('tr.answers-list .answer-item:nth-child(7) input[type="radio"]', qArray).css({
			'position': 'absolute',
			'left': '-9999em'
		});
 
		// 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'
			});
		});
 
		// Listeners on the "Other" text inputs
		$('.other-item input[type="text"]', qArray).on('keyup change', function(e) {
			var thisRadio = $(this).closest('.answer-item').find('input[type="radio"]');
			var radioValue = '';
			if($.trim($(this).val()) != '') {
				$(thisRadio).trigger('click');
				radioValue = $(thisRadio).val();
			}
			else {
				$(thisRadio).prop('checked', false);
			}
			checkconditions(radioValue, $(thisRadio).attr('name'), $(thisRadio).attr('type'));
		});
 
		// Listeners on the "Do not know" radios
		$('.answer-item:nth-child(8) input[type="radio"]', qArray).on('click', function(e) {
			var thisRow = $(this).closest('.answers-list');
			// Clear the text inputs in this row
			$('input[type="text"]', thisRow).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));
			});
		});	
	});
</script>

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.

Commencez dès maintenant !

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

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!