Array (numbers) with an exclusive checkbox

More
2 months 2 weeks ago #157396 by nique
nique created the topic: Array (numbers) with an exclusive checkbox
I have tried searching the forums but I can't quite find anything that solves my issue or I am unsure how to articulate it. Happy to either insert JS or consider other question options.

I am asking participants for numbers to multiple events over the last three years.
Therefore I have set up an Array (texts - only insert numbers) looking something like this:

2015 2016 2017
Event 1
Event 2
Event 3

I want to make this question mandatory as we do need this data but I also want a Not Applicable or Cannot answer option for those who really cannot answer the question.

Is there a way I could add a checkbox to the end of each event row that, if selected, excludes the number arrays and accepts that as an answer? Or add something into each year that they could select?

I thought about maybe a dropdown of values but my options could be 0-100 and that looks messy.

Happy for all suggestions! Thanks in advance.

Please Log in to join the conversation.

More
2 months 2 weeks ago #157398 by Joffm
Joffm replied the topic: Array (numbers) with an exclusive checkbox
Hi, nique,
please have a look at these two topics with Tony's solutions- Maybe you could combine them.

1. https://www.limesurvey.org/forum/design-issues/111614-array-text-combining-sliders-with-yes-no-question
2. https://www.limesurvey.org/forum/design-issues/110474-slider-didn-t-work-in-array-number

IMHO a slider is a very appealing way to enter numbers between 0 and 100.

3. Have a look at "arrayTextAdapt".

Best regards
Joffm

Please Log in to join the conversation.

More
2 months 2 weeks ago - 2 months 2 weeks ago #157400 by tpartner
tpartner replied the topic: Array (numbers) with an exclusive checkbox
Regarding the exclusive aspect, you could...
  • Insert a fourth "N/A" column (x-scale sub-question)
  • Use JavaScript to do the following:
    • Hide the column 4 text inputs
    • Insert check-boxes into column 4 cells
    • If a column 4 box is checked, insert a value of 1 in its hidden input and clear all column 1-3 inputs
    • If a column 1-3 text input is populated, un-check column 4 and clear the column 4 hidden input
  • Add a question validation equation so that, in every row, either columns 1-3 are populated OR the hidden input in column 4 is populated

The JavaScript would look like this:

<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>

And, for the validation, assuming...
  • Question code: Q1
  • Y-scale sub-question codes: Y1, Y2, Y3
  • X-scale sub-question codes: X1, X2, X3, X4
...the validation equation would look like this (line-breaks added for clarity):

(count(Q1_Y1_X1, Q1_Y1_X2, Q1_Y1_X3)>2 OR count(Q1_Y1_X4)>0)
AND
(count(Q1_Y2_X1, Q1_Y2_X2, Q1_Y2_X3)>2 OR count(Q1_Y2_X4)>0)
AND
(count(Q1_Y3_X1, Q1_Y3_X2, Q1_Y3_X3)>2 OR count(Q1_Y3_X4)>0)



Sample survey attached:

File Attachment:

File Name: limesurvey...8-04.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 months 2 weeks ago by tpartner.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now