Fragebogen im Smartphone Modus (Querformat) nutzt Kärtchen nebeneinander, statt Skalenpunkte

Question

Liebes Forum,
ich würde gerne, dass die Skalenpunkte einer Skala (voll beschriftet) bei der Darstellung auf einem Smartphone im Querformat nicht als Kärtchen nebeneinander dargestellt werden, sondern in der standardmäßigen Punktform, wie sie auf einem Monitor genutzt wird (siehe angehängte Bilder). Leider kann ich die entprechende CSS-Anweisung im Inspector nicht finden. Letztlich möchte ich also nur zwei Darstellungsvarianten zulassen: Blockdarstellung für Hochformat (funktioniert wunderbar), standardmäßige Skalenpunkte (Kreise) im Samrtphon Querformat und auf Monitoren.

Anbei auch ein Pretest-Link zur auf den Fotos abgebildeten Frage: https://www.soscisurvey.de/SCDGG_PS1/?act=QzW3yjVVnxD8M38uOzX4dG2w!

Vielen Dank für die Hilfe! :)

Answer 1

ich würde gerne, dass die Skalenpunkte einer Skala (voll beschriftet) bei der Darstellung auf einem Smartphone im Querformat nicht als Kärtchen nebeneinander dargestellt werden, sondern in der standardmäßigen Punktform, wie sie auf einem Monitor genutzt wird

Damit würden Sie es Ihren Befragten ab unnötig scher machen - denn die kleinen Punkte trifft man auf dem kleinen Display denkbar schwer.

Aber wenn Sie das in Kauf nehmen möchten, können Sie in der Frage selbst von der dynamischen "Darstellung" auf die statische Darstellung umschalten. Im Hochformat wird es auf dem Smartphone dann aber zu Darstellungsfehlern kommen.

Im Prinzip wäre es natürlich auch möglich, die Abstufungen in der dynamischen Darstellung weiter zu verfeinern. Aber dafür ist ein wenig mehr CSS-Code erforderlich - wenn es gute Gründe gibt, welche diesen Aufwand rechtfertigen, führen Sie diese gerne aus.

Comments

Alles klar das verstehe ich. Dann noch eine kurze Nachfrage dazu: Wie würde man es im CSS-Code umsetzen, wenn man für Smartphones ausschließlich die Blockdarstellung (wie im Hochformat) nutzen möchte?

---

Für das Umschalten zwischen horizontaler (etwas mehr Platz) und vertikaler (etwas weniger Platz, weil im Hochformat) ist der folgende CSS-Befehl verantwortlich:

@media (max-width: 641px) {
  div.s2input div.s2options {
    flex-direction: column !important;
  }
}

Würde man den Media-Selector ändern, z.B. wie folgt ...

@media handheld, (pointer: coarse) {
  div.s2input div.s2options {
    flex-direction: column !important;
  }
}

dann wäre die Darstellung der Kärtchen auf Mobilgeräten immer vertikal. Also auch wenn man ein Tablet mit viel Platz verwendet oder ein größeres Smartphone im Querformat.

Die Anweisung

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

hingegen würde verhindern, dass von der horizontalen in die vertikale Darstellung umgeschaltet wird, wenn man das Gerät Hochformat hält.

---

Vielen Dank für die rasche Antwort! Ich habe den Code:

@media handheld,
(pointer: coarse) {
  div.s2input div.s2options {
    flex-direction: column !important;
  }
}

mit in den <style> Bereich des Fragebogens eingefügt. Allerdings wechselt die Ansicht noch immer in die "row"-Kästchen bei Smartphone Querformat. Der Pretest oben in der Frage gilt noch. Hätten Sie eine Idee was das Problem sein könnte?

Vielen Dank im Voraus!

---

Vor dem flex-direction sind schon wieder unsichtbare seltsame Zeichen.

---

Das ist ja ein Ding! Danke. Habe den Text direkt aus der Antwort hier kopiert und beim letzten Mal aus einer Antwort auf einer anderen Website. Werde ich in Zukunft als erste Fehlerquelle checken! Besten Dank!