Added confirm-no property to tangy-consent.

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## v4.36.0
+- Add confirmation to consent form if 'No' selected before the form is closed [#3025](https://github.com/Tangerine-Community/Tangerine/issues/3025). Activate this feature using the new property: `confirm-no="true"`.
+
 ## v4.35.1
 - Set value for <tangy-photo-capture> input to image url before dispatching TANGY_MEDIA_UPDATE event. 
 

demo/index.html

@@ -541,7 +541,8 @@ <h3>tangy-form with consent</h3>
             <tangy-form-item id="consent-item" title="Consent">
               <template>
                 <tangy-consent name="consent"
-                        prompt="The Institute of Curriculum Development is carrying out a Monitoring Survey on the status of the implementation of the competency-based curriculum. This interview is aimed at obtaining information that will guide in the improvement of the curriculum. As a teacher, you are well placed to give informed opinions and offer important suggestions that will help to improve the ongoing implementation.">
+                        prompt="The Institute of Curriculum Development is carrying out a Monitoring Survey on the status of the implementation of the competency-based curriculum. This interview is aimed at obtaining information that will guide in the improvement of the curriculum. As a teacher, you are well placed to give informed opinions and offer important suggestions that will help to improve the ongoing implementation."
+                        confirm-no="true">
                 </tangy-consent>
                 <!--<tangy-toggle-button>Testing the toggle</tangy-toggle-button>-->
               </template>

input/tangy-consent.js

@@ -166,6 +166,11 @@ class TangyConsent extends TangyInputBase {
         type: Boolean,
         value: false,
         reflectToAttribute: true
+      },
+      confirmNo: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
       }
     };
   }
@@ -177,7 +182,8 @@ class TangyConsent extends TangyInputBase {
       'consent_yes': t('yes, continue'),
       'consent_no': t('no, stop'),
       'message_yes': t('You marked Yes'),
-      'message_no': t('You marked No')
+      'message_no': t('You marked No'),
+      'confirm_no': t('Please confirm that you marked No.')
     }
     // this.addEventListener('click', this.inputPressed.bind(this))
     this.shadowRoot.querySelector('#qnum-number').innerHTML = this.hasAttribute('question-number') 
@@ -217,7 +223,13 @@ class TangyConsent extends TangyInputBase {
   }
 
   clickedConsentNo() {
-    this.value = 'no'
+    if (this.confirmNo) {
+      if (confirm(this.t.confirm_no) == true) {
+        this.value = 'no'
+      }
+    } else {
+      this.value = 'no'
+    }
   }
 
   inputPressed() {