Silbentrennung der Skalenpunkte für Anzeige auf Smartphones

Question

Hallo liebes SoSci Survey Team,

ich habe eine Frage als horizontale Auswahl angelegt, die es auf dem Smartphone leider nicht schön anzeigt. Der rechte Endpunkt der Skala wird abgeschnitten. Daher habe ich eine Silbentrennung wie folgt eingebaut, was auch funktioniert:

ex­treme­ly fa­miliar

Allerdings möchte ich gerne, dass, falls die Silbentrennung angewandt wird, (soll nur beim Ausfüllen auf dem Smartphone und nicht auf dem Laptop der Fall sein), jede Silbe zentriert, also mittig untereinander angezeigt wird. Bisher zeigt es die Silben alle kreuz und quer untereinander an.

Eine Lösung mit <div style="text-align: center"></div> hat leider nicht funktioniert. Kann man die Zentrierung irgendwie auf alle Silben anwenden?

Vielen Dank im Voraus.

Comments

Die Zentrierung arbeitet grundsätzlich zeilenweise - hätten Sie vielleicht einen Pretest-Link direkt (!) zur betroffenen Seite im Fragebogen, damit ich mir einmal ansehen kann, wie "kreuz und quer" konkret aussieht? Womöglich liegt das Problem an ganz anderer Stelle.

---

Anbei der Pretest-Link: https://www.soscisurvey.de/testmp/?act=0b1YwlsSazH5E3JwzAKfQhYc

Answer 1

Danke für den Vorschau-Link. Das Problem ist, dass selbst die Silben "treme" und "miliar" noch zu lang sind für den geringen Platz, der bei der horizontalen Auswahl für die Beschriftung bleibt.

Die horizonale Auswahl ist auch nicht gut geeignet, um die Zwischenwerte unbeschriftet zu lassen. Sehbehinderte Benutzer haben mit einem Screenreader da einige Probleme.

Versuchen Sie bitte einmal eine Frage vom Typ "Skala (Extrema beschriftet)", legen Sie als Item nur ein Leerzeichen an, stellen Sie bei den Optionen zu "Skala" für "Abstand der Skalen-Punkte" einmal 80 Pixel und zu "Darstellung" die Option "Skala unter dem Text" ein.

Und jetzt der Trick: Bei "Breite der Beschriftung" (ganz oben) tragen Sie einen Wert ein, der größer ist als der Abstand der Skalenpunkte, z.B. 120 Pixel. Dadurch lässt SoSci Survey auch auf dem Handydisplay links und rechts ein wenig Platz neben der Skala, damit die Texte komfortabel über den Punkten stehen können. ↪ Demo

Comments

Super, vielen lieben Dank für die Antwort!

Das funktioniert dann aber alles nur ohne graphische Verankerung oder? Sobald ich eine solche nämlich einfüge, geht das alles wieder weit über das Smartphone-Display hinaus.

---

Guter Punkt. Jetzt skaliert auch die visuelle Verankerung bei dieser Variante korrekt (s. Demo-Link oben). Damit es im Browser richtig dargestellt wird, muss u.U. der Cache geleert werden (Taste F5 "Seite neu laden").

---

Klasse! Jetzt funktioniert alles bestens.
Vielen Dank für die schnelle und super hilfreiche Antwort! Echt klasse Service!!