Skala bzw. Antwortmöglichkeiten bei "Smartphone"-Ansicht invertiert

Question

Hallo zusammen,

ich habe folgendes Problem. Bei normaler Endgeräte-Ansicht (Laptop, PC, diverse Tablets) ist die Skala (stimme überhaupt nicht zu - stimme voll und ganz zu)(innerhalb meiner Umfrage korrekt sortiert. Bei kleineren Ansichten wird die Skala jedoch invertiert engezeigt (Stimme voll und ganz zu BIS stimme überhaupt nicht zu). Ich habe ein responsive Design angewendet, das sich dynamisch anpasst - was es auch tun soll. Bei kleineren Ansichten wird die Skala also statt von links nach rechts, von oben nach unten angezeigt - jedoch invertiert.

Kann man dieses Verhalten anpassen, so dass innerhalb der dritten Ansicht die Reihenfolge der Skala wie bei den anderen Ansichten zu sehen ist?

EDIT: Anbei die neuen Screenshots:

Answer 1

Die Reihenfolge ist absichtlich so gewählt, weil im westeuropäischen Raum ein "mehr" meist von links nach rechts (z.B. Tacho im Auto) oder von unten nach oben (z.B. beim Thermometer) angezeigt wird.

Natürlich müssen Sie dieser Logik nicht folgen, Sie können es anders andersherum definieren, indem Sie folgenden PHP-Code auf die Fragebogen-Seite setzen. Das AB01 müssen Sie bitte durch die Kennung der Frage ersetzen:

pageCSS('
    @media (max-width: 320px) {
        #AB01_tab div.s2input div.s2options {
            flex-direction: column;
        }
    }
');

Und die 320px müssen evtl. auch angepasst werden. Wenn Sie im Quellcode der Fragebogen-Seite nach div.s2input div.s2options suchen, finden Sie die aktuelle Definition inkl. Breite.

Comments

Vielen Dank für die Antwort. Mit dem Code funktioniert das ganze innerhalb kleinerer Auflösungen (Smartphone-Ansicht). Beim Betrachten auf größeren Auflösungen wiederum verschiebt sich jedoch nun der ganze Fragebogen und ist nicht mehr anständig auszufüllen. (Wie kann ich Screenshots innerhalb Kommentaren einfügen?)

---

> Wie kann ich Screenshots innerhalb Kommentaren einfügen?

Hilfreicher als ein Screenshot (geht nicht im Kommentar) wäre ein Pretest-Link, der direkt (!) zur betroffenen Fragebogen-Seite führt.

Aber ich habe in meiner Antwort oben auch eine Korrektur vorgenommen - evtl. klärt das das Problem bereits.

---

Vielen Dank! Hiermit klappts, bis auf eine bestimmte Auflösungsgröße (1080p + 400% Zoom innerhalb meines Browsers) - da scheint es noch invertiert angezeigt zu werden :D

---

Ist es möglich das ganze nicht je Frage, sondern für die ganze Seite zu konfigurieren? Sind mehrere Fragen nämlich enthalten, funktioniert es bei mir leider nicht.

---

> bis auf eine bestimmte Auflösungsgröße

Schauen Sie bitte mal im Quellcode der Fragebogen-Seite, welche Breite (statt der 320px) SoSci Survey da eingetragen hat. Das ist u.U. abhängig von der definierten Breite der Auswahloptionen.

> Ist es möglich das ganze nicht je Frage, sondern für die ganze Seite zu konfigurieren? Sind mehrere Fragen nämlich enthalten, funktioniert es bei mir leider nicht.

Sie können mehrere Fragen eintragen:

#AB01_tab div.s2input div.s2options,
#AB02_tab div.s2input div.s2options,
#AB03_tab div.s2input div.s2options {
    flex-direction: column;
}

Oder Sie könnten einmal folgendes versuchen:

div.s2input div.s2options {
    flex-direction: column !important;
}