Anordnung von Bildern in Fragen verändern

Question

Wir würden gerne sieben Bilder als Antwortalternativen in zwei Zeilen präsentieren. Aktuell versuchen wir es mit dem Fragetyp "Auswahl" und nutzen sieben Kästchen. Diese werden bereits automatisch in zwei Zeilen präsentiert, allerdings rech chaotisch:

Gibt es eine Möglichkeit, die Position der einzelnen Auswahlfelder zu verändern, z. B. über {position: relative; left: 100px} bei den jeweiligen Antwortoptionen? Die Kreise sollen zunehmend überlappend präsentiert werden.

Eine andere Möglichkeit wäre, den Fragentyp "Horizontale Auswahl" in zwei Zeilen zu nutzen, also für die Kodierung in irgendeiner Form zu kombinieren. Schließlich könnte man noch mit SVG arbeiten, aber hier habe ich bisher keinerlei Erfahrungen.

Vielen herzlichen Dank für Ihre Antwort!

Answer 1

Ich würde empfehlen, dass Sie die Bilder als erstes ein wenig in der Breite beschneiden und den Hintergrund, der aktuell weiß ist, auf transparent ändern. Vor allem das mit der Breite sollte die Überschneidungen in der erste Zeile beheben.

Für die zweite Zeile muss ich mir die Ausgabe nochmal genauer ansehen. Vermutlich reichen ein paar CSS-Ergänzungen, damit es die Bilder in der zweiten Zeile korrekt positioniert. Hätten Sie vielleicht einen Pretest-Link, der direkt zur betroffenen Seite führt?

Comments

Danke für die schnelle Antwort!
Leider sind die Kreise momentan auch noch nicht in der eigentlich eingegebenen Reihenfolge. Das zweite Item befindet sich etwa unten links, das dritte oben an zweiter Stelle von links.
Hier der Pretest-Link:
https://geronto.fau.de/sosci/agingasfuture-t4/?act=dKWBk6zyhrVpt72zGSeWPGRj

---

Ah :) Danke für den Link. Stellen Sie in der Frage unter "Auswahloptionen" bei "Anordnung" doch bitte einmal "zeilenweise" statt "spaltenweise" ein.

---

Viel besser :)
Wenn man jetzt noch die Breite der unteren Kästchen an die der oberen angleichen könnte, wäre es optimal.

---

Ergänzen Sie dafür folgende Zeile auf der Fragebogen-Seite:

pageCSS('
  .s2iSelection.dynamic div.place { flex-grow: 0; }
  .s2iSelection.dynamic.rows { justify-content: flex-start; }
');

Falls Ihr Server noch kein pageCSS() kennen sollte, können Sie den Inhalt (also die mittleren beiden Zeilen) auch in das <style>-Tag Ihres Fragebogen-Layouts schreiben.