====== 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 [[:en:create:javascript|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 ''[[:en:create:functions:option|option()]]''

===== Feature =====

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


===== Implementation =====


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.

<code javascript>
<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>
</code>

**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 = ""%%''.
===== Show Other Content =====

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: 


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

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:


<code html>
<div id="myObject">
</code>

<code html>
</div>
</code>

**Tip:** This is not necessary for questions because they already have an HTML ID ([[:en:create:dynamic|Immediately Show Questions when a Certain Option is Selected]]).

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

<code javascript>
<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>
</code>


===== Placeholder for the Button =====

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'':

<code javascript>
<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>
</code>



===== Display Countdown =====

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:

<code javascript>
<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>
</code>