Welcome to the LimeSurvey Community Forum

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

SCROLL DOWN type question on multiple columns

  • Fran1991
  • Fran1991's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
3 years 4 months ago #208489 by Fran1991
Hello everyone, it is a pleasure to greet you

I am currently in a dilemma, my client asks me to show him a somewhat broad list of brands to evaluate, however what he asks me is to show him several SCROLL DOWN drop-down lists in a single question
Below for an idea of ​​what I'm looking for, instead of showing the options I want to show six SCROLL DOWN drop down lists



I have searched the manual but have not been successful in finding a solution.

I would appreciate if anyone has any solution options for this.

Thank you.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 4 months ago - 3 years 4 months ago #208496 by Joffm
Hi,
there are many examples here in the forum.
If you really want to have only six dropdowns, like this?


enter this script in source code mode
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="">select...</option>\
  <option value="1">Adam</option>\
  <option value="2">Bert</option>\
  <option value="3">Carl</option>\
</select>');     
$('.answer-item.answer_cell_X002', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">select...</option>\
  <option value="1">Alpha</option>\
  <option value="2">Bravo</option>\
  <option value="3">Charly</option>\
</select>'); 
$('.answer-item.answer_cell_X003', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">select...</option>\
  <option value="1">One</option>\
  <option value="2">Two</option>\
  <option value="3">Three</option>\
  <option value="4">Four</option>\
  <option value="5">Five</option>\
  <option value="6">Six</option>\
  <option value="7">Seven</option>\
  <option value="8">Eight</option>\
  <option value="9">Nine</option>\
  <option value="10">Ten</option>\
</select>'); 
$('.answer-item.answer_cell_X004', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">select...</option>\
  <option value="1">good</option>\
  <option value="2">average</option>\
  <option value="3">bad</option>\
</select>'); 
$('.answer-item.answer_cell_X005', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">select...</option>\
  <option value="1">high</option>\
  <option value="2">medium</option>\
  <option value="3">low</option>\
</select>'); 
$('.answer-item.answer_cell_X006', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">select...</option>\
  <option value="1">AAAA</option>\
  <option value="2">BBBB</option>\
  <option value="3">CCCC</option>\
  <option value="4">DDDD</option>\
  <option value="5">EEEE</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>

Adapt to your needs.
And consider that the columns are coded "X001", "X002",...

Or - knowing that Limesurvey uses the bootstrap library
use "searchable dropdowns" and order them by setting the css class to "col-sm-3"


searchable


Here a sample

File Attachment:

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


Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 years 4 months ago by Joffm.
The topic has been locked.
  • Fran1991
  • Fran1991's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
3 years 4 months ago #208502 by Fran1991
Replied by Fran1991 on topic SCROLL DOWN type question on multiple columns
Thank you very much Joffm

This is what I was looking for.

But now I have another question regarding this.
Is there a script in which the option that has been marked in the menu on the left can be hidden?

What the client asks me now is that in each
List menu shows the 20 brands and that in each menu one up to a maximum of 6 brands was selected, so in each list the selected brand would have to be hidden in the previous list of brands

I hope to be clear.

And I would greatly appreciate your help.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 4 months ago - 3 years 4 months ago #208505 by Joffm
So, there is multi select in the dropdowns?
You did not mention that.

And, not as far as I know.


But I think, what you really want to do is to distribute your 20 brands into 6 buckets, maybe not all.
So you should have a look at the question theme "cardsort".
Here an example with four buckets and some css


You find this theme here
github.com/tpartner?tab=repositories
wher you also find the "searchable dropdown" and others.


Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 years 4 months ago by Joffm.
The topic has been locked.
  • Fran1991
  • Fran1991's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
3 years 4 months ago #208508 by Fran1991
Replied by Fran1991 on topic SCROLL DOWN type question on multiple columns
Hello JOffm

Not really,
What I am looking for is to have my 20 brands in each of the 7 menus, that is, that in each menu you can select one of all 20 brands so that in each menu I can only select one brand and that in menu 2 already The brand you select in menu 1, in menu 3 does not appear, the brand you selected in menu 1 and menu 2 does not appear, Something like a type of matrix filter that hides the options selected in the previous menus .

Thanks Joffm for your time.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 4 months ago - 3 years 4 months ago #208509 by Joffm
Okay,
as I said, array filter don't work in dropdowns.
You see, you are not the first who asks this question, especially for a scenario like "country" - "region" - "city".

But nevertheless the cardsort works, if you validate each bucket that only one brand can be entered.

Obviously there shall be some order of the brands; otherwise you could use a simple multiple question to select 6 of them.
So why not use a ranking question to rank the first 6.
Your idea does not consider that the respondent might not click from left to right, but click the first, then the third drop-down. And ...

Btw: in my sample you can validate the array with "unique(self)" to avoid double selections.

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 years 4 months ago by Joffm.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose