Timer: Show the 'Next' Button After a Certain Period of Time

This chapter describes how the Next and Back buttons on a questionnaire page can be manipulated so that they do not appear until after a given amount of time. In principle, any content can be displayed after a certain period of time by using this solution.

This solution (like most dynamic content) is based on JavaScript and has the following restrictions:

• This does not work if a participant has specifically disabled JavaScript. In order for the participant to still be able to partake, the script is designed in a such a way that means the Next button appears as usual.
• If the participant reloads the page (F5 button, refresh or reload), or returns to the page by clicking on the Back button, the timer starts from the beginning. The Back button can be disabled on the current and/or next page by using the PHP function option()

1. If the page is loaded, the Next button is hidden by JavaScript.
2. Afterwards, a timer starts which displays the button again after a certain period of time.

Only a text element with the following content (created in Text Elements and Labels, Display as “HTML code”) is required. This text elements is dragged into the respective questionnaire page when composing the questionnaire.

<script type="text/javascript">
<!--
// Hide the button
SoSciTools.submitButtonsHide();
// After a timeout of 60 sec = 60000 ms, display the button
window.setTimeout(
  SoSciTools.submitButtonsDisplay, 60000
)
// -->
</script>

Note: This JavaScript code makes use of the SoSci Survey specific function SoSciTools.submitButtonsHide() to hide all buttons. You may specifically identify the submit button via document.getElementById("submit0") and change it's attribute .style.display to "none". For having the button re-appear, it may be necessary to write an additional function that restores the attribute to the empty string .style.display = "".

In the JavaScript code you can see the ID (HTML ID) buttonsAuto. This ID is assigned automatically to the buttons which appear at the bottom of the questionnaire page - whether just a Next button is there, or a Back button as well. If you specify a different HTML ID, other objects on the page will be displayed and hidden.

If your content does not have an HTML ID yet, you can just put a <DIV> tag around it:

<div id="myObject">
<h1>Heading</h1>
<p>You can read the secret text here.</p>
</div>

Instead of text, you can also place a text element, a question, or other content inbetween the <DIV> tags. To do this, you just have to use two HTML elements before and after the respective content in the questionnaire:

<div id="myObject">

</div>

Tip: This is not necessary for questions because they already have an HTML ID (Immediately Show Questions when a Certain Option is Selected).

The HTML/JavaScript code that takes care of hiding would look like this:

<script type="text/javascript">
<!--
 
// Funktion zum Einblenden der Knöpfe
function showContent() {
  var content = document.getElementById("myObject");
  // Den normalen Anzeigemodus wiederherstellen
  content.style.display = "";
}
 
// Nach dem Laden der Fragebogen-Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Objekt heraussuchen
    var content = document.getElementById("myObject");
    // Ausblenden
    content.style.display = "none";
    // Den Timer starten
    window.setTimeout(showContent, 60000); // Nach 1 Min = 60.000 ms
  }
);
 
// -->
</script>

With this solution, the layout is slightly altered when the button appears – the page gets bigger. If you do not want this, you can hide the content with the CSS attribute visibility, instead of with display:

<script type="text/javascript">
<!--
 
// Function to show the buttons
function showButtons() {
  var buttons = document.getElementById("buttonsAuto");
  // Restore normal display mode
  buttons.style.visibility = "";
}
 
// Start the script after the page is loaded
SoSciTools.attachEvent(window, "load",
  function() {
    // Identify the buttons
    var buttons = document.getElementById("buttonsAuto");
    // Hide the buttons (with placeholder)
    buttons.style.visibility = "hidden";
    // Start the timer
    window.setTimeout(showButtons, 60000); // after 1 Min = 60.000 ms
  }
);
 
// -->
</script>

It may be irritation for respondents if the “next” button is missing. Therefore, it may be useful to display a countdown instead. Use the following HTML/JavaScript code to do so:

<script type="text/javascript">
<!--
 
var countdown = 30;
var countdownDisplay;
var countdownTimer;
// "submit0" is the next button,
// use "buttonsAuto" instead to include the back button as well
var buttonID = "submit0";  
 
function countdownStart() {
  // Next button
  var button = document.getElementById(buttonID);
  // Create countdown element
  countdownDisplay = document.createElement("div");
  var cd = countdownDisplay;
  cd.style.display = "inline-block";
  cd.style.textAlign = "center";
  cd.style.fontWeight = "bold";
  cd.style.width = button.offsetWidth + "px";
  cd.style.height = button.offsetHeight + "px";
  // Init countdown
  button.parentNode.appendChild(countdownDisplay);
  countdownRefresh();
  // Hide next button
  button.style.display = "none";
  // Start countdown
  countdownTimer = window.setInterval(countDown, 1000);
}
 
function countDown() {
  if (countdown > 1) {
    countdown--;
    countdownRefresh();
  } else {
    window.clearTimeout(countdownTimer);
    // Display nextbutton
    var button = document.getElementById(buttonID);
    button.style.display = "";
    // Remove countdown
    button.parentNode.removeChild(countdownDisplay);
  }
}
 
function countdownRefresh() {
  // Clear
  while (countdownDisplay.lastChild) {
    countdownDisplay.removeChild(countdownDisplay.lastChild);
  }
  // Display
  var content = document.createTextNode(countdown + " sec.");
  countdownDisplay.appendChild(content );
}
 
SoSciTools.attachEvent(window, "load", countdownStart);
 
// -->
</script>