Merge pull request #7 from ZachDemko/ZachDemko-patch-1

Update qualtrics-manual.Rmd

Author: isaactpetersen

qualtrics-manual.Rmd

@@ -177,4 +177,138 @@ Qualtrics.SurveyEngine.addOnReady(function () {
     matrix.addEventListener("input", validateRows);
     matrix.addEventListener("change", validateRows);
 });
-```
+```
+
+## 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);
+});
+```