Array question with answers in dropdown list

More
2 weeks 6 days ago - 2 weeks 6 days ago #173531 by anaidgh
anaidgh replied the topic: Array question with answers in dropdown list
Hi, Tony, thanks for the fast answer, sorry i want to replay in the first post, the one with the next code:

<script type="text/javascript" charset="utf-8">

$(document).on('ready pjax:scriptcomplete',function(){

$('#question{QID} .answer_cell_SQ001 option[value=1]').text('No recurro');
$('#question{QID} .answer_cell_SQ001 option[value=2]').text('Arocena Gustavo');
$('#question{QID} .answer_cell_SQ001 option[value=3]').text('Aspra Manuel');
$('#question{QID} .answer_cell_SQ001 option[value=4]').text('Bravo Ricardo');
$('#question{QID} .answer_cell_SQ001 option[value=5]').text('Zalazar Martin');

$('#question{QID} .answer_cell_SQ002 option[value=1]').text('No recurro');
$('#question{QID} .answer_cell_SQ002 option[value=2]').text('Bravo Ricardo');
$('#question{QID} .answer_cell_SQ002 option[value=3]').text('Fernandez Flavio');
$('#question{QID} .answer_cell_SQ002 option[value=4]').text('Zalazar Martin');
$('#question{QID} .answer_cell_SQ002 option[value=5]').text('').hide();

});

</script>


I want to create this array, (with three types of inputs)
Attachments:
Last Edit: 2 weeks 6 days ago by anaidgh.

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

More
2 weeks 5 days ago - 2 weeks 5 days ago #173576 by tpartner
tpartner replied the topic: Array question with answers in dropdown list
Here is script that will manipulate an array-texts question as follows. You can adapt this to your needs.
  1. Leave row 1 as text inputs
  2. Place an identical drop-down in all cells of row 2
  3. Place a different identical drop-down in all cells of row 3
  4. Enforce numeric inputs in row 4


