Combined Array with large free text comment fields

More
2 years 7 months ago #120107 by spogue
spogue created the topic: Combined Array with large free text comment fields
Similar to other threads about combining an array question with a multiple short text question to provide for per-sub-question comments, I have a slightly different need.

We want to allow for essentially a notes section that could accommodate a larger amount of text than simply the short text input. In order to preserve real estate on the screen, I was envisioning using an indicator icon to launch a jquery dialog to provide the input field on-demand.

Has anyone done something similar before I dig into this myself?

Please Log in to join the conversation.

More
2 years 7 months ago #120109 by tpartner
tpartner replied the topic: Combined Array with large free text comment fields
You can put the long-text questions into jQuery modal dialogs but that takes them out of the form so you need to make sure you interrupt the LimeSurvey form submit and put them back in the form. (The data will only be recorded if the question/textarea is in the form on submit.)

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
2 years 7 months ago #120135 by spogue
spogue replied the topic: Combined Array with large free text comment fields
Thanks Tony, I understand the general approach but I was hoping to find some bits of skeletal code to extend on this since I'm a novice on jquery.

Please Log in to join the conversation.

More
2 years 7 months ago - 2 years 7 months ago #120141 by tpartner
tpartner replied the topic: Combined Array with large free text comment fields
Well, assuming you have one long-text for each array row and they directly follow the array question, adding something like this to the source of the array question should do the trick.

<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);
		});
 
		// 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" type="button" data-index="'+i+'">Comments</button></td>');
		});
 
		// Put the comments questions into modal dialogs		
		$(qComments).dialog({
			autoOpen: false,
			width: 620,
			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');
		});	
 
		// Interrupt the Next/Submit function (to put comments back in the form)
		$('#movenextbtn, #movesubmitbtn').bind('click', function () {			
			qComments.hide();
			$('#limesurvey').append(qComments);
		});		
 
	});
</script>

Here's a working sample survey:

File Attachment:

File Name: limesurvey...84-2.lss
File Size:20 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 2 years 7 months ago by tpartner.

Please Log in to join the conversation.

More
2 years 7 months ago #120147 by spogue
spogue replied the topic: Combined Array with large free text comment fields
Fantastic! Thanks Tony!

I'll extend it from there. Is there any reason/limitation that I couldn't use multiple short text question given I would be extending the real estate using the modals? It may make question management alittle easier.

Please Log in to join the conversation.

More
2 years 7 months ago #120148 by tpartner
tpartner replied the topic: Combined Array with large free text comment fields
No reason not to use a multiple-short-text but I thought the goal was to have textareas, not text inputs.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
2 years 7 months ago #120149 by spogue
spogue replied the topic: Combined Array with large free text comment fields
Yes, you're right....forgot that the short text was input vs textareas.

Please Log in to join the conversation.

More
5 days 16 hours ago #161483 by duvemyster
duvemyster replied the topic: Combined Array with large free text comment fields
Is "Esc" the intended way to return to array input after entry (ver 2.72+)?

Please Log in to join the conversation.

More
5 days 12 hours ago #161486 by tpartner
tpartner replied the topic: Combined Array with large free text comment fields
Sorry, I don't understand the question.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
5 days 10 hours ago #161489 by duvemyster
duvemyster replied the topic: Combined Array with large free text comment fields
Thank you for your reply. I should have been more specific, and will clarify below.

When I apply the javascript in reply #120141 or look at the working sample survey provided with it, the Comments button leads to a pop-up textarea for comment entry. I see that Esc works in Version 2.72.5 to continue back to the array after entering a comment in the pop-up textarea. Is that what is intended as long as it's not being entered from a device without an Esc key?

Please Log in to join the conversation.

More
3 days 12 hours ago #161554 by tpartner
tpartner replied the topic: Combined Array with large free text comment fields
This workaround is almost 3 years old and was never intended for mobile devices.

You would need to add a "Close" button to the long-text questions. Unfortunately, I don't have time now to offer code for that.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!