0 votes
in SoSci Survey (dt.) by s111048 (170 points)

Liebes SoSci Survey Team,

ich habe einen Fragebogen, für den es vom Entwickler strenge Vorgaben für die Präsentation in einem Online-Survey System gibt. So ist für eine numerische 11-stufige Skala vorgegeben, dass unter der Skala zunächst die numerische Verankerung (0-10) und darunter die verbale Verankerung der Extrema erscheint.

Da bei dem Fragetyp Skala (Extrema beschriftet) sowohl die numerischen als auch die verbalen Verankerungen über der Skala angezeigt werden, habe ich den Typ "Horizontale Auswahl" gewählt. Hier ist es über die Antwortoptionen möglich, die Verankerungen unter der Skala zu präsentieren.

Nun ist es allerdings so, dass die verbalen Verankerungen abgeschnitten werden. Durch das Einstellen einer deutlich kleineren Schriftgröße kann das zwar rückgängig gemacht werden, allerdings leidet darunter die Lesbarkeit. Gibt es eine Möglichkeit, die Abstände zwischen den einzelnen Antwortoptionen zu verändern, sodass die verbale Verankerung nicht abgeschnitten wird? Oder kann eingestellt werden dass die Antwortoptionen der Extrema nach links bzw. rechts in die Skala hineinragen?

Hier schicke ich Ihnen den Direktlink zu den betroffenen Fragen: https://s2survey.net/IMST-PAIN/

Vielen Dank für Ihre Hilfe.

1 Answer

0 votes
by SoSci Survey (302k points)

Nun ist es allerdings so, dass die verbalen Verankerungen abgeschnitten werden

Ja, in der Tat nicht besonders hübsch ... aber die horizontale Auswahl ist eben auch nicht als Skala gedacht.

Ich habe zwei Lösungsansätze für Sie:

(1) Sie können mit ein wenig HTML-Code die "Boxen" in der horizontalen Auswahl umgehen. Dafür würden Sie eine Box mittels display: absolute unabhängig von den restlichen Elementen platzieren.

<div style="position: relative"><div style="position: absolute; left: -60px; right: -60px">Inhalt</div></div>

Die genaue Positionierung müssten Sie dann nach Bedarf justieren und die horizontale Auswahl selbst müssten Sie in der Breite beschränken, damit es am Ende nicht über die Seitenränder ragt.

(2) Sie könnten eine Skala verwenden, bei welcher nur die Extrema beschriftet werden, und dann mittels CSS die Anordnung der Elemente umdrehen. Wenn Sie das versuchen möchten, ergänzen Sie mal eine entsprechende Frage auf der Pretest-Seite, dann spiele ich mal ein wenig mit dem CSS-Code.

by s111048 (170 points)
Hallo, vielen Dank für Ihre Antwort. Für den Lösungsansatz (2) habe ich für die Fragen nun eine Skala verwendet, bei der nur die Extrema beschriftet werden.

Sie finden diese hier: https://s2survey.net/IMST-PAIN/

Allerdings ist auch hier die Beschriftung bei "keine Beeinträchtigung" abgeschnitten. Könnte ich dies dann, nachdem die Anordnung der Elemente mitteles CSS umgedreht wurde, wie bei Lösungsansatz (1) mit dem HTML-Code lösen?
by SoSci Survey (302k points)
edited by SoSci Survey
> Allerdings ist auch hier die Beschriftung bei "keine Beeinträchtigung" abgeschnitten.

Tragen Sie für die Breite der Minimum/Maximum-Beschriftung bitte einfach einen höherne Wert ein, z.B. 100 oder 120 Pixel.

Was die Abfolge angeht, das ist nicht ganz trivial. Versuchen Sie bitte mal folgenden Code:

pageCSS('
  table#CP11_11_tab > tbody {
    display: flex;
    flex-wrap: wrap;
  }
  table#CP11_11_tab > tbody >tr {
    display: block;
    flex: 0 0 100%;
  }
  table#CP11_11_tab > tbody > tr.s2header {
    order: 2;
  }
');

Wenn sich damit was tut, kümmern wir uns noch um die numerische Verankerung.
by s111048 (170 points)
Vielen Dank für die Rückmeldung. Ich habe den Code ausprobiert, allerdings tut sich damit nichts und es kommt folgende Warnung:

Warnung: Unerwartetes Element: display - fehlt hier vielleicht ein Semikolon (;) oder Anführungszeichen?
pageCSS(
  table    display

Warnung: Unerwartetes Element: : - fehlt hier vielleicht ein Semikolon (;) oder Anführungszeichen?
pageCSS(
  table    display:

Warnung: Unerwartetes Element: flex - fehlt hier vielleicht ein Semikolon (;) oder Anführungszeichen?
pageCSS(
  table    display: flex

Warnung: Unerwartetes Element: : - fehlt hier vielleicht ein Semikolon (;) oder Anführungszeichen?
flex-wrap:

Warnung: Unerwartetes Element: wrap - fehlt hier vielleicht ein Semikolon (;) oder Anführungszeichen?
flex-wrap: wrap

Warnung: Bei den geschweiften Klammern stimmt die Anzahl öffnender Klammern (0) nicht mit der Anzahl schließender Klammern (1) überein.
by SoSci Survey (302k points)
Oh ja, da fehlten die Anführungszeichen am Anfang und Ende - diese habe ich oben in meiner Antwortnoch ergänzt. Neuer Versuch bitte.
by s111048 (170 points)
Vielen Dank für die Ergänzung. Den Code habe ich in ein PHP-Code Element am den Anfang der Fragebogenseite eingefügt. Die Extrema werden damit nicht umgekehrt, sondern die Skala bei der zweiten Frage "gestaucht". Das Ergebnis ist hier zu sehen: https://s2survey.net/IMST-PAIN/
by SoSci Survey (302k points)
Gut, es tut sich etwas. Weiter geht's wie folgt:

pageCSS('
  table#CP11_11_tab > tbody {
    display: flex;
    flex-wrap: wrap;
  }
  table#CP11_11_tab > tbody >tr {
    display: block;
    flex: 0 0 100%;
  }
  table#CP11_11_tab > tbody >tr > th,
  table#CP11_11_tab > tbody >tr > td {
    display: block;
  }
  table#CP11_11_tab > tbody > tr.s2header {
    order: 2;
  }
');

Neu ist die vorletzte Anweisung.
by s111048 (170 points)
Jetzt sind Beschriftung und numerische Verankerung bei der unteren Skala schon umgedreht. Die Beschriftung müsste unter der numerischen Verankerung stehen. Das Ergebnis: https://s2survey.net/IMST-PAIN/
by SoSci Survey (302k points)
Gut, es geht voran. Nun folgende Ergänzung für die Reihenfolge von numerischer Verankerung und verbaler Verankerung:

table.question td.container div.inputCSH {
  flex: 0 0 100%;
}
table#CP11_11_tab > tbody > tr > th {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 100%;
}
table#CP11_11_tab > tbody > tr > th div.s2labels,
table#CP11_11_tab > tbody > tr > th div.numbering {
  flex: 0 0 100%
}
table#CP11_11_tab > tbody > tr > th div.s2labels {
  order: 2
}

Wenn Sie es für alle Fragen auf der Seite anwenden möchten, können Sie - wenn dann alles funktioniert - das "table#CP11_11_tab" durch "table" ersetzen.
by s111048 (170 points)
Vielen herzlichen Dank für Ihre Hilfe! Mit dieser Ergänzung ist die verbale Verankerung nun unter der numerischen, also genau so, wie ich es brauche.

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...