Welcome to the LimeSurvey Community Forum

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

Populate a dropdown, from multiple questions

More
10 years 10 months ago #113487 by Matadeleo
Hi,

I am attempting to populate a question, with answers referring to a previous, composite question.

In the group file attached, I have formed an array using multiple question types and need to be able to 'select' which of the Options the survey will be completed as.

File Attachment:

File Name: limesurvey...p_46.lsg
File Size:33.1 KB


Ideally this would be in the form of a following question, which would be populated with any 'Options' that an Age has been entered for.

So if option 1, 2, 3 have ages of 25, 35, 45 and options 4 and 5 are blank - the following question will only allow either 1, 2 or 3 to be selected.

The question type can be any, so long as there can only be 1 definitive answer. - e.g. List-Radio, multiple choice with max answers 1, dropdown list.

Any help with this would be greatly appreciated.
The topic has been locked.
More
10 years 10 months ago #113499 by tpartner
A couple of questions...

1) Can everything be on one page?

2) Do you want the following question options to appear if anything is selected in the corresponding array row, or only if "Age" is populated in that row

3) Instead of the "Multiple question types in array" workaround, would it be okay to use a simple array-texts question and use JavaScript hide the text inputs in columns 2, 3 and 4 and insert radios or check-boxes to control their values?


.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
10 years 10 months ago #113504 by Matadeleo
Hi tpartner,

I have included my replies below -

1) Can everything be on one page?

Yes, we are using group by group for this.

2) Do you want the following question options to appear if anything is selected in the corresponding array row, or only if "Age" is populated in that row

Ideally, only if an Age is entered. This is because in theory it will be possible to select e.g. male/female, and be unable to deselect the option. This can be dealt with at the data stage.

3) Instead of the "Multiple question types in array" workaround, would it be okay to use a simple array-texts question and use JavaScript hide the text inputs in columns 2, 3 and 4 and insert radios or check-boxes to control their values?

I am open to all solutions, and that sounds like an interesting option. So long as we are able to have an option for an Age, gender and a Yes/No question, then it's fine.
The topic has been locked.
More
10 years 10 months ago #113508 by tpartner
In your test group I also see a column for a check-box. Is that required?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
10 years 10 months ago #113509 by tpartner
Assuming the array is to have 5 rows (options), and 4 answer columns (text for "Age", radios for "Gender", radios for "Question 1" and checkbox for "Question 2"), I suggest the following.

A group that consists of:
  • An array-texts question with a single column for "Age"
  • 5 single-choice radio questions for "Gender"
  • 5 single-choice radio questions for "Question 1"
  • 5 multiple-choice questions, each with a single check-box for "Question 2"
  • A single-choice radio questions for "Survey stream"

We can use JavaScript to:
  • Hide the "Gender", "Question 1" and "Question 2" questions
  • Insert 3 new columns in the array
  • Pipe the question text from the "Gender", "Question 1" and "Question 2" questions into the new column headers
  • Move the radios and checkboxes from the "Gender", "Question 1" and "Question 2" questions into the new columns

Then for "Survey stream", we add an array filter based on the array-texts question an use relevance to only show it if more than one "Age" is populated.

The script in the source of the array-texts question would be something like this:
Code:
<script type="text/javascript" charset="utf-8">  
  $(document).ready(function(){
 
    // Identify the questions    
    var thisQuestion = $('#question{QID}');
    var genderQuestions = $(thisQuestion).nextAll('.list-radio').slice( 0, 5);
    var q1Questions = $(thisQuestion).nextAll('.list-radio').slice( 5, 10);
    var q2Questions = $(thisQuestion).nextAll('.multiple-opt').slice( 0, 5);
 
    // Assign some classes
    $(thisQuestion).addClass('multi-question-array');
    $(genderQuestions).addClass('gender-question hidden-question');
    $(q1Questions).addClass('q-1-question hidden-question');
    $(q2Questions).addClass('q-2-question hidden-question');
 
    // Hide the radio and check-box questions
    $('.hidden-question').hide();
 
    // Insert the extra columns
    $('col', thisQuestion).removeAttr('width');
    $('colgroup', thisQuestion).append('<col class="even"><col class="odd"><col class="even">');
    $('thead tr', thisQuestion).append('<th class="answertext"></th><th class="answertext"></th><th class="answertext"></th>');
    $('tr.subquestion-list', thisQuestion).append('<td class="answer-item text-item"></td><td class="answer-item text-item"></td><td class="answer-item text-item"></td>');
    $('thead tr> *', this).each(function(i){
      $(this).addClass('column-'+i);
    });
    $('tr.subquestion-list', thisQuestion).each(function(i){
      $('> *', this).each(function(i){
        $(this).addClass('column-'+i);
      });
    });
 
    // Insert the new column headers
    $('th.answertext:eq(1)', thisQuestion).text($('.gender-question:eq(0) span.asterisk').parent().text());
    $('th.answertext:eq(2)', thisQuestion).text($('.q-1-question:eq(0) span.asterisk').parent().text());
    $('th.answertext:eq(3)', thisQuestion).text($('.q-2-question:eq(0) span.asterisk').parent().text());
 
    // Move the radios and check-boxes into the array
    $(genderQuestions).each(function(i) {
      $('td.column-2:eq('+i+')').append($('ul.answers-list', this));
    });
    $(q1Questions).each(function(i) {
      $('td.column-3:eq('+i+')').append($('ul.answers-list', this));
    });
    $(q2Questions).each(function(i) {
      $('td.column-4:eq('+i+')').append($('ul.subquestions-list', this));
    });
  });
