Next button greyed out and with timer

Question

<!-- // Hide the button SoSciTools.submitButtonsHide(); // After a timeout of 30 sec = 30000 ms, display the button window.setTimeout( SoSciTools.submitButtonsDisplay, 30000 ) // -->

Unfortunately this just makes the button disappear and reappear after the time. Is there any way to grey out the weiter button and it showing the timer?

Answer 1

Is there any way to grey out the weiter button and it showing the timer?

You may want to disable and gray out the button. Here's possible code for such a function to replace the SoSciTools.submitButtonsHide:

function disableNextButton() {
    button = document.getElementById("buttonNext");
    button.setAttribute("disabled", true);
    button.style.opacity = "0.5";
}

Comments

I understand but in its place can a timer be shown with a countdown?

---

How to display a countdown is explained in the manual: https://www.soscisurvey.de/help/doku.php/en:create:timer-display#display_countdown

---

I have tried this but it doesnt work and I can press next to go to next page easily. Am I doing something wrong?

<script type="text/javascript">
<!--

var countdown = 30;
var countdownDisplay;
var countdownTimer;
// "submit0" is the default Next/Weiter button in SoSci Survey
var buttonID = "submit0";  

function countdownStart() {
  var button = document.getElementById(buttonID);

  // Create countdown display placeholder
  countdownDisplay = document.createElement("div");
  var cd = countdownDisplay;
  cd.style.display = "inline-block";
  cd.style.textAlign = "center";
  cd.style.fontWeight = "bold";
  cd.style.backgroundColor = "#ccc";
  cd.style.color = "#666";
  cd.style.borderRadius = "5px";
  cd.style.padding = "10px";
  cd.style.width = button.offsetWidth + "px";
  cd.style.height = button.offsetHeight + "px";
  cd.style.lineHeight = button.offsetHeight + "px";

  // Add countdown display to page
  button.parentNode.appendChild(countdownDisplay);

  // Hide actual button
  button.style.display = "none";

  // Start countdown
  countdownRefresh();
  countdownTimer = window.setInterval(countDown, 30000);
}

function countDown() {
  if (countdown > 1) {
    countdown--;
    countdownRefresh();
  } else {
    window.clearTimeout(countdownTimer);
    var button = document.getElementById(buttonID);
    button.style.display = "";
    button.parentNode.removeChild(countdownDisplay);
  }
}

function countdownRefresh() {
  countdownDisplay.textContent = "Please wait " + countdown + " sec...";
}

SoSciTools.attachEvent(window, "load", countdownStart);

// -->
</script>

---

Hard to say without the context.

Pleaswe either report what the browser console says, or better, create and post a pretest link that starts immediately on the page with the JavaScript code.

---

https://www.soscisurvey.de/sfv_media/?act=VM5gf08f1whdXLSm50Rbd2we

There is another 15 second countdown but that is different.

---

The error console tells me that you are using a line

<script type="text/javascript">

within another <script> element, here:

    window.addEventListener("load", function() {
        SoSciTools.questionnaire.attachCheck(function() {
            if (currentVisibleVideoId && currentViewStart) {
            var elapsed = Date.now() - currentViewStart;
            videoStats.viewDurations[currentVisibleVideoId] = (videoStats.viewDurations[currentVisibleVideoId] || 0) + elapsed;
    }
    updateHiddenInput();
    return true; // IMPORTANT: must return true to allow SoSci to proceed
  });
});

<script type="text/javascript">
<!--

var countdown = 30;
var countdownDisplay;
var countdownTimer;
// "submit0" is the default Next/Weiter button in SoSci Survey
var buttonID = "submit0";  


Either close the first <script> via </script> or remove the new opening <script> tag.

---

<script>
  document.body.classList.add('lock-scroll');

  let countdown = 15;
  const button = document.getElementById('continueButton');
  const overlay = document.getElementById('loadingOverlay');

  const interval = setInterval(() => {
    countdown--;
    button.textContent = `Start in ${countdown}s`;
    if (countdown <= 0) {
      clearInterval(interval);
      button.textContent = "Starten";
      button.disabled = false;
      button.style.backgroundColor = "#28a745";
      button.style.cursor = "pointer";
    }
  }, 1000);

  button.addEventListener('click', (e) => {
    e.preventDefault();           
    e.stopPropagation();          
    overlay.style.display = 'none';
    document.body.classList.remove('lock-scroll');
  });

