Randomisierte Bilder formatieren

Question

Hallo liebes Support-Team,

ich erstelle gerade ein Experiment, bei dem Teilnehmende zunächst zufällig der Experimental- und Kontrollgruppe zugeteilt werden (Zufallsgenerator Gruppe) und dann je nach Versuchsbedingung in zufälliger Reihenfolge (Seite rotieren) jeweils 15 Bilder für 20 Sekunden präsentiert werden. Die Stimuli habe ich mit dem folgenden PHP Code (hier beispielhaft für eine Seite) einbezogen:

Das klappt soweit auch prima - nun möchte ich die Bilder jedoch noch formatieren, d.h. sie sollen mittig dargestellt werden. Außerdem möchte ich die Darstellung auch für die Smartphone-Nutzung optimieren.
Die passenden HTML-Codes habe ich bereits gefunden, nun weiß ich allerdings nicht, an welcher Stelle ich diese nutzen muss, da die Bilder ja mittels obigen Befehl einbezogen habe. Könntet Ihr mir damit weiterhelfen?

Vielen Dank und viele Grüße

Answer 1

Sie binden die bilder aktuell mit dem kompletten HTML-Code via html() Befehl ein. Im Prinzip können Sie dort auch den ganzen HTML-Code zur Formatierung ergänzen, aber eleganter ist es, wenn Sie an dieser Stelle auf Platzhalte umsteigen. Konkret würden Sie folgenden PHP-Code verwenden...

$zahl = value('R001');
if ($zahl == 1) {
    $bild = 'S6.png';
} else {
    $bild = 'S8.png';
}
replace('%bild%', $bild);

Oder gleichbedeutend...

$zahl = value('R001');
if ($zahl == 1) {
    replace('%bild%', 'S6.png');
} else {
    replace('%bild%', 'S8.png');
}

Und dann drunter den HTML (!) Code für die Einbindung

<div style="text-align: center">
  <img src="%bild%" alt="" style="max-width: 100%">
</div>

Vorsicht, dieser Anwendungsfall bildet jetzt keine Kontrollgruppe 3 ohne Bild ab. Sollte es eine solche geben, müssten Sie die Anzeige des HTML-Codes noch variieren.