Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

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

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
asked Jan 12 by Tom (220 points)

1 Answer

0 votes
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>
answered Jan 12 by Zachary Platinum Sawtooth Software, Inc. (192,600 points)
...