Aufwahlfrage mit Bildern als Antwortmöglichkeiten in zwei Spalten nebeneinander

Question

Guten Tag,

ich möchte eine Auswahlfrage mit Bildern erstellen. Es sollen 6 Bilder erscheinen als Auswahl und die Teilnehmenden sollen eins davon auswählen. Eine 7. Auswahloption soll kein Bild umfassen, sondern stattdessen die Aussage "sah anders aus und zwar:" Dann soll ein Eingabefeld erscheinen, in dem die Teilnehmenden es beschreiben können.

Ich habe die Bilder hochgeladen und eine Auswahlfrage erstellt. Als Antwortmöglichkeit habe ich den HTML Code der Bilder angegeben. Sie erscheinen nun als Antwortmöglichkeit. Aber wie kann ich sie in zwei nebeneinanderliegende Spalten bekommen?

Und wie kann ich nun in diese Frage noch eine Auswahloption mit Eingabefeld und ohne Bild einfügen?

Danke für die Hilfe!

Answer 1

Aber wie kann ich sie in zwei nebeneinanderliegende Spalten bekommen?

Tragen Sie in der Frage bei "Auswahloptionen" -> "Mehrere Spalten" bitte eine 6 ein.

Außerdem ist es voraussichtlich sinnvoll, bei "Anordnung der Optionen" die Option "von links nach rechts" zu verwenden.

Und wie kann ich nun in diese Frage noch eine Auswahloption mit Eingabefeld und ohne Bild einfügen?

So wie in der Anleitung erklärt :)
Eingabefelder in einer Auswahlfrage

Vielleicht möchten Sie auch noch die Darstellungsvariante "Kärtchen" in der Auswahlfarge ausprobieren.

Comments

Vielen Dank. Das sieht schonmal gut aus mit der Kärtchen Darstellungsvariante. Ich habe bei "Mehrere Spalten" 3 eingegeben. So habe ich nun zwei Reihen mit je drei Bildern nebeneinander. Das einzige Problem ist, dass das zusätzliche Eingabefeld nun unten in eine dritte Reihe rechts in die Ecke gequetscht erscheint.
Wie kann dieses denn optisch noch besser einbinden? Oder wie kann man es  so einstellen, dass es zumindest linksbündig und über die gesamte Breite des Bildschirms geht, nicht nur die Breite der anderen Auswahloptionen mit den Bildern hat?
Vielen Dank für die Hilfe!

---

> Das einzige Problem ist, dass das zusätzliche Eingabefeld nun unten in eine dritte Reihe rechts in die Ecke gequetscht erscheint.

Wenn Sie die Laufrichtung "links nach rechts" wählen, sollte das letzte Item eigentlich die komplette Zeile bekommen. Wenn nicht, posten Sie gerne mal einen Pretest-Link direkt (!) zur betroffenen Seite.

---

Vielen Dank. Das komische ist, dass ich die Einstellung "links nach rechts" nicht tätigen kann. Ich gehe unter "Auswahloprionen" -> "Anordnung der Optionen" -> Es gibt nur von oben nach unten oder von unten nach oben als Auswahlmöglichkeit.
Dies ist der Pretest Link zur Fragebogenseite:
https://www.soscisurvey.de/RESTOREt3/?act=TKAxkei5sinOEiGYjLHVy1zJ
Danke für die Hilfe!

---

Arg, ich habe die falsche Option beschrieben. Eigentlich meinte ich, dass Sie bei "Anordnung" von "Spaltenweise" aus "Zeilenweise" umstellen sollten.

---

Kein Problem, dies habe ich auch versucht. Es kommt dann das hier raus:
https://www.soscisurvey.de/RESTOREt3/?act=CJ9AzxxVdFdq2MpPHRKmfnof

Für das Eingabefeld unten sieht das nun gut aus, aber jetzt bekomme ich immer nur zwei Bilder nebeneinander, auch wenn ich bei Spalten 3 eintrage. Kann ich das denn noch ändern, sodass wieder drei Bilder nebeneinander stehen, damit die Teilnehmenden nicht so weit nach unten scrollen müssen?

Dankeschön!

---

Ich habe die Lösung in eine neue Antwort geschrieben, damit der Code übersichtlicher bleibt.

Answer 2

Tatsächlich war das mit den Bildern und der richtigen Breite bzw. Anzahl an Spalten nicht ganz trivial. Bitte fügen Sie folgenden PHP/CSS-Code auf der Seite ein, damit es funktioniert.

pageCSS('
    .s2iSelection.cards.js div.option {
      padding: 0;
      flex-basis: 30%;
      flex-grow: 0;
      box-sizing: border-box;
    }
    .s2iSelection.cards.js div.option > div.label {
      padding: 4px;
    }
    .s2iSelection.cards.js div.option > div.label img {
      max-width: 260px;
      display: block;
      margin: 0 auto;
    }
');

Voraussetzung ist weiterhin, dass Sie 3 Spalten und "Anordnung" auf "spaltenweise" eingestellt haben.