Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Can I do a constructed List on the same page as the independent question

I have two questions.

Question1: On which train lines would you like to see increased security at the stations.
     Red
    Green
    Blue
    Orange

Question2: At which stations do you want to see increased security?


I created a list containing all stations for all lines. I then want Question2 to show only those lines associated with what was selected in Quesiton1.  For example if the select 'Red' (Question1 == 1) then I want to display:
  Station1
  Station2
  Station3

If they select 'Orange' (Question1 == 4) then I want to display:
  Station1
  Station11
  Station12

That is easy enough to do using Perl, but that only works if the questions are on different pages. Can I create this dynamic list if Question1 and Question2 are on the same page?
asked Jun 18, 2021 by Nwiggin Bronze (1,745 points)
A constructed list is not up to this task with them being on the same page, unfortunately - we need a frontend solution instead.  Are these both checkbox-type select questions?

If they had been dropdowns, I'd point you to "Drilldown Dropdowns:" https://sawtoothsoftware.com/resources/question-library/drilldown-dropdowns

The more generic "Branching" could handle this, but it would require that multiple versions of Q2 be created: https://sawtoothsoftware.com/resources/question-library/branching

Once you have confirmed that both questions are multiselects, I should be able to write some JS that will hide certain checkboxes from Q2.  How do you imagine Q2 looking when nothing has been chosen in Q1?
Hey Zach,
Both questions are checkbox-type select questions (actually, multiple-select drop downs, but checkbox yes).

I would just say we can keep Q2 hidden until the select something in Q1.

1 Answer

0 votes
This is "Custom Dropdown," correct?  Try adding this script at the end of the second question's footer:

<script>
$(document).ready(runConstructedListBehavior);
$(document).on('lighthouseCheckboxChanged', runConstructedListBehavior);

function runConstructedListBehavior() {
    // Params
    var firstQuestion = 'CustomDropdown1';
    var secondQuestion = 'CustomDropdown2';
    var map = {
        1: [1, 2, 3],
        2: [4, 5, 6],
        3: [7, 8, 9]
    };
    
    // Run
    var anyChecked = false;
    $('#' + secondQuestion + '_div .clickable').addClass('hiddenClickable');
    $('input[name="hid_list_' + firstQuestion + '"]').val().split(',').forEach(function(item){
        if (SSI_GetValue(firstQuestion + '_' + item)) {
            var otherItems = map[item] || [];
            otherItems.forEach(function(otherItem){
                $('#' + secondQuestion + '_' + otherItem).closest('.clickable').removeClass('hiddenClickable');
            });
            anyChecked = true;
        }
    });
    $('#' + secondQuestion + '_div').toggle(anyChecked);
}
</script>


In the parameters section, you can define the names of your two questions and a JavaScript object that controls the relationship between the two questions.  Does that work for you?
answered Jun 21, 2021 by Zachary Platinum Sawtooth Software, Inc. (202,300 points)
...