Verwendung eines Bildes statt Radio Buttons mit Designänderung bei Auswahl.

Question

Hallo liebes Sosci Survey Team,

für meine Erhebung möchte ich 7 verschiedene Bilder als Radio Button in einer Frage erstellen.
Die Lösung soll wie folgt aussehen:

Dazu habe ich folgende html, gepaart mit PHP Code zum Aufruf einer Frage mit 7 Antwortmöglichkeiten ohne Text geschrieben:

 <style type="text/css">
    .s2iSelection.multiple {
        display: flex;
    }

input[type="radio"] {
    display: inline-block;
    height: 30px;
    width: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background:
        transparent
        no-repeat;
    background-position: 20% 20%;
}

input[type="radio"][name="RE01_01"] {
    background-image: url("Like_Weiss_Klein.jpg")
}
input[type="radio"][name="RE01_01"]:checked {
    background-image: url("Like_Grau_Klein.jpg")
}
input[type="radio"][name="RE01_02"] {
    background-image: url("Herz_Weiss_Klein.jpg");
}
input[type="radio"][name="RE01_02"]:checked {
    background-image: url("Herz_Grau_Klein.jpg")
}
</style>

In der aktuellen Lösung werden keine Bilder und ebenfalls keine Auswahlfelder angezeigt. Die gleiche Lösung für Checkbox statt RadioButton funktioniert allerdings. Können Sie mir helfen?

Freundliche Grüße

Comments

Dürfen die Befragten nur eines der Bilder/Kreise auswählen oder auch mehrere?

---

Nur eines, daher fällt die Wahl auf eine Selection und Radio Buttons

Answer 1

Wenn Sie die Befragten nur ein Symbol wählen lassen, dann empfehle ich eine der folgenden beiden Lösungen:

(1) Eine Bild-Slala, wobei Sie die 7x7 Bilddatei für die Skala in einer Bildbearbeitung zusammenbauen müssten: Benutzerdefinierte Skalen - hier haben Sie volle Kontrolle über jeden einzelnen Auswahlzustand (z.B. unterschiedliche Farben und Vergrößern der ausgewählten Option)

(2) Eine SVG-Auswahl - das bietet sich v.a. dann an, wenn Sie die Vorlage ohnehin schon als Vektorgrafik haben und wenn Sie jedes Symbol bei Auswahl mit derselben Farbe hinterlegen möchten.