The base structure of JavaScript syntax in Qualtrics is as
follows:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
1.1 Absolute Frequency
Items
Absolute frequency items have three columns:
“amount”, i.e., number of times per interval
“timeframe”, i.e., per day/week, in the past month, in the past
year
“not in the past year”
where respondents are expected to fill in the first two columns and
check the third column if they have not experienced the event in the
past year. That is, the respondent should fill in EITHER the first two
columns OR check the third column. The JavaScript code below is used to
ensure that if the third column is checked, the first two columns are
hidden and cleared. It also ensures that at least one of the first two
columns is filled in or that the third column is checked before allowing
the survey next button to be clicked to advance the survey to the next
page. It allows for this advancement logic to function for three blocks
of absolute frequency questions on the same page. If you would like to
add additional blocks, identify their QID by clicking Preview in
Qualtrics, right clicking, and selecting “Inspect”. Then click on the
survey block you want to identify and enter the QID where it says “add
any additional blocks here” below.
Qualtrics.SurveyEngine.addOnReady(function () {
console.log("✅ SBS script running for", this.questionId);
/* ------------------------------------------------------------------
1. === per-row formatting + checkbox-hide logic ===
------------------------------------------------------------------ */var matrix = this.getQuestionContainer();
var rows = matrix.querySelectorAll("tr.Choice");
var that = this;
var headerCell = matrix.querySelector("th");
if (headerCell) headerCell.style.width = "300px";
for (var r = 0; r < rows.length; r++) {
(function (row) {
var cells = row.querySelectorAll("td");
if (cells.length < 9) return;
var textCell = cells[2]; // text inputvar dropdownCell = cells[5]; // dropdownvar checkboxCell = cells[8]; // checkboxvar checkbox = checkboxCell.querySelector("input[type='checkbox']");
var inputField = textCell.querySelector("input[type='text']");
var dropdownFld = dropdownCell.querySelector("select");
var labelCell = row.querySelector("td:first-child");
if (labelCell) labelCell.style.width = "300px";
textCell.style.width = "100px";
dropdownCell.style.width = "160px";
checkboxCell.style.width = "120px";
checkboxCell.style.textAlign = "center";
textCell.style.borderRight = "none";
dropdownCell.style.borderRight = "none";
for (var i = 0; i < cells.length; i++) {
if (cells[i].className.indexOf("Separator") !== -1) {
cells[i].style.display = "";
cells[i].style.minWidth = "1px";
cells[i].style.width = "1px";
cells[i].style.borderRight = "1px solid #ccc";
cells[i].style.borderLeft = "none";
if (cells[i].innerHTML.trim() === "") cells[i].innerHTML = " ";
}
}
// -- initial hide if checkbox pre-checkedif (checkbox && checkbox.checked) {
textCell.style.visibility = "hidden";
dropdownCell.style.visibility = "hidden";
textCell.style.border = "none";
dropdownCell.style.border = "none";
if (inputField) inputField.value = "";
if (dropdownFld) dropdownFld.selectedIndex = 0;
}
// -- live hide/show when checkbox toggledif (checkbox) {
checkbox.addEventListener("change", function () {
var hide = checkbox.checked;
textCell.style.visibility = hide ? "hidden" : "visible";
dropdownCell.style.visibility = hide ? "hidden" : "visible";
textCell.style.border = hide ? "none" : "";
dropdownCell.style.border = hide ? "none" : "";
if (hide) {
if (inputField) inputField.value = "";
if (dropdownFld) dropdownFld.selectedIndex = 0;
}
});
}
})(rows[r]);
}
/* ------------------------------------------------------------------
2. === global “all 3 blocks must be complete” validation =========
------------------------------------------------------------------ *//* create the shared tracker once (first time any block loads) */if (!window.SBSCompletion) {
window.SBSCompletion = { "QID1": false, "QID10": false, "QID12": false };
}
functionrowIsValid(cells) {
var textInput = cells[2].querySelector("input[type='text']");
var dropdown = cells[5].querySelector("select");
var checkbox = cells[8].querySelector("input[type='checkbox']");
var inputHas = textInput && textInput.value.trim() !== "";
var dropHas = dropdown && dropdown.value.trim() !== "";
var checkHas = checkbox && checkbox.checked;
return (inputHas && dropHas) || checkHas;
}
functionvalidateThisBlock() {
var everyRowValid = true;
for (var r = 0; r < rows.length; r++) {
var cells = rows[r].querySelectorAll("td");
if (cells.length < 9) continue;
if (!rowIsValid(cells)) { everyRowValid = false; }
}
/* store this block’s status */window.SBSCompletion[that.questionId] = everyRowValid;
/* check all three blocks */var allDone = window.SBSCompletion["QID1"] &&
window.SBSCompletion["QID10"] &&
window.SBSCompletion["QID12"]; /* add any additional blocks here */if (allDone) { that.enableNextButton(); }
else { that.disableNextButton(); }
}
/* disable Next on first load */
that.disableNextButton();
/* attach listeners */
setTimeout(validateThisBlock, 300);
matrix.addEventListener("input", validateThisBlock);
matrix.addEventListener("change", validateThisBlock);
// set up interval for rechecking validation; this re-enables the script in case Qualtrics overrides it after some time intervalvar validationInterval = setInterval(validateThisBlock, 5000);
// clean up interval on page unload
Qualtrics.SurveyEngine.addOnUnload(function () {
clearInterval(validationInterval);
});
});
1.2 Script to grey out
Next button
Qualtrics.SurveyEngine.addOnReady(function () {
console.log("✅ SBS script running for", this.questionId);
/* ------------------------------------------------------------------
1. === your original per-row formatting + checkbox-hide logic ===
(unchanged except for one comment line to show where it ends)
------------------------------------------------------------------ */var matrix = this.getQuestionContainer();
var rows = matrix.querySelectorAll("tr.Choice"); // works in your SBSvar that = this;
var headerCell = matrix.querySelector("th");
if (headerCell) headerCell.style.width = "300px";
for (var r = 0; r < rows.length; r++) {
(function (row) {
var cells = row.querySelectorAll("td");
if (cells.length < 9) return;
var textCell = cells[2]; // text inputvar dropdownCell = cells[5]; // dropdownvar checkboxCell = cells[8]; // checkboxvar checkbox = checkboxCell.querySelector("input[type='checkbox']");
var inputField = textCell.querySelector("input[type='text']");
var dropdownFld = dropdownCell.querySelector("select");
var labelCell = row.querySelector("td:first-child");
if (labelCell) labelCell.style.width = "300px";
textCell.style.width = "100px";
dropdownCell.style.width = "160px";
checkboxCell.style.width = "120px";
checkboxCell.style.textAlign = "center";
textCell.style.borderRight = "none";
dropdownCell.style.borderRight = "none";
for (var i = 0; i < cells.length; i++) {
if (cells[i].className.indexOf("Separator") !== -1) {
cells[i].style.display = "";
cells[i].style.minWidth = "1px";
cells[i].style.width = "1px";
cells[i].style.borderRight = "1px solid #ccc";
cells[i].style.borderLeft = "none";
if (cells[i].innerHTML.trim() === "") cells[i].innerHTML = " ";
}
}
// -- initial hide if checkbox pre-checkedif (checkbox && checkbox.checked) {
textCell.style.visibility = "hidden";
dropdownCell.style.visibility = "hidden";
textCell.style.border = "none";
dropdownCell.style.border = "none";
if (inputField) inputField.value = "";
if (dropdownFld) dropdownFld.selectedIndex = 0;
}
// -- live hide/show when checkbox toggledif (checkbox) {
checkbox.addEventListener("change", function () {
var hide = checkbox.checked;
textCell.style.visibility = hide ? "hidden" : "visible";
dropdownCell.style.visibility = hide ? "hidden" : "visible";
textCell.style.border = hide ? "none" : "";
dropdownCell.style.border = hide ? "none" : "";
if (hide) {
if (inputField) inputField.value = "";
if (dropdownFld) dropdownFld.selectedIndex = 0;
}
});
}
})(rows[r]);
}
/* ------------------------ end original section ------------------- *//* ------------------------------------------------------------------
2. === global “all 3 blocks must be complete” validation =========
------------------------------------------------------------------ *//* create the shared tracker once (first time any block loads) */if (!window.SBSCompletion) {
window.SBSCompletion = { "QID1": false, "QID10": false, "QID12": false };
}
functionrowIsValid(cells) {
var textInput = cells[2].querySelector("input[type='text']");
var dropdown = cells[5].querySelector("select");
var checkbox = cells[8].querySelector("input[type='checkbox']");
var inputHas = textInput && textInput.value.trim() !== "";
var dropHas = dropdown && dropdown.value.trim() !== "";
var checkHas = checkbox && checkbox.checked;
return (inputHas && dropHas) || checkHas;
}
functionvalidateThisBlock() {
var everyRowValid = true;
for (var r = 0; r < rows.length; r++) {
var cells = rows[r].querySelectorAll("td");
if (cells.length < 9) continue;
if (!rowIsValid(cells)) { everyRowValid = false; }
}
/* store this block’s status */window.SBSCompletion[that.questionId] = everyRowValid;
/* check all three blocks */var allDone = window.SBSCompletion["QID1"] &&
window.SBSCompletion["QID10"] &&
window.SBSCompletion["QID12"];
if (allDone) { that.enableNextButton(); }
else { that.disableNextButton(); }
}
/* disable Next on first load */
that.disableNextButton();
/* delay initial validation slightly to ensure elements are rendered */
setTimeout(validateThisBlock, 100); // 100ms delay ensures all DOM elements are accessible/* attach listeners */
matrix.addEventListener("input", validateThisBlock);
matrix.addEventListener("change", validateThisBlock);
});