0 votes
in SoSci Survey (dt.) by s188330 (140 points)

Hallo.

Ich möchte auf einer Seite unter meiner Fragebogenskala 2 Bilder anzeigen lassen, die davon abhängig sind, welcher Versuchsgruppe die Person vorher per Zufallsgenerator zugewiesen wurde. Ich habe bereits einen php Code dafür geschrieben, mit dem das gut funktioniert. Meine Frage ist eine rein optische. Und zwar möchte ich die beiden Bilder gerne nebeneinander zeigen lassen anstatt untereinander. Ich finde leider wirklich nicht heraus, wich sich das innerhalb eines php Codes umsetzen lässt.
Dieser sieht übrigens so aus:

if (value('CO01') == 1) {
html('Screenshot');
html('Screenshot');
}
if (value('CO01') == 2) {
html('Screenshot');
html('Screenshot');
}
if (value('CO01') == 3) {
html('Screenshot');
html('Screenshot');
}
if (value('CO01') == 4) {
html('Screenshot');
html('Screenshot');
}

Vielen Dank.

1 Answer

0 votes
by SoSci Survey (303k points)

Ich würde empfehlen, dass Sie im IF erstmal nur die Dateinamen setzen:

if (value('CO01') == 1) {
  $bild1 = 'alpha.png';
  $bild2 = 'beta.png';
}
if (value('CO01') == 2) {
  $bild1 = 'gamma.png';
  $bild2 = 'delta.png';
}
u.s.w.

Und dann als HTML-Konstruktion darunter folgendes:

html('
<div style="display: flex; flex-wrap: wrap; gap: 1em;">
    <img src="'.$bild1.'" alt="" style="flex: 1 1 45%; min-width: 400px">
    <img src="'.$bild2.'" alt="" style="flex: 1 1 45%; min-width: 400px">
</div>
');

Die CSS Flexbox sorgt dafür, dass die Bilder schön skalieren und auf Mobilgeräten dann doch untereinander angezeigt werden, wenn sie sonst zu klein (hier: <400 Pixel) werden würden.

by s188330 (140 points)
Vielen Dank für die Antwort.
Ich habe das so angewendet, allerdings werden jetzt die Bilder wieder sehr groß und untereinander auf der Seite angezeigt. Mein Ziel ist es, sie klein und nebeneinander darzustellen. Wie könnte ich das erreichen?
by s188330 (140 points)
Vielleicht kann man das mit der Tabellenfunktion o.ä. machen? Ich habe es schon probiert, aber finde nicht heraus, wie man hier php und html code verbinden kann, sodass es funktioniert.
by SoSci Survey (303k points)
Posten Sie mal einen Pretest-Link - und reduzieren Sie die 400px evtl. mal auf 300px. Untereinander werden die Bilder mit der o.g. Lösung nur angezeigt, wenn der Bildschirm weniger als 800 Pixel Breite bietet.

Ich habe explizit keine Tabelle vorgeschlagen, weil Sie damit Nutzer:innen von Smartphones (das dürfte eine relevanter Anteil sein) ausschließen.

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...