Combined Array with large free text comment fields

More
6 months 3 weeks ago #168789 by tpartner
tpartner replied the topic: Combined Array with large free text comment fields
Let's refresh the thread.

Exactly what behaviour do you want and what have have you tried (including any code).

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
6 months 3 weeks ago #168863 by duvemyster
duvemyster replied the topic: Combined Array with large free text comment fields
Good thinking. The goal is an array that has a comment button on each row, enabling respondents to selectively choose which rows to comment on. The sample code below and attached merges the two posts containing code in this thread, plus a couple of minor sizing differences reflected. This works in Version 2.73.1+171220.

There may be a few themes that simply need to be expressed differently for this to work in 3.x? Feel free to point out starter info on that. Of course there might also be a better way to accomplish this in 3.x.

In 2.x, the code below is meant to applied to the help field of the array questions, with separate comment questions following corresponding to each row of the array.
<script type="text/javascript" charset="utf-8">	
 
	$(document).ready(function() {
 
		// Identify the questions
		var qArray = $('#question{QID}');
		var arrayLength = $('tr.answers-list', qArray).length;
		var qComments = qArray.nextAll('.text-long:lt('+arrayLength+')');
 
		// Add some classes
		qArray.addClass('array-with-comments-question');
		$(qComments).each(function(i) {
			$(this).addClass('comments-question index-'+i);
			$(this).append('<div class="modal-footer file-upload-modal-footer"><button class="comment-btn btn btn-success"  type="button">Save changes</button></div>');
		});
 
		// Insert the comments buttons
		$('table.questions-list col', qArray).removeAttr('width');
		$('table.questions-list thead tr', qArray).append('<td />');
		$('tr.answers-list', qArray).each(function(i) {
			$(this).append('<td><button class="comment-button" style="width:86px" type="button" data-index="'+i+'">Comments</button></td>');
		});
 
		// Put the comments questions into modal dialogs		
		$(qComments).dialog({
			autoOpen: false,
			width: 372,
			modal: true,
			resizable: false,
			draggable: false,
			closeOnEscape: true
		});
 
		// Click events for comments buttons
		$('.comment-button').click(function() {
			var thisIndex = $(this).attr('data-index');
			$('.comments-question.index-'+thisIndex).dialog('open');
		});
		$('.comment-btn').click(function() {
			$(qComments).dialog('close');
		}); 
 
		// Interrupt the Next/Submit function (to put comments back in the form)
		$('#movenextbtn, #movesubmitbtn').bind('click', function () {			
			qComments.hide();
			$('#limesurvey').append(qComments);
		});		
 
	});
 
</script>
Attachments:

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

More
6 months 3 weeks ago - 3 months 2 weeks ago #168906 by tpartner
tpartner replied the topic: Combined Array with large free text comment fields
Okay, here is updated JavaScript for 3.x.

[EDIT]24/08/2018 - Submit function modified to fix "Save and Resume Later" bug.[/EDIT]

