Custom select with single correct answer

Question

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!

Answer 1

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:

<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');
        originalNext.hide();
        originalNext.after(clonedNext);
        clonedNext.click(function() {
            if (verification()) {
                SSI_SubmitMe();
            } else {
                var bigError = $('#error_box');
                bigError.text(bigErrorMessage);
                bigError.removeClass('HideElement').addClass('ShowElement');
                $('#[% 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);
            }
        });
    });
</script>
<style>
    #cloned_next_button {
        color: white;
        font-size: 16px;
        border: none;
        border-radius: 4px;
        outline: none;
    }
</style>

Line 4 should be updated with the correct answer.  Lines 5 and 6 can be adjusted with the error text that will be shown.

Comments

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.