Auswahl von SVG-Elementen grafisch zurücksetzen - QuestionSVGSelect

Question

Hallo,

ist es bei einer SVG-Frage möglich, nur eine einmalige Markierung bei Auswahl der svgNodes zuzulassen, die dann nur mittels eines speziellen Nodes für eine Gruppe von Nodes zurückgesetzt werden kann?

Derzeit werden angeklickte Boxen mit einer anderen Backgroundcolor dargestellt. Man muss den jeweiligen Node nochmals anklicken, damit er grafisch demarkiert wird und wieder seinen alten Style erhält.

Ziel ist es, Nodes 1-5 einfach per Klick auswählen (aber nicht abwählen) zu können und diese Markierungen mit Node 11 zurückzusetzen. Nodes 6-10 sollten hiervon unberührt bleiben und nur von Node 12 grafisch demarkiert werden können.

Ich schätze, es muss mit den Funktionen assignStyle gearbeitet werden. Bislang habe ich aber noch keine Lösung gefunden.

Diese Frage bezieht sich auf den vergangen Post:

https://support.soscisurvey.de/?qa=31819/svg-elemente-grafisches-auswahlfeedback-ausschalten#a31861

Comments

> Ziel ist es, Nodes 1-5 einfach per Klick auswählen (aber nicht abwählen) zu können

Puh ... dafür muss ich nochmal in den Code gehen und eine Schnittstelle ergänzen, welche es erlaubt, das Abwählen zu deaktivieren.

Das wird aber ein paar Tage dauern....

---

Das klingt tatsächlich aufwendig.

Wäre es einfacher möglich, den Style von dezidierten Nodes per Klick auf einen anderen Node zurückzusetzen?

Wenn ich wüsste, wie der Style in javascript angesprochen wird, könnte ich einen Counter für jeden Klick auf einen Node einbauen, der beim ersten Mal eine grafische Veränderung herbeiführt. Alles was über einmal geklickt wird, wird nicht mehr demarkiert. Den globalen Style für ausgewählt könnte ich dann mit

pageCSS('
    #EV01_style_selected {
      border-color: black;
      background: transparent;
    }
');

auf transparent schalten.

---

> Wäre es einfacher möglich, den Style von dezidierten Nodes per Klick auf einen anderen Node zurückzusetzen?

Das wäre möglich, aber dann bleibt das Element im Hintergrund dennoch ausgewählt, Ihre Daten würden also nicht mehr mit der Anzeige übereinstimmen.

Außerdem würde das Abwählen dadurch nicht unterbunden.

Eine nur-kosmetische Lösung scheint mir für den schilderten Anwendungsfall daher nicht geeignet.

---

Eine Lösung, die die Integrität der Daten berücksichtigt scheint mir auch am besten geeignet zu sein.

Das übergeordnete Ziel ist es, Prozessbeobachtungen durchzuführen.Jeder Node stellt einen Prozessschritt dar, wird dieser ausgeführt, so soll der Beobachtende auf den Node klicken und dieser sich einfärben. Jeder Prozesschritt kann aber im Laufe des Gesamtprozesses nur einmal durchgeführt werden, weswegen er nicht abwählbar sein soll.
Ist der Prozess beendet, soll auf einen weiteren Node geklickt werden, der dann alle anderen Nodes für diesen Prozess zurücksetzt.
Das Prozessdiagramm kann dann für den nächsten Prozess weiterverwendet werden. Es werden mehrere Prozessdiagramme auf einer Fragebogenseite gleichzeitig angezeigt.

---

Klingt danach, dass die Reihenfolge der Klicks in der Auswertung auch von Relevanz wäre?

---

Vom Prinzip her ja, dazu besteht allerdings schon Code, der das übernimmt.

Die Reihenfolge ist durch Zeitstempel, die bei jedem Klick auf einen Node in einer internen Variable abgelegt werden, rekonstruierbar.

---

Ich kann mir vorstellen, dass diese Anfrage recht ungewöhlich ist. Hatten Sie schon Gelegenheit in den Code zu schauen?

Alternativ könnte ich den aktuellen Status der Gesamtfrage abspeichern und das Zurücksetzen durch einen individuellen Weiterknopf simulieren? Auf der nächsten Seite wird dann die selbe Frage geladen. Nur einige Anworten werden aus dem Speicher gleich mitgeladen?

---

Leider nein, sonst hätte ich schon geantwortet. Angesichts des Semsterstarts ist leider gerade Land-unter. Am Wochenende sollte ich dazu kommen.

---

Absolut verständlich und danke für die Rückmeldung!
Mit Semesterstart fällt sicher noch einmal mehr an. Gutes Gelingen!

Answer 1

Der Fragetyp der SVG-(Mehrfach-)Auswahl beherrscht nun ein paar neue Funktionen, mit welchen Sie Ihr Design umsetzen können sollten.

1. Abwählen sperren

Fügen Sie folgenden JavaScript-Code auf der Seite hinzu, um das Abwählen von Optionen zu sperren.

<script type="text/javascript">
window.addEventListener("load", function() {
    SoSciTools.questionnaire.AB01.disabled = "unselect";
});
</script>

Das "AB01" muss natürlich durch die Kennung der Frage ersetzt werden.

2. Automatische Aktualisierung der Ansicht

Wenn Sie ein verstecktes Auswahlfeld ändern, wird nun auch die Grafik aktualisiert. Damit können Sie jetzt einfach beim Klick auf die "Fertig"-Option alle andere Optionen abwählen.

document.getElement("AB01_10").addEventListener("click", function() {
    document.getElement("AB01_01").checked = false;
    document.getElement("AB01_02").checked = false;
    document.getElement("AB01_03").checked = false;
    document.getElement("AB01_04").checked = false;
});

Comments

Das Sperren der Auswahl klappt hervorragend!

Vielleicht habe ich etwas übersehen, der zweite Teil scheint noch nicht zu funktionieren.

Zum Testen wird die Vorlage-SVG "Blickrichtung 180° (Aufsicht)" als Variable EV01 verwendet.

Im Fragebogen wird folgender Code verwendet:

<script type="text/javascript">
window.addEventListener("load", function() {
    SoSciTools.questionnaire.EV01.disabled = "unselect";
});

document.getElement("EV01_03").addEventListener("click", function() {
    document.getElement("EV01_01").checked = false;
    document.getElement("EV01_02").checked = false;
});
</script>

Element 3 hat die Aufgabe ausgewählte Elemente 1 und 2 zurücksetzen.
Sollte ich den Code oder evtl. Frage(bogen)einstellungen ändern?

---

Schwer zu sagen ohne Pretest-Link... auf den ersten Blick sieht es korrekt aus.

Ergänzen Sie in der Reset-Funktion mal ein console.log("Hier") und prüfen Sie in der JavaScript-Konsole des Browsers, ob die Funktion aufgerufen wird.

---

Sehr guter Hinweis. Nach dem Test ob die Funktion aufgerufen wird, gab mir der Browser aus, dass document.getElement keine Funktion sei.

Daher habe ich es in document.getElementbyId abgewandelt. Das funktioniert.

Zusätzlich muss noch der "Prozess beenden / Ende" Node mit in die zweite Funktion mit aufgenommen werden, sonst funktioniert das Zurücksetzen nur einmalig.