Abstand zwischen zwei Fragen verkleinern

Question

Lieber Online-Support,
ich möchte gerne den Abstand zwischen meinen beiden Fragen (die emoji skala und "keine reaktion") verkleinern, damit es zusammen auf dem Smartphone angezeigt wird und man nicht scrollen muss, um die zweite Skala zu sehen. Ich habe versucht über das Layout den Abstand zwischen den Fragen zu verkleinern, aber das hat leider nicht geholfen.

Eigentlich wäre es optimal, wenn die Option "keine Reaktion" auch ein Item der vorigen Frage wäre. Ich habe es leider nicht hinbekommen es dazu zufügen, weil es sonst auf dem Smartphone viel zu klein dargestellt wurde und man es nicht lesen konnte. Deshalb war eine weitere Frage zu erstellen ohnehin mein Umweg (nur kurz zur Erklärung warum ich diesen umständlichen Weg gegangen bin).

hier der Link zum Pretest:
https://www.soscisurvey.de/fbbeschwerde/?act=LTqZHRgqI07OCd7XtYE2r4L3

Vielen Dank im Voraus!

Answer 1

Danke für den Pretest-Link. Wenn ich es korrekt sehe, haben Sie in der Frage EM03 eine fixe Höhe von 200 Pixeln vorgesehen - die Emojis füllen nur einen kleinen Teil davon aus.

Ich habe nicht genau verstanden, wie die Frage funktionieren soll - Sie scheinen eine AUswahlabfolge aber nur mit einer Teilfrage erstellt zu haben. Für eine einzelne Frage wäre die "normale" Auswahl mit Darstellungsvariante "Kärtchen" evtl. besser geeignet. Da könnten Sie dann einfach angeben, dass Sie 6 Optionen + eine Ausweichoption haben. Und die Kästchen kann man bei Bedarf auch noch weglassen.

Comments

Ziel war es, dass ich eine Skala habe, die nur aus den Emojis besteht und man diese dann anklicken muss und eben der Möglichkeit eines Feldes für "keine Reaktion".Die Kärtchenauswahl habe ich nicht verwendet, weil ich dachte, dass man so nur Text und nur über die Zoomauswahl auch Bilder als Optionen festlegen kann.

---

Und wo genau habe ich die 200 Pixel eingestellt? Bei dem Reiter "Größe" habe ich alles zurückgestellt, dachte ich...
Sorry, für mein Be­griffs­stut­zig­keit und vielen Dank für die schnelle Antwort!

---

> Die Kärtchenauswahl habe ich nicht verwendet, weil ich dachte, dass man so nur Text und nur über die Zoomauswahl auch Bilder als Optionen festlegen kann.

Bilder können Sie auch in der "normalen" Auswahl verwenden. Geben Sie dafür einfach den HTML-Code für ein Bild ein. Diesen bekommen Sie, wenn Sie unter "Bilder und Mediendateien" auf eines der Bilder klicken (wird unter den Bildern angezeigt).

> Und wo genau habe ich die 200 Pixel eingestellt?

Welchen Fragetyp genau verwenden Sie denn?

---

Ich habe die Zoom-Auswahl verwendet.
Vielen Dank!

---

Diese ist m.E. nicht gut geeignet für Ihre Problemstellung, weil sie die Bilder wild herumskaliert. Außerdem ist nicht gut ersichtlich, was man auswählt. Deshalb würde ich Ihnen dringend die normale Auswahl (mit Darstellungsvariante Kärtchen) oder - allerdings mit Abstrichen ggü. der normalen Auswahl - die Auswahlabfolge ans Herz legen.

---

Entschuldigen Sie bitte, dass ich wieder nachfragen muss aber ich kriege das Problem seit zwei Tagen einfach nicht gelöst.
Hier noch einmal ein Pretest Link: https://www.soscisurvey.de/fbbeschwerde/?act=Y1VYN4AXUTRWh00BOzAWMIBn

Ich möchte einfach nur eine Skala haben die aus den emojis, sodass es ähnlich zu Facebook aussieht. Wenn ich die Auswahl mit Kärtchen verwende dann sind die Darstellungen zu groß (es ist mir wichtig, dass alle Emojis in einer Reihe sind) und die Größeneinstellung der Kärtchen ändert daran nichts.
Die zweite Variante war der Versuch über die Zoom Auswahl (-> zweite Seite des pretestes,das gefällt mir optisch auch besser) doch da kriege ich den Abstand zwischen der Emoji-Skala und der "keine Reaktion" nicht verkleinert. Es ist aber notwendig dass man beides zusammen auf dem smartphone ohne scrollen sieht.

Ich hoffe sehr,dass Sie mir bei einer Variante weiterhelfen können.

Vielen Dank und liebe Grüße

Xenia

---

Schon besser :)

Jetzt benötigen wir noch ein wenig CSS-Code für die korrekte Darstellung:

pageCSS('
  .s2iSelection.cards.js div.option > div.label { padding: 0; }
  .s2iSelection.cards div.option { background-color: transparent; border: 0 none; }
  .s2iSelection.dynamic div.option { padding-top: 0; padding-bottom: 0; }
  div#EM04_tab img { width: 30px; }
');

---

Oh Danke! Das sieht perfekt aus!

---

Naja, wird schon langsam. Ergänzen Sie doch die vorletzte Zeile bitte noch ein wenig:

  div#EM04_tab img { width: 30px; display: block; margin: 3px auto; }

Und beim Itemtext für "keine Reaktion" würde ich folgendes empfehlen:

<div style="margin: 4px; text-align: center">keine Reaktion</div>

---

Ist der auch möglich nur die Ausweichoption "keine Reaktion" grau zu hinterlegen. So wäre es in der mobilen Ansicht deutlicher, dass dies auch eine Reaktion ist. Ich habe es nur geschafft alle Auswahlfelder grau zu hinterlegen und scheitere daran nur die Ausweichoption grau zu hinterlegen.
Hier noch einmal der Pretest Link:
https://www.soscisurvey.de/fbbeschwerde/?act=8cmWQGguan1ehNbraeNRAbhq

Vielen Dank!

---

Naja, ich hatte ja ohnehin schon ein DIV um die Ausweichoption empfohlen. Das können Sie problemlos auch mit einem grauen Hintergrund versehen:

<div style="padding: 4px; text-align: center; background-color: #CCCCCC; border: 2px solid #999999;">keine Reaktion</div>