Hide suffix on multiple numeric question

More
4 months 3 days ago #216587 by Mukluff
Hello everybody,

I tried to add checkboxes under multiple numeric input fields. I managed to accomplish this to a certrain degree by adding the following code to the question:

<script type="text/javascript" charset="utf-8">
 
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify this question
        var thisQuestion = $('#question{QID}');
        var lastInput = $('input:text:last', thisQuestion);
        var lastItem = $(lastInput).closest('div');
 
        // Insert the check-box
        $(lastItem).addClass('checkbox-item with-inserted-checkbox').append('<input type="checkbox" name="insertedInput" id="insertedInput" value=""><label for="insertedInput" class="checkbox-label control-label"></label>');
                
        // Listener on the checkbox
        $(':checkbox', lastItem).on('change', function(e) {
            if($(this).is(':checked')) {
                $('input:text', thisQuestion).not(lastInput).val('').trigger('keyup');
                $(lastInput).val(100).trigger('keyup');
                $('li.ls-group-dynamic', thisQuestion).hide();
            }
            else {
                $('li.ls-group-dynamic', thisQuestion).show();
                $(lastInput).val('').trigger('keyup');
            }
        });
        
    });
</script>
<style type="text/css">.numeric-multi .with-inserted-checkbox input.form-control {
        position: absolute;
        left: -9999em;
    }
 
    .numeric-multi .with-inserted-checkbox label::before,
    .numeric-multi .with-inserted-checkbox label::after {
        margin: -7px 0 0 0;
    }
</style>



After this the question looked like in the first screenshot ("without suffix")

The next step was to add suffixes, which concluded in the second screenshot ("with suffix")

I have one important and two optional issues:

1) I need to hide the suffix of the checkbox, as the "%" Symbol is only needed for the numeric input fields (This is the most important issue)
2) It would be wonderful to have not only one but two checkboxes at the bottom. The code I used only refers to the "last item", but I need the last two items.
3) The question only allows an input of at most 100%, which is displayed under the items ("Gesamt:"). Is it possible to display this value above the checkboxes and under the numeric input fields?

I have attached a sample survey and I use LimeSurvey Version 3.17.5+

Thanks a lot for every bit of help.



 
Attachments:

Please Log in to join the conversation.

More
4 months 3 days ago #216589 by tpartner
This script and  these styles will insert "exclusive" checkboxes in the last two rows and hide the suffix in those rows.

<script type="text/javascript" data-author="Tony Partner">
 
	$(document).on('ready pjax:scriptcomplete',function(){
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
		var checkboxRows = $('.answer-item:gt(2)', thisQuestion);
 
		// Insert the check-box
		$('> div', checkboxRows).each(function(i) {
			$(this).addClass('checkbox-item with-inserted-checkbox').append('<input type="checkbox" name="insertedInput'+i+'" id="insertedInput'+i+'" value=""><label for="insertedInput'+i+'" class="checkbox-label control-label"></label>');
		});
 
		// Listener on the checkbox
		$(':checkbox', checkboxRows).on('change', function(e) {
			var thisRow = $(this).closest('.answer-item');
			if($(this).is(':checked')) {
				$('input:text', thisQuestion).val('').trigger('keyup');
				$('input:text', thisRow).val(100).trigger('keyup');
				$('li.ls-group-dynamic', thisQuestion).hide();
				$(checkboxRows).not(thisRow).find(':checkbox').prop('checked', false);
			}
 
			else {
				$('li.ls-group-dynamic', thisQuestion).show();
				$('input:text', thisRow).val('').trigger('keyup');
			}
		});
 
		// Listener on the text inputs
		$('.answer-item', thisQuestion).not(checkboxRows).find(':text').on('keyup', function(e) {
			$('input:text', checkboxRows).val('').trigger('keyup');
			$(':checkbox', checkboxRows).prop('checked', false);
				$('li.ls-group-dynamic', thisQuestion).show();
		});
 
	});
</script>
<style type="text/css">
	.numeric-multi .with-inserted-checkbox .ls-input-group {
		position: absolute;
		left: -9999em;
	}
 
	.numeric-multi .with-inserted-checkbox label::before,
	.numeric-multi .with-inserted-checkbox label::after {
		margin: -7px 0 0 0;
	}
</style>

Sample survey attached: 

