Horizontale Auswahlfrage in mobiler Ansicht falsch

Question

Ich bräuchte dringend Hilfe bezüglich der Ansicht von horizontalen Auswahlfragen am Smartphone. Diese Fragen werden am Desktop wie gewollt mit Großen runden Auswahlfeldern angezeigt (siehe Bild). Wenn ich den Link jedoch am Smartphone öffne werden hier keine runden Felder sondern eckige mit dem Text der untendran steht angezeigt (siehe Bild 2 ). Dies ist sehr verwirrend und ungewollt. Ich habe im Layout eingestellt, dass immer große runde Felder benutzt werden sollen und selbst wenn ich das mobile Layout auwähle, werden horizontale Fragen nicht so wie gewollt angezeigt. Haben Sie einen Tipp wie ich es schaffe, dass es so aussieht wie am Desktop? (Ich möchte eigentlich keinen seperaten Fragebogen für die mobile Ansicht erstellen) Danke!

Comments

Könnten Sie wohl bitte einen Pretest-Link direkt (!) zur betroffenen Seite im Fragebogen posten? Ich habe eine Vermutung, müsste diese aber im Kontext der Fragebogen-Seite validieren.

---

Ich würde mich hier gerne einmal anschließen. Ich habe genau dasselbe Problem mit Bildern in mobiler Ansicht. Diese werden wie hier auf dem Beispielbild ebenfalls doppelt untereinander dargestellt und sind nicht wie eigentlich mit runden Feld anzuwählen.

Wurde denn eine Lösung gefunden?

---

Leider hab ich noch keinen Lösungsvorschlag erhalten. Ich hatte noch den pretest-link zu meinem Fragebogen im Nachhinein miteingestellt aber bin leider noch nicht weitergekommen.

---

Alles klar, dann drücken wir mal die Daumen, dass uns morgen vielleicht geholfen wird ;) meine Studie läuft auch schon und ich würde sie gerne auch für Smartphones und Tablets freigeben...

---

So geht es mir auch. Hattest du das Problem schon am Anfang bei deiner Fragebogenerstellung? Ich hab das heute erst entdeckt und war der Meinung eigentlich passt alles in der mobilen Ansicht

---

Nein, ich hatte es vor zwei Wochen oder so mal ausprobiert bevor die Studie online gegangen ist und da hatte ich auch gar keine Probleme... ich habe aber auch eigentlich nichts mehr verändert, deswegen hat es mich dann auch sehr gewundert, als ich es bemerkt habe...

Answer 1

Danke für den Pretest-Link. Die veränderte Darstellung war eine nicht-intendierte Folge der Behebung eines anderen Darstellungsfehlers. Entschuldigung für die Unannehmlichkeiten.

Wir haben uns entschieden, die Darstellung gleich komplett zu überarbeiten, sodass sie nun auf kleinen Displays (Mobilgeräten) standardmäßig ordentlich aussieht.

Haben Sie einen Tipp wie ich es schaffe, dass es so aussieht wie am Desktop?

Die Darstellung auf Mobilgeräten muss natürlich ein wenig anders gestaltet werden, damit die Informationen gut auf das kleine Display passen. Außerdem sind die Auswahlfelder mit dem Finger wesentlich einfacher zu treffen als die kleinen Auswahl-Kreise.

Was ich Ihnen allerdings noch empfehlen würde: schreiben Sie den HTML-Code für die 3 Bilder direkt (!) in den Itemtext der Auswahloptionen, sodass man direkt auf die Abbildungen klicken/tippen kann. Ergänzen Sie im <img>-Tag weiterhin ein style="max-width: 100%", damit das auf kleinen Bildschirmen skaliert.

<img src="GER5.png" style="width: 250px; max-width: 100%;">

Comments

Vielen Dank Ihnen schonmal für die schnelle Hilfe! Die HTML-Codes direkt in die Auswahloptionen zu schreiben, könnte in meinem Fragebogen etwas schwierig werden. Auf jeder Seite werden  die Bilder jeweils durch  eine Zufallszahl mit 18 Zetteln ausgewählt. Gibt es eine Möglichkeit diese Auswahlfelder ohne eine Beschriftung in der Mitte darzustellen? Mich stört nur dass die Wahl im Feld steht und unten dran. Das unten dran passt aber so für die desktop version. Danke nochmal

---

> Auf jeder Seite werden  die Bilder jeweils durch  eine Zufallszahl mit 18 Zetteln ausgewählt.

Umso wichtiger für die spätere Auswertung, dass Sie das mit der Zuordnung gleich bei der Erhebung erledigen. Legen Sie einfach alle 18 Optionen in der Frage an und zeigen Sie dann per question() nur jene Auswahloptionen, die Ihre Zufallsgenerator gezogen hat.

> Mich stört nur dass die Wahl im Feld steht und unten dran.

Die doppelte Beschriftung sollte nun nicht mehr der Fall sein, oder?

---

Ich bin mir nicht sicher ob das in meinem Fragebogen möglich ist, da die Zufallszahl ausgewählt wird um 3 Weine in einer bestimmten Reihenfolge zu präsentieren. Vielleicht kann ich Ihnen einen Teil des Codes mal hierein schicken? Ich hatte als Auswahloptionen nur Wein 1,2,3 und hatte vor dies nach der Auswertung händisch einzutragen welcher Wein schlussendlich gewählt wurde.
Wenn jetzt bei der Zufallsziehung Zettel 1 (01 = ABC) werden durch diesen Code die Weine A, B und C angezeigt: if (value('B101') == 1) {
   html('
  <div class="spacing" style="text-align:left;">
    <img src="GER1.png" style="width: 250px">
    <img src="GER2.png" style="width: 250px">
    <img src="GER3.png" style="width: 250px">
  </div>
');
}
Und dies ist für 18 Zettel auf jeder Seite der Fall, daher dachte ich die Auswahloptionen sind einfach 1,2,3 und ich kann im Nachhinein da mir ja in der Auswertung gesagt wird, welche Zufallszahl genommen wurde, kann ich nachvollziehen welcher Wein gewählt wurde. Dies ist auch ansich gar nicht problematisch, ich möchte nur die doppelte Beschriftung in den Feldern der mobilen Ansicht nicht.
Ich hoffe, Sie können nachvollziehen was ich meine.

---

> Wenn jetzt bei der Zufallsziehung Zettel 1 (01 = ABC) werden durch diesen Code die Weine A, B und C angezeigt:

Das können Sie auch problemlos auf die Items umschreiben:

if (value('B101') == 1) {
  question('XY01', '1,2,3');
}

Das funktioniert natürlich nur solange, wie Wein 1 nicht erneut abgefragt wird. Sonst wäre eine weitere Frage erforderlich.

> ich kann im Nachhinein da mir ja in der Auswertung gesagt wird, welche Zufallszahl genommen wurde

Aus Erfahrung heraus würde ich sagen: Überlegen Sie sich gut, ob Sie das am Ende tatsächlich zuordnen möchten. Das ist (aus meiner Sicht unnötig) aufwändig und fehleranfällig.

>  ich möchte nur die doppelte Beschriftung in den Feldern der mobilen Ansicht nicht.

Sie sollen Sie inzwischen ja los sein, korrekt?