Anpassen des Designs der Kärtchen bei Fragetyp "Auswahl"

Question

Liebes Forum,
ich würde gerne folgende Anpassungen in der Darstellung der Kärtchen im Fragetyp "Auswahl" vornehmen:

1. Festlegung einer seperaten Farbe für das Maus Hover Over (default ist augenscheinlich "Sekundärfarbe A")
2. Festlegung / Änderung der Hintergrund- und Textfarbe einer Option bei "Click" (nur für diesen Fragetyp).

Zuletzt wollte ich fragen, ob es grundsätzlich möglich ist bei Verwendung des Fragetyps "Skala" mit mehreren Items automatisch auf den Fragetyp "Auwahl" für jedes Item umzuwechseln (unter Nutzung der Skalenanker als Auswahloptionen), wenn ein Smartphone verwendet wird? (Ich hoffe diese Frage ist nicht zu weit weg vom eigentlichen Thema dieses Posts)

Herzlichen Dank im Vorraus!

Comments

Ja, so eine Anpassung ist mittels CSS-Code möglich. Wenn Sie es belbst einmal probieren möchten, öffnen Sie im Browser Ihrer Wahl die Entwicklerkonsole (https://www.soscisurvey.de/help/doku.php/de:general:browser-tools) und sehen Sie sich dort beim Inspektor an, auf Basis welcher Definitionen die Darstellung aktuell erfolgt.

Im Prinzip müssen Sie dann nur noch passende CSS-Befehle mittels pageCSS() in die Seite einbinden. Bei Bedarf kann man die Gültigkeit auch für einzelne Fragen spezifizieren, indem man z.B. #AB01_tab als Selektor voranstellt.

---

Vielen Dank für die rasche Antwort. Ich nehme an die Antwort bezog sich auf die ersten zwei Fragen oder? Wäre es möglich als Beispiel einmal den CSS-Code für die Änderung der Farbe für das Maus Hover Over bei den Auswahl-Kärtchen zu erhalten? Ich habe die Kärtchen im Inspector durchleuchtet, finde allerdings noch nicht so richtig den Anknüpfungspunkt, um hieraus den entsprechend nötigen CSS-Code für den Fragebogen abzuleiten.

---

> Wäre es möglich als Beispiel einmal den CSS-Code für die Änderung der Farbe für das Maus Hover Over bei den Auswahl-Kärtchen zu erhalten?

Genau dieses Beispiel wird ja angezeigt, wenn man in die Browser-Tools schaut ;)

> Ich habe die Kärtchen im Inspector durchleuchtet, finde allerdings noch nicht so richtig den Anknüpfungspunkt, um hieraus den entsprechend nötigen CSS-Code für den Fragebogen abzuleiten.

Posten Sie bitte mal einen Pretest-Link direkt (!) zur betroffenen Seite, dann kann ich ein wenig konkreter werden. Ich zeige dann auch kurz, wo man hinschauen muss.

Und zur zweiten Frage, die ich natürlich überlesen hatte:

> Zuletzt wollte ich fragen, ob es grundsätzlich möglich ist bei Verwendung des Fragetyps "Skala" mit mehreren Items automatisch auf den Fragetyp "Auwahl" für jedes Item umzuwechseln (unter Nutzung der Skalenanker als Auswahloptionen), wenn ein Smartphone verwendet wird?

Wenn Sie die voll beschriftete Skala in der Darstellung "dynamisch" verwenden, schaltet Sosci Survey automatisch um, ja.

---

https://www.soscisurvey.de/SCDGG_PS1/?act=Es77Mg681PGApUy6EOTKbI98

Direkt die erste Frage (C104) können wir als Beispiel nehmen. Ich würde für diesen Fragetyp insgesamt gern die Hover Over-Farbe von grau in ein Blau ändern und bei klicken soll der Text weiß werden und die Hintergrundfüllung schwarz werden. Ich bin für die Hilfe sehr dankbar!

Answer 1

Noch eine kurze Frage hinterher: Ich versuche gerade die vollbeschriftete Skala im Smartphone-Modus (Auswahl-Darstellung) umzudrehen. Das funktioniert für eine spezifische Frage mit folgendem Code:

Nehme ich allerdings den Teil "#C101_tab" raus, um den Befehl für alle derartigen Optionen zu verallgemeinern, funktioniert es nicht mehr:

Wenn Sie das #C101_tab weglassen (ganz unten im Screenshot), dann greift die spezifischere Regel (ganz oben im Screenshot), welche für ebendieses Element die andere Richtung definiert.

Spezifischere Regeln haben nämlich Priorität vor allgemeineren Regeln.

Sie können das aber nochmal explizit überschreiben, und zwar mit einem !important:

@media (max-width: 580px) {
  div.s2input div.s2options {
    flex-direction: column !important;
  }
}

Answer 2

Hier einmal, wo man z.B. in Firefox klicken muss, damit man die passende Info findet:

Rechts steht dann die folgende CSS-Definition für den Bereich mit dem Hover-Effekt:

.s2iSelection.cards div.option:hover,
.s2iCheckbox label:hover {
  background-color: #F2F2F2;
}

Oben steht noch, dass sich das Element innerhalb eines <div> mit der ID C104_tab befindet.

Nun können Sie einfach auf der Seite folgenden CSS-Code ergänzen:

#C104_tab .s2iSelection.cards div.option:hover,
#C104_tab .s2iCheckbox label:hover {
  background-color: #FF9900;
}

Wenn Sie dafür den pageCSS()-Befehl nutzen, dann also der PHP-Code:

pageCSS('
    #C104_tab .s2iSelection.cards div.option:hover,
    #C104_tab .s2iCheckbox label:hover {
      background-color: #FF9900;
    }
');

Comments

Wahnsinn! Tausend Dank! Das "Hover"-Häkchen im Inspector hatte ich nicht mehr auf dem Schirm! :)

---

Noch eine kurze Frage hinterher: Ich versuche gerade die vollbeschriftete Skala im Smartphone-Modus (Auswahl-Darstellung) umzudrehen. Das funktioniert für eine spezifische Frage mit folgendem Code:

@media (max-width: 580px) {
#C101_tab div.s2input div.s2options {
flex-direction: column;}
}

Nehme ich allerdings den Teil "#C101_tab" raus, um den Befehl für alle derartigen Optionen zu verallgemeinern, funktioniert es nicht mehr:

@media (max-width: 580px) {
div.s2input div.s2options {
flex-direction: column;}
}

Pretest-Link zu C101: https://www.soscisurvey.de/SCDGG_PS1/?act=6JBJDPNVC8B8E0OvgNGVwRN7

Haben Sie eine Ahnung was das Problem ist? (Ich nehme an es befindet sich ca. 70cm vor dem Bildschirm, aber vielleicht können Sie helfen :)

---

Die Antworet habe ich - eines Screenshots wegen - in eine separate Antwort hier zur Frage gepackt.

---

Wieder einmal perfekte Hilfe! Tausend Dank!