Combining upload with Arrays

More
2 months 1 week ago - 2 months 1 week ago #172238 by tpartner
tpartner replied the topic: 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:

File Attachment:

File Name: limesurvey...6371.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:
Last Edit: 2 months 1 week ago by tpartner.
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 - 2 months 1 week ago #172263 by krosser
krosser replied the topic: 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.
Last Edit: 2 months 1 week ago by krosser.

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

More
2 months 1 week ago #172264 by tpartner
tpartner replied the topic: 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:

File Attachment:

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

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.
Attachments:
The following user(s) said Thank You: krosser

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

More
2 months 4 days ago #172301 by krosser
krosser replied the topic: 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?

File Attachment:

File Name: limesurvey...5279.lss
File Size:52 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 3 days ago #172333 by tpartner
tpartner replied the topic: 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:

File Attachment:

File Name: limesurvey...2792.lss
File Size:53 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 3 days ago #172355 by krosser
krosser replied the topic: Combining upload with Arrays

tpartner wrote: 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:

File Attachment:

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



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?

File Attachment:

File Name: limesurvey...2328.lss
File Size:28 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 days 6 hours ago #175442 by krosser
krosser replied the topic: Combining upload with Arrays

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

File Attachment:

File Name: limesurvey...1832.lss
File Size:45 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 days 1 hour ago #175455 by tpartner
tpartner replied the topic: 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.
The following user(s) said Thank You: krosser

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!