Wie kann in im responsive design die "horizontale Auswahl" als "Skala (extrema beschriftet)" darstellen lassen?

Question

Hallo, ich stehe vor dem Problem, dass Fragen des Typs "horizontale Auswahl" an Smartphones wie unten ersichtlich dargestellt werden (mit Kästchen). Das Problem ist, dass ich nicht zum Typ "Skala (extrema beschriftet)" wechseln kann, da es nur ein Item gibt.

Welche Anpassungen kann ich vornehmen, um das Problem zu lösen? In älteren Fragebögen habe ich es teilweise geschafft, das Problem zu umgehen, aber in neueren Versionen funktioniert das nicht mehr. Diese Darstellungsoption ist für mich immer einer der selling points gegenüber anderen Tools gewesen - deshalb muss das doch irgendwie gehen...

Über Hilfe freue ich mich sehr!

Liebe Grüsse

Answer 1

Das Problem ist, dass ich nicht zum Typ "Skala (extrema beschriftet)" wechseln kann, da es nur ein Item gibt.

Sie können den Fragetyp "Skala (Extrema beschriftet)" auch mit nur einem Item verwenden.

Das wäre auch meine Empfehlung, denn die horizontale Auswahl ist nicht darauf ausgelegt, dass man Optionen ohne Beschriftung verwendet. Das macht nicht nur sichtbare Probleme, sondern funktioniert auch nicht gut mit der Barrierefreiheit - es ist nunmal eine "Auswahl".

Aber falls Sie bei der horizontalen Auswahl bleiben wollten, was wäre denn die Darstellung, wie Sie sie gerne hätten?

Comments

Den Hover-Effekt in Variante 1 kann man auch noch abschalten: https://www.soscisurvey.de/test2025/?act=oMW5mCsprhtQyEB5CvkAVeqk

... dann sollte diese Variante aber wirklich 1:1 so sein, wie die horizontale Auswahl früher einmal dargestellt wurde :D

---

Fantastisch, jetzt sieht es wirklich wieder so aus! :)
Blöd nur, dass Sie geschrieben haben
> Bei den ersten beiden ist ein wenig CSS-Code ergänzt, die letzte verwendet nur geeignete Einstellungen in der Skalenfrage.
Man kann die Frage hier im Forum wahrscheinlich nicht zum Importieren für mich hochladen? Was muss ich denn jetzt an CSS-Code wo ergänzen, um zu dem Ergebnis zu kommen?

---

Kein Problem:
https://www.soscisurvey.de/nxc/s/cg8yS9wKfrjSDm9

Und dazu passend der folgende PHP-/CSS-Code

pageCSS('
#AF06_qst .s2iSelection.dynamic div.option {
    display: block;
}
#AF06_qst label.dots {
    display: inline;
    margin-left: 0;
    text-indent: 0;
}
#AF06_qst div.label {
    text-align: center;
    margin-top: 4px;
}
#AF06_qst {
    max-width: 820px;
}
#AF06_qst div.hover:hover {
    background-color: transparent;
}
');

Das AF06 müssen Sie natürlich jeweils gegen die Kennung Ihrer Frage austauschen.

---

Unabhängig davon möchte ich nochmal darauf hinweise, dass Variante  nur solange funktioniert, wie Sie in den Beschrifungen der Extremwerte keine langen Wörter verwenden und dass diese Lösung nicht so richtig barrierefrei ist.

---

Ich danke Ihnen vielmals, das ist eine grosse Hilfe. Danke für die Mühe!