This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
en:create:timer-display [12.01.2016 09:21] – [Implementation] Update admin | en:create:timer-display [12.01.2016 09:37] – Added countdown script admin | ||
---|---|---|---|
Line 46: | Line 46: | ||
<code html> | <code html> | ||
- | <div id="myObjective"> | + | <div id="myObject"> |
< | < | ||
< | < | ||
Line 56: | Line 56: | ||
<code html> | <code html> | ||
- | <div id="myQuestion"> | + | <div id="myObject"> |
</ | </ | ||
Line 65: | Line 65: | ||
**Tip:** This is not necessary for questions because they already have an HTML ID ([[: | **Tip:** This is not necessary for questions because they already have an HTML ID ([[: | ||
+ | The HTML/ | ||
- | ===== Placeholder for the Missing | + | <code html> |
+ | <script type=" | ||
+ | <!-- | ||
+ | |||
+ | // Funktion zum Einblenden der Knöpfe | ||
+ | function showContent() { | ||
+ | var content = document.getElementById(" | ||
+ | // Den normalen Anzeigemodus wiederherstellen | ||
+ | content.style.display = ""; | ||
+ | } | ||
+ | |||
+ | // Nach dem Laden der Fragebogen-Seite das Script starten | ||
+ | SoSciTools.attachEvent(window, | ||
+ | function() { | ||
+ | // Objekt heraussuchen | ||
+ | var content = document.getElementById(" | ||
+ | // Ausblenden | ||
+ | content.style.display = " | ||
+ | // Den Timer starten | ||
+ | window.setTimeout(showContent, | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== 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 '' | 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 '' | ||
Line 92: | Line 121: | ||
} | } | ||
); | ); | ||
+ | |||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Display Countdown ===== | ||
+ | |||
+ | It may be irritation for respondents if the " | ||
+ | |||
+ | <code javascript> | ||
+ | <script type=" | ||
+ | <!-- | ||
+ | |||
+ | var countdown = 30; | ||
+ | var countdownDisplay; | ||
+ | var countdownTimer; | ||
+ | // " | ||
+ | // use " | ||
+ | var buttonID = " | ||
+ | |||
+ | function countdownStart() { | ||
+ | // Next button | ||
+ | var button = document.getElementById(buttonID); | ||
+ | // Create countdown element | ||
+ | countdownDisplay = document.createElement(" | ||
+ | var cd = countdownDisplay; | ||
+ | cd.style.display = " | ||
+ | cd.style.textAlign = " | ||
+ | cd.style.fontWeight = " | ||
+ | cd.style.width = button.offsetWidth + " | ||
+ | cd.style.height = button.offsetHeight + " | ||
+ | // Init countdown | ||
+ | button.parentNode.appendChild(countdownDisplay); | ||
+ | countdownRefresh(); | ||
+ | // Hide next button | ||
+ | button.style.display = " | ||
+ | // Start countdown | ||
+ | countdownTimer = window.setInterval(countDown, | ||
+ | } | ||
+ | |||
+ | 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, | ||
// --> | // --> | ||
</ | </ | ||
</ | </ |