I have to create a side by side question selecting days to work in and hours per day and lunch break duration:
Is there a way to put in validation that Column 2 (Hours) and Column 3 (Lunch Break) will only be activated when Column 1 (Work Day) is selected? I've been looking on the basic features of Qualtrics and there is no options in the Column Options.
Also to force response Column 2 and 3, when Column 1 is selected.
Then have validation for the text box to put in between 8 - 10 numerical value only. The only option available in Column Option is Numerical Value (which doesn't restrict the participant to put in more than 10, Minimum Length (which doesn't restrict letters to be included). I was looking for a combination of those.
So, the question is:
Selecting Column 1 will activate Column 2 and 3
Force response Column 2 and 3 if Column 1 is selected
Column 2 has validation of numerical value and 2-digits only
OR
Maximum 5 selection in Column 1, then force response Column 2 and 3 if Column 1 is selected.
Column 2 has validation of numerical value and 2-digits only
Adding in requirements and force response on Side by Side questions
+6
I've answered your first question earlier. If you search the commnunity, you can find it.
For the others, you can use the inbuilt custom validation.
+6
https://community.qualtrics.com/XMcommunity/discussion/comment/53966#Comment_53966Thanks, Ahmed!
I saw the demo: https://iima.au1.qualtrics.com/jfe/preview/previewId/6caf466c-0db6-4964-a292-5ac372c61942/SV_4UvrcAjPQLSvewS?Q_CHL=preview&Q_SurveyVersionID=current
And this absolutely can work when I toggle Column 1, then 2 and 3 gets activated. I just don't know how to revise the code you created.
Qualtrics.SurveyEngine.addOnReady(function () {
const quest = this;
const qc = quest.questionContainer;
const sbs_column_toggle = function (control_column, enable_option, target_column) {
const control_options = qc.querySelectorAll(".Choice .SBS" + control_column);
const enable_column = control_options[enable_option - 1].classList[1];
disable_all(target_column);
control_options.forEach((item) => {
item.addEventListener(
"click",
(el) => {
let target_row;
el.target.ancestors().forEach((item) => {
if (item.classList.contains("Choice")) {
target_row = item;
}
});
const row_control = target_row.querySelector("." + enable_column);
const row_target_column = target_row.querySelectorAll(".SBS" + target_column);
setTimeout(() => {
if (!row_control.querySelector(".q-checked")) {
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
);
});
};
const disable_all = function (target_column) {
const all_inputs = qc.querySelectorAll(".Choice .SBS" + target_column);
all_inputs.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"));
});
};
sbs_column_toggle(3, 1, 4); // Selecting option 1 of column 3 enables column 4
sbs_column_toggle(5, 1, 6); // Selecting option 1 of column 5 enables column 6
sbs_column_toggle(3, 2, 2); // Selecting option 2 of column 3 enables column 2
});
You need to change the lines at the end to:
sbs_column_toggle(1, 1, 2);
sbs_column_toggle(1, 1, 3);
+6
https://community.qualtrics.com/XMcommunity/discussion/comment/53992#Comment_53992This is much appreciated!
+2
Hi,
I have a similar dilemma. I have a side-by-side question where multiple choices can be selected, but I want to set a condition where the participant must select at least one answer per column. How do I do that, please? I have looked at custom validation but can’t work it out.
Thanks
https://community.qualtrics.com/XMcommunity/discussion/comment/53966#Comment_53966Thanks, Ahmed!
I saw the demo: https://iima.au1.qualtrics.com/jfe/preview/previewId/6caf466c-0db6-4964-a292-5ac372c61942/SV_4UvrcAjPQLSvewS?Q_CHL=preview&Q_SurveyVersionID=current
And this absolutely can work when I toggle Column 1, then 2 and 3 gets activated. I just don't know how to revise the code you created.
Qualtrics.SurveyEngine.addOnReady(function () {
const quest = this;
const qc = quest.questionContainer;
const sbs_column_toggle = function (control_column, enable_option, target_column) {
const control_options = qc.querySelectorAll(".Choice .SBS" + control_column);
const enable_column = control_options[enable_option - 1].classList[1];
disable_all(target_column);
control_options.forEach((item) => {
item.addEventListener(
"click",
(el) => {
let target_row;
el.target.ancestors().forEach((item) => {
if (item.classList.contains("Choice")) {
target_row = item;
}
});
const row_control = target_row.querySelector("." + enable_column);
const row_target_column = target_row.querySelectorAll(".SBS" + target_column);
setTimeout(() => {
if (!row_control.querySelector(".q-checked")) {
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
);
});
};
const disable_all = function (target_column) {
const all_inputs = qc.querySelectorAll(".Choice .SBS" + target_column);
all_inputs.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"));
});
};
sbs_column_toggle(3, 1, 4); // Selecting option 1 of column 3 enables column 4
sbs_column_toggle(5, 1, 6); // Selecting option 1 of column 5 enables column 6
sbs_column_toggle(3, 2, 2); // Selecting option 2 of column 3 enables column 2
});
One piece I’m having trouble with: In the control_column, I have multiple options that can be selected. I modified the function calls to be:
sbs_column_toggle(1, 1, 2); // Selecting option 1 of column 1 enables column 2sbs_column_toggle(1, 2, 2); // Selecting option 2 of column 1 enables column 2sbs_column_toggle(1, 3, 2); // Selecting option 3 of column 1 enables column 2sbs_column_toggle(1, 4, 2); // Selecting option 4 of column 1 enables column 2sbs_column_toggle(1, 5, 2); // Selecting option 5 of column 1 enables column 2
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.