Have an idea?

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

data writing when images are rotated

Keeps getting more interesting . . . . so the client loves the clickable images but now I have to rotate them.  I've built a constructed list and call it in the ffImgContainer.  Works fine - but, I need to get the data to write in the same order.  Currently, it's writing 1 - 6 no matter what the image order is.

Any ideas?
related to an answer for: Validation for a mutually exclusive option
asked Oct 20 by jas8278 Bronze (750 points)
Why do you need a constructed list?  Can you just rotate the images in an image editor?
Sorry - wasn't clear on the 'rotation'.  I'm randomizing the order that the images show.

1 Answer

+1 vote
 
Best answer
<div id="ffImgContainer">
    [% Begin Unverified Perl
        my $constructedList = 'ImgList2';
        my $htmlOut = '';
        for (my $i = 1; $i <= LISTLENGTH($constructedList); $i++) {
            $htmlOut .= '<span class="ffImg" data-img="' . LISTVALUE($constructedList, $i) . '">';
            $htmlOut .= LISTLABEL($constructedList, $i);
            $htmlOut .= '</span>';
        }
        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 .ffImg[data-img="' + i + '"] img').addClass('ffSelected');
        }
    }
})
 
$('#ffImgContainer img').click(function(){
    var exclusives = [3, 4];
    
    var img = $(this).closest('.ffImg').data('img');
    var exclusive = exclusives.indexOf(img) != -1;
     
    if ($('#[% QuestionName() %]_Check' + img).val() == 1) {
        setFreeFormatImgResponse(img, false);
    }
    else {
        exclusives.forEach(function(i){
            setFreeFormatImgResponse(i, false);
        });
        if (exclusive) {
            for (var i = 1; i <= 10; i++) {
                setFreeFormatImgResponse(i, false);
            }
        }
        setFreeFormatImgResponse(img, true);
    }
})
 
function setFreeFormatImgResponse(img, bln) {
    if (bln) {
        $('#[% QuestionName() %]_Check' + img).val(1);
        $('#ffImgContainer .ffImg[data-img="' + img + '"] img').addClass('ffSelected');
    }
    else {
        $('#[% QuestionName() %]_Check' + img).val(0);
        $('#ffImgContainer .ffImg[data-img="' + img + '"] img').removeClass('ffSelected');
    }
}
</script>


Lines 3 and 44 must be updated.
answered Oct 20 by Zachary Platinum Sawtooth Software, Inc. (63,875 points)
selected Oct 20 by jas8278
thank you so much - you are greatly appreciated!
...