na

app/assets/stylesheets/application.css

@@ -265,6 +265,25 @@ footer {
   justify-content: center;
   padding: 0 1em;
   box-sizing: border-box;
+  transition: scale 0.08s ease-in-out;
+  
+  &:not(.wiggle):active {
+    scale: 0.96;        
+  }
+  
+}
+
+@keyframes wiggle {
+    0%, 100% { transform: translateX(0);     }
+    15%      { transform: translateX(-6px); }
+    30%      { transform: translateX(6px);  }
+    45%      { transform: translateX(-4px); }
+    60%      { transform: translateX(4px);  }
+    75%      { transform: translateX(-2px); }
+  }
+
+.wiggle {
+  animation: wiggle 0.45s ease-in-out;
 }
 
 .button__base-light {

app/javascript/application.js

@@ -35,11 +35,33 @@ document.addEventListener('turbo:render', (event) => {
 
 // document.addEventListener("turbo:before-stream-render", animateElements)
 document.addEventListener("turbo:load", animateElements)
+document.addEventListener("turbo:load", validateFormInput)
 
 
+function validateFormInput(event) {
+  const form       = document.getElementById('questionForm');
+  const submitBtn  = document.getElementById('questionSubmitButton');
+
+  form.addEventListener('submit', e => {
+    // If no radio in the group is checked…
+    if (!form.querySelector('input[type=radio]:checked')) {
+      e.preventDefault();                // stop the form from submitting
+      submitBtn.classList.remove('wiggle'); // reset so the animation can retrigger
+      void submitBtn.offsetWidth;           // force reflow (quick trick)
+      submitBtn.classList.add('wiggle');    // start the wiggle
+    }
+  });
+
+  // Tidy up the class once the animation ends
+  submitBtn.addEventListener('animationend', () => {
+    submitBtn.classList.remove('wiggle');
+  });
+}
+  
+
 function animateElements(event) {
 
-  console.info(event.type)
+  // console.info(event.type)
   
   // Copy link to clipboard
   document.querySelectorAll('[data-share-title]').forEach((share_btn) => {  
@@ -72,8 +94,7 @@ function animateElements(event) {
 
   gsap.set(animationElements, {
     height: 0,
-    opacity: 0,
-    overflow: 'hidden'
+    opacity: 0    
   })
 
   let typewriterElements = document.querySelectorAll('.typewriter-text')

app/views/questions/show.html.erb

@@ -15,7 +15,7 @@
 </div>
 <%# end %>
 
-<%= form_with model: @answer, url: url_for(controller: 'answers', action: 'create') do |form| %>
+<%= form_with model: @answer, url: url_for(controller: 'answers', action: 'create'), id: 'questionForm' do |form| %>
   
   <div class="question-container">
   
@@ -43,7 +43,7 @@
     </div>
     
     <div class="animation-element">
-      <%= form.button tag.span(t('submit')), class: 'button__base' %>
+      <%= form.button tag.span(t('submit')), class: 'button__base', id: 'questionSubmitButton' %>
     </div>
   </div>