qualtrics-manual.qmd

---
title: "Qualtrics Manual"
---

# Using JavaScript {#sec-javascript}

The base structure of JavaScript syntax in Qualtrics is as follows:

```javascript
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*/

});
```

## Absolute Frequency Items {#sec-absoluteFrequency}

Absolute frequency items have three columns:

1. "amount", i.e., number of times per interval
1. "timeframe", i.e., per day/week, in the past month, in the past year
1. "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.

```javascript
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 = "&nbsp;";
                }
            }

            //  -- 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);
    });
});
```

## Script to grey out Next button

```javascript
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 SBS
    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 = "&nbsp;";
                }
            }

            //  -- 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]);
    }
    /* ------------------------ 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 };
    }

    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"];

        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);
});
```