xevion/power-math
1
0
Fork 0
mirror of https://github.com/Xevion/power-math.git synced 2025-12-06 09:15:53 -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-role="dialog"
aria-modal> aria-modal>
<template #default="props"> <template #default="props">
<SettingsMenu v-bind="settings" @close="props.close"></SettingsMenu> <SettingsMenu :problems="problems" @close="props.close"></SettingsMenu>
</template> </template>
</b-modal> </b-modal>
</div> </div>
@@ -52,9 +52,6 @@ export default {
allowInputSubmit: true, allowInputSubmit: true,
currentAnimation: '', currentAnimation: '',
chances: 3, chances: 3,
settings: {
levels: []
},
isSettingsMenuActive: false isSettingsMenuActive: false
} }
}, },

170
src/arithmetic.js
View File

@@ -26,25 +26,25 @@ export default {
} }
}, },
multiplication(mult = 1) { multiplication(options) {
let a = utils.methods.getRandomInt(3 * mult, 30 * mult); let a = utils.methods.getRandomInt(options.low, options.high);
let b = utils.methods.getRandomInt(3 * mult, 15 * mult); let b = utils.methods.getRandomInt(options.low, options.high);
return { return {
text: `${a} \\times ${b}`, text: `${a} \\times ${b}`,
answer: a * b answer: a * b
} }
}, },
division(mult = 1) { division(options) {
let a = utils.methods.getRandomInt(3 * mult, 30 * mult); let a = utils.methods.getRandomInt(options.low, options.high);
let b = utils.methods.getRandomInt(2 * mult, 15 * mult); let b = utils.methods.getRandomInt(options.low, options.high);
return { return {
text: `${a * b} \\div ${b}`, text: `${a * b} \\div ${b}`,
answer: a answer: a
} }
}, },
square_root(mult = 1) { square_root(options) {
let a = utils.methods.getRandomInt(2 * mult, 20 * mult); let a = utils.methods.getRandomInt(options.low, options.high);
return { return {
text: `\\sqrt{${a * a}}`, text: `\\sqrt{${a * a}}`,
answer: a answer: a
@@ -73,7 +73,7 @@ export default {
id: 'medium', id: 'medium',
name: 'Medium', name: 'Medium',
options: { options: {
low: 9, low: 30,
high: 100 high: 100
}, },
style: 'is-warning' style: 'is-warning'
@@ -82,8 +82,8 @@ export default {
id: 'hard', id: 'hard',
name: 'Hard', name: 'Hard',
options: { options: {
low: 15, low: 50,
high: 150 high: 200
}, },
style: 'is-danger' style: 'is-danger'
} }
@@ -91,6 +91,154 @@ export default {
method: self.methods.addition, method: self.methods.addition,
enabled: true, enabled: true,
current: 0 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> <b-icon @click.native="$parent.close()" class="is-clickable" pack="fas" icon="times"></b-icon>
</header> </header>
<section class="modal-card-body"> <section class="modal-card-body">
<b-field addons v-for="(problemType, problemIndex) in problems" :key="problemType.id"> <b-field addons class="is-flex mb-1" v-for="(problemType, problemIndex) in problems" :key="problemType.id">
<p class="control"> <p class="control is-flex-grow-0" style="min-width: 150px;">
<b-button class="button-unhoverable darker" :hovered="false" style="cursor: default;"> <b-button class="button-unhoverable is-block darker w-100" :hovered="false" style="cursor: default;">
{{ problemType.name }} {{ problemType.name }}
</b-button> </b-button>
</p> </p>
<p class="control"> <p class="control is-flex-grow-2">
<b-button @click="disableProblem(problemIndex)" :type="!problemType.enabled ? 'is-info' : ''" :selected="!problemType.enabled"> <b-button class="w-100" @click="disableProblem(problemIndex)" :type="!problemType.enabled ? 'is-info' : ''" :selected="!problemType.enabled">
Off Off
</b-button> </b-button>
</p> </p>
<p class="control" v-for="(difficulty, difficultyIndex) in problemType.difficulties" :key="difficulty.id"> <p class="control is-flex-grow-2" v-for="(difficulty, difficultyIndex) in problemType.difficulties" :key="difficulty.id">
<b-button :type="problemType.enabled && problemType.current === difficultyIndex ? (difficulty.style || 'is-info') : ''" <b-button class="w-100" :type="problemType.enabled && problemType.current === difficultyIndex ? (difficulty.style || 'is-info') : ''"
:selected="problemType.enabled && problemType.current === difficultyIndex" :selected="problemType.enabled && problemType.current === difficultyIndex"
@click.native="selectProblemDifficulty(problemIndex, difficultyIndex)"> @click.native="selectProblemDifficulty(problemIndex, difficultyIndex)">
{{ difficulty.name }} {{ difficulty.name }}
@@ -37,10 +37,8 @@ import problems from "@/problems";
export default { export default {
name: 'SettingsMenu', name: 'SettingsMenu',
data() { props: {
return { problems
problems: problems.data()
}
}, },
created() { created() {
}, },