Welcome to the LimeSurvey Community Forum

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

Hide suffix on multiple numeric question

Mukluff
Topic Author
Offline
New Member

More

2 years 10 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
Offline
LimeSurvey Community Team

More

2 years 10 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
Topic Author
Offline
New Member

More

2 years 10 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
Offline
LimeSurvey Community Team

More

2 years 10 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
Offline
LimeSurvey Community Team

More

2 years 10 months ago - 2 years 10 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: 2 years 10 months ago by Joffm.

The topic has been locked.

Mukluff
Topic Author
Offline
New Member

More

2 years 10 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
Offline
LimeSurvey Community Team

More

2 years 10 months ago - 2 years 10 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: 2 years 10 months ago by Joffm.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

2 years 10 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.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Hide suffix on multiple numeric question

File Attachment:

File Attachment:

Lime-years ahead

Legal

About Us

Open Source