Using Not Applicable from Question Library for 10 O/E's on same page

Question

I was wondering what the best approach was when using the "Not Applicable" feature from the Question Library for 10 single row O/E's all on the same page?

The check box would clear all 10 O/E's if selected.

Thanks.

Comments

If a grid question with ten rows were permissible, that would certainly be the easiest option.  Failing that, it would probably be easiest to just start with a new select question and write the code for that.  How is the custom verification meant to look for such a case?  Currently, N/A places the checkbox in the previous question, so it can apply the error highlighting around the regular question and checkbox.  How should that look when there are multiple open-end questions but just one checkbox beneath the last one?

---

The 10 O/E's are 10 separate single row questions.

One check box at the bottom.

I would like to either click the check box which clears all O/E's, or allow the respondent to type in any of the 10 O/E's. Not all O/E's need to be responded to. If the check box is not checked, at least one O/E should be responded to.

Answer 1

I understand the verification behavior.  I'm talking about the appearance - the little red boxes.

Skipping that for now, I'd start by setting the select question's footer to this:

<script>
var GLOBAL_[% QuestionName() %]_QUESTIONS;

$(document).ready(function(){
    // Parameters
    var openEnds = ['oe1', 'oe2', 'oe3', 'oe4', 'oe5'];
    
    // Run
    GLOBAL_[% QuestionName() %]_QUESTIONS = openEnds;
    
    $(document).on('lighthouseCheckboxChanged', function(){
        var checked;
        $('input[name="hid_list_[% QuestionName() %]"]').val().split(',').forEach(function(item){
            if (SSI_GetValue('[% QuestionName() %]_' + item)) {
                checked = true;
            }
        });
        if (checked) {
            openEnds.forEach(function(openEnd){
                $('#' + openEnd).val('').prop('disabled', true);
            });
        }
        else {
            openEnds.forEach(function(openEnd){
                $('#' + openEnd).val('').prop('disabled', false);
            });
        }
    });
})
</script>

Line 6 being the names of the open-end questions.

Then give the select question this verification:

var openEnds = GLOBAL_[% QuestionName() %]_QUESTIONS;

var checked;
$('input[name="hid_list_[% QuestionName() %]"]').val().split(',').forEach(function(item){
    if (SSI_GetValue('[% QuestionName() %]_' + item)) {
        checked = true;
    }
});

if (!checked) {
    var answered;
    openEnds.forEach(function(openEnd){
        if (SSI_GetValue(openEnd)) {
            answered = true;
        }
    });
    if (!answered) {
        strErrorMessage = 'error message...';
    }
}

Comments

Thanks Zachary for the latest response.

I setup a little survey which contained the 10 single row O/E's and a select question. All were set to non-compulsory.

I then inserted the scripts above as you indicated.

Initially it wasn't working and then I realised the Better Lighthouse Library question needs to be applied to the very same survey page. Oops there!

So the functionality is now working.

Just to finish off, I just need an error box around the entire page (from above the question script on the 1st O/E to below the select question. I think that would be the best (and probably the easiest too).

I'll send the ssi file to you which might assist in applying the finishing touches.

I would also like to position the check box a little closer to the bottom O/E.

Thanks again.

---

Try this:

<style>
.openend .question_text {
    display: inline;
}
</style>

<script>
var GLOBAL_[% QuestionName() %]_QUESTIONS;

$(document).ready(function(){
    // Parameters
    var openEnds = ['oe1', 'oe2', 'oe3', 'oe4', 'oe5'];
    
    // Run
    GLOBAL_[% QuestionName() %]_QUESTIONS = openEnds;
    
    var questionBody = $('#[% QuestionName() %]_div .question_body');
    openEnds.forEach(function(openEnd){
        questionBody.before($('#' + openEnd + '_div'));
    });
    
    $(document).on('lighthouseCheckboxChanged', function(){
        var checked;
        $('input[name="hid_list_[% QuestionName() %]"]').val().split(',').forEach(function(item){
            if (SSI_GetValue('[% QuestionName() %]_' + item)) {
                checked = true;
            }
        });
        if (checked) {
            openEnds.forEach(function(openEnd){
                $('#' + openEnd).val('').prop('disabled', true);
            });
        }
        else {
            openEnds.forEach(function(openEnd){
                $('#' + openEnd).val('').prop('disabled', false);
            });
        }
    });
})
</script>

---

Nice one mate. That works beautifully.

As always, much appreciated Zachary.