Differences

This shows you the differences between two versions of the page.

--- en:create:questions:svg-select [08.11.2019 23:21] – created d.aulenkamp
+++ en:create:questions:svg-select [13.05.2022 19:04] (current) – [Control via JavaScript] saskia.mueller.577
@@ Line 49: / Line 49: @@
 If you don't want to change this setting in the layout universally (e.g. it also affects selection questions that are displayed as cards), you can define definitions for ''SelBox.svg'', ''SelBox.svg.hover'' and ''SelBox.svg.selected'' in the tab //HTML template of the layout// in the ''<style>'' area. For formatting the selection, the border color (''border-color'') and the background color (''background-color'') are used. If necessary, change the border width directly in the SVG graphic.
+===== Control via JavaScript =====
+The SVG selection has a ''%%'disabled'%%'' property that can be used to block the selection options from being selected or deselected. For this, the property must be set to ''%%'select'%%'' or ''%%'unselect'%%''. It is not possible to read the property.
+The following HTML/JavaScript code blocks deselecting options once selected in the "AB01" question. The code must be placed on the same page as the question, the "AB01" may need to be replaced with the question identifier.
+<code html>
+<script type="text/javascript">
+<!--
+window.addEventListener("load", function() {
+    SoSciTools.questionnaire.AB01.disabled = "unselect";
+});
+// -->
+</script>
+</code>
+The individual options can be controlled via hidden input fields in the background. To activate the second option in "AB01" use the following JavaScript code.
+<code javascript>
+document.getElementById("AB01_02").checked = true;
+</code>
+Clicks on the options can be intercepted and processed based on the ''%%'click'%%'' event of the hidden input fields.
+<code javascript>
+document.getElementById("AB01_03").addEventListener("click", function(evt) {
+    console.log("Click on option 3");
+});
+</code>