Block columns on Side by Side question based on previous column answers | XM Community
Solved

Block columns on Side by Side question based on previous column answers

  • 23 February 2024
  • 6 replies
  • 110 views
I
Badge +1

Hey, I’m building a questionnaire for my masters thesis using qualtrics and I’m having some difficulties in the coding area (as I know nothing about the matter lol)

As of right now, I am trying to come up with a code that can do the following:

If a respondent selects, on column number one (i.e., “Fantasia”) the answer “Nunca fantasiei com isto”, I would like for column number two (i.e., “Período Temporal da Fantasia”) to be blocked, as the respondent will have no need to answer that column.

The same logic should apply to column number three (i.e., “Atividade”); meaning, if on that column, the respondent selects the answer “Nunca fiz isto”, I want column number four (i.e., Período Temporal da Atividade) to be blocked, since the respondent will have no need to answer that column as well. 

 

You can see the visuals on the images below!

I appreciate every help I can get :)

 

 

icon

Best answer by omkarkewat 24 February 2024, 15:39

View original

6 replies

kgillis
Rank
Userlevel 3
Badge +11

Right click in column 2, select display logic, set the condition(s). Repeat in column 3 

 

KG
I
Badge +1

Hi, thanks for the reply!

I tried that and it didn’t work, I’m guessing because in doing so we are working with the logics of the questions, not with the logics of the table/columns itself.

The question is the entirety of the table (side by side question), so changing the logic of it wouldn’t really accomplish what I’m looking for :/ 

 

O
Rank
Userlevel 5
Badge +12

Hi @InesV Assuming you want to disable column 2 and 4 if any of the value is selected in column 1 and 3 respectively. Can you try the below code.

Qualtrics.SurveyEngine.addOnReady(function () {
    const quest = this;
    const qc = quest.questionContainer;

    const sbs_column_toggle = function (control_column, target_column) {
        const control_options = qc.querySelectorAll(".Choice .SBS" + control_column);

        control_options.forEach((item) => {
            item.addEventListener(
                "change",
                (el) => {
                    let target_row;
                    el.target.ancestors().forEach((item) => {
                        if (item.classList.contains("Choice")) {
                            target_row = item;
                        }
                    });
                    const row_target_column = target_row.querySelectorAll(".SBS" + target_column);
                    setTimeout(() => {
                        if (el.target.value !== "") {
                            row_target_column.forEach((cell) => {
                                cell.disabled = true;
                                cell.style.opacity = "0.5";
                                cell.style.pointerEvents = "none";
                                cell.querySelectorAll(".q-checked").forEach((button) => button.classList.remove("q-checked"));
                            });
                        } else {
                            row_target_column.forEach((cell) => {
                                cell.disabled = false;
                                cell.style.opacity = "";
                                cell.style.pointerEvents = "";
                            });
                        }
                    }, 100);
                },
                false
            );
        });
    };

    // Assuming the first dropdown in column 1 controls the second dropdown in column 2
    sbs_column_toggle(1, 2); // Disable column 2 if any option in column 1 is selected
        sbs_column_toggle(3, 4); // Disable column 4 if any option in column 3 is selected
});

 

I
Badge +1

@omkarkewat Thank you so much for your reply and help! 

The goal is not exactly to disable column 2 and 4 if any of the value is selected in column 1 and 3 respectively, but it’s something very close to that.

What I want to do is disable column 2 and 4 if the respondent chooses only the first option/value in column 1 (“Nunca fantasiei com isto”) and 3 (“Nunca fiz isto”), respectively! 

Is there any way to adapt the code you provided me in that direction? 

 

Thank you again, your help is very valuable for my work :)

O
Rank
Userlevel 5
Badge +12

hi @InesV can you try the below code.

 

Qualtrics.SurveyEngine.addOnReady(function () {
    const quest = this;
    const qc = quest.questionContainer;

    const sbs_column_toggle = function (control_column, target_column) {
        const control_options = qc.querySelectorAll(".Choice .SBS" + control_column);

        control_options.forEach((item) => {
            item.addEventListener(
                "change",
                (el) => {
                    let target_row;
                    el.target.ancestors().forEach((item) => {
                        if (item.classList.contains("Choice")) {
                            target_row = item;
                        }
                    });
                    const row_target_column = target_row.querySelectorAll(".SBS" + target_column);
                    setTimeout(() => {
                        if (el.target.value === "1") {
                            row_target_column.forEach((cell) => {
                                cell.disabled = true;
                                cell.style.opacity = "0.5";
                                cell.style.pointerEvents = "none";
                                cell.querySelectorAll(".q-checked").forEach((button) => button.classList.remove("q-checked"));
                            });
                        } else {
                            row_target_column.forEach((cell) => {
                                cell.disabled = false;
                                cell.style.opacity = "";
                                cell.style.pointerEvents = "";
                            });
                        }
                    }, 100);
                },
                false
            );
        });
    };

    // Assuming the first dropdown in column 1 controls the second dropdown in column 2
    sbs_column_toggle(1, 2); // Disable column 2 if the first option in column 1 is selected
    // Assuming the third dropdown in column 3 controls the fourth dropdown in column 4
    sbs_column_toggle(3, 4); // Disable column 4 if the first option in column 3 is selected
});

I
Badge +1

@omkarkewat I adapted the code you gave me and came up with the following: 

Qualtrics.SurveyEngine.addOnReady(function () {
    const quest = this;
    const qc = quest.questionContainer;

    const sbs_column_toggle = function (control_column, target_column, target_value) {
        const control_options = qc.querySelectorAll(".Choice .SBS" + control_column);

        control_options.forEach((item) => {
            item.addEventListener(
                "change",
                (el) => {
                    let target_row;
                    el.target.ancestors().forEach((item) => {
                        if (item.classList.contains("Choice")) {
                            target_row = item;
                        }
                    });
                    const row_target_column = target_row.querySelectorAll(".SBS" + target_column);
                    setTimeout(() => {
                        if (el.target.value === target_value) {
                            row_target_column.forEach((cell) => {
                                cell.disabled = true;
                                cell.style.opacity = "0.5";
                                cell.style.pointerEvents = "none";
                                cell.querySelectorAll(".q-checked").forEach((button) => button.classList.remove("q-checked"));
                            });
                        } else {
                            row_target_column.forEach((cell) => {
                                cell.disabled = false;
                                cell.style.opacity = "";
                                cell.style.pointerEvents = "";
                            });
                        }
                    }, 100);
                },
                false
            );
        });
    };

    // Disable column 2 if "1" is selected in column 1
    sbs_column_toggle(1, 2, "1");

    // Disable column 4 if "1" is selected in column 3
    sbs_column_toggle(3, 4, "1");
});
 

It works perfectly now! :) I can’t thank you enough

Leave a Reply


Terms & Conditions