Welcome to the LimeSurvey Community Forum

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

Adding textbox in basic array

  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 9 months ago #170068 by krosser
Replied by krosser on topic Adding textbox in basic array
Hi guys,

I need to make an array question with textboxes similar to this



I have a code from Tony to place the textboxes in different columns.
Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    $('#question{QID}').cbArrayComments3({
      column: 3 // Text Input column (-1 will default to last column)
    });
  });
</script>

But when you type in the textboxes, the other radio buttons are automatically unchecked. Usually, it is what you would want, but in my case the comment is for one of the answer columns. So I wonder if it is possible to modify the code to allow the radio buttons be checked while keeping the text?

Many thanks! :)

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 9 months ago #170112 by krosser
Replied by krosser on topic Adding textbox in basic array
Well, in my case, the change in cbArrayComments worked. :laugh:
Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    $('#question{QID}').cbArrayCommentsgov2q4a({
      column: 3 // Text Input column (-1 will default to last column)
    });
  });
</script>

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 9 months ago #170114 by krosser
Replied by krosser on topic Adding textbox in basic array
Hey Tony, do you think it is possible to move two multiple short text questions on top an array? Or perhaps an array(texts) to an array? I have to make a multiple choice question with two textbox columns, similar to this:

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 9 months ago - 5 years 9 months ago #170234 by tpartner
Replied by tpartner on topic Adding textbox in basic array
I would be inclined to use an array-texts type question and swap out some of the text inputs for checkbox inputs.

Add a script like this to the question source. The check-boxes will give a value of "Y" in the data when checked.

My time is limited this week so I will leave it to you to test the data and, perhaps, adjust styling.

Code:
<script type="text/javascript" charset="utf-8">
 
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Column-specific classes
    $('tr.subquestion-list', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
 
    // Insert checkboxes
    $('.answer-item.column-1, .answer-item.column-2, .answer-item.column-3, .answer-item.column-4, .answer-item.column-7, .answer-item.column-8', thisQuestion).addClass('custom-checkbox-item');
    $('.custom-checkbox-item', thisQuestion).each(function(i) {
      var thisID = $('input:text:eq(0)', this).attr('id');
      $('label', this).before('<input class="" id="'+thisID+'" value="Y" type="checkbox" name="'+thisID.replace(/answer/, '')+'" />');
      if($('input:text:eq(0)', this).val() == 'Y') {
        $('input:checkbox:eq(0)', this).prop('checked', true);
      }
      $(this).removeClass('text-item').addClass('checkbox-item');
      $('input:text:eq(0)', this).remove();
    });
 
    // Identify exclusive items
    $('.answer-item.column-1, .answer-item.column-2, .answer-item.column-3, .answer-item.column-4, .answer-item.column-5, .answer-item.column-6', thisQuestion).addClass('non-exclusive-item');
    $('.answer-item.column-7, .answer-item.column-8', thisQuestion).addClass('exclusive-item');
 
    // Listeners for exclusive items
    $('.non-exclusive-item input:checkbox', thisQuestion).on('change', function(e) {
      if($(this).is(':checked')) {
        $(this).closest('tr.subquestion-list').find('.exclusive-item input:checkbox').prop('checked', false);
      }
    });
    $('.non-exclusive-item input:text', thisQuestion).on('keyup change', function(e) {
      if($.trim($(this).val()) != '') {
        $(this).closest('tr.subquestion-list').find('.exclusive-item input:checkbox').prop('checked', false);
      }
    });
    $('.exclusive-item input:checkbox', thisQuestion).on('change', function(e) {
      if($(this).is(':checked')) {
        var thisItem = $(this).closest('.answer-item');
        $(this).closest('tr.subquestion-list').find('.answer-item').not(thisItem).find('input:checkbox').prop('checked', false);
        $(this).closest('tr.subquestion-list').find('input:text').val('');
      }
    });
    });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...6-21.lss
File Size:23 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 5 years 9 months ago by tpartner.
The following user(s) said Thank You: krosser
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 9 months ago #170296 by krosser
Replied by krosser on topic Adding textbox in basic array
Wow! That is a great idea. :woohoo:
I have tested the code and it works nicely. You help is very much appreciated!

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 6 months ago #174270 by krosser
Replied by krosser on topic Adding textbox in basic array

tpartner wrote: I would be inclined to use an array-texts type question and swap out some of the text inputs for checkbox inputs.

Add a script like this to the question source. The check-boxes will give a value of "Y" in the data when checked.

My time is limited this week so I will leave it to you to test the data and, perhaps, adjust styling.

