Grid question with "yes/no" columns: Only advance if every correct answer is chosen.

Question

Hi,

I would like to check, whether a respondent understands the context I present to them. I generated a Grid-type question with two possible answers (columns): Yes and No.

All rows are statements that can be answered with yes/no and each statement has a right and a wrong answer. What I would like is that when the respondent chooses the wrong answer to a statement, that the "next" button does not advance until the respondent answers all questions correctly.

A bonus would be that when the "next" button is clicked, the statement(s) that were answered wrong are highlighted, e.g. by changing the background color of the row and an error message is displayed.

Thanks in advance!
Tom

Answer 1

Custom JavaScript verification can be used to implement correct answers like this.  Try setting your grid's verification code to this:

// Parameters
var correctAnswers = [1, 2, 1, 2];
var errorMessage = "Wrong answer selected.";

// Run
$('.custom_error_highlighting').removeClass('custom_error_highlighting');
$('input[name="hid_row_list_[% QuestionName() %]"]').val().split(',').forEach(function(row){
    if (SSI_GetValue('[% QuestionName() %]_r' + row) != correctAnswers[row - 1]) {
        strErrorMessage = errorMessage;
        $('#[% QuestionName() %]_r' + row + '_row').addClass('custom_error_highlighting');
        $('input[id^="[% QuestionName() %]_r' + row + '_"]').closest('.mobile_grid_card').addClass('custom_error_highlighting');
    }
});

Line 2 should be updated with the correct answer for each row.  Line 3 can be updated with the error message to show.

That will keep respondents from continuing through the survey.  To get the error highlighting you were asking for, please add this to another field in your grid question (footer, HTML header, etc.):

<style>
.custom_error_highlighting {
    border: 1px solid red;
}
</style>

Comments

Thank you very much for your help!