Not Applicable (per variable) with the single value slider (Update)

Question

Hi Zachary, I'm also trying to combine the current single value slider with the current not applicable (per variable). Unfortunately, this is not working and the above solution seems to be from an earlier version of the "not applicable" question. Is there a comparable solution for the current version? This would be great!

Answer 1

Like before, we need to start by setting the rows of the grid question to not require a response.  After that, let's replace the N/A footer script with this:

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

.error_quest_highlight2 {
    border: 1px solid red !important;
}
</style>

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

$(document).ready(function(){
    // Question, list
    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');
    var list = $('input[name=hid_list_[% QuestionName() %]]').val().split(',').map(Number);

    // Move checkboxes
    $('#[% QuestionName() %]_div .mobile_select').removeClass('mobile_select');
    $('#[% QuestionName() %]_div .response_row').css('text-align', 'center');
    $('#[% QuestionName() %]_div .input_cell').css('display', 'inline-block');
    $('#[% QuestionName() %]_div .option_cell').css('display', 'inline-block');

    if ($(qdiv).hasClass('semanticdiff')) {
        $('#[% QuestionName() %]_div .option_cell').remove();
        $('#' + question + '_div .column_header_row').append('<td>' + GLOBAL_SAWTOOTH_[% QuestionName() %]_SETTINGS.notApplicableLabel + '</td>');
        list.forEach(function(item){
            $('#' + question + '_' + item + '_row').append('<td></td>');
            $('#' + question + '_' + item + '_row > td:last').append($('#[% QuestionName() %]_' + item).closest('.response_row'));
        });
    }
    
    else if ($(qdiv).hasClass('grid')) {
        var grid = SSI_GetGridQuestionSettings(question);
        GLOBAL_SAWTOOTH_[% QuestionName() %]_SETTINGS.grid = grid;
        
        if (!grid.mobile) {
            $('#[% QuestionName() %]_div .option_cell').remove();
            if (grid.orientation == 'row') {
                $('#' + question + '_div .column_header_row').append('<td>' + GLOBAL_SAWTOOTH_[% QuestionName() %]_SETTINGS.notApplicableLabel + '</td>');
                $('#' + question + '_div .inner_table > tbody > tr:first-child > td:last-child').css('text-align', 'center');
                list.forEach(function(item){
                    $('#' + question + '_r' + item + '_row').append('<td></td>');
                    $('#' + question + '_r' + item + '_row > td:last-child').append($('#[% QuestionName() %]_' + item).closest('.response_row'));
                });
            }
            else {
                $('#' + question + '_div .inner_table > tbody').append('<tr><td>' + GLOBAL_SAWTOOTH_[% QuestionName() %]_SETTINGS.notApplicableLabel +'</td></tr>');
                $('#' + question + '_div .inner_table > tbody > tr:last-child > td').css('text-align', 'right');
                list.forEach(function(item){
                    $('#' + question + '_div .inner_table > tbody > tr:last-child').append('<td></td');
                    $('#' + question + '_div .inner_table > tbody > tr:last-child > td:last-child').append($('#[% QuestionName() %]_' + item).closest('.response_row'));
                });
            }
            fixGridAltColors(question);
        }
        
        else {
            $('#[% QuestionName() %]_div .option_cell label').text(GLOBAL_SAWTOOTH_[% QuestionName() %]_SETTINGS.notApplicableLabel);
            var primaryList = grid.orientation == 'row' ? grid.rows : grid.columns;
            for (var i = 0; i < list.length; i++) {
                $('#' + question + '_div .mobile_grid_card:nth-child(' + (i + 1) + ')').append($('#[% QuestionName() %]_' + primaryList[i]).closest('.response_row'));
            }
        }
    }

    // N/A click event
    var runNotApplicable = function(){
        list.forEach(function(item){
            var input = $('#' + question + '_r' + item + '_c1');
            var slider = $(input).siblings('.slider');
            if (SSI_GetValue('[% QuestionName() %]_' + item)) {
                $(input).val('');
                $(slider).slider('value', 0);
                $(slider).find('.sliderHandle').text('');
                $(slider).slider('disable');
            }
            else {
                $(slider).slider('enable');
            }
        });
    };
    
    $(document).on('lighthouseCheckboxChanged', runNotApplicable);
    runNotApplicable();
})

function fixGridAltColors(question) {
    if (!$('#' + question + '_div .mobile_grid').length) {
        var firstCellIsAltColor1 = $('#' + question + '_div .inner_table > tbody > tr:first-child > td:nth-child(1)').hasClass('alt_color1');
        var secondCellIsAltColor1 = $('#' + question + '_div .inner_table > tbody > tr:first-child > td:nth-child(1)').hasClass('alt_color1');
        var primaryAltColor = firstCellIsAltColor1 ? 'alt_color1' : 'alt_color2';
        var secondaryAltColor = firstCellIsAltColor1 ? 'alt_color2' : 'alt_color1';
        
        if (firstCellIsAltColor1 == secondCellIsAltColor1) {
            $('#' + question + '_div .inner_table > tbody > tr:even > td').removeClass(secondaryAltColor).addClass(primaryAltColor);
            $('#' + question + '_div .inner_table > tbody > tr:odd > td').removeClass(primaryAltColor).addClass(secondaryAltColor);
        }
        
        else {
            $('#' + question + '_div .inner_table > tbody > tr > td:even').removeClass(secondaryAltColor).addClass(primaryAltColor);
            $('#' + question + '_div .inner_table > tbody > tr > td:odd').removeClass(primaryAltColor).addClass(secondaryAltColor);
        }
    }
}
</script>

That should get the behavior working, but the not applicable label does look a little weird on my machine.  You could remove the text from the label if that is an option.  If you need to keep the label, try removing this part of the grid's script:

    // Hide first row / first column
    if (gridOrientation == 'r') {
        $('#[% QuestionName() %]_div .inner_table > tbody > tr:first-child > td').hide();
    }

    else {
        $('#[% QuestionName() %]_div .inner_table > tbody > tr > td:first-child').hide();
    }

Comments

Hi Zachary, thank you very much. It works as expected and I was able to align the not applicable label with showing the column header row as suggested above.