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.