Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:questions:svg-select [13.08.2017 15:01] – [SVG als Auswahl] msd-media
+++ de:create:questions:svg-select [17.10.2021 14:49] (aktuell) – admin
@@ Zeile 9: / Zeile 9: @@
 ===== Vorbereitung der Grafik =====
-Die Elemente in der Grafik, welche später als Auswahlknöpfe dienen sollen, benötigen eine ID. Diese wird von der Zeichen-Software (z.B. das freie [[https://inkscape.org/de/|Inkscape]]) in aller Regel automatisch vergeben. Speichern Sie die Vektorgrafik im Internet-taugliche Dateiformat SVG.
+Die Elemente in der Grafik, welche später als Auswahlknöpfe dienen sollen, benötigen eine ID. Diese wird von der Zeichen-Software (z.B. das freie [[https://inkscape.org/de/|Inkscape]]) in aller Regel automatisch vergeben. Speichern Sie die Vektorgrafik im Internet-tauglichen Dateiformat SVG.
 **Tipp:** PDF-Dateien kann man in [[https://inkscape.org/de/|Inkscape]] öffnen, um sie in SVG-Dateien zum konvertieren. Mit dem Onlinedienst [[https://jakearchibald.github.io/svgomg/|SVGOMG]] lassen sich anschließend noch unsichtbare Artefakte in der Datei entfernen, was die Dateigröße mitunter massiv reduziert.
@@ 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>