Highlight selected alternative in single select question

Question

Hello,

I have used the following code to highlight the selected alternatives in a multi-select question and use the alternative/an image as the button.

However, I am unable to use the same code for single select questions and wanted to ask if there is any adaptation that could be done for a single select.

Thank you very much

______________________________________

<style>
#[% QuestionName() %]_div .input_cell {
    display: none;
}
 
.selectedImg {
    border: 5px solid blue;
    box-shadow: 10px 10px 5px grey;
}

@media only screen and (max-width: 800px)
.question.select .response_body {
    display: flex !important;
}

.response_body {
    display: flex !important;
    justify-content: center;
}

.clickable {
    background-color: #ffffff !important;
}

</style>

 
<script>
$(document).ready(SSI_CustomGraphicalCheckbox);
function SSI_CustomGraphicalCheckbox() {
    $('input[name="hid_list_[% QuestionName() %]"]').val().split(',').forEach(function(item){
        var id = '[% QuestionName() %]_' + item;
        $('#' + id).closest('.clickable').find('img').toggleClass('selectedImg', SSI_GetValue(id) == 1);
    })
}
</script>

Answer 1

Try replacing the script portion with this:

<script>
$(document).ready(SSI_CustomGraphicalRadiobox);
function SSI_CustomGraphicalRadiobox() {
    var resp = SSI_GetValue('[% QuestionName() %]');
    $('input[name="hid_list_[% QuestionName() %]"]').val().split(',').forEach(function(item){
        var id = '[% QuestionName() %]_' + item;
        $('#' + id).closest('.clickable').find('img').toggleClass('selectedImg', item == resp);
    });
}
</script>

Comments

Thank you, this worked perfectly!