Have an idea?

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

hide/show question based on selection with a single select question

I have tried to implement a hide/show question based on selection with a single select question.
I have tried to modify Zachary's code (https://sawtoothsoftware.com/forum/10285/jquery-hide-show-question-based-on-selection)  with the SSI_CustomGraphicalRadiobox function but wihtout success. Could you help me to do so please?

Thanks a lot in advance.
asked Aug 31, 2016 by S. Klinke

1 Answer

0 votes
This jQuery should do the trick:

<script>
$(document).ready(function(){
    hideAllOtherQ();
})

function SSI_CustomGraphicalRadiobox(graphicalRadioboxObj, inputObj) {
    if (inputObj.name == 'SelectQ') {
        hideAllOtherQ();
        switch (Number(inputObj.value)) {
            case 1:
                $('#OtherQ1_div').show();
                break;
            case 2:
                $('#OtherQ2_div').show();
                break;
            case 3:
                $('#OtherQ3_div').show();
                break;
            case 4:
                $('#OtherQ4_div').show();
                break;
            case 5:
                $('#OtherQ5_div').show();
                break;
        }
    }
}

function hideAllOtherQ() {
    $('#OtherQ1_div').hide();
    $('#OtherQ2_div').hide();
    $('#OtherQ3_div').hide();
    $('#OtherQ4_div').hide();
    $('#OtherQ5_div').hide();
}
</script>


"SelectQ" should be replaced with the name of your select question.  "OtherQ1", "OtherQ2", ..., "OtherQ5" should be replaced with the names of the questions that will be conditionally displayed.
answered Aug 31, 2016 by Zachary Platinum Sawtooth Software, Inc. (84,025 points)
Thanks a lot Zachary.
I am a beginner with javascript, but while I was waiting for your answer, I found another solution which also worked and allowed me to account for another condition on the variable "rand":
<script type="text/javascript">
$(document).ready(function(){
    $('#Q1hr_div').hide();
    $('#Q1fr_div').hide();
    $('#Q1size_div').hide();
    $('#Q1type_div').hide();
    $('#Q1no_div').hide();
})
 
function SSI_CustomGraphicalRadiobox(GraphicalRadioboxObj, InputObj)
{var choice=SSI_GetValue("CE_1");
var rand = [% random1_contract %];
    if ((choice==1||choice==2)&&rand==2) {
        $(document).ready(function(){
    $('#Q1hr_div').show();
    $('#Q1fr_div').hide();
    $('#Q1size_div').show();
    $('#Q1type_div').show();
    $('#Q1no_div').hide();
})
 
    }
    else if ((choice==1||choice==2)&&rand!=2) {
        $(document).ready(function(){
    $('#Q1hr_div').show();
    $('#Q1fr_div').show();
    $('#Q1size_div').show();
    $('#Q1type_div').show();
    $('#Q1no_div').hide();
})
 
    }
    
    else {$(document).ready(function(){
    $('#Q1hr_div').hide();
        $('#Q1fr_div').hide();
    $('#Q1size_div').hide();
    $('#Q1type_div').hide();
    $('#Q1no_div').show();
})
        
}
}
</script>    

However, my problem is that the initial question (CE_1) is a choice task  (CVA exercise) so  that I need to place that code in another question to allow for the code to be different in each choice task. I tried to do so by replacing "var choice=SSI_GetValue("CE_1")" by "var choice=[% CE_1 %]" and deleting the SSI_CustomGraphicalRadiobox function. But it didn't work.
Do you have any solution?
Sandra,

If the new location for the code is still on the same page as the first CVA exercise, then I don't believe you want to make either of those changes.  You still need to use SSI_CustomGraphicalRadiobox as that is the function that is called whenever any radio button is clicked on a page.  You still need to use SSI_GetValue instead of Sawtooth Script because the newly clicked radio button hasn't been saved to the database yet (SSI_GetValue reads values from the page; Sawtooth Script reads values from the database).

If you put your code as is in the footer of any one of the conditionally-displayed questions, I believe it should work fine.  Please try that and tell me if it works.

P.S.: By chance, are you planning on having the same five questions for each CVA question?  If so, I could modify the code so that CE_1 points to Q1 questions, CE_2 points to Q2 questions, etc.
Indeed it worked without changing anything. And now I understand the difference between SSI_GetValue and Sawtooth Script.
Thanks a lot again for your precious help and immediate answers.
...