Antwortskala optisch trennen/ Trennlinie einbauen

Question

Hallo zusammen,

ich möchte gerne eine Likert-Skala mit folgender Beschriftung erstellen:

Nein, trifft nicht zu- Ja, aber belastet mich nicht- Belastet mich etwas- Belastet mich- Belaste mich stark

Dabei möchte ich allerdings, dass der Skalenpunkt "Nein, trifft nicht zu" optisch etwas von dem Rest der Skala getrennt dargestellt wird. Also so ähnlich wie bei einer Auswahloption mit einer gestrichelten Linie, aber eben auf der linken Seite der Skala. So in etwa:

Ist dies so in Sosci Survey machbar?

Viele Grüße

Comments

Könnten Sie das wohl bitte zunächst einmal als Ausweichoption (wird rechts angezeigt) bauen und hier einen Pretest-Link posten? Dann sehe ich mir an, wie man das mit CSS am einfachstne abgetrennt bekommt.

Das schöne an SoSci Survey ist, dass sich nur selten die Frage stellt *ob* etwas möglich ist, aber oftmals bleibt die Frage *wie aufwändig* die Umsetzung von Sonderwünschen wird :)

---

Vielen Dank für den Kommentar. Ich habe ihn leider erst jetzt gesehen.
Das ist der Pretest-Link für die Skala:
https://www.soscisurvey.de/IPV21/?act=yPfssoebNjVMW9YoS7vIkSVa

Ich hoffe, dass das irgendwie mit CSS möglich ist : )
Das würde mir sehr weiterhelfen.

Viele Grüße

---

Stellen Sie die Darstellung in der Frage noch auf "Kärtchen" um, damit wir gleich mit der richtigen Darstellung arbeiten? Danke.

Answer 1

Hier schonmal ein erster Versuch ... allerdings folgt der Trennstrich meinen Anweisungen noch nicht so ganz:

pageCSS('
  #IV02_tab div.s2input div.s2options {
    order: 4;
  }
  #IV02_tab div.s2input div.s2dkSpc {
    order: 3;
  }
  #IV02_tab div.s2input div.s2sepV {
    order: 2;
  }
  #IV02_tab div.s2input div.s2dk {
    order: 1;
  }
');

Oder wenn Sie die Abfolge einfacher drehen möchten:

pageCSS('
  #IV02_tab div.s2input div.s2labels {
    direction: rtl;
  }
');

Wenn Sie eines davon eingebaut haben, schauen wir mal, ob es mit dem Strich noch Probleme gibt.

Comments

Ich habe nun die Darstellung auf "Kärtchen" eingestellt und den ersten CSS Code eingebaut. Das hat wunderbar funktioniert. Vielen Dank! : )

Allerdings wird mir gar keine Trennlinie angezeigt. Kann man die noch irgendwie einfügen?

---

Okay, weiter mit der Trennlinie:

#IV02_tab div.s2input div.s2sepV {
    display: block;
    border-left: 2px dotted #CCC;
    margin-left: 10px;
}
#IV02_tab div.s2input div.s2dkSpc {
    flex: 0 0 10px;
}