Randomisierung der Fragen und gleichzeitig automatische Weiterleitung nach drei Sekunden

Question

Hallo,

ich habe 32 Bilder mit Text, die ich alle in einer Rubrik erstellt habe. Durch den Zufallsgenerator ZGE1 habe ich diese bei Fragebogen zusammenstellen randomisiert.

Zusätzlich soll jedes Bild nur drei Sekunden angezeigt werden, dann eine Pause von einer Sekunde eingebaut werden und dann soll automatisch das nächste Bild erscheinen.

Dafür habe ich diesen Code:

<style>
    body {
        background-color: white;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    #question {
        text-align: center;
    }

     #question img {
        width: 90%;
        max-height: 80vh;
        object-fit: contain;
    }

    #question p {
        font-size: 2.5vw;
        margin-bottom: 20px;
    }
</style>

<div id="question">
    <!-- Hier die Frage mit Bild und Text einfügen -->
    <p>Erhält eine Gehaltserhöhung.</p>
    <img src="Frau_Freude_1.jpg" alt="Fragebild">
</div>

<script type="text/javascript">
    var delayTime = 3000; // Zeit in Millisekunden für die Anzeige der Frage
    var pauseTime = 1000; // Zeit in Millisekunden für die Pause zwischen den Fragen

    function hideQuestion() {
        document.getElementById("question").style.display = "none";
        setTimeout(nextQuestion, pauseTime);
    }

    function nextQuestion() {
        // Hier den Code einfügen, um zur nächsten Frage zu wechseln
    }

    window.onload = function() {
        setTimeout(hideQuestion, delayTime);
    };
</script>

Leider funktioniert die Weiterleitung zur nächsten Seite nur beim ersten Bild, danach muss man entweder selbst auf weiter klicken oder alle Bilder werden in eine Reihe untereinander angezeigt.

Können Sie mir bitte helfen dieses Problem zu lösen?

Vielen Dank schonmal im Voraus!

Answer 1

Es gibt zwei grundsätzliche Möglichkeiten:

Entweder Sie zeigen jedes Bild "auf einer eigenen Seite" an - heißt, ohen Timer müssten die Befragten manuell auf "Weiter" klicken.

Oder Sie zeigen alle Bilder auf einer Seite und sorgen mittels JavaScript dafür, dass die Bilder abwechselnd aus- und eingeblendet werden.

Ich bin nicht ganz sicher, was davon Sie machen möchten. Ihr Code beinhaltet Elemente von beidem ... wie sieht denn der zugehörige PHP-Code aus? Und ist das Script einmalig auf der Seite oder bei jedem Text eine Kopie davon?

Kleiner Hinweis am Rande: Der CSS-Code sollte nicht ins reguläre HTML, sondern per pageHead() eingebunden werden.

Comments

Hallo,

lieben Dank für die schnelle Antwort!

Den PHP Code habe ich in Fragebogen erstellen direkt vor den ZGE1 ein gepackt mit folgendem Code:
if (!isset($time0)) {
  $time0 = time();
  registerVariable($time0);  // Die Variable $time0 auch nach Ende des PHP-Codes aufbewahren
}
// Prüfung, ob die Zeit schon abgelaufen ist
// (z.B. weil der Teilnehmer die Seite neu geladen hat)
$timer = 3;  // Der Teilnehmer hat 1 Minute (60 Sekunden) Zeit zur Bearbeitung
if (time() >= $time0 + $timer) {
  goToPage('next');
}
// Die verbleibende Zeit muss auch dem JavaScript-Code bekannt gemacht werden
$remain = $time0 + $timer - time();
replace('%remain%', $remain);

Danke für den CSS Hinweis, können Sie mir das konkret zeigen, was sie meinen?

Den Code für das anzeigen der Bilder habe ich kopiert und für jedes einzelne Bild-Satz Paar mit dem passenden Pfad zu den Fotos in einer Kategorie neu eingefügt. Daher wäre meine bevorzugte Herangehensweise mit Javascript zu arbeiten, da ich insgesamt 64 Fotos habe in zwei Rubriken habe. Jedes einzeln als Seite einzufügen wäre sehr umständlich. Haben Sie einen Vorschlag, wie ein solcher Code aussehen könnte und wo ich ihn in Soscisurvey einfügen muss (in Fragebogen erstellen über PHP oder direkt als Textbaustein vor den Fragen?

Vielen Dank für Ihre Unterstützung!!

---

> Danke für den CSS Hinweis, können Sie mir das konkret zeigen, was sie meinen?

Ich meine den Teil zwischen <style> und </style>. Das sollten Sie mittels pageCSS() einbinden.

> Jedes einzeln als Seite einzufügen wäre sehr umständlich.

Nicht, wenn Sie mit loopPage() oder multiLevelDown() arbeiten. Dann legen Sie nur eine einzige Seite im Fragebogen an.

> Den PHP Code habe ich in Fragebogen erstellen direkt vor den ZGE1 ein gepackt mit folgendem Code:

Beachten Sie bitte, dass dieser Code dank isset() und registerVariable() dafür sorgt, dass der Timer für alle Seiten gilt. Wenn Sie möchten, dass er nur für ein Bild oder eine Seite gilt, dann ist es deutlich einfacher:

replace('%remain%', 3);  // sonst nichts

> mit Javascript

Da müssten Sie sich erstmal selbst ein wenig einarbeiten. Ich habe hier leider nicht die Kapazitäten, längeren Code für einzelne Projekte zu programmieren. Aber ich helfe, wenn es nicht funktioniert.