xevion/power-math
1
0
Fork 0
mirror of https://github.com/Xevion/power-math.git synced 2025-12-06 01:15:48 -06:00
Code Issues Packages Projects Releases Wiki Activity

gitignore + rest of repository

Browse Source
This commit is contained in:
Xevion
2020-12-15 10:46:25 -06:00
parent 6fdfa5ef94
commit 67e32f7850
11 changed files with 256 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.development Normal file
View File

@@ -0,0 +1 @@
VUE_APP_API_URL=http://localhost:5000

23
.gitignore vendored
View File

@@ -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?

5
babel.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

19
public/index.html Normal file
View File

@@ -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>

130
src/App.vue Normal file
View File

@@ -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>

51
src/arithmetic.js Normal file
View File

@@ -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]();
}
}
}

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

15
src/main.js Normal file
View File

@@ -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')

9
src/utils.js Normal file
View File

@@ -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
}
}
}

3
vue.config.js Normal file
View File

@@ -0,0 +1,3 @@
module.exports = {
outputDir: './docs/',
}