Have an idea?

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

Force swiping all horizontal concepts before making selection in Mobile CBC

In a mobile environment, if my design used the 'swipe concepts horizontally' option, can I force respondent to swipe all the concepts to the right before allowing them make a selection? For example, gray out the 'select' button until they see all concepts to the right.

We already found studies we fielded this way had a bias in the earlier concepts being selected more often than the later ones.

Many thanks!
Jin
asked Apr 15, 2018 by lu144 (140 points)
Hello Jin, hello Zachary,

Is this swiping concept already available in version 8.4?

I am looking for a swiping function as I would like to integrate a quick, interactive screening of a list of items in a survey.
I am imaging something like displaying a picture of an item  with the instructions: swipe left = I am not interested in this item, swipe right = I am interested in this item. This should be done item after item.

Unfortunately I was not able to find information about such a function in the documentation or in this forum (besides this post).

Any hint would be highly appreciated.

Best regards!

1 Answer

0 votes
I've been interested in trying this for a while.  Add this to your CBC and test to verify that it behaves how you want:

<style>
.cbcCloneButton {
    opacity: 0.5;
    cursor: default !important;
}
</style>

<script>
$(document).ready(function(){
    if (isMobileCbc('[% QuestionName() %]')) {
        disableIfUnansweredCbc('[% QuestionName() %]');
    }
    testForEnablingCbc('[% QuestionName() %]');
    $('#[% QuestionName() %]_div .owl-carousel').on('changed.owl.carousel', function(){
        var interval = setInterval(function(){
            testForEnablingCbc('[% QuestionName() %]');
            clearInterval(interval);
        }, 250);
    });
})

$(window).resize(function(){
    var interval = setInterval(function(){
        if (!isMobileCbc('[% QuestionName() %]')) {
            enableCbc('[% QuestionName() %]');
        }
        clearInterval(interval);
    }, 250);
})

function getCbcInputType(questionName) {
    if ($('#' + questionName + '_div .cbc_task.discrete').length) {
        return 1;
    }
    if ($('#' + questionName + '_div .cbc_task.best_worst').length) {
        return 2;
    }
    if ($('#' + questionName + '_div .cbc_task.constant_sum').length) {
        return 3;
    }
    return -1;
}

function isMobileCbc(questionName) {
    return $('#' + questionName + '_div .owl-item').length > 0;
}

function disableIfUnansweredCbc(questionName) {
    switch (getCbcInputType(questionName)) {
        case 1:
            if (SSI_GetValue(questionName) == 0) {
                disableButtonCbc(questionName);
            }
            break;
        case 2:
            if (SSI_GetValue(questionName + '_b') == 0 && SSI_GetValue(questionName + '_w') == 0) {
                disableButtonCbc(questionName);
            }
            break;
        case 3:
            if (Number($('#' + questionName + '_total').val()) == 0) {
                $('input[id^=' + questionName + '_]').prop('disabled', true);
            }
            break;
    }
}

function disableButtonCbc(questionName) {
    $('#' + questionName + '_div .task_select_button').each(function(){
        var clone = $(this).clone();
        $(clone).addClass('cbcCloneButton');
        $(clone).find('.input_cell').remove();
        $(this).hide();
        $(this).after($(clone));
    });
}

function testForEnablingCbc(questionName) {
    $('#' + questionName + '_div .owl-item.center').addClass('owlSeen');
    if (!$('#' + questionName + '_div .owl-item:not(.owlSeen)').length) {
        enableCbc(questionName);
    }
}

function enableCbc(questionName) {
    switch (getCbcInputType(questionName)) {
        case 1:
        case 2:
            $('#' + questionName + '_div .cbcCloneButton').each(function(){
                $(this).prev().show();
                $(this).remove();
            });
            break;
        case 3:
            $('input[id^=' + questionName + '_]').prop('disabled', false);
            break;
    }
}
</script>
answered Apr 16, 2018 by Zachary Platinum Sawtooth Software, Inc. (124,125 points)
Thanks a lot Zachary for the quick response. However, I couldn't get it to work. Not sure if there's any parameter that I need to change. I'm just starting to learn some JS and am far from being able to make adaptations of the codes to fit my situation. I had sent an email to Tech Support referring to this post, hopefully I could get some further help. Thanks!
...