0 votes
in SoSci Survey (dt.) by s257106 (210 points)
closed by s257106

Guten Tag,

wenn Ich bei einem Polaritätenprofil für Items eine Unterüberschrift einstelle, dann ist diese stets fett und etwas kleiner geschrieben. Bisher helfe Ich mir so, dass ich html direkt mit in diese Unterüberschrift packe. Das funktioniert, ist aber extrem aufwendig. Leider gibt es im Fragenbogen-Layout noch keine Möglichkeit zur Anpassung. Gibt es evtl. CSS-Code, den Ich am Anfang der Seite einfügen kann, um die Unterüberschriften von Items in einem Polaritätenprofil einheitlich anzupassen?

Vielen Dank für die Unterstützung.

Liebe Grüße

closed with the note: Solved

1 Answer

+1 vote
by SoSci Survey (327k points)

Im Standard-Layout erscheint die Zwischenüberschrift in derselben Schriftgröße wie die Items. In anderen Layouts kann dies anders sein. Sie können das über folgenden CSS-Code anpassen:

div.s2question div.s2items > div.s2item.s2subheading > div.s2label,
div.s2question div.s2items > div.s2item.s2subheading > div.s2input {
  font-weight: normal;
  color: red;
}

Binden Sie den CSS-Code entweder direkt in das Layout ein, direkt vor </style> oder per pageCSS().

by s257106 (210 points)
Funktioniert 100%, vielen Dank für die schnelle und kompetente Unterstützung :)
by s257106 (210 points)
Was mir heute aufgefallen ist:  Sofern die Darstellung der Frage auf "dynamisch" gestellt ist, funktioniert der obige Code einwandfrei und man kann ihn auch noch um font-size ergänzen. Ich habe nun die Darstellung auf statisch gestellt und da kann Ich die Größe nicht mehr einheitlich anpassen. Der Rest des Layouts wird allerdings wie gewünscht angepasst. Wenn ich direkt in der Unterüberschrift mit HTML arbeite, etwa <font-size="20">, dann kann Ich auch die Größe anpassen, allerdings nun nicht mehr einheitlich.

Gibt es auch  bei der statischen Darstellung die Möglichkeit, Unterüberschriften einheitlich zu manipulieren?

Liebe Grüße
by SoSci Survey (327k points)
> Ich habe nun die Darstellung auf statisch gestellt

Tun Sie das besser nicht - sonst haben Sie schnell Probleme mit den ca. 25% Personen, die Ihren Fragebogen auf dem Smartphone ausfüllen.

Aber ja, im statischen Layout haben die Elemente andere Namen, das kann man im CSS-Befehl noch ergänzen.

> Wenn ich direkt in der Unterüberschrift mit HTML arbeite, etwa <font-size="20">,

Auch das sollten Sie nicht tun, das <font> Tag sollte man schon seit 10 Jahren nicht mehr verwenden.

Wenn Ihnen trotz meiner Empfehlung sehr an der statischen Darstellung gelegen ist, posten Sie bitte einen Pretest-Link direkt (!) zu einer Seite mit einer entsprechenden Frage. Dann kann ich die zusätzliche CSS-Klasse noch nachsehen.
by s257106 (210 points)
Warum wähle ich statisch? Bei den Polaritätenprofilen wird leider im dynamischen Design die Mitte grafisch hervorgehoben. Wir wollen das vermeiden, damit Probanden hoffentlich weniger dazu neigen, die Mitte einer Skala zu wählen. Wenn Sie eine Möglichkeit kennen, diese Hervorhebung auszuschalten, dann würde Ich auch eher die dynamische Darstellung bevorzugen.

Nachfolgend der Link zum Pretest. Sie befinden sich direkt auf der relevanten Seite:
https://www.soscisurvey.de/tuddue/?act=P1WlLKhC5MQvVq8gmYWSVmj3

Ich danke vielmals für die Unterstützung.
by SoSci Survey (327k points)
> Bei den Polaritätenprofilen wird leider im dynamischen Design die Mitte grafisch hervorgehoben

Das sollte nicht der Fall sein - könnten Sie die Frage wohl bitte einmal als XML-Datei herunterladen und an info@soscisurvey.de senden - dann sehen wir uns an, warum bei dieser Frage (und verraten Sie mir in der Mail auch gerne das verwendete Layout) die Mitte hervorgehoben wird.

