Combined Array with large free text comment fields

More
3 months 20 hours 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
2 months 4 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
2 months 4 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:

<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)
		$('#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>





Sample survey attached:

File Attachment:

File Name: limesurvey...7491.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:
The following user(s) said Thank You: DenisChenu, duvemyster, krosser

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

More
2 months 4 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.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!