<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 qComments = qArray.nextAll('.text-long:lt('+arrayLength+')');
 
		// Add some classes
		qArray.addClass('array-with-comments-question');
		$(qComments).each(function(i) {
			$(this).addClass('comments-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">Comments</button>\
							</td>');
		});
 
		// 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 comments back in the form)
		$('#limesurvey').submit(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>





Sample survey attached:

File Attachment:

File Name: limesurvey...1749.lss
File Size:23 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 3 months 2 weeks ago by tpartner.
The following user(s) said Thank You: DenisChenu, duvemyster, krosser

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

More
6 months 3 weeks ago #168925 by duvemyster
duvemyster replied the topic: Combined Array with large free text comment fields
Thank you @tpartner ! This exceeded my expectation all around. It is elegant and works very smoothly. It can also be used with multiple array questions in the same group without anything needed to be renamed.

A brief note to any others who utilize this in 3.x: Be sure to apply it to the question field of the array, not the help field.

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

More
1 month 2 weeks ago - 1 month 2 weeks ago #175971 by duvemyster
duvemyster replied the topic: Combined Array with large free text comment fields
How can the solution in #168906 above be adjusted to use "list with comments" in the modal window, in place of "long free text"? This would be useful in categorizing the comments.

An initial stab is below (starting from #168906 above), but it loses the value of the 2nd of the 3 list items:

* Change ".text-long" to ".list-with-comment" in "var qComments" under "// Identify the questions."

* Pull the list in under "// Move textareas into modals" by adding the following:
$('#comments-'+qArrayID+'-'+(i+1)+' .modal-body').append($('ul', this));
$('#comments-'+qArrayID+'-'+(i+1)+' .modal-body').append($('li', this));
$('#comments-'+qArrayID+'-'+(i+1)+' .modal-body').append($('input', this));
$('#comments-'+qArrayID+'-'+(i+1)+' .modal-body').append($('label', this));

* Add ".substring(0,4)" to the end of "var qID" under "// Interrupt the Next/Submit function."

* And add the following under under "// Interrupt the Next/Submit function:"
$('#question'+qID+' .answer-list:eq(0)').append($('input:eq(0)', this)); // This 1st list item.
$('#question'+qID+' .answer-list:eq(0)').append($('input:eq(1)', this)); // This 3rd list item?
$('#question'+qID+' .answer-list:eq(0)').append($('input:eq(2)', this)); // Not working.

Any thoughts?
Last Edit: 1 month 2 weeks ago by duvemyster. Reason: readability

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

More
1 month 2 weeks ago #175974 by duvemyster
duvemyster replied the topic: Combined Array with large free text comment fields
Update to last post above: The last three lines should have ".answer-item" rather than ".answer-list". Also, pulling in 'ul' takes care of 'li', 'input', and 'label', so those lines aren't needed.

Here is the updated text:

How can the solution in #168906 above be adjusted to use "list with comments" in the modal window, in place of "long free text"? This would be useful in categorizing the comments.

An initial stab is below (starting from #168906 above), but it loses the value of the 2nd of the 3 list items:

* Change ".text-long" to ".list-with-comment" in "var qComments" under "// Identify the questions."

* Pull the list in under "// Move textareas into modals" by adding the following:
$('#comments-'+qArrayID+'-'+(i+1)+' .modal-body').append($('ul', this));

* Add ".substring(0,4)" to the end of "var qID" under "// Interrupt the Next/Submit function."

* And add the following under under "// Interrupt the Next/Submit function:"
$('#question'+qID+' .answer-item:eq(0)').append($('input:eq(0)', this)); // This 1st list item.
$('#question'+qID+' .answer-item:eq(0)').append($('input:eq(1)', this)); // This 3rd list item?
$('#question'+qID+' .answer-item:eq(0)').append($('input:eq(2)', this)); // Not working.

Any thoughts?

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

More
1 month 2 weeks ago #175982 by tpartner
tpartner replied the topic: Combined Array with large free text comment fields
Can you attach a sample survey (.lss file) containing only the relevant questions?

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
1 month 1 week ago #175988 by duvemyster
duvemyster replied the topic: Combined Array with large free text comment fields
Yes. Thank you for looking at this. A draft lss file for Combined Array with List with Comments modal windows is attached. This draft only retains selections of the 1st and 3rd categories in the list with comment entries. It loses selections of the 2nd category in list with comment entries.
Attachments:

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

More
1 month 1 week ago - 1 month 1 week ago #176025 by tpartner
tpartner replied the topic: Combined Array with large free text comment fields
The script below will place the list-with-comments questions in modals.

Note, if you allow backwards navigation in the survey, you will need to disable AJAX in the theme options for this workaround to behave correctly.

<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function(){
		console.log(new Date());
 
		// Identify the questions
		var qArrayID = {QID};
		var qArray = $('#question'+qArrayID);
		var arrayLength = $('tr.answers-list', qArray).length;
		var qComments = qArray.nextAll('.list-with-comment:lt('+arrayLength+')');
 
		// Add some classes
		qArray.addClass('array-with-comments-question');
		$(qComments).each(function(i) {
			$(this).addClass('comments-question index-'+i).css({
				'position': 'absolute',
				'left': '-9999em'
			});
		});
 
		// Insert the comments buttons
		if($('button[data-toggle="modal"]', qArray).length == 0) {
			$('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">Comments</button>\
								</td>');
			});
 
			// 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 list-with-comments questions into modals
				$('#comments-'+qArrayID+'-'+(i+1)+' .modal-body').append($('div.answer-container', this)).append($('<div class="clearfix" />'));
 
				// Modal button events
				$('#comments-'+qArrayID+'-'+(i+1)+' .modal-footer .btn-secondary').on('click', function(e) {
					$('#comments-'+qArrayID+'-'+(i+1)+' input:radio').each(function(i) {
						$(this).prop('checked', false);
						checkconditions($(this).attr('value'), $(this).attr('name'), 'radio');
					});
					$('#comments-'+qArrayID+'-'+(i+1)+' textarea').val('').trigger('change');
				});
 
			});
 
			// Interrupt the Next/Submit function (to put comments back in the form)
			$('#limesurvey').submit(function(e) {
				$('.comments-modal').each(function(i) {
					var qID = $('input:radio:eq(0)', this).attr('name').split('X')[2];
					$('#question'+qID).append($('div.answer-container', this));
				});
			});	
		}
	});
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...2391.lss
File Size:27 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 1 month 1 week ago by tpartner.
The following user(s) said Thank You: duvemyster

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!