Hiding side-by-side statements pending previous statement answer | XM Community
Solved

Hiding side-by-side statements pending previous statement answer

K
Rank
Userlevel 1
Badge +3

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!

icon

Best answer by ahmedA 17 March 2021, 07:05

View original

12 replies

A
Rank
Userlevel 7
Badge +21

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.");
}
}
};
});

K
Rank
Userlevel 1
Badge +3

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!

A
Rank
Userlevel 7
Badge +21

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.

K
Rank
Userlevel 1
Badge +3

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?

A
Rank
Userlevel 7
Badge +21

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

1 Attachment
K
Rank
Userlevel 1
Badge +3

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

A
Rank
Userlevel 7
Badge +21

Which browser are you using?

K
Rank
Userlevel 1
Badge +3

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?

A
Rank
Userlevel 7
Badge +21

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.

A
Rank
Userlevel 7
Badge +21

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.

K
Rank
Userlevel 1
Badge +3

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!

K
Rank
Userlevel 1
Badge +3

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_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("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*/

});

Leave a Reply


Terms & Conditions