Allow only one answer in grid question

Question

Hi everyone,

I have a 3 x 3 Grid-style question where I want to allow only one cell of the grid to be selectable/checked.

How can I verify this using javascript?

Also, within this question, I would like to use different graphical checkboxes for checked/unchecked than in the rest of the survey. Is this possible?

Best
Kathrin

Answer 1

Add this custom JavaScript verification to the question:

var rows = $('input[name="hid_row_list_[% QuestionName() %]"]').val().split(',');
var columns = $('input[name="hid_col_list_[% QuestionName() %]"]').val().split(',');
var count = 0;
rows.forEach(function(row){
    columns.forEach(function(column){
        if (SSI_GetValue('[% QuestionName() %]_r' + row + '_c' + column)) {
            count++;
        }
    });
});
if (count != 1) {
    strErrorMessage = 'Check exactly one box.';
}

Add this elsewhere to the question:

<style>
#[% QuestionName() %]_div .graphical_select.checkbox {
    background: url(example.com/image1.png) no-repeat center center;
}

#[% QuestionName() %]_div .graphical_select.checkboxselected {
    background: url(example.com/image2.png) no-repeat center center;
}

#[% QuestionName() %]_div .checkbox_svg {
    display: none;
}
</style>

Replace those URLs with the URLs of your images.

Comments

Thank you, this works great!

Is there a way to automatically unselect the previously checked checkbox once another one is selected?

---

Sure, try placing this in the question's footer:

<script>
function SSI_CustomGraphicalCheckbox(graphical, input, checked) {
    if (checked) {
        var match = input.id.match(/^[% QuestionName() %]_r(\d+)_c(\d+)$/);
        if (match) {
            var rows = $('input[name="hid_row_list_[% QuestionName() %]"]').val().split(',');
            var columns = $('input[name="hid_col_list_[% QuestionName() %]"]').val().split(',');
            rows.forEach(function(row){
                columns.forEach(function(column){
                    if (row != match[1] || column != match[2]) {
                        SSI_SetSelect('[% QuestionName() %]_r' + row + '_c' + column, false);
                    }
                });
            });
        }
    }
}
</script>

---

Unfortunately, this did not work. How do I have to change the code if I'm using better lighthouse library?

---

The Better Lighthouse Library is incompatible with SSI_CustomGraphicalRadiobox and SSI_CustomGraphicalCheckbox.  If you look at the section of the BLL labelled "RADIO BUTTON AND CHECKBOX EVENTS," you should find some instructions that should clarify how to get around this incompatibility.

Line 2 of my code above will end up looking like this:

$(document).on('lighthouseCheckboxChanged', function(event, graphical, input, checked) {

And line 17 of it will look like this:

})    

---

Thank you, I was missing the closing ) in line 17, it works now :)