Dynamic open end

Question

Hi All,

I hope someone will able to help me with one small question but makes me lot of problems.
It's row based grid question with 5 rows and 3 columns (+1 optional)

         Yes  /  No  /  It depends   / 'why?'
Row1
Row2
Row3
Row4
Row5

I would like to ask respondent for a comment: 'why?' only if selects 'it depends'
Answers 'Yes/No/It depends' are select questions . 'Why?' should be open end.

I got two problems:
1. Since it row based and radio button there is no option to make 4th column as 'open end'
2. I would like to hide 4th column and show dynamically only if selected 'it depends' for a given row.

Im using SSI Web 7.
Can anyone help?
Thank you!

Answer 1

This can be done with some advanced scripting.

To start, remove the fourth column from your grid question.  Create a second grid question on the same page as your first grid question.  The second grid question should be set to open-ends, not be set to require a response, have the same list of rows, and a column list with only one item in it: "Why?"

Now add this to the footer of your first grid question:

<script>
var GLOBAL_SAWTOOTH_SECONDGRIDQUESTION = 'GridQ2';

document.addEventListener('DOMContentLoaded', function(){
    document.querySelector('#' + GLOBAL_SAWTOOTH_SECONDGRIDQUESTION + '_div').style.display = 'none';
    combineGridQuestions();
    updateOpenEndVisibility();
});

function SSI_CustomGraphicalRadiobox() {
    updateOpenEndVisibility();
}

function combineGridQuestions() {
    var trs = document.querySelectorAll('#[% QuestionName() %]_div .inner_table > tbody > tr').length;
    for (var tr = 1; tr <= trs; tr++) {
        var selected = document.querySelector('#' + GLOBAL_SAWTOOTH_SECONDGRIDQUESTION + '_div .inner_table > tbody > tr:nth-child(' + tr + ') > td:nth-child(2)');
        document.querySelector('#[% QuestionName() %]_div .inner_table > tbody > tr:nth-child(' + tr + ')').appendChild(selected);
    }
}

function updateOpenEndVisibility() {
    var rows = document.querySelectorAll('#[% QuestionName() %]_div .inner_table > tbody > tr').length - 1;
    for (var row = 1; row <= rows; row++) {
        if (SSI_GetValue('[% QuestionName() %]_r' + row) == 3) {
            document.querySelector('#' + GLOBAL_SAWTOOTH_SECONDGRIDQUESTION + '_r' + row + '_c1').disabled = false;
        }
        else {
            document.querySelector('#' + GLOBAL_SAWTOOTH_SECONDGRIDQUESTION + '_r' + row + '_c1').disabled = true;
            document.querySelector('#' + GLOBAL_SAWTOOTH_SECONDGRIDQUESTION + '_r' + row + '_c1').value = '';
        }
    }
}
</script>

Finally, add this to the first grid question's custom JavaScript verification:

var rows = document.querySelectorAll('#[% QuestionName() %]_div .inner_table > tbody > tr').length - 1;
for (var row = 1; row <= rows; row++) {
    if (SSI_GetValue('[% QuestionName() %]_r' + row) == 3 && !SSI_GetValue(GLOBAL_SAWTOOTH_SECONDGRIDQUESTION + '_r' + row + '_c1')) {
        strErrorMessage = 'Response is required.';
    }
}

Comments

Thank you Zahary!
It's very advanced code for me.
I have replaced in the code:
- var GLOBAL_SAWTOOTH_SECONDGRIDQUESTION = 'Q5ICU1';   where Q5ICU1 is my second question name
  - Q5ICU   is my first question name and for all 'QuestionName()' I substituted 'Q5ICU()'

 but for some reason the code doesn't work.
It shows a message = Error: Question 'Q5ICU' - Footer - The function call 'Q5ICU' does not exist.

Do you know what may cause the error?
Thank you !
robson

---

The Sawtooth Script function QuestionName should not be replaced.

---

Thank you very much Zahary for your  answer.
For some reason it still doesn't work. System says: Object does not serve attribute or method "addEventListener".
I wonder if this is because Im using SSI v7 or there is another issue.
Btw. second question is visible on the same page with first question. My intention was that second question with "why?" is hidden until 3rd option is clicked. Best Regards, robson

---

The code is designed to work in SSI Web v7.  Can you tell me what version of what browser you are testing with?

---

Hi Zahary,
Im using Mozilla Firefox 62.0
Regards,
robson

---

Curious.  Would it be possible for you to send in a copy of your study file demonstrating the problem to support@sawtoothsoftware.com?  Of course, irrelevant or sensitive information could be removed from the file before sending it.

---

The "[% QuestionName() %]" should not be replaced, but you were correct in updating the "GLOBAL_SAWTOOTH_SECONDGRIDQUESTION" line with the second grid question's name.  Sorry for the confusion.

---

Thank you very much  Zachary!
Now it works. Hurrah!
robson