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.

Comments

Das klappt super - vielen Dank!

Jetzt suche ich nur noch nach dem passenden Code, um das Bild nach oben zu verschieben.
"margin-top" hat leider nicht funktioniert. Könntet Ihr mir damit behilflich sein?

---

Die Frage ist eher, warum das Bild nicht oben ist - denn dieser Code erzeugt keinen Abstand. Was ist denn oberhalb vom Bild? Erstellen und posten Sie gerne einen Pretest-Link direkt (!) zur betroffenen Seite im Fragebogen.

---

vielen Dank für die schnelle Rückmeldung! Anbei der Pretest-Link ab der entsprechenden Seite: https://www.soscisurvey.de/schwangerschaft25/?act=36eifZpgRKNKFjf2Uav5nzc5

Die Bilder werden bereits mittig und oben angezeigt, aber leider nicht für alle Bildschirme. Wenn jemand mit einem Laptop teilnimmt, wird das Bild nicht mehr vollständig angezeigt. Daher möchte ich die Position noch etwas anpassen.

---

Die Bilder haben jeweils einen weißen Rand - ich würde empfehlen, diesen generell zu entfernen, weil Sie dadurch Platz verlieren.

Und dann ist da noch ein wenig Weiß-Abstand zwischen dem Fortschrittsbalken und dem Bild. Dieser kommt vom Layout. Im Prinzip könnten Sie das Bild über einen negativen Rahmen nach oben verschieben:

<img src="%bild%" alt="" style="max-width: 100%; margin-top: 100px;">

Aber Sie sehen ... da stört der weiße Rahmen ums Bild.

Ich sehe zwei andere Lösungen als eleganter:

1. Sie könnten für die Seiten mit dem Stimulus ein anderes Layout verwenden, sehen Sie sich dazu mal den Befehl option('layout', ...) an.

2. Sie könnten die Höhe der Bilder skalieren, z.B.

<img src="%bild%" alt="" style="max-width: 100%; max-height: calc(100vh - 220px);">

---

Vielen Dank, das werde ich ausprobieren!