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

give SettingsMenu access to problems via property binding, add subtract/multiply/divide/root problem configurations into arithmetic.js export, improve button widths using flex-grow styling

Browse Source
This commit is contained in:
Xevion
2020-12-18 22:00:29 -06:00
parent 5c8d073d72
commit 23d01fda2b
4 changed files with 5339 additions and 5161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10305
.media/banner.ai
View File

File diff suppressed because one or more lines are too long

5
src/App.vue
View File

@@ -12,7 +12,7 @@
aria-role="dialog"
aria-modal>
<template #default="props">
<SettingsMenu v-bind="settings" @close="props.close"></SettingsMenu>
<SettingsMenu :problems="problems" @close="props.close"></SettingsMenu>
</template>
</b-modal>
</div>
@@ -52,9 +52,6 @@ export default {
allowInputSubmit: true,
currentAnimation: '',
chances: 3,
settings: {
levels: []
},
isSettingsMenuActive: false
}
},

170
src/arithmetic.js
View File

@@ -26,25 +26,25 @@ export default {
}
},
multiplication(mult = 1) {
let a = utils.methods.getRandomInt(3 * mult, 30 * mult);
let b = utils.methods.getRandomInt(3 * mult, 15 * mult);
multiplication(options) {
let a = utils.methods.getRandomInt(options.low, options.high);
let b = utils.methods.getRandomInt(options.low, options.high);
return {
text: `${a} \\times ${b}`,
answer: a * b
}
},
division(mult = 1) {
let a = utils.methods.getRandomInt(3 * mult, 30 * mult);
let b = utils.methods.getRandomInt(2 * mult, 15 * mult);
division(options) {
let a = utils.methods.getRandomInt(options.low, options.high);
let b = utils.methods.getRandomInt(options.low, options.high);
return {
text: `${a * b} \\div ${b}`,
answer: a
}
},
square_root(mult = 1) {
let a = utils.methods.getRandomInt(2 * mult, 20 * mult);
square_root(options) {
let a = utils.methods.getRandomInt(options.low, options.high);
return {
text: `\\sqrt{${a * a}}`,
answer: a
@@ -73,7 +73,7 @@ export default {
id: 'medium',
name: 'Medium',
options: {
low: 9,
low: 30,
high: 100
},
style: 'is-warning'
@@ -82,8 +82,8 @@ export default {
id: 'hard',
name: 'Hard',
options: {
low: 15,
high: 150
low: 50,
high: 200
},
style: 'is-danger'
}
@@ -91,6 +91,154 @@ export default {
method: self.methods.addition,
enabled: true,
current: 0
},
{
name: 'Subtraction',
id: 'subtraction',
description: 'Evaluate the difference between two integers.',
difficulties: [
{
id: 'easy',
name: 'Easy',
options: {
low: 7,
high: 50
},
style: 'is-success'
},
{
id: 'medium',
name: 'Medium',
options: {
low: 20,
high: 80
},
style: 'is-warning'
},
{
id: 'hard',
name: 'Hard',
options: {
low: 40,
high: 110
},
style: 'is-danger'
}
],
method: self.methods.subtraction,
enabled: true,
current: 0
},
{
name: 'Multiplication',
id: 'multiplication',
description: 'Evaluate the product of two integers.',
difficulties: [
{
id: 'easy',
name: 'Easy',
options: {
low: 5,
high: 35
},
style: 'is-success'
},
{
id: 'medium',
name: 'Medium',
options: {
low: 8,
high: 50
},
style: 'is-warning'
},
{
id: 'hard',
name: 'Hard',
options: {
low: 15,
high: 95
},
style: 'is-danger'
}
],
method: self.methods.multiplication,
enabled: true,
current: 0
},
{
name: 'Division',
id: 'division',
description: 'Divide one integer by another to get a third integer.',
difficulties: [
{
id: 'easy',
name: 'Easy',
options: {
low: 5,
high: 35
},
style: 'is-success'
},
{
id: 'medium',
name: 'Medium',
options: {
low: 8,
high: 50
},
style: 'is-warning'
},
{
id: 'hard',
name: 'Hard',
options: {
low: 15,
high: 95
},
style: 'is-danger'
}
],
method: self.methods.division,
enabled: true,
current: 0
},
{
name: 'Square Root',
id: 'square_root',
description: 'Find the square root of a given integer.',
difficulties: [
{
id: 'easy',
name: 'Easy',
options: {
low: 4,
high: 20
},
style: 'is-success'
},
{
id: 'medium',
name: 'Medium',
options: {
low: 13,
high: 30
},
style: 'is-warning'
},
{
id: 'hard',
name: 'Hard',
options: {
low: 19,
high: 60
},
style: 'is-danger'
}
],
method: self.methods.square,
enabled: true,
current: 0
}
]
}

20
src/components/SettingsMenu.vue
View File

@@ -5,19 +5,19 @@
<b-icon @click.native="$parent.close()" class="is-clickable" pack="fas" icon="times"></b-icon>
</header>
<section class="modal-card-body">
<b-field addons v-for="(problemType, problemIndex) in problems" :key="problemType.id">
<p class="control">
<b-button class="button-unhoverable darker" :hovered="false" style="cursor: default;">
<b-field addons class="is-flex mb-1" v-for="(problemType, problemIndex) in problems" :key="problemType.id">
<p class="control is-flex-grow-0" style="min-width: 150px;">
<b-button class="button-unhoverable is-block darker w-100" :hovered="false" style="cursor: default;">
{{ problemType.name }}
</b-button>
</p>
<p class="control">
<b-button @click="disableProblem(problemIndex)" :type="!problemType.enabled ? 'is-info' : ''" :selected="!problemType.enabled">
<p class="control is-flex-grow-2">
<b-button class="w-100" @click="disableProblem(problemIndex)" :type="!problemType.enabled ? 'is-info' : ''" :selected="!problemType.enabled">
Off
</b-button>
</p>
<p class="control" v-for="(difficulty, difficultyIndex) in problemType.difficulties" :key="difficulty.id">
<b-button :type="problemType.enabled && problemType.current === difficultyIndex ? (difficulty.style || 'is-info') : ''"
<p class="control is-flex-grow-2" v-for="(difficulty, difficultyIndex) in problemType.difficulties" :key="difficulty.id">
<b-button class="w-100" :type="problemType.enabled && problemType.current === difficultyIndex ? (difficulty.style || 'is-info') : ''"
:selected="problemType.enabled && problemType.current === difficultyIndex"
@click.native="selectProblemDifficulty(problemIndex, difficultyIndex)">
{{ difficulty.name }}
@@ -37,10 +37,8 @@ import problems from "@/problems";
export default {
name: 'SettingsMenu',
data() {
return {
problems: problems.data()
}
props: {
problems
},
created() {
},