Not applicable per variable combined with Not applicable per question from library

Question

I have a numeric grid (0-100) with 6 rows. I've added a "Don't know" option for each row using the Not applicable per variable library function which works fine. My client would also like to add a 'Prefer not say' checkbox at the bottom of the page which I've done using the Not applicable per question function for. However, if I select DK for all rows then the 'Not applicable' per question thinks the question isn't answered and if I select the Prefer not to say checkbox, only the DK checkboxes go grey but my numeric stays white.
Is there a way to grey out all numeric and DK checkboxes if I select the 'Not applicable per question' checkbox  and also maintain the normal functionality of the 'Not applicable per variable' when it's not checked?

Also with the NA per variable, Line 7 of the footer can be updated to change the label of the checkboxes which works but I'd like to change the font size. How can I do this with CSS? Can't use normal grid label options.
I tried HTML on line 7 but didn't work on my mobile phone.

Answer 1

The two N/A questions expect to apply to whatever question appear before them in the survey, but they also have a setting you can adjust to explicitly define the question to apply to.  We can make that change to "Not Applicable: Per Question" here.

This doesn't totally solve the problem though, I'm afraid.  Both tools have conflicting disable functionality and custom verification, so we'll need to make some adjustments to get them playing nicely.

In Per Variable's custom verification, find and replace this one line with the other:

