Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungNächste ÜberarbeitungBeide Seiten der Revision | ||
de:create:timer-display [12.01.2016 09:26] – [Andere Inhalte einblenden] admin | de:create:timer-display [01.04.2017 17:26] – [Umsetzung] admin | ||
---|---|---|---|
Zeile 22: | Zeile 22: | ||
<script type=" | <script type=" | ||
<!-- | <!-- | ||
- | + | // Knopf zunächst | |
- | // Nach dem Laden der Seite das Script starten | + | SoSciTools.submitButtonsHide(); |
- | SoSciTools.attachEvent(window, | + | // Nach Ablauf von 60 Sek = 60000 ms wieder einblenden |
- | function() { | + | window.setTimeout( |
- | | + | |
- | SoSciTools.submitButtonsHide(); | + | ) |
- | // Den Timer starten | + | |
- | window.setTimeout(SoSciTools.submitButtonsDisplay, | + | |
- | } | + | |
- | ); | + | |
// --> | // --> | ||
</ | </ | ||
Zeile 65: | Zeile 60: | ||
Der entsprechende HTML-/ | Der entsprechende HTML-/ | ||
- | < | + | < |
<script type=" | <script type=" | ||
<!-- | <!-- | ||
Zeile 91: | Zeile 86: | ||
</ | </ | ||
</ | </ | ||
- | ===== Platzhalter für den fehlenden | + | |
+ | |||
+ | ===== Platzhalter für den Knopf ===== | ||
Bei der vorgestellten Lösung wird das Layout beim Erscheinen des Knopfes leicht verändert -- die Seite wird größer. Wenn Sie das nicht möchten, können Sie den Inhalt statt mit '' | Bei der vorgestellten Lösung wird das Layout beim Erscheinen des Knopfes leicht verändert -- die Seite wird größer. Wenn Sie das nicht möchten, können Sie den Inhalt statt mit '' | ||
Zeile 117: | Zeile 114: | ||
} | } | ||
); | ); | ||
+ | |||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Countdown zeigen ===== | ||
+ | |||
+ | Es ist für die Teilnehmer u.U. irritierend, | ||
+ | |||
+ | <code javascript> | ||
+ | <script type=" | ||
+ | <!-- | ||
+ | |||
+ | var countdown = 30; | ||
+ | var countdownDisplay; | ||
+ | var countdownTimer; | ||
+ | // " | ||
+ | // mit " | ||
+ | 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 + " Sek." | ||
+ | countdownDisplay.appendChild(content ); | ||
+ | } | ||
+ | |||
+ | SoSciTools.attachEvent(window, | ||
// --> | // --> | ||
</ | </ | ||
</ | </ |