Code:
<script type="text/javascript" charset="utf-8">
 
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Column-specific classes
    $('tr.subquestion-list', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
 
    // Insert checkboxes
    $('.answer-item.column-1, .answer-item.column-2, .answer-item.column-3, .answer-item.column-4, .answer-item.column-7, .answer-item.column-8', thisQuestion).addClass('custom-checkbox-item');
    $('.custom-checkbox-item', thisQuestion).each(function(i) {
      var thisID = $('input:text:eq(0)', this).attr('id');
      $('label', this).before('<input class="" id="'+thisID+'" value="Y" type="checkbox" name="'+thisID.replace(/answer/, '')+'" />');
      if($('input:text:eq(0)', this).val() == 'Y') {
        $('input:checkbox:eq(0)', this).prop('checked', true);
      }
      $(this).removeClass('text-item').addClass('checkbox-item');
      $('input:text:eq(0)', this).remove();
    });
 
    // Identify exclusive items
    $('.answer-item.column-1, .answer-item.column-2, .answer-item.column-3, .answer-item.column-4, .answer-item.column-5, .answer-item.column-6', thisQuestion).addClass('non-exclusive-item');
    $('.answer-item.column-7, .answer-item.column-8', thisQuestion).addClass('exclusive-item');
 
    // Listeners for exclusive items
    $('.non-exclusive-item input:checkbox', thisQuestion).on('change', function(e) {
      if($(this).is(':checked')) {
        $(this).closest('tr.subquestion-list').find('.exclusive-item input:checkbox').prop('checked', false);
      }
    });
    $('.non-exclusive-item input:text', thisQuestion).on('keyup change', function(e) {
      if($.trim($(this).val()) != '') {
        $(this).closest('tr.subquestion-list').find('.exclusive-item input:checkbox').prop('checked', false);
      }
    });
    $('.exclusive-item input:checkbox', thisQuestion).on('change', function(e) {
      if($(this).is(':checked')) {
        var thisItem = $(this).closest('.answer-item');
        $(this).closest('tr.subquestion-list').find('.answer-item').not(thisItem).find('input:checkbox').prop('checked', false);
        $(this).closest('tr.subquestion-list').find('input:text').val('');
      }
    });
    });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...6-21.lss
File Size:23 KB



Hi Tony,

Can you please help out with modifying this code so that only certain text inputs are swapped out for checkbox inputs?

I need to make this type of question:



See, the 1st column is only 3 first rows and the last one is kept as a text input for the "other".

The relevant part of your original code:
Code:
<script type="text/javascript" charset="utf-8">
 
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Column-specific classes
    $('tr.subquestion-list', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
 
    // Insert checkboxes
    $('.answer-item.column-1', thisQuestion).addClass('custom-checkbox-item');
    $('.custom-checkbox-item', thisQuestion).each(function(i) {
      var thisID = $('input:text:eq(0)', this).attr('id');
      $('label', this).before('<input class="" id="'+thisID+'" value="Y" type="checkbox" name="'+thisID.replace(/answer/, '')+'" />');
      if($('input:text:eq(0)', this).val() == 'Y') {
        $('input:checkbox:eq(0)', this).prop('checked', true);
      }
      $(this).removeClass('text-item').addClass('checkbox-item');
      $('input:text:eq(0)', this).remove();
    });
 
 
    });
</script>

File Attachment:

File Name: limesurvey...6125.lss
File Size:20 KB

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 6 months ago #174317 by tpartner
Replied by tpartner on topic Adding textbox in basic array
Try this:

Code:
    // Insert checkboxes
    $('.answer-item.column-1:lt(3)', thisQuestion).addClass('custom-checkbox-item');
    ...

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: krosser
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 6 months ago #174332 by krosser
Replied by krosser on topic Adding textbox in basic array
Perfect! Thank you!
I wonder if that extra "lt" you added stands for "less than" or something else?

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 6 months ago - 5 years 6 months ago #174335 by tpartner
Replied by tpartner on topic Adding textbox in basic array
Yes, :lt(3) targets elements with an index of less than 3. Since element indexing starts at 0, that targets all elements found before the fourth one.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 5 years 6 months ago by tpartner.
The following user(s) said Thank You: holch, krosser
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 6 months ago #174344 by holch
Replied by holch on topic Adding textbox in basic array
Works like a charm! Saved for when I might need it one day. ;-)

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The topic has been locked.
More
3 years 11 months ago #197677 by Chrisou
Replied by Chrisou on topic Adding textbox in basic array
Hi, I'm very new to LimeSurvey and am now stuck at this point, where I'd like to use the format you generously provided - especially the horizontal one, with the options on the left and the response fields on the right and "other" on the far right. Since I'm not very well-versed in coding, I need further instructions on this, because if I just copy the whole script to the source of where it says "Question:" (after clicking "edit question"), nothing will show. Do I have to edit some settings or add the script somewhere else entirely?
I would really appreciate it if you (or someone else in this forum) would help me with this issue. Let me know if you need further details.
I'm using LimeSurvey online, if that makes any difference.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago #197679 by Joffm
Replied by Joffm on topic Adding textbox in basic array
Hi, you answered to a thread that started more than 2 years ago, and contains a lot of different designs and scripts.

So, what exactly are you referring to?
As there are a lot of screenshots included, show us the one you want to achieve.

And: Of course, it is correct to include the script in the surce of the question, but sometimes more than one question are merged.

And, what version of LS are you using?

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose