Adding textbox in basic array

More
4 months 1 week ago #166921 by tpartner
tpartner replied the topic: Adding textbox in basic array
... I have edited the code snippet in that post accordingly and uploaded a new sample survey.

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
4 months 1 week ago #166939 by holch
holch replied the topic: Adding textbox in basic array
Thanks Tpartner, importing the new version works for me now. But based on your comment, so would a second import of the first version, because the problem would only appear if it was the first survey ever in a new installation, right? Chances that this happens are pretty low I guess, yet I managed to break it. ;-)

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

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

More
4 months 1 week ago #166951 by jelo
jelo replied the topic: Adding textbox in basic array

holch wrote: because the problem would only appear if it was the first survey ever in a new installation, right?

Tpartner mentioned group and question id. No survey id. I don't understand the releation to a new installation and the first survey on such a installtion?

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

More
4 months 1 week ago #166955 by tpartner
tpartner replied the topic: Adding textbox in basic array
My original code was trying to split the SGQA by the question ID to detect the sub-question ID. Since this is the first group and question in Holch's install, both the group and question IDs are "1", therefor the SGQA gets split at the group ID giving an incorrect result. The solution is to first split the SGQA by the second "X" and then split by the question ID.

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
4 months 1 week ago #166958 by jelo
jelo replied the topic: Adding textbox in basic array

tpartner wrote: Since this is the first group and question in Holch's install, both the group and question IDs are "1",

I thought when creating a new survey gid starts for every survey with one. Which isn't the case as I learned today ;-) Created a new survey on Demo.limesurvey.org and got GID 74 and QID 2222 on the first question. Thanks.

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

More
4 months 1 week ago #166964 by krosser
krosser replied the topic: Adding textbox in basic array
Thank you very much Toni for your suggestion and the JS code! Yes, that is reasonable to have it like this.

I wanted to try it but there is a weird system issue with LimeSurvey at the moment - I cannot change themes in the editor, as the save button isn't active (it's in my both personal and corporate accounts). So cannot add anything or remove from custom.css nor custom.js.
I've written to the support about this.
It might be related to their recent update to the buttons by adding an extend button next to each theme.

I'm using the latest LS 3.14 hosted by LS team, not installed locally.

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

More
4 months 1 week ago - 4 months 1 week ago #166966 by krosser
krosser replied the topic: Adding textbox in basic array
Tony, I also have similar questions but with an array (Numbers) with checkboxes.



Would it need "checkbox-item input" to be added to the JS code? Your help would be much appreciated.

I'm using the latest LS 3.14 hosted by LS team, not installed locally.
Attachments:
Last Edit: 4 months 1 week ago by krosser.

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

More
4 months 6 days ago - 4 months 4 days ago #167015 by tpartner
tpartner replied the topic: Adding textbox in basic array
For array-numbers-checkboxes...

Place a multiple-short-text question directly after the array. This question should have exactly the same sub-questions as the array y-scale.

Give the array question a CSS class "with-checkbox-array-comments".

Add this to custom.js:

$(document).on('ready pjax:scriptcomplete',function(){
	// Apply the plugin to specific arrays
	$('.array-multi-flexi.with-checkbox-array-comments').cbArrayComments();
});
 
// A jQuery plugin insert comments into checkbox arrays
(function( $ ){
 
	$.fn.cbArrayComments = function(options) {  
 
		var opts = $.extend( {
		}, options);
 
		return this.each(function() { 
 
			// Identify the questions
			var thisQuestion = $(this);
			var q1ID = $(thisQuestion).attr('id').replace(/question/, '');
			var thisQuestion = $('#question'+q1ID);
			var nextQuestion = thisQuestion.nextAll('.multiple-short-txt:eq(0)');
			var q2ID = $(nextQuestion).attr('id').replace(/question/, '');
 
			//Hide the multiple-short-text
			nextQuestion.hide();
 
			// Move the text inputs
			$('tr.subquestion-list', thisQuestion).each(function(i) {
				var thisCode = $(this).attr('id').split('X')[2].split(q1ID)[1];
				$('td.answer-item:last input[type="checkbox"]', this).css({
					'position': 'absolute',
					'left': '-9999em'
				});
				$('td.answer-item:last', this).removeClass('checkbox-item').addClass('inserted-text-item').append($('input[type="text"][id$="X'+q2ID+thisCode+'"]', nextQuestion));
			});
 
			// Listeners on the text inputs
			$('input[type="text"]', thisQuestion).on('keyup change', function(e) {
				var thisCheckbox = $(this).closest('td').find('input[type="checkbox"]');
				if($.trim($(this).val()) != '') {
					$(thisCheckbox).prop('checked', true);
					$(thisCheckbox).prev('input:hidden').val(1);
				}
				else {
					$(thisCheckbox).prop('checked', false);
					$(thisCheckbox).prev('input:hidden').val('');
				}
				// Fire Expression Manager
				$(thisCheckbox).trigger('change');
			});
		});
 
	};
})( jQuery );


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

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

