Fehler bei Zentrierung Antwortoptionen

Question

Guten Morgen,

Da mein SoSci-Projekt bald starten soll, wollte ich heute alles final prüfen. Ich nutze SoSci über den Server meiner Universität, diese hat kürzlich alle vorhandenen Updates eingespielt. Ich weiß nicht, ob es an den Updates liegt, jedoch habe ich nun plötzlich folgendes Problem: Die Auswahloptionen zu verschiedenen Fragen des Typs Auswahl bzw. Mehrfachauswahl werden nicht mehr alle zentriert dargestellt. Dabei habe ich die Auswahloptionen alle nach diesem Vorgehen eingetragen:

<p align="center"  style="color:black"> Ich habe Musik gehört </p>

Dennoch erscheinen nur einzelne Auswahloptionen zentral. Woran kann das liegen und wie kann ich das korrigieren? Bis vor dem Update wurden alle Optionen zentral angezeigt.

Ich wäre sehr dankbar für Hilfe!

Viele Grüße

Zur Verdeutlichung ein Screenshot meines Problems:

Answer 1

Generell ist es keine gute Idee, solchen HTML-Code in den Optionen zu verwenden - die saubere Lösung wäre es, mit pageCSS() zu arbeiten. Wenn Sie möchten, posten Sie einen Pretest-Link direkt zur betroffenen Seite, dann helfe ich mit dem CSS gerne ein wenig nach.

Ursache für das von Ihnen beobachtete Problem ist, dass <p> in diesem Kontext nicht die volle Breite nutzt. Wenn Sie also im style-Attribute noch ein width: 100% ergänzen, klappt es vermutlich wieder:

<div style="color:black; text-align: center; width: 100%; box-sizing: border-box;"> Ich habe Musik gehört</siv>

Aber eleganter wäre es, wie gesagt, das für die Seite einmal zentral über pageCSS() anzupassen.

Comments

Vielen vielen Dank schon einmal!

Ich habe die Ergänzung mit width:100% ausprobiert, jedoch hat das dazu geführt, dass die Auswahlfelder kleiner sowie nicht mehr untereinander dargestellt wurden - die bisherige Darstellung möchte ich aber natürlich beibehalten.

Bei der Lösung über pageCSS () wäre es zudem wichtig, dass nur die Attribute der Auswahloptionen angesprochen werden, nicht aber andere Texte/Items. Ich bin leider ein ziemlicher Laie, wenn es um Programmierungen geht...

Ich sende Ihnen hier zwei Pretest-Links:

1. https://survey.studiumdigitale.uni-frankfurt.de/EmoTrackTeen/?act=wQZzocQIZv43lkTOP9r7zcBZ
-> auf dieser Fragebogenseite befindet sich nur eine Frage mit Mehrfachauswahl

2. https://survey.studiumdigitale.uni-frankfurt.de/EmoTrackTeen/?act=sVwyjuHtR9rpbcMkTJyMU20g
-> von dieser Seite stammt der Screenshot aus meiner ursprünglichen Anfrage - damit dieser erscheint, muss bei ER23 ("Ich habe mich von meinen Gefühlen oder der Situation abgelenkt") ein Skalenwert > 0 angegeben werden

---

Fügen Sie auf der Seite mit der Auswahl bitte folgenden PHP-Code ein:

pageCSS('
  .s2iSelection div.option > div.label > label {
    width: 100%;
    box-sizing: border-box;
  }
');

Das macht etwas mehr Sinn, wenn man sich in der Browserkonsole mal die CSS-Befehle ansieht, welche für die aktuelle Formatierung zuständig sind.

---

Perfekt, vielen Dank - so klappt es!