gitignore + rest of repository

src/App.vue

@@ -0,0 +1,130 @@
+<template>
+    <div id="app">
+        <div id="expression" 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 v-model="answer"></b-input>
+                    </b-field>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+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;
+}
+
+#question-text {
+    font-family: "Computer Modern", serif;
+}
+
+#expression {
+    width: 75%;
+    margin: 0 auto;
+    padding-bottom: 2em;
+    text-align: center;
+
+    .katex {
+        font-size: 16em !important;
+        white-space: nowrap;
+        user-select: none;
+    }
+}
+</style>
+
+<script>
+import arithmetic from './arithmetic.js';
+
+export default {
+    name: 'App',
+    data() {
+        return {
+            answer: null,
+            currentQuestion: null,
+            correctTimeout: false
+        }
+    },
+    computed: {
+        expression() {
+            return this.currentQuestion != null ? this.currentQuestion.text : "error";
+        },
+    },
+    created() {
+        window.addEventListener('keyup', (e) => {
+            if (e.keyCode === 39) {
+                this.nextQuestion();
+            }
+        });
+    },
+    mounted: function () {
+        this.$nextTick(() => {
+            this.nextQuestion();
+        })
+    },
+    methods: {
+        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>

src/arithmetic.js

@@ -0,0 +1,51 @@
+import utils from './utils.js';
+
+export default {
+    methods: {
+        // Generate a addition problem
+        addition(mult = 1) {
+            let a = utils.methods.getRandomInt(5 * mult, 100 * mult);
+            let b = utils.methods.getRandomInt(5 * mult, 100 * mult);
+            return {
+                text: `${a} + ${b}`,
+                answer: a + b
+            }
+        },
+        subtraction(mult = 1) {
+            let a = utils.methods.getRandomInt(5 * mult, 100 * mult);
+            let b = utils.methods.getRandomInt(5 * mult, 100 * mult);
+            if (Math.random() > 0.5) {
+                return {
+                    text: `${a} - ${b}`,
+                    answer: a - b,
+                }
+            }
+            else {
+                return {
+                    text: `-${a} + ${b}`,
+                    answer: -a + b
+                }
+            }
+        },
+        multiplication(mult = 1) {
+            let a = utils.methods.getRandomInt(3 * mult, 30 * mult);
+            let b = utils.methods.getRandomInt(3 * mult, 15 * mult);
+            return {
+                text: `${a} \\times ${b}`,
+                answer: a * b
+            }
+        },
+        square_root(mult = 1) {
+            let a = utils.methods.getRandomInt(2 * mult, 20 * mult);
+            return {
+                text: `\\sqrt{${a * a}}`,
+                answer: a
+            }
+        },
+        getProblem: function () {
+            let possible = [this.multiplication, this.square_root];
+            let index = utils.methods.getRandomInt(0, possible.length);
+            return possible[index]();
+        }
+    }
+}

src/main.js

@@ -0,0 +1,15 @@
+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({
+    render: h => h(App),
+}).$mount('#app')

src/utils.js

@@ -0,0 +1,9 @@
+export default {
+    methods: {
+        getRandomInt(min, max) {
+            min = Math.ceil(min);
+            max = Math.floor(max);
+            return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
+        }
+    }
+}