Davon abgesehen ... haben Sie die Zwischenüberschrift in Ihrer Frage zur Beschriftung der Items verwendet?! Aus meiner Sicht haben Sie den falschen Fragetyp verwendet ... der richtige wäre eine Skala (nur Exrema beschriftet), bei der Sie einstellen, dass die Labels nicht oben, sondern in jeder Zeile angezeigt werden sollen.

Zur eigentlichen Frage:

table.question th.subheading {
      font-weight: normal;
      color: red;
}

Oder wenn Sie für alle Eventualitäten gerüstet sein möchten:

div.s2question div.s2items > div.s2item.s2subheading > div.s2label,
div.s2question div.s2items > div.s2item.s2subheading > div.s2input,
table.question th.subheading {
      font-weight: normal;
      color: red;
}
by s257106 (210 points)
Vielen Dank, das klappt prima :)

Ich habe Ihnen eine Mail mit der Frage und dem Layout geschickt.

Sie haben auf jeden Fall Recht, der Fragetyp "Skala (Extrema beschriftet)" passt hier natürlich besser. Ich bin da allerdings auf ein ähnliches "Problem" gestoßen: Wie kann man die Schriftgröße der einzelnen Items nun anpassen? Ich konnte mir anhand Ihrer bisherigen Lösung und den Browsertools helfen (falls jemand ebenfalls danach sucht):

div.s2question div.s2items > div.s2item.s2extended > div.s2label,
div.s2question div.s2items > div.s2item.s2extended > div.s2input,
table.question td.extended {
      font-weight: normal;
      font-size: 17px;
}

Nun stellt sich mir aber die Frage, wie sich die beiden Fragetypen "Polaritätenprofil" und "Skala (Extrema beschriftet)" überhaupt unterscheiden. Für meinen Anwendungsfall ist die Skala auf jeden Fall zu bevorzugen.

Ich habe noch folgendes Problem: Gibt es eine Möglichkeit, den Abstand zwischen den Items im Layout zu definieren? Ich habe mir bisher so geholfen, dass Ich mittels PHP die Frage für jedes Item erneut aufrufe und der Funktion question() mittels der Option 'spacing=<n>' den Abstand mitgebe. Das hat allerdings einen Nachteil. Ich kann so die Items nicht mehr automatisch durchnummerieren und muss die Nummer händisch im Text eintragen. Haben Sie dafür evtl. eine Lösung?
by SoSci Survey (327k points)
> wie sich die beiden Fragetypen "Polaritätenprofil" und "Skala (Extrema beschriftet)" überhaupt unterscheiden

Die Skala hat für alle Item dieselbe Verankerung, aber pro Item einen unterschiedlichen Itemtext. Das Polprofil hat keine allgemeine Verankerung, und jedes Item besteht aus einem Begriffspaar. Normalerweise wird letzteres eingesetzt für ... "Denken Sie an Object X, wie würden Sie dieses zwischen den folgenden Begriffspaaren einordnen?" -> "langweilig/aufregend", "billig/teuer", u.s.w.

> Gibt es eine Möglichkeit, den Abstand zwischen den Items im Layout zu definieren?

Ja, diese Einstellung kann man, genau wie die Schriftgröße für Items, direkt im Layout steuern. Einfach im Karteireiter "Fragebogen-Elemente" bei "Abstand zw. Items (↑↓)" festlegen.
by s257106 (210 points)
>Einfach im Karteireiter "Fragebogen-Elemente" bei "Abstand zw. Items (↑↓)" festlegen.

Das scheint bei mir nicht zu funktionieren. Ich habe dort den Abstand auf 50px gesetzt und die Items werden dennoch zusammenhängend dargestellt:

Siehe Pretest: https://www.soscisurvey.de/tuddue/?act=0os4u9SON1aPUnhuUOlBxRhm

Ich habe innerhalb der Frage (Skala, Extrema beschriftet) unter Composition->Layout eingestellt, dass die Skala unter dem Text erscheint. Sofern Ich hier auf "dynamisch" stelle, gibt es ein wenig mehr Abstand, dieser lässt sich allerdings auch nicht durch die Option im Fragebogen-Layout beeinflussen.
by s257106 (210 points)
Nachtrag: Der Abstand den man "zwischen Items" einstellt, erhöht, sofern man in der Frage "shading" aktiviert hat, die "Fläche" des Items. Sind z.B. alle auf shading gestellt, hängen dann mehr oder weniger große Blöcke aneinander. Wenn man shading auf "disabled" stellt, dann macht es mehr Sinn.
by SoSci Survey (327k points)
Die Schattierung sollte die Items ja mit gleichmäßig breiten Streifen versehen - insofern müssen die schattierten Streifen auch breiter werden, wenn man den Abstand erhöht.

