gitignore + rest of repository

2025-12-05 23:15:46 -06:00 · 2020-12-15 10:46:25 -06:00
parent 6fdfa5ef94
commit 67e32f7850
11 changed files with 256 additions and 0 deletions
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1 @@
+VUE_APP_API_URL=http://localhost:5000
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
+        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+        <title><%= htmlWebpackPlugin.options.title %></title>
+    </head>
+    <body>
+        <noscript>
+            <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
+                enabled. Please enable it to continue.</strong>
+        </noscript>
+        <div id="app"></div>
+        <!-- built files will be auto injected -->
+    </body>
+</html>
--- a/src/App.vue
+++ b/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>
--- a/src/arithmetic.js
+++ b/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]();
+        }
+    }
+}
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/main.js
+++ b/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')
--- a/src/utils.js
+++ b/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
+        }
+    }
+}
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    outputDir: './docs/',
+}