var countdown = 30;
var countdownDisplay;
var countdownTimer;
// "submit0" is the default Next/Weiter button in SoSci Survey
var buttonID = "submit0";  

function countdownStart() {
  var button = document.getElementById(buttonID);

  // Create countdown display placeholder
  countdownDisplay = document.createElement("div");
  var cd = countdownDisplay;
  cd.style.display = "inline-block";
  cd.style.textAlign = "center";
  cd.style.fontWeight = "bold";
  cd.style.backgroundColor = "#ccc";
  cd.style.color = "#666";
  cd.style.borderRadius = "5px";
  cd.style.padding = "10px";
  cd.style.width = button.offsetWidth + "px";
  cd.style.height = button.offsetHeight + "px";
  cd.style.lineHeight = button.offsetHeight + "px";

  // Add countdown display to page
  button.parentNode.appendChild(countdownDisplay);

  // Hide actual button
  button.style.display = "none";

  // Start countdown
  countdownRefresh();
  countdownTimer = window.setInterval(countDown, 30000);
}

function countDown() {
  if (countdown > 1) {
    countdown--;
    countdownRefresh();
  } else {
    window.clearTimeout(countdownTimer);
    var button = document.getElementById(buttonID);
    button.style.display = "";
    button.parentNode.removeChild(countdownDisplay);
  }
}

function countdownRefresh() {
  countdownDisplay.textContent = "Please wait " + countdown + " sec...";
}

SoSciTools.attachEvent(window, "load", countdownStart);
</script>

https://www.soscisurvey.de/sfv_media/?act=Khkb76wFSlnTWGOKhgXf7Q5n

I have tried combining them both but the outcome is worse and I am not sure why. The weiter button doesnt go away and have a countdown in its place

---

Please kindly post a preview link that starts on the page with JavaScript code. Thank you.

---

Ah, der alte Link von oben funktioniert noch. Okay.

Also, die JavaScript-Konsole sagt:

Uncaught SyntaxError: redeclaration of let countdown
note: Previously declared at line 942, column 7

Das bezieht sich auf diese Zeilen:

let countdown = 15;

und

var countdown = 30;

Tja, stimmt. Da haben sie zweimal versucht, denselben Namen zu verwenden. Das geht nicht.

---

Ich habe probiert nur mit die andere Code zu arbeiten um zu sehen ob das individuell funktuniert aber so geht es leider nicht. Also was soll jetzt machen, Ich kann kein fehler finden weil die Code funktuniert nicht. Können SIe bitte mir helfen um das problem zu finden und lösen? Danke :)

https://www.soscisurvey.de/sfv_media/?act=5k1xJEpKCwdp8NSmEXwVcnkY

var countdown = 30;
var countdownDisplay;
var countdownTimer;
// "submit0" is the default Next/Weiter button in SoSci Survey
var buttonID = "submit0";  

function countdownStart() {
  var button = document.getElementById(buttonID);

  // Create countdown display placeholder
  countdownDisplay = document.createElement("div");
  var cd = countdownDisplay;
  cd.style.display = "inline-block";
  cd.style.textAlign = "center";
  cd.style.fontWeight = "bold";
  cd.style.backgroundColor = "#ccc";
  cd.style.color = "#666";
  cd.style.borderRadius = "5px";
  cd.style.padding = "10px";
  cd.style.width = button.offsetWidth + "px";
  cd.style.height = button.offsetHeight + "px";
  cd.style.lineHeight = button.offsetHeight + "px";

  // Add countdown display to page
  button.parentNode.appendChild(countdownDisplay);

  // Hide actual button
  button.style.display = "none";

  // Start countdown
  countdownRefresh();
  countdownTimer = window.setInterval(countDown, 30000);
}

function countDown() {
  if (countdown > 1) {
    countdown--;
    countdownRefresh();
  } else {
    window.clearTimeout(countdownTimer);
    var button = document.getElementById(buttonID);
    button.style.display = "";
    button.parentNode.removeChild(countdownDisplay);
  }
}