More
4 months 6 days ago #167039 by krosser
krosser replied the topic: Adding textbox in basic array
This is amazing, Tony! Many thanks!!

Today, the guys at LimeSurvey have fixed the issue with the Template editor and I could finally test your JS codes by adding to custom.js. They both worked nicely!
I realized that I have to place a Multiple short text question after each Array question that I need to adjust (for example, I have two of this kind of questions in a section).

I'm using the latest LS 3.14 hosted by LS team, not installed locally.

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

More
4 months 5 days ago #167112 by krosser
krosser replied the topic: Adding textbox in basic array
Hey Tony,

Can you please help with two other variations of such a question, but when the "Other" textboxes are located horizontally?

I have made sample questions to illustrate it. I have a bunch of questions like this in the survey...





The difference between the two is the number of columns, which I suppose would need different JS code, correct?

I would be happy if you could help out! :)

I'm using the latest LS 3.14 hosted by LS team, not installed locally.
Attachments:

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

More
4 months 4 days ago - 4 months 4 days ago #167168 by krosser
krosser replied the topic: Adding textbox in basic array

tpartner wrote:

I've got a bunch of questions like this...

In that case, you should centralize the script with a jQuery plugin.

1) Assign a CSS class "with-array-comments" to all of the array questions where you want the text inputs inserted.


2) Add the following to the end of your theme custom.js file:

$(document).on('ready pjax:scriptcomplete',function(){
	// Apply the plugin to specific arrays
	$('.array-flexible-row.with-array-comments').arrayComments();
});
 
// A jQuery plugin insert comments into radio arrays
(function( $ ){
 
	$.fn.arrayComments = function(options) {  
 
		var opts = $.extend( {
		}, options);
 
		return this.each(function() { 
 
			// Identify the questions
			var thisQuestion = $(this);
			var q1ID = $(thisQuestion).attr('id').replace(/question/, '');
			var thisQuestion = $('#question'+q1ID);
			var nextQuestion = thisQuestion.nextAll('.multiple-short-txt');
			var q2ID = $(nextQuestion).attr('id').replace(/question/, '');
 
			//Hide the multiple-short-text
			nextQuestion.hide();
 
			// Move the text inputs
			$('tr.answers-list', thisQuestion).each(function(i) {
				var thisCode = $(this).attr('id').split('X')[2].split(q1ID)[1];
				$('td.answer-item:last input[type="radio"]', this).css({
					'position': 'absolute',
					'left': '-9999em'
				});
				$('td.answer-item:last', this).removeClass('radio-item').addClass('inserted-text-item').append($('input[type="text"][id$="X'+q2ID+thisCode+'"]', nextQuestion));
			});
 
			// Listeners on the text inputs
			$('input[type="text"]', thisQuestion).on('keyup change', function(e) {
				var thisRadio = $(this).closest('td').find('input[type="radio"]');
				var thisRadioVal = thisRadio.val();
				if($.trim($(this).val()) != '') {
					$(thisRadio).trigger('click');
				}
				else {
					$(thisRadio).prop('checked', false);
					thisRadioVal = '';
				}
				// Reset Expression manager
				checkconditions(thisRadioVal, $(thisRadio).attr('name'), 'radio', 'click');
			});
 
			// Listeners on the radios
			$('input[type="radio"]', thisQuestion).on('click', function(e) {
				if(!$(this).closest('td').hasClass('inserted-text-item')) {
					$(this).closest('tr').find('input[type="text"]').val('');
				}
			});
		});
 
	};
})( jQuery );



Hi Tony,
When I use this workaround, then other questions with multiple short text are hidden in the same question group and I can't make them visible.
It happens in both cases - when I add a JS code to a single array question and when I use a jQuery plugin css.
Is it possible to avoid this in the code somehow?

I'm using the latest LS 3.14 hosted by LS team, not installed locally.
Last Edit: 4 months 4 days ago by krosser. Reason: To specify that it happens in the same question group

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

