How can I implement increment arrow to a ConstantSum study?

Question

When we have a Device Agnostic study we usually have to make It a Discrete Choice type, because ConstantSum on cellphones make respondents lives difficult.

I would like to change the Constant Sum button, so It doesn't appear the keyboard when the person is going to answer the question, the idea was to use increment arrow, and then they would select a "+" or "-" button next to each option. This way we can have ConstantSum on mobiles.

I'm not so familiar to Sawtooth or html yet, that's why I'm asking for help here.

I'm sure It would amazing for my work.

Thanks!

Answer 1

The simplest option may be to change the input elements to type "number."  That could be achieved by adding this script to the CBC:

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div input[type="tel"]').attr('type', 'number');
})
</script>

How the input responds to this change is browser-dependent, though, so you'd need to test to be confident about device agnosticism.  If this approach is insufficient, adding this script will add the two buttons you describe:

<script>
$(document).ready(function(){
    // Settings
    var upLabel = '+';
    var downLabel = '-';

    // Run
    $('#[% QuestionName() %]_div input[type="tel"]').each(function(){
        var input = this;
    
        var downButton = $('<button type="button">' + downLabel + '</button>');
        $(downButton).click(function(){
            var value = Number($(input).val()) || 0;
            $(input).val(value - 1);
        });
        $(input).after(downButton);
        
        var upButton = $('<button type="button">' + upLabel + '</button>');
        $(upButton).click(function(){
            var value = Number($(input).val()) || 0;
            $(input).val(value + 1);
        });
        $(input).after(upButton);
    });
})
</script>

You may want to also apply some CSS to define how these buttons look, but that code would be dependent on your visual requirements.