Have an idea?

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

Hide rows in select Question

Hello, I would like to ask you for advise. I can't solve the problem. I have a Select Question A1 single response. In total, we have over 70 items. I would like to offer answers gradually. Not all at once. I now use SSI8. I also tried branching but it's not ideal. Unfortunately, this example does not work. Can you help me, please?

Example:
I will display the item first 1,2,11 - The other rows are hidden.
if A1 = 2 show rows 1,2,3,7 - if ((A1==2) hide [4,5,6,7,8,9,10,11...19], show [1,2,3,7]
if A1 = 3 show rows 1,2,3,4,5,6
if A1 = 11 show rows 1,11,12,16
etc.

1- type of vehicle
2 - car
3 - petrol
4 - male
5 - medium
6 - large
7 - diesel
8 - male
9 - medium
10 - large
11 - motorcycle
12 - petrol
13 - male
14 - medium
15 - large
16 - electric
17 - male
18 - medium
19 - large
 
<script type="text/javascript">
$(document).ready(function(){
    $('#[% QuestionName() %]_div .response_row:nth-child(1)').show();
    $('#[% QuestionName() %]_div .response_row:nth-child(2)').show();
    $('#[% QuestionName() %]_div .response_row:nth-child(3)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(4)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(5)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(6)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(7)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(8)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(9)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(10)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(11)').show();
<--etc (19)-->

})
function SSI_CustomGraphicalRadiobox(GraphicalRadioboxObj, InputObj)
{var choice=SSI_GetValue([% QuestionName() %]);
    if ((choice==2) {
        $(document).ready(function(){
    $('#[% QuestionName() %]_div .response_row:nth-child(1)').show();
    $('#[% QuestionName() %]_div .response_row:nth-child(2)').show();
    $('#[% QuestionName() %]_div .response_row:nth-child(3)').show();
    $('#[% QuestionName() %]_div .response_row:nth-child(4)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(5)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(6)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(7)').show();
    $('#[% QuestionName() %]_div .response_row:nth-child(8)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(9)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(10)').hide();
    $('#[% QuestionName() %]_div .response_row:nth-child(11)').hide();
<--etc (19)-->

})
}
    else if ((choice==3) {
        $(document).ready(function(){
    $('#[% QuestionName() %]_div .response_row:nth-child(1)').show();
<--etc (19)-->
})
}
}
</script>
asked Sep 28, 2021 by Martin

1 Answer

0 votes
Nice start, Martin.  A few thoughts if you want to keep at it:

* If you're not already familiar with it, I would recommend familiarizing yourself with common formatting practices in programming.  There are free formatters (or "beautifiers") you could run your JavaScript through if you want.  After doing this, I was able to see two typos in your code: your "if" and "else if" lines have two open parens but only one close paren.

* If you look in your browser's console on this page, you'll likely see an error coming from your "SSI_GetValue" line.  It's great that you're using Sawtooth Script to handle the question name, but be sure to remember to surround it with apostrophes or quotation marks if the value is going to be text.

SSI_GetValue('[% QuestionName() %]')


* We could discuss document.ready if you want, but the long story short is that you should keep the first use and remove the other two.  The contents of your "if" and "else if" should just be the code you want ran and nothing else.

If you're in a hurry, though, here's my take on the task at hand:

<script>
$(document).ready(SSI_CustomGraphicalRadiobox);

function SSI_CustomGraphicalRadiobox() {
    // Parameters
    var show = {
        0: [1, 2, 11],
        1: [1, 2, 11],
        2: [1, 2, 3, 7],
        3: [1, 2, 3, 4, 5, 6],
        11: [1, 11, 12, 16]
    };
    
    // Run
    $('#[% QuestionName() %]_div .clickable').hide();
    var resp = SSI_GetValue('[% QuestionName() %]');
    show[resp].forEach(function(item){
        $('#[% QuestionName() %]_' + item).closest('.clickable').show();
    });
}
</script>


You can expand lines 7-11 with your visibility requirements.  I'd be happy to answer any questions on how this code works.
answered Sep 28, 2021 by Zachary Platinum Sawtooth Software, Inc. (202,300 points)
I know you mentioned that "Branching" didn't quite meet your needs.  Maybe "Drilldown Dropdowns" would be a better fit?

https://sawtoothsoftware.com/resources/question-library/drilldown-dropdowns
Thank you Zachary, you are a magician :). And you're right, I'm still a beginner. The code was not correct, I was just looking for a way to solve the task. I couldn't do that. I will use your advice. Thank you for the great help.
Thank you, I offered the "Branching" and "Drilldown Dropdowns". But the client has a different graphic idea, so I'm looking for an unconventional solution with which I don't have much experience. Fortunately, there is your great help.
...