function countdownRefresh() {
  countdownDisplay.textContent = "Please wait " + countdown + " sec...";
}

SoSciTools.attachEvent(window, "load", countdownStart);

---

Der Link führt immer noch nicht zur passenden Seite, aber ich habe mich mal durchgeklickt.

Gut soweit: Keine Fehler in der Konsole.

Schlecht: Der Weiter-Knopf bleibt sichtbar. Das dürfte aber daran liegen, dass der obige JavaScript-Code jetzt einfach gar nicht mehr in der Seite ist.

Haben Sie denn mal versucht, die Variable "countdown" einfach umzubenennen, also z.B. in "zeit1"? Sie kommt ja in dem Code nicht so wahnsinnig oft vor.

---

Ich habe jetzt das viel verrändert. Beide kombiniert aber es gibt ein Fehler mit Countdown die Ich nicht finden kann. Können Sie bitte mir dabei helfen?

Hier ist den test link für die relevante Seite:

https://www.soscisurvey.de/sfv_media/?act=wlwADDiLsDpptpolc2PplEVO

Und hier ist das Code wenn das hilft:

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
  const nextButton = document.getElementById("submit0");  // SoSci default Weiter button
  if (!nextButton) return;

  // Create placeholder div to show countdown text in place of button
  const timerPlaceholder = document.createElement("div");
  timerPlaceholder.style.display = "inline-block";
  timerPlaceholder.style.textAlign = "center";
  timerPlaceholder.style.fontWeight = "bold";
  timerPlaceholder.style.backgroundColor = "#ccc";
  timerPlaceholder.style.color = "#666";
  timerPlaceholder.style.borderRadius = "5px";
  timerPlaceholder.style.padding = "10px";
  timerPlaceholder.style.width = nextButton.offsetWidth + "px";
  timerPlaceholder.style.height = nextButton.offsetHeight + "px";
  timerPlaceholder.style.lineHeight = nextButton.offsetHeight + "px";
  timerPlaceholder.style.fontSize = "16px";

  // Insert placeholder and hide button
  nextButton.parentNode.insertBefore(timerPlaceholder, nextButton);
  nextButton.style.display = "none";

  // Start countdown
  let countdownSeconds_sosci = 15;  // <- Adjust your countdown duration here
  timerPlaceholder.textContent = `Bitte warten... ${countdownSeconds_sosci} Sek.`;

  const countdownInterval_sosci = setInterval(() => {
    countdownSeconds_sosci--;
    if (countdownSeconds_sosci > 0) {
      timerPlaceholder.textContent = `Bitte warten... ${countdownSeconds_sosci} Sek.`;
    } else {
      clearInterval(countdownInterval_sosci);
      timerPlaceholder.remove();              // Remove countdown display
      nextButton.style.display = "";          // Show button
      nextButton.disabled = false;            // Ensure it's enabled
      nextButton.style.opacity = "1";         // Make it visible/active
      nextButton.style.cursor = "pointer";
    }
  }, 1000);
});
</script>

Danke für die Unterstützung

---

Im Moment scheint es schon am Overlay zu hängen, das ganz am Anfang kommt. Dor läuft der Timer schon nicht. Ich sehe aber im Moment auf der Seite auch ken JavaScript mehr, was sich auf diesen Knopf ("continueButton") beziehen würde.

Wenn man unten rechts ganz genau hinsieht, dann funktioniert es zumindest, dass der Weiter-Knopf ausgeblendet wird und stattdessen ein "bitte Warten" mit Timer angzeigt wird. Diese beiden Zeilen

  timerPlaceholder.style.height = nextButton.offsetHeight + "px";
  timerPlaceholder.style.lineHeight = nextButton.offsetHeight + "px";

sorgen im Moment noch dafür, dass der Text weit über den Knopf hinaus ragt - aber ansonsten funktioniert es. Jetzt müssen Sie sich nur noch um den Code kümmern, den Sie anfangs hatten, um auch den Timer vom grauen Overlay laufen zu lassen.