</script>

And you may want to add a few styles to template.css (these are for the default template):
Code:
.multi-question-array table.subquestions-list {
  width: 100%;
}
 
.multi-question-array td.answer-item ul {
  list-style: none;
}
 
.multi-question-array td.answer-item li {
  padding: 0 5px;
  display: inline;
}

Sample survey attached:

File Attachment:

File Name: limesurvey...4765.lss
File Size:39.37 KB



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: Matadeleo
The topic has been locked.
More
10 years 10 months ago #113510 by Matadeleo

tpartner wrote: In your test group I also see a column for a check-box. Is that required?


Apologies for the delay in my reply - the check box is not required. It was a temporary solution, probably should have removed it to avoid any confusion.
The topic has been locked.
More
10 years 10 months ago #113512 by tpartner
Same solution without the check-boxes.

Code:
<script type="text/javascript" charset="utf-8">  
  $(document).ready(function(){
 
    // Identify the questions    
    var thisQuestion = $('#question{QID}');
    var genderQuestions = $(thisQuestion).nextAll('.list-radio').slice( 0, 5);
    var q1Questions = $(thisQuestion).nextAll('.list-radio').slice( 5, 10);
 
    // Assign some classes
    $(thisQuestion).addClass('multi-question-array');
    $(genderQuestions).addClass('gender-question hidden-question');
    $(q1Questions).addClass('q-1-question hidden-question');
 
    // Hide the radio questions
    $('.hidden-question').hide();
 
    // Insert the extra columns
    $('col', thisQuestion).removeAttr('width');
    $('colgroup', thisQuestion).append('<col class="even"><col class="odd">');
    $('thead tr', thisQuestion).append('<th class="answertext"></th><th class="answertext"></th>');
    $('tr.subquestion-list', thisQuestion).append('<td class="answer-item text-item"></td><td class="answer-item text-item"></td>');
    $('thead tr> *', this).each(function(i){
      $(this).addClass('column-'+i);
    });
    $('tr.subquestion-list', thisQuestion).each(function(i){
      $('> *', this).each(function(i){
        $(this).addClass('column-'+i);
      });
    });
 
    // Insert the new column headers
    $('th.answertext:eq(1)', thisQuestion).text($('.gender-question:eq(0) span.asterisk').parent().text());
    $('th.answertext:eq(2)', thisQuestion).text($('.q-1-question:eq(0) span.asterisk').parent().text());
 
    // Move the radios into the array
    $(genderQuestions).each(function(i) {
      $('td.column-2:eq('+i+')').append($('ul.answers-list', this));
    });
    $(q1Questions).each(function(i) {
      $('td.column-3:eq('+i+')').append($('ul.answers-list', this));
    });
  });
</script>

File Attachment:

File Name: limesurvey...4331.lss
File Size:33.51 KB



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: c_schmitz, Matadeleo
The topic has been locked.
More
10 years 10 months ago #113523 by Matadeleo
Thanks for this, I will do some testing but it looks exactly like what I had in mind B)
The topic has been locked.
More
10 years 10 months ago #113872 by Matadeleo
Sorry to be a pain, but can you possibly swap 'Question 1' and the 'Age' question around? I've attempted this myself but can't seem to get it working.
The topic has been locked.
More
10 years 10 months ago #113877 by tpartner
Switch their placement in LimeSurvey and use this script.