if (err) {

if (err && !SSI_GetValue('NotApplicable_1')) {

Replace Per Question's footer with this, noting the specified name of the grid question:

<script>
// --------------------------------------------------
// SETTINGS
// --------------------------------------------------
var GLOBAL_SAWTOOTH_[% QuestionName() %]_SETTINGS = {
    questionName: 'GridQ',
    checkboxMinimumChecks: 0, // If the question uses checkboxes, this can be updated with the minimum number of checks a respondent must respond with.
    widthCssSelector: '',
    errorMessage: 'Question must be answered or "Not Applicable" must be selected.'
};

// --------------------------------------------------
// RUN
// --------------------------------------------------
$(document).ready(function(){
    // Check for BLL
    if (!window.GLOBAL_BETTERLIGHTHOUSELIBRARY) {
        $('body').prepend('<div class="communityQuestionLibraryFatalError">"Not Applicable: Per Question" requires the "Better Lighthouse Library."<br/>Please download it from <a href="https://sawtoothsoftware.com/better-lighthouse-library">here</a> and either add it to this page or place the script in your global questionnaire settings.</div>');
    }
    
    // Question
    if (!GLOBAL_SAWTOOTH_[% QuestionName() %]_SETTINGS.questionName) {
        GLOBAL_SAWTOOTH_[% QuestionName() %]_SETTINGS.questionName = $('#[% QuestionName() %]_div').prevAll('.question')[0].id.replace(/_div/, '');
    }
    var question = GLOBAL_SAWTOOTH_[% QuestionName() %]_SETTINGS.questionName;
    var qdiv = $('#' + question + '_div');
    $(qdiv).addClass('notApplicableTarget').data('notApplicableQuestion', '[% QuestionName() %]');
    
    // Move fields
    var notApplicableResponseBody = $('#[% QuestionName() %]_div .response_body');
    $(qdiv).find('.question_body').append(notApplicableResponseBody);
    
    // Not applicable
    $(qdiv).find('.ui-sortable').sortable('option', 'cancel', '.disabled_draggable_button');
    
    var runNotApplicable = function(){
        var notApplicable = false;
        var notApplicableItems = $('input[name="hid_list_[% QuestionName() %]"]').val().split(',');
        for (var i = 0; i < notApplicableItems.length; i++) {
            if (SSI_GetValue('[% QuestionName() %]_' + notApplicableItems[i])) {
                notApplicable = true;
                break;
            }
        }
        $(qdiv).data('notApplicable', notApplicable);
        
        var notNaFieldCss = ':not([id^="[% QuestionName() %]_"])';
        
        // Special code written for forum #34769
        if (notApplicable) {
            $(qdiv).find('input[type="text"]' + notNaFieldCss + ', input[type="tel"], textarea' + notNaFieldCss + ', select').val('').prop('disabled', true);
            $(qdiv).find('input[type="checkbox"]' + notNaFieldCss).each(function(){
                if (SSI_GetValue(this.id)) {
                    SSI_SetSelect(this.id, false);
                }
                SSI_DisableRadioButtonOrCheckbox(this.id);
            });
        }
        else {
            var notApplicablePerVariable = $('#[% QuestionName() %]_div').prevAll('.question')[0].id.replace(/_div/, '');
            $('input[name="hid_list_' + notApplicablePerVariable + '"]').val().split(',').forEach(function(item){
                if (!SSI_GetValue(notApplicablePerVariable + '_' + item)) {
                    $('#' + question + '_r' + item + '_c1').prop('disabled', false);
                }
            });
            $(qdiv).find('input[type="checkbox"]' + notNaFieldCss).each(function(){
                SSI_EnableRadioButtonOrCheckbox(this.id);
            });
        }
    };
    
    $(document).on('lighthouseCheckboxChanged', runNotApplicable);
    runNotApplicable();
    
    // Resize event
    var widthCssSelector = GLOBAL_SAWTOOTH_[% QuestionName() %]_SETTINGS.widthCssSelector;
    if (widthCssSelector) {
        var originalWidth = $(notApplicableResponseBody).width();
        $(window).resize(function(){
            var customWidth = $(widthCssSelector).width();
            var width = Math.max(originalWidth, customWidth);
            if ($(notApplicableResponseBody).find('.mobile_select').length) {
                width -= 10;
            }
            $(notApplicableResponseBody).find('.response_column').width(width);
        });
        $(window).resize();
    }
})
</script>

<style>
#[% QuestionName() %]_div {
    display: none;
}

.error_quest_highlight2 {
    border: 1px solid red !important;
}

.disabled_draggable_button {
    cursor: default !important;
    opacity: 0.4 !important;
}

.disabled_draggable_button .rank_display {
    display: none;
}

.communityQuestionLibraryFatalError{
    color: red;
    font-weight: bold;
}
</style>

As well as its custom verification with this:

var question = GLOBAL_SAWTOOTH_[% QuestionName() %]_SETTINGS.questionName;
var qdiv = $('#' + question + '_div');
var err;

var notApplicable = false;
var notApplicableItems = $('input[name="hid_list_[% QuestionName() %]"]').val().split(',');
for (var i = 0; i < notApplicableItems.length; i++) {
    if (SSI_GetValue('[% QuestionName() %]_' + notApplicableItems[i])) {
        notApplicable = true;
        break;
    }
}

// Clear error
$(qdiv).find('.error_quest_highlight2').addBack().removeClass('error_quest_highlight2');
$('#' + question + '_err2').remove();

// Not applicable error
if (!notApplicable) {
    var notApplicablePerVariable = $('#[% QuestionName() %]_div').prevAll('.question')[0].id.replace(/_div/, '');
    $('input[name="hid_row_list_' + question + '"]').val().split(',').forEach(function(item){
        if (!$('#' + question + '_r' + item + '_c1').val().length && !SSI_GetValue(notApplicablePerVariable + '_' + item)) {
            err = true;
        }
    });
}

else {
    $(qdiv).find('.disabled_draggable_button input').val(''); // Hack for Sort Vertically / Sort Horizontally ranking questions
}

if (err) {
    err = GLOBAL_SAWTOOTH_[% QuestionName() %]_SETTINGS.errorMessage;
}

// Other specify error
for (var i = 0; i < notApplicableItems.length && !err; i++) {
    var item = notApplicableItems[i];
    if (SSI_GetValue('[% QuestionName() %]_' + item)) {
        var otherSpecifySettings = $('input[name="hid_[% QuestionName() %]_' + item + '_other"]').val();
        if (otherSpecifySettings) {
            var match = otherSpecifySettings.match(/^(\d+),(\d+),(.*)$/);
            var min = Number(match[1]);
            var max = Number(match[2]);
            var errorText = match[3];
            
            var otherSpecify = $('#[% QuestionName() %]_' + item + '_other');
            var len = $(otherSpecify).val().trim().length;
            var error;
            if (len < min) {
                error = len ? 'minimumCharacters' : 'missingAnswer';
            }
            else if (len > max) {
                error = 'maximumCharacters';
            }
            if (error) {
                err = SSI_GetStudySettings().errorMessages[error];
                var createRegex = function(func){
                    return new RegExp('\\[' + '%' + func + '\\(\\)%\\]', 'g');
                };
                err = err.replace(createRegex('ERRTEXT'), errorText).replace(createRegex('ERRMIN'), min).replace(createRegex('ERRMAX'), max);
                $(otherSpecify).addClass('error_quest_highlight2');
            }
        }
    }
}

// Show error
if (err) {
    strErrorMessage = err;

    $(qdiv).removeClass('error_quest_highlight');
    $('#' + question + '_err').remove();
    $(qdiv).addClass('error_quest_highlight2');
    $(qdiv).prepend('<div id="' + question + '_err2" class="question_error_box error_messages"></div>');
    $('#' + question + '_err2').append('<div class="question_errors">' + strErrorMessage + '</div>');
}