Qualtrics Manual
1 Using JavaScript
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 input
var dropdownCell = cells[5]; // dropdown
var checkboxCell = cells[8]; // checkbox
var 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-checked
if (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 toggled
if (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 };
}
function rowIsValid(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;
}
function validateThisBlock() {
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 interval
var validationInterval = setInterval(validateThisBlock, 5000);
// clean up interval on page unload
Qualtrics.SurveyEngine.addOnUnload(function () {
clearInterval(validationInterval);
});
});