Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Hide suffix on multiple numeric question

  • Mukluff
  • Mukluff's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 11 months ago #216587 by Mukluff
Hide suffix on multiple numeric question was created 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:

Code:
<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:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago #216589 by tpartner
Replied by tpartner on topic Hide suffix on multiple numeric question
This script and  these styles will insert "exclusive" checkboxes in the last two rows and hide the suffix in those rows.

Code:
<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>
Code:
<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.
The topic has been locked.
  • Mukluff
  • Mukluff's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 11 months ago #216611 by Mukluff
Replied by Mukluff on topic Hide suffix on multiple numeric question
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?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago #216630 by tpartner
Replied by tpartner on topic Hide suffix on multiple numeric question

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

I found a bug, use this script:
 
 
Code:
<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:
Code:
var checkboxRows = $('.answer-item:gt(2)', thisQuestion);

To this:
Code:
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.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago - 3 years 11 months ago #216631 by Joffm
Replied by Joffm on topic Hide suffix on multiple numeric question
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
Last edit: 3 years 11 months ago by Joffm.
The topic has been locked.
  • Mukluff
  • Mukluff's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 11 months ago #216637 by Mukluff
Replied by Mukluff on topic Hide suffix on multiple numeric question
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.  
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago - 3 years 11 months ago #216640 by Joffm
Replied by Joffm on topic Hide suffix on multiple numeric question

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: 3 years 11 months ago by Joffm.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago #216642 by tpartner
Replied by tpartner on topic Hide suffix on multiple numeric question
Try this:

Code:
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.
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source