File Attachment:

File Name: limesurvey...2(1).lss
File Size:21 KB

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
4 months 2 days ago #216611 by Mukluff
Thanks a lot for your solution.

Unfortunately the checkboxes cannot be selected in your example (there are no "checked"-symbols)

Furthermore with "the last two items" I meant that I wanted to split last item in my original example, so in the end I would have 4 items with numeric input fields and two items with checkboxes ("Weiß nicht" and "Keine Angabe").

Would you know a solution for this issue?

Please Log in to join the conversation.

More
4 months 2 days ago #216630 by tpartner

Unfortunately the checkboxes cannot be selected in your example (there are no "checked"-symbols)

I found a bug, use this script:
 
 
<script type="text/javascript" data-author="Tony Partner">
 
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify this question
        var thisQuestion = $('#question{QID}');
        var checkboxRows = $('.answer-item:gt(2)', thisQuestion);
 
        // Insert the check-box
        $('> div', checkboxRows).each(function(i) {
            $(this).addClass('checkbox-item with-inserted-checkbox').append('<input type="checkbox" name="insertedInput'+i+'" id="insertedInput'+i+'" value=""><label for="insertedInput'+i+'" class="checkbox-label control-label"></label>');
        });
                
        // Listener on the checkbox
        $(':checkbox', checkboxRows).on('change', function(e) {
            var thisRow = $(this).closest('.answer-item');
            if($(this).is(':checked')) {
                $('input:text', thisQuestion).val('').trigger('keyup');
                $('input:text', thisRow).val(100).trigger('keyup');
                $('li.ls-group-dynamic', thisQuestion).hide();
                $(checkboxRows).not(thisRow).find(':checkbox').prop('checked', false);
            }
            
            else {
                $('li.ls-group-dynamic', thisQuestion).show();
                $('input:text', thisRow).val('').trigger('keyup');
            }
        });
                
        // Listener on the text inputs
        $('.answer-item', thisQuestion).not(checkboxRows).find(':text').on('keydown change', function(e) {
            $('input:text', checkboxRows).val('').trigger('keyup');
            $(':checkbox', checkboxRows).prop('checked', false);
                $('li.ls-group-dynamic', thisQuestion).show();
        });
        
    });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...7968.lss
File Size:21 KB

Furthermore with "the last two items" I meant that I wanted to split last item in my original example, so in the end I would have 4 items with numeric input fields and two items with checkboxes ("Weiß nicht" and "Keine Angabe").

Then, why would you provide a sample survey with the wrong number of rows?

Change this line:
var checkboxRows = $('.answer-item:gt(2)', thisQuestion);

To this:
var checkboxRows = $('.answer-item:gt(3)', thisQuestion);

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
4 months 2 days ago - 4 months 2 days ago #216631 by Joffm
Change this
var checkboxRows = $('.answer-item:gt(2)', thisQuestion);
to
var checkboxRows = $('.answer-item:gt(3)', thisQuestion);

and adapt your subquestions
 

 
Though you coded the  last two items "98" and "99" you will get "100" in each of the two columns.

 

This is set in this line of the script
$('input:text', thisRow).val(100).trigger('keyup');

And, yes, the checkboxes are not checked very well.
 

Let's wait for Tony's answer.

Joffm



 


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
Last edit: 4 months 2 days ago by Joffm.

Please Log in to join the conversation.

More
4 months 2 days ago #216637 by Mukluff
Thanks a lot guys, the code works and the "100" value shouldn't be a Problem after the data export. The only remaining problem is, that the code doesn't seem to work when the question is mandatory, which it must be (sorry that I didn't mention this before). I try to work around this with validation commands.  

Please Log in to join the conversation.

More
4 months 2 days ago - 4 months 2 days ago #216640 by Joffm

the code doesn't seem to work when the question is mandatory


The code works.
But you have 6 subquestions (even if two are displayed as checkbox) and only fill 4 of them, or only one.
So it is obvious that the "mandatory" condition never is TRUE.

This you have to do by validation.
 


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 4 months 2 days ago by Joffm.

Please Log in to join the conversation.

More
4 months 2 days ago #216642 by tpartner
Try this:

count(self.sq_11, self.sq_12, self.sq_13, self.sq_14) == 4 
OR 
count(self.sq_98, self.sq_99) == 1

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