Bilder automatisch verschwinden lassen

Question

Ich möchte in meiner Umfrage nacheinander verschiedene Bilder präsentieren, die dann nach wenigen Sekunden von selbst wieder verschwinden und dafür eine Frage eingeblendet wird, was auf den Bildern zu sehen war. Die Idee war es, pro Bild eine eigene Seite zu erstellen und pro darauf folgender Frage eine weitere eigene Seite. Leider klappen die Anweisungen, die ich über die offizielle Seite gefunden habe, nicht (https://www.soscisurvey.de/help/doku.php/de:create:timer-submit).

Können Sie mir hier weiterhelfen?

Comments

Postden Sie gerne als Kommentar mal den Code, wie Sie ihn verwenden haben, und einen Pretest-Link direkt (!) zur ersten Seite, wo Sie das ausprobiert haben. Dann kann ich gerne einen Blick darauf werfen, an welcher Stelle es hakt.

---

Vielen Dank für die Rückmeldung! Ich hatte zwei Sachen ausprobiert. Beide Male habe ich bei der Zusammenstellung des Fragebogens erst das bereits hochgeladene Bild hineingezogen und darunter einmal einen PHP-Code und das zweite Mal einen HTML eingefügt. Für den PHP habe ich probiert: "replace('%remain%', 10);" für den HTML habe ich probiert: "<script type="text/javascript">
<!--
 
// Funktion zur Weiterleitung
function weiter() {
  // Eine Meldung anzeigen (optional)
  alert("Die Zeit ist vorbei.");
  // Den Teilnehmer zur nächsten Seite weiterleiten
  SoSciTools.submitPage();
}
 
// Weiter-Knopf ausblenden (optional)
SoSciTools.submitButtonsHide();
 
// Initialisierung der Weiterleitung
SoSciTools.attachEvent(window, "load", function(evt) {
  // Timer für automatische Weiterleitung starten
  window.setTimeout(weiter, %remain% * 1000);
});
 
// -->
</script>"

Bei dem PHP-Code erscheint keine Fehlermeldung. Der "Weiter"-Knopf ist noch aktiv (was nicht schlimm ist), aber das Bild verschwindet einfach nicht nach der Zeit bzw. es wechselt nicht zur nächsten Seite.

Bei dem HTML erscheint folgende Fehlermeldung: "Warnung (Seite 4)
Für den Platzhalter %remain% wurde weder ein Eingabefeld mit prepare_input() vorbereitet, noch ein Inhalt mit replace() festgelegt."
Ich nehme an, dass ich bei "remain" das Bild definieren muss. Aber ich weiß nicht, wie das geht. Auf der Support-Seite habe ich hierzu nur Hinweise auf Texte gefunden. Die Links zu den Seiten des Pretests sind:
https://www.soscisurvey.de/farbenundfiguren/?act=HtJRZmLfYTloezUZSxtqdkhA
(PHP)
sowie
https://www.soscisurvey.de/farbenundfiguren/?act=LcA2ed31YjXQTtJVWqe7Fqbz
(HTML)

Vielen Dank für die Hilfe!

---

> Für den Platzhalter %remain% wurde weder ein Eingabefeld mit prepare_input() vorbereitet, noch ein Inhalt mit replace() festgelegt."

Wenn Sie die Anleitung nochmal durchsehen, finden Sie (z.B.) folgenden PHP-Code:

replace('%remain%', $remain);

Dieser kümmert sich darum, den Platzhlater für %remain% zu setzen, damit Sie die restliche Zeit im JavaScript-Code verwenden können. Notwendig ist das nur, wenn Sie Ihren Timer gegen das Neu-Laden der Seite absichern möchten (s. Anleitung). Sonst müssten Sie den JavaScript-Code z.B. wie folgt anpassen:

window.setTimeout(weiter, %remain% * 1000);  // ALT
window.setTimeout(weiter, 3 * 1000);  // NEU für z.B. 3 Sekunden

> (PHP)
> (HTML)

PHP (falls gewünscht) und HTML spielen zusammen - die beiden müssen auf dieselbe Seite. Oder Sie verwenden eine Variante mit nur HTML(JavaScript)-Code.

---

Vielen Dank für die schnelle Hilfe! Jetzt habe ich es verstanden und es funktioniert. Ich habe noch eine Frage: Nun erscheint nach Ablauf der Zeit der Hinweis "Die Zeit ist abgelaufen". Diesen Hinweis muss man bestätigen, um zur nächsten Seite zu gelangen. Könnten Sie mir da vielleicht noch helfen, was ich falsch mache? Vielen Dank!

---

Die Lösung finden Sie direkt am Anfang Ihres Codes:

function weiter() {
  // Eine Meldung anzeigen (optional)
  alert("Die Zeit ist vorbei.");
  // Den Teilnehmer zur nächsten Seite weiterleiten
  SoSciTools.submitPage();
}

Entfernen Sie die Zeile mit dem alert(), um keinen Hinweis zu zeigen :)

Answer 1

Vieleicht reicht Ihnen schon das Minimal-Beispiel aus dieser Antwort.

<img src="image.png" alt="" id="my_image">

<script>
window.setTimeout(function() {
    document.getElementById("my_image").style.display = "none";
}, 2000);
</script>