SVG als Auswahl (Mehrfach) - Abwählen einer Auswahl am Tablet

Question

Liebes SoSci-Team,

Ich habe eine Bedienungsfrage zur Frageoption "SVG als Auswahl (Mehrfach)". Grundsätzlich klappt das wunderbar, ich habe aber Probleme bei der Nutzung am Tablet bei einer sehr unerfahrenen Zielgruppe (nämlich Grundschul- und ggf. auch Kita-Kindern). Um den Kontext zu verstehen, zeige ich mal die Aufgabe:

Ausprobieren können Sie die Items hier: https://www.soscisurvey.de/mika_inf/?q=probleme
Das Problem ist, dass man eine Antwort gut anwählen und auch wieder abwählen können soll. Es gibt dazu die zwei Auswählmöglichkeiten

1. "Hervorhebung bei Berührung und Auswahl (entsprechend Layout)" -> Erstmal priorisierte Version, wenn ich etwas anwähle ist es dann blau markiert mit Rahmen. Wenn ich aber nochmal drauf drücke um zu "entwählen" ist der Rahmen schwarz und es sieht immer noch ausgewählt aus. Das kann man auflösen in dem man danach random auf den weißen Bildschirm irgendwo klickt (super als Erwachsener, für Grundschulkinder schwierig).

2. "Anpassung aller wählbaren Bereiche an das Layout" -> Dann sind die Kästen um die Auswahlmöglichkeiten in schwarz da (siehe Abbildung!) und bei Anklicken werden sie Blau. Unterschied zwischen ausgewählt und nicht ausgewählt nur gering sichtbar, verwirrend für die Kinder.

Also entweder bräuchte ich Lösung 1 ohne das Problem, das bei Abwählen der schwarze Kasten bleibt. oder Lösung 2 muss sich so ändern, dass bei Anwahl das eindeutiger zu sehen ist.

Haben sie irgendwelche Tipps für mich?

Vielen lieben Dank!

Comments

> Wenn ich aber nochmal drauf drücke um zu "entwählen" ist der Rahmen schwarz

Wenn ich den Link aktuell anklicke, dann ist der schwarze Rahmen quasi die Ausgangssituation. Haben Sie aktuell die (1) oder die (2) lt. Ihrer Frage ausgewählt?

Noch nicht als Lösung, aber als Anstoß: Im Layout kann man einstellen, welche Rahmenfarbe wählbare und ausgewählte Optionen haben sollen.

---

Aktuell ist 2 eingestellt.

Ich hab mir gestern aus der Anleitung noch kopiert, dass das hier vielleicht eine Lösung ist: "Sie im Karteireiter HTML-Vorlage des Layouts im <style>-Bereich auch Definitionen für SelBox.svg, SelBox.svg.hover und SelBox.svg.selected hinterlegen. Für die Formatierung der Auswahl wird die Rahmenfarbe (border-color) und die Hintergrundfarbe (background-color) verwendet."

Answer 1

Sie im Karteireiter HTML-Vorlage des Layouts im -Bereich auch Definitionen für SelBox.svg, SelBox.svg.hover und SelBox.svg.selected hinterlegen

Zur Verdeutlichung, was damit gemeint ist, hier die Definitionen, die in Ihrem Fragebogen aktuell aufgrund des Layouts eingestellt sind:

.SelBox {
    border-width: 2px;  border-style: solid;
    border-radius: 5px; 
    background-color: transparent; 
    color: #000000; color: var(--s2color1);
}
@media(hover: hover) and (pointer: fine) {
    .SelBox:hover {
        background-color: #DDE6FF; background-color: var(--s2color5);
        color: #000000; color: var(--s2color1);
    }
}
.SelBox.hover {
    background-color: #DDE6FF; background-color: var(--s2color5);
}
.SelBox.inactive {
    border-color: #CCCCCC; 
    background-color: transparent; 
}
.SelBox.selected {
    border-color: #6688CC; border-color: var(--s2color4);
    background-color: #6688CC; background-color: var(--s2color4);
}

Diese Definitionen ändern sich, wenn Sie die Rahmenfarben im Layout ändern. Aber Sie können die CSS-Anweisungen mittels pageCSS() auch direkt überschreiben. Folgende Anweisung würde den Rahmen im nicht-ausgewählten Zustand zum Beispiel komplett entfernen:

.SelBox {
    border-color: transparent; 
}

Oder Sie können den Rahmen auch ganz hell anzeigen, hier einmal der komplette PHP-Befehl für die Fragebogen-Seite:

pageCSS('
    .SelBox {
        border-color: #AAAAAA; 
    }
');