Welcome to the LimeSurvey Community Forum

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

Array with multiple type options

AAAlime
Topic Author
Offline
New Member

More

3 years 6 months ago #208032 by AAAlime

Array with multiple type options was created by AAAlime

Hello everyone!

I saw very old answer to a similar question, which are not working in my version (LimeSurvey 3.22.24) so I just re-propose it and ask for your kind support!

I need to create an Array question such as the one here attached, with 3 sub-questions and with two answers as numbers (or drop-down menu) and a last column for comments (i.e. for a free text). Can someone help me with the Java Script I have to paste and where I can put it?

Many many thanks!!

The topic has been locked.

Joffm
Offline
LimeSurvey Community Team

More

3 years 6 months ago #208034 by Joffm

Replied by Joffm on topic Array with multiple type options

Hi,
there are really many recent examples which work in LS 3.x.

Here:
Use an array(text) with three columns:
As you see I coded the subquestion of the x-axis "X001", "X002",...

Code:

<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
 
    // Insert selects
    $('.answer-item.answer_cell_X001', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">...</option>\
  <option value="1">1</option>\
  <option value="2">2</option>\
  <option value="3">3</option>\
  <option value="4">4</option>\
  <option value="5">5</option>\
</select>');
 
    $('.answer-item.answer_cell_X002', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">...</option>\
  <option value="1">1</option>\
  <option value="2">2</option>\
  <option value="3">3</option>\
  <option value="4">4</option>\
  <option value="5">5</option>\
</select>');
 
    // Listeners
    $('.inserted-select', thisQuestion).on('change', function(i) {
      if($(this).val() != '') {
        $(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).trigger('change');
      }
      else {
        $(this).closest('.answer-item').find('input:text').val('').trigger('change');
      }
    });
 
  // Returning to page
    $('.with-select input:text', thisQuestion).each(function(i) {
      var thisCell = $(this).closest('.answer-item');
      var inputText = $.trim($(this).val());
      $('select.inserted-select', thisCell).val(inputText);
    });
 
    // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
  });
</script>

File Attachment:

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

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The topic has been locked.

AAAlime
Topic Author
Offline
New Member

More

3 years 6 months ago #208045 by AAAlime

Replied by AAAlime on topic Array with multiple type options

Many thanks Joffm!
But unfortunately when I past it in the "source" box of my Array question it doesn't work for me... what shall I change more than the X-axis code?

Moreover, I would need to have the second and the third column smaller than the third column, do you think it can be possible?

Many thanks again!!

The topic has been locked.

Joffm
Offline
LimeSurvey Community Team

More

3 years 6 months ago #208053 by Joffm

Replied by Joffm on topic Array with multiple type options

Hi,
1. Did you import my sample? What happens?
2. Are you really sure you have the rights to insert and use javascript?
Is in "Configuration / Global Settings / Security" "filter HTML..." OFF?

3. If you like to have the two ranking columns smaller, yes there is a solution. But also javascript.
So we have to solve the first two points.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The topic has been locked.

AAAlime
Topic Author
Offline
New Member

More

3 years 6 months ago #208055 by AAAlime

Replied by AAAlime on topic Array with multiple type options

Thank you again Joffm!

Yes, I am allowed to use JavaScript, I already used it before for other issues.

Actually, I copied and pasted your sample and here below what happened:

The topic has been locked.

AAAlime
Topic Author
Offline
New Member

More

3 years 6 months ago #208056 by AAAlime

Replied by AAAlime on topic Array with multiple type options

Hi Joffm! Now it is working! I don't know what was the problem but with your script now it works perfectly! Any tips on how to reduce column 2 and 3 width now?

Many many thanks you are great!!!

The topic has been locked.

Joffm
Offline
LimeSurvey Community Team

More

3 years 6 months ago #208066 by Joffm

Replied by Joffm on topic Array with multiple type options

Hi,

here is the script

Code:

<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');

This is new. You have to add this.

Code:

// Add a question class
    thisQuestion.addClass('custom-array');
 
    // Column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });

Code:

// Insert selects
    $('.answer-item.answer_cell_X001', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">...</option>\
  <option value="1">1</option>\
  <option value="2">2</option>\
  <option value="3">3</option>\
  <option value="4">4</option>\
  <option value="5">5</option>\
</select>');
 
    $('.answer-item.answer_cell_X002', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">...</option>\
  <option value="1">1</option>\
  <option value="2">2</option>\
  <option value="3">3</option>\
  <option value="4">4</option>\
  <option value="5">5</option>\
</select>');
 
    // Listeners
    $('.inserted-select', thisQuestion).on('change', function(i) {
      if($(this).val() != '') {
        $(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).trigger('change');
      }
      else {
        $(this).closest('.answer-item').find('input:text').val('').trigger('change');
      }
    });
 
  // Returning to page
    $('.with-select input:text', thisQuestion).each(function(i) {
      var thisCell = $(this).closest('.answer-item');
      var inputText = $.trim($(this).val());
      $('select.inserted-select', thisCell).val(inputText);
    });
 
    // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
  });
</script>

And add this css; feel free to adapt the values.

Code:

<style type="text/css">.custom-array table.subquestion-list col {
    width: auto !important;
  }
 
  .custom-array table.subquestion-list thead .column-0 {  width: 25%; }
  .custom-array table.subquestion-list thead .column-1 {  width: 10%; }
  .custom-array table.subquestion-list thead .column-2 {  width: 10%; }
  .custom-array table.subquestion-list thead .column-3 {  width: 55%; }
</style>

File Attachment:

File Name: limesurvey... (2).lss
File Size:22 KB

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The topic has been locked.

AAAlime
Topic Author
Offline
New Member

More

3 years 6 months ago #208070 by AAAlime

Replied by AAAlime on topic Array with multiple type options

Thank you Sooooo Much!!!

That's gorgeous!!

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

Array with multiple type options

File Attachment:

File Attachment:

Lime-years ahead

Legal

About Us

Open Source