Sie haben in Ihrer Frage den Fragetyp ja ein wenig anders verwendet, als er gedacht ist. Einen Effekt der Einstellung für den Abstand sollten Sie aber unabhängig davon bekommen. Haben Sie im Layout aktuell noch die 50 Pixel eingestellt?

Oder suchen Sie eine Lösung mittels CSS, die spezifisch nur für die eine Frage in der aktuellen Darstellungsvariante wirksam wird?
by s257106 (210 points)
edited by s257106
Okay, das mit der Schattierung macht natürlich so Sinn. Nach meiner Vorstellung hätte Ich gerne selbst dann einen visuellen Abstand zwischen zwei Items, wenn beide schattiert sind. Bisher ist es so, dass dann alle Items mit großen Schattierungen aneinanderhängen. Es funktioniert, wenn ich alle Items mit question('ID', Item, 'spacing=n') aufrufe. Dann kann ich allerdings nicht die Items automatisiert durchnummerieren. Funktioniert aber auch im Zweifel händisch. Ich hatte den Abstand jetzt wieder auf 50px gestellt.

https://www.soscisurvey.de/tuddue/?act=0YYVuCYtrW2hpQiDZIoVvVz7
by SoSci Survey (327k points)
Hmm ... von den 50 Pixeln sehe ich weder in der Ausgabe noch im Code etwas. Ich vermute, dass die Umsetzung für die statische Darstellung des Polprofils da tatsächlich nicht korrekt ist. Das müssen wir mal ansehen.

Was ich Ihnen als Workaround anbieten kann, ist das hier:

#PQ03_qst tr.hover > td {
  border-top: 30px solid white;
}

Das ist technische gesehen kein Abstand, sondern ein Rahmen, der visuelle Effekt ist aber derselbe.

Abstände werden in der statischen Darstellung - anders als in der dynamischen - nicht möglich sein, weil hier eine Tabellenstruktur verwendet wird, die sich mit Abständen zwischen Zellen ein wenig schwer tut. Mit dem border-spacing Attribut von Tabellen wäre es noch möglich, das wird aber selten genutzt.

Danke für die Übermittlung der Screenshots, was Sie damit meinten, dass die Mitte hervorgehoben wird. Eigentlich soll der Trennstrich nur die Labels voneinander abgrenzen. Das ließe sich, falls Sie doch die dynamische Darstellung verwenden wollten, per CSS relativ einfach "abschalten".
by s257106 (210 points)
Prima, Ich bedanke mich vielmals für Ihre Zeit! :) Könnten Sie mir noch mitteilen, wie Ich diese Abgrenzung im dynamischen Design "abschalte"?
by SoSci Survey (327k points)
Wenn Sie einen Pretest-Link posten möchten (das erspart viele Fragen nach dem Kontext und den Detail-Einstellungen), kann ich das gerne machen.
by s257106 (210 points)
https://www.soscisurvey.de/tuddue/?act=0YYVuCYtrW2hpQiDZIoVvVz7

Das ist ein vereinfachtes Beispiel der Fragen. Geht aber im Prinzip um die gleiche Darstellung. Diesen "Strich" bei der 4 würde Ich gerne entfernen :)
by SoSci Survey (327k points)
Sie brauchen zwei Zeilen CSS-Selektoren pro Frage, für diese Seite also z.B.

#PE05_tab.s2items div.s2aboveLabels > div.s2polarLeft,
#PE05_tab.s2items div.s2aboveLabels > div.s2polarRight,
#PE06_tab.s2items div.s2aboveLabels > div.s2polarLeft,
#PE06_tab.s2items div.s2aboveLabels > div.s2polarRight {
  border: 0 none;
}

Alternativ können Sie folgende Regel verwenden, die aber u.U. auf anderen Seiten mehr Effekt haben könnte als beabsichtigt:

.s2items div.s2aboveLabels > div {
  border: 0 none !important;
}
by s257106 (210 points)
Das klappt prima, vielen Dank für Ihre Unterstützung :)

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

...