Have an idea?

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

Question Library - Not Applicable: Per Question with multiple check boxes

This question is most likely aimed at Zachary ...

I have a question where I would like to apply the Not Applicable: Per Question feature from the QUESTION LIBRARY. The key difference is I would like to display 2 check boxes - one for None and one for Don't know.

I would like to apply this technique to both an O/E question and a numeric question.

So the respondent has the choice of entering a response in the text box or numeric box) or selecting one of the check boxes.

Thank you.
asked Nov 20, 2017 by Paul Moon Platinum (65,230 points)

1 Answer

0 votes
 
Best answer
Paul, I had Zach help me with the same thing a while back and this is the code I have from that.  Create your select question with the None and Don't Know options and put this in the footer.

<style>
#[% QuestionName() %]_div {
    display: none;
}
 
.error_quest_highlight2 {
    border: 1px solid red !important;
}
</style>
 
<script>
$(window).on('load', function(){
    // Question
    var question = $('#[% QuestionName() %]_div').prevAll('.question')[0].id.replace(/_div/, '');
    var qdiv = $('#' + question + '_div');
     
    // Move N/A field
    $(qdiv).find('.question_body').append($('#[% QuestionName() %]_div .response_row'));
     
    // N/A click event
    $(document).on('customGraphicalCheckbox', function(event, graphicalObj, inputObj, bln){
        if (inputObj.name.startsWith('[% QuestionName() %]_')) {
            // Disable and clear question
            if (SSI_GetValue('[% QuestionName() %]_1') || SSI_GetValue('[% QuestionName() %]_2')) {
                // Inputs, textareas, selects
                $(qdiv).find('input[type=text]').val('').prop('disabled', true);
                $(qdiv).find('input[type=tel]').val('').prop('disabled', true);
                $(qdiv).find('textarea').val('').prop('disabled', true);
                $(qdiv).find('select').val('').prop('disabled', true);
                 
                // Graphical radios and checks
                $(qdiv).find('input[type=radio]').each(function(){
                    SSI_RadioReset(this.name);
                    SSI_DisableGraphicalInput(this.id);
                });
                $(qdiv).find('input[type=checkbox]').each(function(){
                    if (this.id != '[% QuestionName() %]_1' && this.id != '[% QuestionName() %]_2') {
                        SSI_SetSelect(this.id, false);
                        SSI_DisableGraphicalInput(this.id);
                    }
                });
                 
                // Semantic diffs
                $(qdiv).find('.ui-slider').each(function(){
                    $(this).find('input').val('');
                    $(this).find('.ui-slider-handle').css('left', '50%');
                    $(this).slider('disable');
                });
                 
                // Drag-and-drop ranking
                $(qdiv).find('.draggable_button').each(function(){
                    $(this).find('input').val('');
                    $(this).find('.rank_number').text('');
                });
                $(qdiv).find('.unranked_sort_area').append($(qdiv).find('.ranked_sort_area .draggable_button'));
                $(qdiv).find('.ui-sortable').sortable('option', 'cancel', '.draggable_button');
            }
         
            // Enable question
            else {
                // Inputs, textareas, selects
                $(qdiv).find('input[type=text]').prop('disabled', false);
                $(qdiv).find('input[type=tel]').prop('disabled', false);
                $(qdiv).find('textarea').prop('disabled', false);
                $(qdiv).find('select').prop('disabled', false);
 
                // Graphical radios and checks
                $(qdiv).find('input[type=radio]').each(function(){
                    SSI_EnableGraphicalInput(this.id);
                });
                $(qdiv).find('input[type=checkbox]').each(function(){
                    if (this.id != '[% QuestionName() %]_1' && this.id != '[% QuestionName() %]_2') {
                        SSI_EnableGraphicalInput(this.id);
                    }
                });
 
                // Semantic diffs
                $(qdiv).find('.ui-slider').each(function(){
                    $(this).slider('enable');
                });
                 
                // Drag-and-drop ranking
                $(qdiv).find('.ui-sortable').sortable('option', 'cancel', '');
            }
        }
    });
    $(document).trigger('customGraphicalCheckbox', [undefined, {name: '[% QuestionName() %]_1'}, SSI_GetValue('[% QuestionName() %]_1')]);
    $(document).trigger('customGraphicalCheckbox', [undefined, {name: '[% QuestionName() %]_2'}, SSI_GetValue('[% QuestionName() %]_2')]);
})
 
function SSI_CustomGraphicalCheckbox(graphicalObj, inputObj, bln) {
    $(document).trigger('customGraphicalCheckbox', [graphicalObj, inputObj, bln]);
}
</script>
answered Nov 20, 2017 by Jay Rutherford Gold (26,800 points)
selected Nov 20, 2017 by Paul Moon
Jay, I had this working nicely when testing in Google Chrome and then noticed it does not work in Internet Explorer. I'll send an email to Zachary hoping to gain a magic fix. Stay tuned ...
Looks like IE doesn't support startsWith.  Replace that line of the code with this:

if (/^[% QuestionName() %]_/.test(inputObj.name)) {
I just tested that out in IE and looks like it's working across browsers now on my end.
Just tested it out on Chrome, IE and my iPhone. Works like a charm.

Awesome as always Zachary.

I'm running out of things to say?

Can't thank you enough for another rescue mission!
Agree Jay. Zachary to rescue again! Gotta love his work.
...