Kategorien SC-IAT horizontale Position ändern / Abstand zum Bildschirmrand

Question

Hallo zusammen,

ich würde gerne wissen, ob es möglich ist die Kategorien die während des SC-IATs angezeigt werden, horizontal zu verschieben bzw. den Abstand zum seitlichen Bildschirmrand zu verändern.

LG

Comments

Ja, das ist mittels CSS möglich. Wenn Sie einen Pretest-Link (direkt) zur betroffenen Seite im Fragebogen posten und beschreiben, was in welche Richtung soll, dann kann ich auch gerne konkreter werden.

---

Vielen Dank für Ihre Antwort. Hier der Pretest-Link zur betroffenen SC-IAT Seite:
https://www.soscisurvey.de/WahrnehmungPlastik/?act=sBOBWgqB7vmHcBidbyj2PLpX
Wir möchten hier die positiven/negativen Assoziationen mit Plastikverpackungen messen. Die gegensätzlichen Kategorien ("gut" und "schlecht") haben wir bereits am Boden verankert, da sie auf gleicher Höhe stehen sollen. Was uns nun stört, ist dass der Abstand der Kategorie "gut" zum linken Bildschirmrand größer ist, als der Abstand der Kategorie "schlecht" zum rechten Bildschirmrand (Vermutlich durch die länge des Wortes "Plastikverpackungen"). Ist es möglich, den Abstand nur einer Seite zu verändern? Und wenn ja, wie verhält es sich dann beim Tausch der Kategorien im zweiten SC-IAT Durchgang?

Viele Grüße

Answer 1

Was uns nun stört, ist dass der Abstand der Kategorie "gut" zum linken Bildschirmrand größer ist, als der Abstand der Kategorie "schlecht" zum rechten Bildschirmrand (Vermutlich durch die länge des Wortes "Plastikverpackungen").

Sie können die Beschriftungen natürlich auch links-bündig statt zentriert anzeigen:

pageCSS('
  div.iat div.categories div.left {
    text-align: center; left;
  }
');

Oder Sie zentrieren auch das rechte Label:

pageCSS('
  div.iat div.categories div.right {
    float: none;
  }
');

Und wenn ja, wie verhält es sich dann beim Tausch der Kategorien im zweiten SC-IAT Durchgang?

Dafür müssten Sie die Änderungen spiegelgleich auch für die jeweils andere Seite vornehmen.

Comments

Danke, der Code zum Zentrieren des rechten Labels bringt im ersten Durchgang des IATs genau die gewünschten Positionen der Kategorien.
Problematisch ist allerdings der zweite Durchlauf, wenn die Kategorie "Plastikverpackungen" die Seite gewechselt hat. Hier werden dann die rechten Kategorien komplett in der Mitte angezeigt.
Was mir noch nicht ganz klar ist, ist wie man den Code nur auf EINEN der Durchgänge des IATs anwenden kann. Da es sich ja um ein und das selbe Frageelement handelt, kann man hier doch nur eine allgemeine Anweisung zur Formatierung geben, die sich dann auf beide Durchläufe bezieht, oder?

Gerne können Sie sich das Problem noch einmal im Pretest ansehen (diesmal mit integriertem Code zum Zentrieren des rechten Labels). Dafür bitte bis zum Seitenwechsel der Kategorie "Plastikverpackungen" durchklicken!
https://www.soscisurvey.de/WahrnehmungPlastik/?act=sBOBWgqB7vmHcBidbyj2PLpX
Vielen herzlichen Dank für Ihre Mühe im Voraus!

---

> Was mir noch nicht ganz klar ist, ist wie man den Code nur auf EINEN der Durchgänge des IATs anwenden kann.

Gar nicht ...die Formatierung gilt für den kompletten Durchlauf.

> Hier werden dann die rechten Kategorien komplett in der Mitte angezeigt.

Vielleicht möchten Sie die Breite der beiden Spalten noch fixieren. Ich schreibe das nochmal in einer separaten Antwort, um ein Bild einzubinden.

Answer 2

Die Breiten der beiden Antwort-Bereiche können Sie wie folgt fixieren:

pageCSS('
  div.iat div.categories > table td {
    width: 50%;
  }
');

Zum besseren Verständnis diesen Screenshot, welcher (inkl. dem o.g. Code) den Aufbau verdeutlicht:

Und so sieht es aus, wenn Sie zusätzlich links auch zentrieren:

Sie können auch die Feinjustierung der Abstände noch entfernen:

pageCSS('
  div.iat div.categories div.left,
  div.iat div.categories div.right {
      max-width: none;
  }
');

Ich bin nur nicht sicher, ob das in die Richtung geht, die Sie sich wünschen. Die Begriffe "Plastikverpackungen" und "gut" sind einfach sehr unterschiedlich breit. Und egal wie man es ausrichtet, wird es nie ganz symmetrisch sein.