stylize input field, add input checking/client side question generation, functional question answering

client/src/App.vue

@@ -1,17 +1,46 @@
 <template>
     <div id="app">
         <div id="expression" v-katex="expression"></div>
-        <button v-on:click="fetchQuestion">
-            Fetch Question
-        </button>
+        <div class="container">
+            <div class="columns is-centered">
+                <div class="column is-three-fifths">
+                    <b-field id="input" @keyup.native.enter="checkAnswer()">
+                        <b-input v-model="answer"></b-input>
+                    </b-field>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <style lang="scss">
-html, body {
+html, body, #app {
+    height: 100%;
+    min-height: 100%;
     background: hsl(0, 0%, 6%)
 }
 
+#input {
+    input {
+        text-align: center;
+        background-color: transparent;
+        border-color: hsl(0, 0%, 20%);
+        border-left-width: 0;
+        border-right-width: 0;
+        border-radius: 0;
+        color: hsl(0, 0%, 80%);
+        font-family: 'KaTeX_Main', serif;
+        padding: 0;
+        height: 1.3em;
+        line-height: 0;
+        font-size: 8em;
+
+        &:active, &:focus {
+            box-shadow: none;
+        }
+    }
+}
+
 a, p, span {
     color: hsl(0, 0%, 91%);
     text-shadow: hsl(0, 0%, 5%) 5px 5px;
@@ -24,6 +53,7 @@ a, p, span {
 #expression {
     width: 75%;
     margin: 0 auto;
+    padding-bottom: 2em;
     text-align: center;
 
     .katex {
@@ -35,33 +65,66 @@ a, p, span {
 </style>
 
 <script>
-import axios from "axios";
+import arithmetic from './arithmetic.js';
 
 export default {
     name: 'App',
     data() {
         return {
-            currentQuestion: null
+            answer: null,
+            currentQuestion: null,
+            correctTimeout: false
         }
     },
     computed: {
         expression() {
-            return this.currentQuestion != null ? this.currentQuestion.question : "loading";
+            return this.currentQuestion != null ? this.currentQuestion.text : "error";
         },
     },
+    created() {
+        window.addEventListener('keyup', (e) => {
+            if (e.keyCode === 39) {
+                this.nextQuestion();
+            }
+        });
+    },
     mounted: function () {
         this.$nextTick(() => {
-            this.fetchQuestion();
+            this.nextQuestion();
         })
     },
     methods: {
-        fetchQuestion() {
-            // Fetch the next question, display with KaTeX
-            axios.put(`${process.env.VUE_APP_API_URL}/api/question/`)
-                .then((res) => {
-                    this.currentQuestion = res.data
-                })
+        nextQuestion() {
+            this.currentQuestion = arithmetic.methods.getProblem();
         },
+        checkAnswer() {
+            // Check answer
+            let correct;
+            // Number parsing if the answer is a specific number
+            if (typeof this.currentQuestion.answer === "number")
+                correct = this.currentQuestion.answer === Number.parseInt(this.answer)
+            else
+                // String based answer (like a fraction)
+                correct = this.currentQuestion.answer === this.answer
+
+            if (correct) {
+                // Correct answer toast, new question & reset answer box
+                this.$buefy.toast.open({
+                    message: 'Correct!',
+                    type: 'is-success',
+                    duration: 6000
+                })
+                this.nextQuestion();
+                this.answer = "";
+            } else {
+                // Incorrect answer toast
+                this.$buefy.toast.open({
+                    message: 'Incorrect.',
+                    type: 'is-danger',
+                    duration: 5000
+                })
+            }
+        }
     }
 }
 </script>

client/src/main.js

@@ -1,10 +1,13 @@
 import Vue from 'vue'
 import VueKatex from 'vue-katex';
+import Buefy from 'buefy';
 import App from './App.vue'
 import 'katex/dist/katex.min.css';
+import 'buefy/dist/buefy.css';
 
 
 Vue.config.productionTip = false
+Vue.use(Buefy)
 Vue.use(VueKatex)
 
 new Vue({