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) is required. This text elements is dragged into the respective questionnaire page when composing the questionnaire.

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

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="myObjective">
<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="myQuestion">

</div>

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

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>