Code:
<script type="text/javascript" charset="utf-8">  
  $(document).ready(function(){
 
    // Identify the questions    
    var thisQuestion = $('#question{QID}');
    var q1Question = $(thisQuestion).nextAll('.list-radio').slice( 0, 5);
    var genderQuestion = $(thisQuestion).nextAll('.list-radio').slice( 5, 10);
 
    // Assign some classes
    $(thisQuestion).addClass('multi-question-array');
    $(q1Question).addClass('gender-question hidden-question');
    $(genderQuestion).addClass('q-1-question hidden-question');
 
    // Hide the radio questions
    $('.hidden-question').hide();
 
    // Insert the extra columns
    $('col', thisQuestion).removeAttr('width');
    $('colgroup', thisQuestion).append('<col class="even"><col class="odd">');
    $('thead tr', thisQuestion).append('<th class="answertext"></th><th class="answertext"></th>');
    $('tr.subquestion-list', thisQuestion).append('<td class="answer-item text-item"></td><td class="answer-item text-item"></td>');
    $('thead tr> *', this).each(function(i){
      $(this).addClass('column-'+i);
    });
    $('tr.subquestion-list', thisQuestion).each(function(i){
      $('> *', this).each(function(i){
        $(this).addClass('column-'+i);
      });
    });
 
    // Insert the new column headers
    $('th.answertext:eq(1)', thisQuestion).text($('.gender-question:eq(0) span.asterisk').parent().text());
    $('th.answertext:eq(2)', thisQuestion).text($('.q-1-question:eq(0) span.asterisk').parent().text());
 
    // Move the radios into the array
    $(q1Question).each(function(i) {
      $('td.column-2:eq('+i+')').append($('ul.answers-list', this));
    });
    $(genderQuestion).each(function(i) {
      $('td.column-3:eq('+i+')').append($('ul.answers-list', this));
    });
  });
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
10 years 10 months ago #113878 by Matadeleo

tpartner wrote: Switch their placement in LimeSurvey and use this script.

Code:
<script type="text/javascript" charset="utf-8">  
  $(document).ready(function(){
 
    // Identify the questions    
    var thisQuestion = $('#question{QID}');
    var q1Question = $(thisQuestion).nextAll('.list-radio').slice( 0, 5);
    var genderQuestion = $(thisQuestion).nextAll('.list-radio').slice( 5, 10);
 
    // Assign some classes
    $(thisQuestion).addClass('multi-question-array');
    $(q1Question).addClass('gender-question hidden-question');
    $(genderQuestion).addClass('q-1-question hidden-question');
 
    // Hide the radio questions
    $('.hidden-question').hide();
 
    // Insert the extra columns
    $('col', thisQuestion).removeAttr('width');
    $('colgroup', thisQuestion).append('<col class="even"><col class="odd">');
    $('thead tr', thisQuestion).append('<th class="answertext"></th><th class="answertext"></th>');
    $('tr.subquestion-list', thisQuestion).append('<td class="answer-item text-item"></td><td class="answer-item text-item"></td>');
    $('thead tr> *', this).each(function(i){
      $(this).addClass('column-'+i);
    });
    $('tr.subquestion-list', thisQuestion).each(function(i){
      $('> *', this).each(function(i){
        $(this).addClass('column-'+i);
      });
    });
 
    // Insert the new column headers
    $('th.answertext:eq(1)', thisQuestion).text($('.gender-question:eq(0) span.asterisk').parent().text());
    $('th.answertext:eq(2)', thisQuestion).text($('.q-1-question:eq(0) span.asterisk').parent().text());
 
    // Move the radios into the array
    $(q1Question).each(function(i) {
      $('td.column-2:eq('+i+')').append($('ul.answers-list', this));
    });
    $(genderQuestion).each(function(i) {
      $('td.column-3:eq('+i+')').append($('ul.answers-list', this));
    });
  });
</script>


Good morning tpartner, unfortunately it's not so simple to just switch the placement of the questions as the 'Age' question is an Array(Texts).

Our client has changed their requirements and decided that instead of the second question being filtered from the Age question, they wish for it to be populated via a 'Yes' response to Question 1
The topic has been locked.
More
10 years 10 months ago #113880 by tpartner
I'm sorry, I have no idea where you are going with this now. Can you provide a screenshot or mockup?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
10 years 10 months ago - 10 years 10 months ago #113882 by Matadeleo

tpartner wrote: I'm sorry, I have no idea where you are going with this now. Can you provide a screenshot or mockup?




Here is a mock-up of how it should work -

I am working on the LSS file you attached with your solution to my original question, with the 'Basic' template. The client has decided that instead of using the 'Age' question as an array filter, they require 'Question 1:Yes' to be used to filter the options. (Upon selecting Yes option, at Question 1 - the relevant option should display in the stream question)

Apologies for the confusion!
Last edit: 10 years 10 months ago by Matadeleo.
The topic has been locked.
More
10 years 10 months ago #113887 by tpartner
You cannot filter by a List (Radio) type question.

You will need to add a hidden multiple choice question and manipulate it with JavaScript as the Question 1 radios are clicked.

Unfortunately, I don't have time today for that code.

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: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose