Hiding side-by-side statements pending previous statement answer | XM Community
Skip to main content

I've got a side-by-side question with 5 statements as shown:
Q7_v2_2.JPGIdeally, I'd like to hide (or blank out) Segments 2, 3, 4 and 5 unless "No" is selected for "Have you arrived at home?" in the previous statement (in this case, Segment 1). If "No" is selected in Segment 1, then Segment 2 is shown but Segments 3, 4 and 5 are hidden, unless "No" is selected for "Have you arrived at work?" in Segment 2 ...etc until all 5 segments are visible.
Is there any easy way to do this? I tried just standard display logic built into the question for each statement but I don't think that worked because it was within the same question.
Thanks!

Qualtrics.SurveyEngine.addOnReady(function () {
quest = this;
let qc = quest.questionContainer;
let all_rows = qc.querySelectorAll(".Choice");
for (let i = 1; i < all_rows.length; i++) {
all_rows[i].hide();
}
let no_id =
"." + qc.querySelectorAll(".q-radio")[1].parentElement.className.match(/c\\d+/gm).join();
no_id = Number(
qc
.querySelector(no_id + ":not(th)")
.querySelector("input")
.id.split("~")[3]
);
quest.questionclick = function (ev, el) {
if (el.className) {
let row = Number(el.id.split("~")[2]);
let choice = Number(el.id.split("~")[3]);
if (choice == no_id && row < all_rows.length) {
all_rows[row].show();
} else if (choice == no_id && row == all_rows.length) {
alert("Max Rows.");
}
}
};
});


Thanks ahmedA!
This is almost what I needed but not quite.
When I tested the question, the subsequent statement was shown as soon as I chose my second response option in the first column (MODE) from the first statement's dropdown menu, instead of only when I chose "No" in the third column. This happened for all of the statements but only when I chose the second response option, not any other response options from the MODE column. How can I fix that please?
At present, only 4 of my 5 statements are showing with the last (statement 5) not displaying after the alert of Max Rows comes up. How can I change that to display the fifth statement?
Also, I originally had a maximum of 5 statements that could be filled with a free text box question to follow if they had anything else to add. Given this coding above allows me to show only the number of statements required, I might remove that text box option and just increase the number of statements to 10 for example. How can I tweak the number of statements shown to 10 please?
Thanks again for all of your help!


I can't replicate your issue about the mode. See this demo.
The last row not being shown is due an oversight on my part. Please delete the

-1
from both the
all_rows.length - 1
and it should show the last row also.
I've also updated the code in case you just want to copy it.


Thank you for this!
I just tried out your demo and when I select 'Answer 2' in Column A, B or C, the next statement appears. I only want the next statement to appear if answer 2 is selected in Column C. Is there a way to do that?


2021-03-17 10-29-25.zipNot for me. See the attached screengrab


https://www.qualtrics.com/community/discussion/comment/35711#Comment_35711How strange!
This is what I see (sorry, only images!):
Answer 2.JPGAnswer 2_2.JPGAnswer 2_3.JPG


Which browser are you using?


Firefox here.
I'm assuming though, if it happened for me, then in my live survey, there's a chance it could potentially happen for users also, either in Firefox or on various mobile devices?


Yes. I'm seeing it on Firefox also. Let me dig a little bit.
I'm only using Qualtrics' internal functions. And if there's a difference, this a cause of concern.


Okay. Fixed. Check try the updated code.
The issue was that Firefox was detecting a click on the dropdown answer also, while Chrome(and its derivates) were not.


Thank you!!
That's fixed the problem and I've also worked out how to extend it to 10 statements, which is a HUGE help. Thanks so much!


Hi @ahmedA,

I’m rehashing this question for a new purpose but don’t know where/how to tweak the javascript to make it work properly.

The new question:

I have 10 rows available and when the answer ‘Yes’ is ticked for “Add another sport/activity?”, the next row appears (as planned). However, if I tick ‘Term 2’ under “When did they participate?” the next row appears then too! How can I fix this please?

This is the javascript:

Qualtrics.SurveyEngine.addOnload(function()
{
        quest = this;
    let qc = quest.questionContainer;
    let all_rows = qc.querySelectorAll(".Choice");
    for (let i = 1; i < all_rows.length; i++) {
        all_rowsei].hide();
    }
    let no_id =
        "." + qc.querySelectorAll(".q-radio")/1].parentElement.className.match(/c\d+/gm).join();
    no_id = Number(
        qc
            .querySelector(no_id + ":not(th)")
            .querySelector("input")
            .id.split("~")r3]
    );
    quest.questionclick = function (ev, el) {
        if (el.className) {
            let row = Number(el.id.split("~") 2]);
            let choice = Number(el.id.split("~")3]);
            if (choice == no_id && row < all_rows.length) {
                all_rowslrow].show();
            } else if (choice == no_id && row == all_rows.length) {
                alert("That's a lot of sports/physical activity classes outside of school! Please use the text box on the next page to record any additional sports/physical activity classes your child participated in over the past year.");
            }
        }
    };/*Place your JavaScript here to run when the page loads*/

});


Hi all. 

This has been working a treat for ages...but suddenly stopped. Now, when I hit ‘no’, the next line does not display. This is in Chrome; I haven’t yet tested other browsers. Any ideas??

This survey is live, so need to get this updated asap please!

Thanks,
​​​​​​​Kate.


Okay. Fixed. Check try the updated code.
The issue was that Firefox was detecting a click on the dropdown answer also, while Chrome(and its derivates) were not.

Could something like this have happened again as it’s suddenly stopped working - the next lines do not appear whatever is clicked. @ahmedA , are you able to assist please?


Leave a Reply