<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function(){
		var thisQuestion = $('#question{QID}');
 
		// Insert selects into row 2
		if($('tr.subquestion-list:eq(1) .answer-item .inserted-select', thisQuestion).length == 0) {
			$('tr.subquestion-list:eq(1) .answer-item', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
				<option value="">Please choose...</option>\
				<option value="1">Yes</option>\
				<option value="2">No</option>\
				<option value="3">Do not know</option>\
			</select>');
		} 
 
		// Insert selects into row 3
		if($('tr.subquestion-list:eq(2) .answer-item .inserted-select', thisQuestion).length == 0) {
			$('tr.subquestion-list:eq(2) .answer-item', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
				<option value="">Please choose...</option>\
				<option value="1">Red</option>\
				<option value="2">Blue</option>\
				<option value="3">Pink</option>\
				<option value="3">Purple</option>\
			</select>');  
		} 
 
		// Listeners on select elements
		$('.inserted-select', thisQuestion).on('change', function(i) {
			if($(this).val() != '') {
				$(this).closest('.answer-item').find('input:text').val($.trim($('option:selected', this).text())).trigger('change');
			}
			else {
				$(this).closest('.answer-item').find('input:text').val('').trigger('change');
			}
		});
 
		// Returning to page
		$('.with-select input:text', thisQuestion).each(function(i) {
			var thisCell = $(this).closest('.answer-item');
			var inputText = $.trim($(this).val());
			var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val();
			$('select.inserted-select', thisCell).val(selectval);
		});
 
		// Numerics only in row 4
		$('tr.subquestion-list:eq(3) input:text', thisQuestion).on('keyup change', function(e) {
			var thisValue = $.trim($(this).val());
			if($.isNumeric(thisValue) === false) {
 
				// Strip out non-numerics characters
				newValue = thisValue.replace(/\D/g,'');
				$(this).val(newValue).trigger('change');
			}
		});
 
		// Clean-up styles
		$('select.inserted-select', thisQuestion).css({
			'max-width': '100%'
		});
		$('.with-select input:text', thisQuestion).css({
			'position': 'absolute',
			'left': '-9999em'
		});
	});
</script>



Sample survey attached:

File Attachment:

File Name: limesurvey...9-06.lss
File Size:28 KB

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

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

More
2 weeks 5 days ago #173578 by anaidgh
anaidgh replied the topic: Array question with answers in dropdown list
Tony! Thank you so much!
It's works perfect! SEriouslly, ypu save me :)

Just one, last question, is it possible to, in the same array, condicionate the numeric row (row 4) to appear based on choosed option in row 3?

Regards

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

More
2 weeks 5 days ago #173579 by tpartner
tpartner replied the topic: Array question with answers in dropdown list
So, you only want to show a numeric input in row 4 if a specific value is selected in row 3?

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 weeks 4 days ago #173580 by anaidgh
anaidgh replied the topic: Array question with answers in dropdown list
That's right.

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

More
2 weeks 4 days ago #173587 by tpartner
tpartner replied the topic: Array question with answers in dropdown list
This script will only show the input elements in row-4 if a specific value is selected in row 3. In this case, I have set the value to "4". Modify the "showValue" variable as required.

<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function(){
		var thisQuestion = $('#question{QID}');
 
		// Insert selects into row 2
		if($('tr.subquestion-list:eq(1) .answer-item .inserted-select', thisQuestion).length == 0) {
			$('tr.subquestion-list:eq(1) .answer-item', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
				<option value="">Please choose...</option>\
				<option value="1">Yes</option>\
				<option value="2">No</option>\
				<option value="3">Do not know</option>\
			</select>');
		} 
 
		// Insert selects into row 3
		if($('tr.subquestion-list:eq(2) .answer-item .inserted-select', thisQuestion).length == 0) {
			$('tr.subquestion-list:eq(2) .answer-item', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
				<option value="">Please choose...</option>\
				<option value="1">Red</option>\
				<option value="2">Blue</option>\
				<option value="3">Pink</option>\
				<option value="4">Show row-4 input</option>\
			</select>');  
		} 
 
		// Listeners on select elements
		$('.inserted-select', thisQuestion).on('change', function(i) {
			if($(this).val() != '') {
				$(this).closest('.answer-item').find('input:text').val($.trim($('option:selected', this).text())).trigger('change');
			}
			else {
				$(this).closest('.answer-item').find('input:text').val('').trigger('change');
			}
		});
 
		// Returning to page
		$('.with-select input:text', thisQuestion).each(function(i) {
			var thisCell = $(this).closest('.answer-item');
			var inputText = $.trim($(this).val());
			var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val();
			$('select.inserted-select', thisCell).val(selectval);
		});
 
		// Numeric only in row 4
		$('tr.subquestion-list:eq(3) input:text', thisQuestion).on('keyup change', function(e) {
			var thisValue = $.trim($(this).val());
			if($.isNumeric(thisValue) === false) {
 
				// Strip out non-numerics characters
				newValue = thisValue.replace(/\D/g,'');
				$(this).val(newValue);
				checkconditions($(this).val(), $(this).attr('name'), 'text');
			}
		});
 
		// Hide row-4 inputs unless a specific value selected in row 3
		var showValue = '4';
		// Listener on row-3 selects
		$('tr.subquestion-list:eq(2) select', thisQuestion).on('change', function(e) {
			var thisValue = $(this).val();
			var thisCode = $(this).closest('.answer-item').find('input:text').attr('id').split('_')[1];
			var otherInput = $('tr.subquestion-list:eq(3) .answer_cell_'+thisCode+' input:text', thisQuestion);
			if(thisValue == showValue) {
				$(otherInput).show();
			}
			else {
				$(otherInput).hide().val('');
				checkconditions($(otherInput).val(), $(otherInput).attr('name'), 'text');
			}
		});
		// Initial states of row-4 inputs
		$('tr.subquestion-list:eq(3) input:text', thisQuestion).hide();
		$('tr.subquestion-list:eq(2) .inserted-select', thisQuestion).each(function(i) {
			var thisValue = $(this).val();
			var thisCode = $(this).closest('.answer-item').find('input:text').attr('id').split('_')[1];
			var otherInput = $('tr.subquestion-list:eq(3) .answer_cell_'+thisCode+' input:text', thisQuestion);
			if(thisValue == showValue) {
				$('tr.subquestion-list:eq(3) .answer_cell_'+thisCode+' input:text', thisQuestion).show();
			}
		});
 
		// Clean-up styles
		$('select.inserted-select', thisQuestion).css({
			'max-width': '100%'
		});
		$('.with-select input:text', thisQuestion).css({
			'position': 'absolute',
			'left': '-9999em'
		});
	});
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...8863.lss
File Size:29 KB

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

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

More
2 weeks 23 hours ago #173660 by anaidgh
anaidgh replied the topic: Array question with answers in dropdown list
Thank you, so much, Tony.

The last question, I tried to make the same (numeric and text array) but now with columns, i.e. First column is just numeric and the second one text. So, I supposed it would be like this...

<script type="text/javascript" charset="utf-8">

$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{3}');
// Numerics only in row 4
$('.answer_cell_SQ001 input:text', thisQuestion).on('keyup change', function(e) {
var thisValue = $.trim($(this).val());
if($.isNumeric(thisValue) === false) {

// Strip out non-numerics characters
newValue = thisValue.replace(/\D/g,'');
$(this).val(newValue).trigger('change');
}
});
// Clean-up styles
$('select.inserted-select', thisQuestion).css({
'max-width': '100%'
});
$('.with-select input:text', thisQuestion).css({
'position': 'absolute',
'left': '-9999em'
});


// Assign column-specific classes
$('table.subquestion-list tr', thisQuestion).each(function(i) {

$('> *:gt(0)', this).each(function(i){
$(this).addClass('column-'+(i+1));
$(this).attr('data-column', i+1);
});



});

</script>

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!