Have an idea?

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

Custom select with single correct answer

Dear Sawtooth Users,

Maybe you can help me out with this. I'm using discover and would really like to do the following:

*I have a multiple choice question, where I want there to be only one correct answer.
*If respondents answer the question incorrectly, I want them to not be able to advance.
*An error message should appear, which tells them to try again.
*They can try again until they get the question right

I hope someone can help me. I keep finding similar responses on grid questions, but can't seem to figure out how to move the results across.

Any help would be greatly appreciated. I hope I can pay it forward sooner rather than later!
asked Oct 27, 2022 by Hendrik

1 Answer

0 votes
Best answer
It's not as trivial in Discover as in Lighthouse Studio, but still possible if you have a subscription.  In the select question text area, please click the "Code" button and insert this script:

    $(document).on('ssi_ready', function() {
        // Parameters
        var correctResponse = 3;
        var bigErrorMessage = 'An error has occurred on this page. Please fix this error and try again.';
        var smallErrorMessage = 'Incorrect response.';
        var verification = function() {
            return SSI_GetValue('[% QuestionName() %]') == correctResponse;

        // Run
        var originalNext = $('#next_button');
        var clonedNext = originalNext.clone();
        clonedNext.attr('id', 'cloned_next_button');
        clonedNext.click(function() {
            if (verification()) {
            } else {
                var bigError = $('#error_box');
                $('#[% QuestionName() %]_err').remove();
                var smallError = $('<div id="[% QuestionName() %]_err" class="question_error_box error_messages" role="alert"></div>');
                smallError.append('<div class="question_errors">' + smallErrorMessage + '</div>');
                $('#[% QuestionName() %]_div').prepend(smallError);
    #cloned_next_button {
        color: white;
        font-size: 16px;
        border: none;
        border-radius: 4px;
        outline: none;

Line 4 should be updated with the correct answer.  Lines 5 and 6 can be adjusted with the error text that will be shown.
answered Oct 27, 2022 by Zachary Platinum Sawtooth Software, Inc. (214,575 points)
Hey Zachary,

That worked like a charm. Thank you so much. I'm very confident I would not have figured this out. Seriously, thanks a lot.
No problem.  I'm happy to help if any other questions come up, and welcome to the Sawtooth Software Forum.