Have an idea?

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

Validation for a mutually exclusive option

Hi Zachary!  

This is GREAT code . . . one additional thing I need to do is this.  I've made an image that says 'No Preference' which would normally be exclusive.

Is there a way to make the last image in the list exclusive, and clear other choices when clicked? [function as a None of the above checkbox]

Thanks!
Julia
related to an answer for: Selecting images in a select question
asked Oct 12, 2017 by jas8278 Bronze (750 points)

1 Answer

+1 vote
Modified code:

<div id="ffImgContainer">
    [% Begin Unverified Perl
        my $htmlOut = '';
        my $imgDiv = '';
        for (my $i = 1; $i <= LISTLENGTH('ImgList'); $i++) {
            $htmlOut .= $imgDiv;
            $imgDiv = '';
            $htmlOut .= LISTLABEL('ImgList', $i);
        }
        return $htmlOut;
    End Unverified %]
</div>
<input name="[% QuestionName() %]_Check1" id="[% QuestionName() %]_Check1" type="hidden" value="0">
<input name="[% QuestionName() %]_Check2" id="[% QuestionName() %]_Check2" type="hidden" value="0">
<input name="[% QuestionName() %]_Check3" id="[% QuestionName() %]_Check3" type="hidden" value="0">
<input name="[% QuestionName() %]_Check4" id="[% QuestionName() %]_Check4" type="hidden" value="0">
<input name="[% QuestionName() %]_Check5" id="[% QuestionName() %]_Check5" type="hidden" value="0">
<input name="[% QuestionName() %]_Check6" id="[% QuestionName() %]_Check6" type="hidden" value="0">
<input name="[% QuestionName() %]_Check7" id="[% QuestionName() %]_Check7" type="hidden" value="0">
<input name="[% QuestionName() %]_Check8" id="[% QuestionName() %]_Check8" type="hidden" value="0">
<input name="[% QuestionName() %]_Check9" id="[% QuestionName() %]_Check9" type="hidden" value="0">
<input name="[% QuestionName() %]_Check10" id="[% QuestionName() %]_Check10" type="hidden" value="0">
 
<style>
#ffImgContainer img {
    cursor: pointer;
}
 
.ffSelected {
    box-shadow: 0px 12px 22px 1px #333;
}
</style>
 
<script>
$(document).ready(function(){
    for (var i = 1; i <= [% ListLength(ImgList) %]; i++) {
        if ($('#[% QuestionName() %]_Check' + i).val() == 1) {
            $('#ffImgContainer img:nth-of-type(' + i + ')').addClass('ffSelected');
        }
    }
})

$('#ffImgContainer img').click(function(){
    var exclusives = [4, 5];

    var index = $('#ffImgContainer img').index($(this)) + 1;
    var exclusive = exclusives.indexOf(index) != -1;
    
    if ($('#[% QuestionName() %]_Check' + index).val() == 1) {
        setFreeFormatImgResponse(index, false);
    }
    else {
        exclusives.forEach(function(i){
            setFreeFormatImgResponse(i, false);
        });
        if (exclusive) {
            for (var i = 1; i <= 10; i++) {
                setFreeFormatImgResponse(i, false);
            }
        }
        setFreeFormatImgResponse(index, true);
    }
})

function setFreeFormatImgResponse(index, bln) {
    if (bln) {
        $('#[% QuestionName() %]_Check' + index).val(1);
        $('#ffImgContainer img:nth-of-type(' + index + ')').addClass('ffSelected');
    }
    else {
        $('#[% QuestionName() %]_Check' + index).val(0);
        $('#ffImgContainer img:nth-of-type(' + index + ')').removeClass('ffSelected');
    }
}
</script>


In addition to the original necessary changes, line 44 should be updated with a comma-separated array of which items should be exclusive.
answered Oct 13, 2017 by Zachary Platinum Sawtooth Software, Inc. (127,375 points)
Perfect - Thank you so much!
data writing when images are rotated
...