Frage mit Bildern als Auswahlmöglichkeit verspringen beim Anklicken

Question

Guten Tag,

Ich habe eine Skala bei der Als Antwortmöglichkeiten immer verschiedene Bilder angegeben sind. Der Fragetyp ist Auswahl.
Von der Grafik her sieht aus den ersten Blick auch alles gut aus, sobald ich jedoch die Auswahlmöglichkeiten anklicke, zerspringen alle Antwortmöglichkeiten in die senkrechte Richtung.
In anderen Worten: Normalerweise sind alle Antworten in einer Reihe von links nach rechts aufgereiht.
Sobald ich eins anklicke werden die Antworten der Frage jedoch plötzlich von oben nach unten aufgereiht, sodass es für die teilnehmende Person grafisch verwirrend ist.

Woran kann das liegen?
Ich hatte bisher mit der Größe der Antwortmöglichkeiten romprobiert, jedoch konnte ich so das Problem noch nicht lösen.

Ich würde mich sehr über Hilfe freuen.

Liebe Grüße

Comments

Das klingt ... interessant. Könnten Sie bitte einen Pretest-Link direkt (!) zur betroffenen Seite im Fragebogen posten und kurz mitteilen, in welchem Browser Sie dieses Verhalten beobachtet haben?

---

https://www.soscisurvey.de/meditationsretreat/?act=mLKOhdgG1FzX0i6RreTG6x50

Hier ist der Link zur betroffenen Frage. Ich benutze gerade Safari. Es kam auch die Rückmeldung von einigen, die den Fragebogen gemacht haben, jedoch weiß ich nicht in welchem Browser das war.

---

Danke für den Pretest-Link. Einen Safari habe ich gerade nicht zur Hand, aber bitte ergänzen Sie auf der Seite einmal folgenden PHP-Code:

pageCSS('
  div.dynamic div.option {
    max-width: 100%;
  }
');

Ändert das etwas an der Problematik? Es scheint so, dass die Bilder (mit weißem Rand) etwas zu breit sind als dass sie sauber in das Layout passen.

---

Danke für den Hinweis. Die Antwortbilder werden nur schöner grafisch dargestellt. Jedoch bleibt die Problematik, dass die Bilder ihre Position verändern, sobald sie angeklickt werden.

Hier nochmal ein Pretestlink dazu.
https://www.soscisurvey.de/meditationsretreat/?act=NTLrZGieO0zpQUahPGMzyEK2

---

Bitte ergänzen Sie das CSS noch wie folgt:

pageCSS('
  div.dynamic div.option {
    max-width: 100%;
  }
  .s2iSelection.dynamic div.label img {
    padding: 0;
    max-width: 100%;
  }
');

Dadurch können Sie die Bilder zumindest in höherer Auflösung hochladen, sodass man etwas mehr erkennen kann.

Eine Antwort, was das Safari-Problem angeht, muss ich Ihnen aber noch ein wenig schuldig bleiben. Ihre Antwort kam heute leider ein paar Stunden zu spät...

---

Guten Morgen,

Das mit der höheren Auflösung hat geklappt- Danke.
Ein bisschen Warten kann ich noch.

Liebe Grüße

---

Hätten Sie noch einen Ansatz bezüglich dem Safari Problem?

---

Ich habe voraussichtlich erst am nächsten Mittwoch wieder einen Mac mit Safari zur Hand. Und auch dann muss ich erstmal prüfen, ob sich das Problem dort replizieren lässt.

Alternativ kann ich Ihnen anbieten, dass wir morgen einen Termin via Zoom machen und ich einen Blick auf Ihren Bildschirm werfen. Falls Sie daran Interesse haben, senden Sie bitte eine kurze E-Mail an info@soscisurvey.de mit Verweis auf diese Frage hier.

---

Das Problem trat natürlich direkt wieder nach Beendigung des Gesprächs auf. Nachdem ich jedoch auch die Größen der anderen Antwortbilder rausgekürzt habe ging es dann.

Danke nochmal für die Hilfe!
LG

Answer 1

Zusammenfassung

Es scheint es spezifisches Problem mit Safari zu sein, das dann auftritt, wenn für die Bilder im <img>-Tag eine fixe Größe eingestellt ist. Womöglich in Verbindung mit einer für die Antwortoptionen festgelegten Minimalbreite bei mehrspaltiger Darstellung.