Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:questions:svg-select [08.11.2019 23:13] – [Vorbereitung der Grafik] d.aulenkamp
+++ de:create:questions:svg-select [17.10.2021 14:49] (aktuell) – admin
@@ Zeile 48: / Zeile 48: @@
 Wenn die Maus über ein auswählbares Element fährt oder der Teilnehmer ein Element durch Anklicken auswählt, dann verändert das Element seine Farbe. Welche Farben SoSci Survey als Rahmen- und Hintergrundfarbe verwendet können Sie im [[:de:create:layout|Fragebogen-Layout]] einstellen im Karteireiter //Fragebogen-Elemente// -> //Auswahl-Taster//.
-Falls Die diese Einstellung im Layout nicht generell ändern möchten (sie betrifft z.B. auch Ausawhlfragen, die als Kärtchen dargestellt werden), können 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. Ändern Sie die Rahmenbreite bei Bedarf direkt in der SVG-Grafik.
+Falls Sie diese Einstellung im Layout nicht generell ändern möchten (sie betrifft z.B. auch Auswahlfragen, die als Kärtchen dargestellt werden), können 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. Ändern Sie die Rahmenbreite bei Bedarf direkt in der SVG-Grafik.
+===== Steuerung mittels JavaScript =====
+Die SVG-Auswahl besitzt eine Eigenschaft ''%%'disabled'%%'', mit der das Aus- oder Abwählen der Auswahloptionen blockiert werden kann. Dafür muss die Eigenschaft auf ''%%'select'%%'' oder ''%%'unselect'%%'' gesetzt werden. Ein Auslesen der Eigenschaft ist nicht möglich.
+Der folgende HTML-/JavaScript-Code blockiert das Abwählen von einmal ausgewählten Optionen in der Frage "AB01". Der Code muss auf derselben Seite wie die Frage platziert werden, das "AB01" muss ggf. durch die Kennung der Frage ersetzt werden.
+<code html>
+<script type="text/javascript">
+<!--
+window.addEventListener("load", function() {
+    SoSciTools.questionnaire.AB01.disabled = "unselect";
+});
+// -->
+</script>
+</code>
+Die einzelnen Optionen können über versteckte Eingabefelder im Hintergrund gesteuert werden. Um die zweite Option in "AB01" zu aktivieren verwenden Sie folgenden JavaScript-Code.
+<code javascript>
+document.getElementById("AB01_02").checked = true;
+</code>
+Klicks auf die Optionen können anhand des ''%%'click'%%''-Events der versteckten Eingabefelder abgefangen und verarbeitet werden.
+<code javascript>
+document.getElementById("AB01_03").addEventListener("click", function(evt) {
+    console.log("Klick auf Option 3");
+});
+</code>