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:18] – [Umsetzung] Aktualisierung admin | de:create:timer-display [12.01.2016 09:35] – Countdown ergänzte admin | ||
---|---|---|---|
Zeile 54: | Zeile 54: | ||
<code html> | <code html> | ||
- | <div id="meineFrage"> | + | <div id="meinObjekt"> |
</ | </ | ||
Zeile 63: | Zeile 63: | ||
**Tipp:** Für Fragen ist das nicht notwendig, weil diese bereits eine HTML-ID tragen ([[: | **Tipp:** Für Fragen ist das nicht notwendig, weil diese bereits eine HTML-ID tragen ([[: | ||
+ | Der entsprechende HTML-/ | ||
- | ===== Platzhalter für den fehlenden | + | <code javascript> |
+ | <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, | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== 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 90: | Zeile 119: | ||
} | } | ||
); | ); | ||
+ | |||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== 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, | ||
// --> | // --> | ||
</ | </ | ||
</ | </ |