Polaritätenprofil mit Zeichen anstelle von Zahlen

Question

Guten Tag,

bei einer Frage "Polaritätenprofil" möchte ich anstelle der numerischen Verankerung der Skalenpunkte mit 2 / 1 / 0 / 1 / 2 eine Verankerung mit ++ / + / 0 / + / ++

Ist das umsetzbar?

Answer 1

Am einfachsten erstellen Sie eine Grafik mit den 5 gewünschten Symbolen (vorsicht, der Bindestrich (-) und das Minus (−) sind unterschiedliche Zeichen), speichern die Fragik als PNG-Datei und laden diese in Ihr Befragungsprojekt hoch. Anschließend wählen Sie die Grafik als "Grafische Verankerung" in dem Polaritätenprofil aus.

Comments

Danke für die Rückmeldung.

Leider funktioniert die Option der grafischen Verankerung nicht auf der Handy-Ansicht. Auf dem Handy wird die Grafik gar nicht angezeigt.

Haben Sie eine Idee, wie man entweder ++ / + / 0 / + / ++ als neue Option hinzufügen kann oder wie die grafische Verankerung auch auf dem Handy angezeigt wird?

---

Die grafische Verankerung wird auf Mobilgeräten standardmäßig ausgeblendet, weil sie normalerweise keine Information liefert. Sie können diesen Mechanismus mit dem folgen PHP-/CSS-Code deaktivieren. Platzieren Sie den Code auf jeder Seite mit Polaritätenprofil und ersetzen Sie PP01 (2x) durch die Kennung der jeweiligen Frage.

pageCSS('
  #PP01_head div.s2layoutMatrix {
    display: block;
  }
  @media (max-width: 576px) {
    #PP01_head div.s2anchor > div.s2input > div.s2label {
      display: none;
    }
  }
');

---

Wir haben verschieden große Grafiken ausprobiert, jedoch ist die erstellte Grafik entweder auf der Desktop- oder der Handy-Ansicht verzerrt, woraus sich Probleme bei der Bearbeitung ergeben.

Wäre es möglich, die Verankerung mit den Beschriftungen "++   +    0   +   ++" als eigene Option zu ergänzen im fünfstufigen Polaritätenprofil?

---

Posten Sie gerne einen Pretest-Link mit der verzerrten Grafik, voraussichtlich ist dies mit ein wenig mehr CSS schnell zu lösen. Die Ergänzung einer eigenen Beschriftung würde umfangreiche Änderungen erfordern.

---

Danke für die Rückmeldung.

Hier der Link für den Pretest zum Item:

https://www.soscisurvey.de/test556204/?act=5xr80AZOHdCFG1HskeNRVT0M

---

Sehe ich es richtig, dass Sie die Grafik als Bild über der Frage eingefügt haben? Bitte wählen Sie im Polaritätenprofil einmal den Karteireiter für die visuelle Verankerung, und wählen Sie das Bild dort aus.

---

Ich habe die Grafik nun als "grafische Verankerung" hinterlegt.

Die Desktop-Ansicht funktioniert, aber auf dem Handy wird die Grafik nicht angezeigt.

---

Ja, das ist normal, das können Sie aber einschalten. Wir haben den CSS-Code dafür nun (endlich) in der Anleitung hinterlegt: https://www.soscisurvey.de/help/doku.php/de:create:questions:polar

---

Ich habe den CSS-Code getestet, wie in der Anleitung beschrieben. Auf dem Handy wird mir die visuelle Verankerung jedoch nicht angezeigt.

---

Wenn ich den Pretest-Link von oben ansehe, dann finde ich im Quelltext der Seite den besagten CSS-Code nicht. Könnten Sie wohl bitte nochmal überprüfen, ob das Element auf derselben Seite wie PO01 eingebunden ist?

---

Folgender Code ist in einem "PHP-Fenster" auf der Seite, vor der eigentlichen Fragen, eingebunden:

pageCSS('
  #PO01_head div.s2layoutMatrix {
    display: block;
  }
  #PO01_head div.s2item > div.s2input.s2scale {
    flex-direction: row;
  }
');

---

Danke für den genauen Code. Das Problem liegt darin, dass das Layout diesen CSS-Code zu weit vorne platziert. Aber das können wir durch eine explizite Priorisieung (zweimal "!important") einfach ändern:

pageCSS('
  #PO01_head div.s2layoutMatrix {
    display: block !important;
  }
  #PO01_head div.s2item > div.s2input.s2scale {
    flex-direction: row !important;
  }
');

---

Danke für die Anpassung.

Auf dem Desktop sieht es gut aus. Auf der Handyansicht passt die visuelle Verankerung jedoch nicht mehr zu den Skalenpunkten.

Haben Sie eine Idee, wie wir das anpassen können?

---

Ja, aber die funktioniert nicht generisch, sondern nur für Ihren individuellen Fall:

@media (max-width: 576px) {
  #PO01_head div.s2item > div.s2input > div.s2label {
    flex-basis: 28px !important;
  }
}

(dieser CSS-Code kommt noch in das PageCSS('...') hinein)