remove toast notifications for green feedback & red shake, use animate.css for fly fade in/out/right

src/App.vue

@@ -1,11 +1,11 @@
 <template>
     <div id="app">
-        <div id="expression" v-katex="expression"></div>
+        <div id="expression" class="animate__animated animate__faster" :class="currentAnimation" v-katex="expression"></div>
         <div class="container">
             <div class="columns is-centered">
                 <div class="column is-three-fifths">
                     <b-field id="input" @keyup.native.enter="checkAnswer()">
-                        <b-input :custom-class="input_shake" v-model="answer"></b-input>
+                        <b-input :custom-class="inputClass" v-model="answer"></b-input>
                     </b-field>
                 </div>
             </div>
@@ -80,21 +80,23 @@ export default {
             answer: null,
             currentQuestion: null,
             correctTimeout: false,
-            shakeInput: false
+            inputClass: false,
+            allowInputSubmit: true,
+            currentAnimation: null,
+            chances: 3
         }
     },
     computed: {
         expression() {
             return this.currentQuestion != null ? this.currentQuestion.text : "error";
-        },
-        input_shake() {
-            return this.shakeInput ? "shake" : "";
         }
     },
     created() {
         window.addEventListener('keyup', (e) => {
-            if (e.keyCode === 39) {
+            if (e.keyCode === 38) {
                 this.nextQuestion();
+            } else if (e.keyCode === 39) {
+                this.checkAnswer(true);
             }
         });
     },
@@ -104,10 +106,32 @@ export default {
         })
     },
     methods: {
-        nextQuestion() {
+        nextQuestion(fail = false) {
-            this.currentQuestion = arithmetic.methods.getProblem();
+            let problem = arithmetic.methods.getProblem();
+            if (this.currentQuestion == null)
+                this.currentQuestion = problem;
+            else {
+                // Animate fade out
+                if (fail)
+                    this.currentAnimation = 'animate__fadeOutRight'
+                else
+                    this.currentAnimation = 'animate__fadeOutUp';
+
+                // Fade in down
+                setTimeout(() => {
+                    this.currentQuestion = problem;
+                    this.currentAnimation = 'animate__fadeInDown';
+                    setTimeout(() => {
+                        this.currentAnimation = '';
+                    }, 500)
+                }, 200)
+            }
         },
-        checkAnswer() {
+        checkAnswer(force = false) {
+            // Skip answer checking if answer submission currently locked
+            if (!this.allowInputSubmit && !force)
+                return;
+
             // Check answer
             let correct;
             // Number parsing if the answer is a specific number
@@ -117,30 +141,33 @@ export default {
                 // String based answer (like a fraction)
                 correct = this.currentQuestion.answer === this.answer
 
-            if (correct) {
+            if (correct || force) {
-                // Correct answer toast, new question & reset answer box
+                // Correct answer animation, new question & reset answer box
-                this.$buefy.toast.open({
+                this.inputClass = 'correct';
-                    message: 'Correct!',
+                setTimeout(this.clearInputClass, 500)
-                    type: 'is-success',
-                    duration: 600
-                })
                 this.nextQuestion();
                 this.answer = "";
+
             } else {
-                // Incorrect answer toast
+                if (--this.chances === 0) {
-                this.$buefy.toast.open({
+                    this.nextQuestion(true);
-                    message: 'Incorrect.',
+                    this.chances = 3;
-                    type: 'is-danger',
+                }
-                    duration: 500
-                })
 
                 // Shake input
-                this.shakeInput = true;
+                this.inputClass = 'incorrect';
-                setTimeout(this.stopShake, 500);
+                setTimeout(this.clearInputClass, 500);
+
+                // Lock submission
+                this.allowInputSubmit = false;
+                setTimeout(this.unlockInput, 500)
             }
         },
-        stopShake() {
+        clearInputClass() {
-            this.shakeInput = false;
+            this.inputClass = '';
+        },
+        unlockInput() {
+            this.allowInputSubmit = true;
         }
     }
 }

src/main.js

@@ -4,6 +4,7 @@ import Buefy from 'buefy';
 import App from './App.vue'
 import 'katex/dist/katex.min.css';
 import 'buefy/dist/buefy.css';
+import 'animate.css/animate.min.css';
 
 
 Vue.config.productionTip = false

src/scss/shake.scss

@@ -22,6 +22,23 @@
   }
 }
 
-#input input.shake {
+@keyframes green_flash {
-  animation: shake 0.5s;
+  0% {
+    border-color: hsl(0, 0%, 20%);
+    //border-color: rgba(#41df5b, 2.5%);
+  }
+  60% {
+    border-color: rgba(#41df5b, 5%);
+  }
+  100% {
+    border-color: hsl(0, 0%, 20%);
+  }
+}
+
+#input input.incorrect {
+  animation: shake 0.5s ease-in-out;
+}
+
+#input input.correct {
+  animation: green_flash 0.5s ease-in-out;
 }