Have an idea?

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

Scripting pop-up warning during a volumetric conjoint

Hi,

I'm programming a volumetric conjoint where I want to check the total they enter for each task against a value they entered in a previous question. If they exceed the value they entered in the previous question, the survey throws a popup warning saying something along the lines of "You've exceeded your previously entered value, are you sure you wished to input this value?" If they say yes, they can continue with the total they input, if they say no, then they can change the numbers they entered for that conjoint task.

Is this possible in SSI Web 7? What kind of script should I use?

I would like to explore this approach because it will warn them if they accidentally enter a large number but still allow them to continue with a higher than previously stated number if they want to buy more due to price discounts.

Thanks!
asked Aug 22 by Marco Z (140 points)

1 Answer

0 votes
Put this in your CBC:

<div id="volumetricOverlay">
    <div id="volumetricPopUp">
        <div>
            You've exceeded your previously entered value, are you sure you wished to input this value?
        </div>
        <button type="button" id="volumetricYes">Yes</button>
        <button type="button" id="volumetricNo">No</button>
    </div>
</div>


<style>
#next_button,
#volumetricOverlay {
    display: none;
}

#volumetricOverlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
}

#volumetricPopUp {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 999;
    background-color: white;
    border: 1px solid black;
    padding: 10px;
}
</style>


<script>
$(window).on('load', function(){
    $('#next_button').after('<div id="next_button2" class="navigation_button graphical_next_button"/>');
    
    $('#next_button2').click(function(){
        var sum = 0;
        $('#[% QuestionName() %]_div .numeric_input').each(function(){
            sum += Number($(this).val());
        })
        if (sum > [% NumericQ %]) {
            $('#volumetricOverlay').show();
        }
        else {
            SSI_SubmitMe();
        }
    });
})

$('#volumetricYes').click(function(){
    SSI_SubmitMe();
})

$('#volumetricNo').click(function(){
    $('#volumetricOverlay').hide();
})
</script>


"NumericQ" should be replaced with the name of the question that store's the respondents total.

After verifying that the behavior is working correctly, you can optionally modify the HTML or CSS to make the pop up look how you want.
answered Aug 24 by Zachary Platinum Sawtooth Software, Inc. (63,475 points)
Thanks a bunch Zachary!
...