Record which images are clicked on

Question

Hi all ... I have an upcoming survey where a bunch of images are shown.  I will  program in the magnific thingo so that they can "pick up" an image for a closer look, but, ideally, I would also like to record which ones they picked up.  The order would also be nice but not necessary if it's unduly complicated.  Anyone done this before?  I'm using 9.8.1 and plan to set this up in free format.

Answer 1

We can do that.  I'd start by adding new variables to your free format question, one for each image.  Be sure to add the variable code to your HTML.  It can look like this:

<input name="[% QuestionName() %]_ImageClicked1" id="[% QuestionName() %]_ImageClicked1" type="hidden" value=""/>
<input name="[% QuestionName() %]_ImageClicked2" id="[% QuestionName() %]_ImageClicked2" type="hidden" value=""/>
<input name="[% QuestionName() %]_ImageClicked3" id="[% QuestionName() %]_ImageClicked3" type="hidden" value=""/>

Next add the "saveClicksImage" class to all the images you want to add this behavior to, like this:

<img src="..." class="saveClicksImage"/>

Finally, adding this script to the free format question should do the work:

<script>
$(document).ready(function(){
    // Params
    var variableBaseName = 'ImageClicked';
    var imageClass = 'saveClicksImage';
    
    // Run
    var images = $('.' + imageClass);
    
    var order = 0;    
    for (var i = 0; i < images.length; i++) {
        var variable = '[% QuestionName() %]_' + variableBaseName + (i + 1);
        $(images).eq(i).data('variable', variable);
        order = Math.max(order, Number($('#' + variable).val()));
    }
    
    $(images).click(function(){
        var variable = $('#' + $(this).data('variable'));
        if (!$(variable).val()) {
            $(variable).val(++order);
        }
    });
})
</script>

Lines 4 and 5 can be updated if you chose to give the variables or the class a different name than me.

Comments

You're awesome!  Thanks, Zachary