3x3 Click Image Grid / Block

Question

I'm fishing for a neat solution to this question. Appreciate any assistance.

I have 9 images in a 3x3 grid or block. All images will be square shaped and the same size. Imagine the 3x3 block has a light grey border surrounding it.

Hope you have got the idea?

Q1image will ask the respondent to select an image. Maybe selecting an image can be indicated by sinking or raising the image?

We then ask a couple of simple questions about the Q1image selected image.

Now onto Q2image: We now display the same block of images except the selected image at Q1image is now inactive (or greyed out). The images can appear in a different order to Q1image. The second image is selected and the same process continues.

We go through the same process for Q3image to Q8image, with the selected images becoming inactive as they are selected at previous questions.

We then reach Q9image which I'd like to auto-populate (as it happens with any question where only one response is available).

Looking forward to your reply.

Thanks.

Answer 1

Hi Paul,

I did something similar long time back. Check link below:

https://kesurvey.sawtoothsoftware.com/adtest/cgi-bin/ciwweb.pl?studyname=adtest

If you want I can forward you code so that you can modify as per your requirement.

Regards,
Saurabh

Comments

Hi Saurabh,

Could I possibly get a copy of that code?  I need to do something similar and your example is a great starting point for me.

Julia
julia@avkonline.net

---

sure, will send tomorrow!

---

That would be great - thanks!

---

here it is: https://we.tl/FqBy782IND

---

Hey Saurabh,

Can you please send us the file again with read write permission , as i am experiencing an error while opening the file.

---

Share your e-mail id, will send you as attachment

Answer 2

I've taken a stab at this.  I started by creating a free format question with a hidden, numeric variable named "Selected."

The HTML of the free format looks something like this:

<input name="[% QuestionName() %]_Selected" id="[% QuestionName() %]_Selected" type="hidden" value="">

<img class="selectableImage" data-img="1" src="http://via.placeholder.com/250x250"/>
<img class="selectableImage" data-img="2" src="http://via.placeholder.com/250x250"/>
<img class="selectableImage" data-img="3" src="http://via.placeholder.com/250x250"/>
<img class="selectableImage" data-img="4" src="http://via.placeholder.com/250x250"/>
<img class="selectableImage" data-img="5" src="http://via.placeholder.com/250x250"/>
<img class="selectableImage" data-img="6" src="http://via.placeholder.com/250x250"/>
<img class="selectableImage" data-img="7" src="http://via.placeholder.com/250x250"/>
<img class="selectableImage" data-img="8" src="http://via.placeholder.com/250x250"/>
<img class="selectableImage" data-img="9" src="http://via.placeholder.com/250x250"/>

<style>
.selectableImage {
    width: 30%;
    max-width: 250px;
    cursor: pointer;
}

.selectableImage.disabled {
    opacity: 0.5;
    cursor: default;
}
</style>

<script>
$(document).ready(function(){
    $('.selectableImage[data-img="[% Q1Image_Selected %]"]').addClass('disabled');
})

$('.selectableImage').click(function(){
    if (!$(this).hasClass('disabled')) {
        $('#[% QuestionName() %]_Selected').val($(this).data('img'));
        SSI_SubmitMe();
    }
})
</script>

Line 16 should be updated with the width you want the images on a desktop screen.

Line 28 should be copy-and-pasted as necessary.  You'll need one line 28 for each previous image selection question; then you just need to update the copy-and-pasted Sawtooth Scripts for each previous image question.