More
4 months 4 days ago #167170 by tpartner
tpartner replied the topic: Adding textbox in basic array
Sorry, typo.

Change this line:
var nextQuestion = thisQuestion.nextAll('.multiple-short-txt');

To this:
var nextQuestion = thisQuestion.nextAll('.multiple-short-txt:eq(0)');

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
4 months 4 days ago #167171 by krosser
krosser replied the topic: Adding textbox in basic array

tpartner wrote: Sorry, typo.

Change this line:

var nextQuestion = thisQuestion.nextAll('.multiple-short-txt');

To this:
var nextQuestion = thisQuestion.nextAll('.multiple-short-txt:eq(0)');


No problem. Many thanks for getting back to this, Tony!

Can you please also take a look at the situation which I described in a previous post, when textboxes are located horizontally? When you have time, man. :)

I'm using the latest LS 3.14 hosted by LS team, not installed locally.

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

More
4 months 3 days ago - 4 months 3 days ago #167224 by RitaShen
RitaShen replied the topic: Adding textbox in basic array
besides the plugins,
how if I want the free text in front of other options?
Attachments:
Last Edit: 4 months 3 days ago by RitaShen.

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

More
4 months 3 days ago #167249 by Joffm
Joffm replied the topic: Adding textbox in basic array
Hi, Rita,

I have another solution for you.
Of course it is an adaption from Tony:
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){	
 
		// Identify this question
		var qID = {QID};
		var thisQuestion = $('#question'+qID);
 
		// Add some classes
		$(thisQuestion).addClass('with-exclusive-items');
		$('td.answer-item', thisQuestion).addClass('non-exclusive-item');
 
		// Loop through the last-column cells
		$('td.answer-item:last-child', thisQuestion).each(function(i) {
			varThisID = $('input[type="text"]', this).attr('id');
 
			// Add a class
			$(this).removeClass('non-exclusive-item').addClass('exclusive-item');
 
			// Hide the text input
			$('td.answer-item:last-child input[type="text"]', thisQuestion).hide();
 
			// Insert checkboxes
			$(this).append('<div class="checkbox">\
								<input class="checkbox" name="" id="'+varThisID+'_cbox" value="N/A" type="checkbox">\
								<label for="'+varThisID+'_cbox" class="answertext inserted-label"></label>\
							</div>'); 
		});
 
		// Listener on the checkboxes
		$('.exclusive-item input[type="checkbox"]', thisQuestion).on('change', function(e) {
			var thisRow = $(this).closest('tr.subquestion-list');
			var thisCell = $(this).closest('td.answer-item');
			if($(this).is(':checked')) {
				$('input[type="text"]', thisCell).val('1');
				$('.non-exclusive-item input[type="text"]', thisRow).val('');
			}
			else {
				$('input[type="text"]', thisCell).val('');
			}
 
			// Fire Expression Manager
			$('input[type="text"]', thisRow).each(function(i) {
				$(this).trigger('keyup');
			});
		});
 
		// Listener on the text inputs
		$('.non-exclusive-item input[type="text"]', thisQuestion).on('keyup change', function(e) {
			var thisRow = $(this).closest('tr.subquestion-list');
			if($.trim($(this).val()) != '') {
				$('.exclusive-item input[type="checkbox"]', thisRow).prop('checked',false);
				$('.exclusive-item input[type="text"]', thisRow).val('');
			}
 
			// Fire Expression Manager
			$('.exclusive-item input[type="text"]', thisRow).trigger('keyup');
		});
 
		// Insert some styles (these could be in template.css)
		// For the LS 2.67 default template
		var newStyles = '.with-exclusive-items thead th.answertext {\
							text-align: center;\
						}\
						.with-exclusive-items .exclusive-item {\
							text-align: center;\
							vertical-align: middle;\
							cursor: pointer;\
						}\
						.with-exclusive-items .checkbox {\
							padding-left: 0;\
						}\
						.with-exclusive-items .inserted-label {\
							width: 24px;\
							min-height: 24px;\
							padding: 0;\
						}\
						.with-exclusive-items .inserted-label::before {\
							margin: 4px 0 0 4px;\
						}\
						.with-exclusive-items .inserted-label::after {\
							margin: 4px 0 0 4px;\
						}';	
		$('head').append('<style type="text/css">'+newStyles+'</style>');	
	});	
</script>



Of course you can change the css at the end of the script .

Best regards
Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
The following user(s) said Thank You: RitaShen

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!