klemek/kana-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added difficulty

Browse Source
This commit is contained in:
Klemek
2021-10-14 19:01:22 +02:00
parent 1fdee041c3
commit a08bccac36
3 changed files with 264 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+23 -70
View File
@@ -1,83 +1,39 @@
module.exports = { module.exports = {
env: { env: {
'commonjs': true, commonjs: true,
'es2021': true, es2021: true,
browser: true,
}, },
extends: [ globals: {
'eslint:recommended', Vue: 'readonly',
], },
extends: [ 'eslint:recommended' ],
parserOptions: { parserOptions: {
ecmaVersion: 12, ecmaVersion: 12,
}, },
rules: { rules: {
'indent': [ 'indent': [ 'error', 4 ],
'error', 'linebreak-style': [ 'error', 'unix' ],
4, 'quotes': [ 'error', 'single' ],
], 'semi': [ 'error', 'always' ],
'linebreak-style': [ 'curly': [ 'error', 'all' ],
'error', 'brace-style': [ 'error', '1tbs' ],
'unix',
],
'quotes': [
'error',
'single',
],
'semi': [
'error',
'always',
],
'curly': [
'error',
'all',
],
'brace-style': [
'error',
'1tbs',
],
'jest/no-done-callback': 'off', 'jest/no-done-callback': 'off',
'jest/expect-expect': 'off', 'jest/expect-expect': 'off',
'comma-dangle': [ 'comma-dangle': [ 'error', 'always-multiline' ],
'error',
'always-multiline',
],
'complexity': 'error', 'complexity': 'error',
'consistent-return': 'error', 'consistent-return': 'error',
'dot-location': [ 'dot-location': [ 'error', 'property' ],
'error', 'eqeqeq': [ 'error', 'always', { null: 'ignore' } ],
'property',
],
'eqeqeq': [
'error',
'always',
{ null: 'ignore' },
],
'no-empty-function': 'error', 'no-empty-function': 'error',
'no-floating-decimal': 'error', 'no-floating-decimal': 'error',
'no-multi-spaces': 'error', 'no-multi-spaces': 'error',
'camelcase': [ 'camelcase': [ 'error', { properties: 'never' } ],
'error', 'comma-spacing': [ 'error', { before: false, after: true } ],
{ properties: 'never' }, 'array-bracket-newline': [ 'error', { multiline: true } ],
], 'array-element-newline': [ 'error', { multiline: true, minItems: 6 } ],
'comma-spacing': [ 'array-bracket-spacing': [ 'error', 'always' ],
'error', 'object-curly-spacing': [ 'error', 'always' ],
{ before: false, after: true },
],
'array-bracket-newline': [
'error',
{ multiline: true },
],
'array-element-newline': [
'error',
{ multiline: true, minItems: 2 },
],
'array-bracket-spacing': [
'error',
'always',
],
'object-curly-spacing': [
'error',
'always',
],
'comma-style': 'error', 'comma-style': 'error',
'computed-property-spacing': 'error', 'computed-property-spacing': 'error',
'eol-last': 'error', 'eol-last': 'error',
@@ -92,10 +48,7 @@ module.exports = {
'no-unneeded-ternary': 'error', 'no-unneeded-ternary': 'error',
'no-whitespace-before-property': 'error', 'no-whitespace-before-property': 'error',
'operator-assignment': 'error', 'operator-assignment': 'error',
'quote-props': [ 'quote-props': [ 'error', 'consistent-as-needed' ],
'error',
'consistent-as-needed',
],
'space-before-blocks': 'error', 'space-before-blocks': 'error',
'space-infix-ops': 'error', 'space-infix-ops': 'error',
}, },
index.html
+3 -3
View File
@@ -28,9 +28,9 @@
<div class='answer' type="button" v-for='v in answers' v-on:click="answer(v)" :class="{disabled:wrongAnswers.contains(v)}">{{ v }}</div> <div class='answer' type="button" v-for='v in answers' v-on:click="answer(v)" :class="{disabled:wrongAnswers.contains(v)}">{{ v }}</div>
</div> </div>
<h3>Options</h3> <h3>Options</h3>
<input type="checkbox" id="opt_rh" v-model="options.rh"><label for="opt_rh">Romaji → ひらがな</label> <input type="checkbox" id="opt_hr" v-model="options.hr"><label for="opt_hr">ひらがな → Romaji</label><br /> <input type="checkbox" id="opt_rh" v-model="options.mappings" value="0"><label for="opt_rh">Romaji → ひらがな</label> <input type="checkbox" id="opt_hr" v-model="options.mappings" value="1"><label for="opt_hr">ひらがな → Romaji</label><br />
<input type="checkbox" id="opt_rk" v-model="options.rk"><label for="opt_rk">Romaji → カタカナ</label> <input type="checkbox" id="opt_kr" v-model="options.kr"><label for="opt_kr">カタカナ → Romaji</label><br /> <input type="checkbox" id="opt_rk" v-model="options.mappings" value="2"><label for="opt_rk">Romaji → カタカナ</label> <input type="checkbox" id="opt_kr" v-model="options.mappings" value="3"><label for="opt_kr">カタカナ → Romaji</label><br />
<input type="checkbox" id="opt_hk" v-model="options.hk"><label for="opt_hk">ひらがな ↔ カタカナ</label> <input type="checkbox" id="opt_kh" v-model="options.kh"><label for="opt_kh">カタカナ → ひらがな</label><br /> <input type="checkbox" id="opt_hk" v-model="options.mappings" value="4"><label for="opt_hk">ひらがな → カタカナ</label> <input type="checkbox" id="opt_kh" v-model="options.mappings" value="5"><label for="opt_kh">カタカナ → ひらがな</label><br />
<br /> <br />
<span v-for="char in options.available"> <span v-for="char in options.available">
<input type="checkbox" :id="'opt_' + char" v-model="options.selected" :value="char"><label :for="'opt_' + char">{{ char ? char : '()' }}&nbsp;</label> <input type="checkbox" :id="'opt_' + char" v-model="options.selected" :value="char"><label :for="'opt_' + char">{{ char ? char : '()' }}&nbsp;</label>
main.js
+237 -182
View File
@@ -1,206 +1,261 @@
/* exported app, utils */ /* exported app, utils */
const kanas = { const kanas = {
columns: ["A", "I", "U", "E", "O"], columns: [ 'A', 'I', 'U', 'E', 'O' ],
rows: ["", "K", "S", "T", "N", "H", "M", "Y", "R", "W", "(N)"], rows: [
hiraganas: [ '',
["あ", "い", "う", "え", "お"], 'K',
["か", "き", "く", "け", "こ"], 'S',
["さ", "し", "す", "せ", "そ"], 'T',
["た", "ち", "つ", "て", "と"], 'N',
["な", "に", "ぬ", "ね", "の"], 'H',
["は", "ひ", "ふ", "へ", "ほ"], 'M',
["ま", "み", "む", "め", "も"], 'Y',
["や", "", "ゆ", "", "よ"], 'R',
["ら", "り", "る", "れ", "ろ"], 'W',
["わ", "", "", "", "を"], '(N)',
["ん"], ],
], hiraganas: [
katakanas: [ [ 'あ', 'い', 'う', 'え', 'お' ],
["ア", "イ", "ウ", "エ", "オ"], [ 'か', 'き', 'く', 'け', 'こ' ],
["カ", "キ", "ク", "ケ", "コ"], [ 'さ', 'し', 'す', 'せ', 'そ' ],
["サ", "シ", "ス", "セ", "ソ"], [ 'た', 'ち', 'つ', 'て', 'と' ],
["タ", "チ", "ツ", "テ", "ト"], [ 'な', 'に', 'ぬ', 'ね', 'の' ],
["ナ", "ニ", "ヌ", "ネ", "ノ"], [ 'は', 'ひ', 'ふ', 'へ', 'ほ' ],
["ハ", "ヒ", "フ", "ヘ", "ホ"], [ 'ま', 'み', 'む', 'め', 'も' ],
["マ", "ミ", "ム", "メ", "モ"], [ 'や', '', 'ゆ', '', 'よ' ],
["ヤ", "", "ユ", "", "ヨ"], [ 'ら', 'り', 'る', 'れ', 'ろ' ],
["ラ", "リ", "ル", "レ", "ロ"], [ 'わ', '', '', '', 'を' ],
["ワ", "", "", "", "ヲ"], [ 'ん' ],
["ン"], ],
], katakanas: [
exceptions: { [ 'ア', 'イ', 'ウ', 'エ', 'オ' ],
SI: "SHI", [ 'カ', 'キ', 'ク', 'ケ', 'コ' ],
TI: "CHI", [ 'サ', 'シ', 'ス', 'セ', 'ソ' ],
TU: "TSU", [ 'タ', 'チ', 'ツ', 'テ', 'ト' ],
HU: "FU", [ 'ナ', 'ニ', 'ヌ', 'ネ', 'ノ' ],
}, [ 'ハ', 'ヒ', 'フ', 'ヘ', 'ホ' ],
[ 'マ', 'ミ', 'ム', 'メ', 'モ' ],
[ 'ヤ', '', 'ユ', '', 'ヨ' ],
[ 'ラ', 'リ', 'ル', 'レ', 'ロ' ],
[ 'ワ', '', '', '', 'ヲ' ],
[ 'ン' ],
],
exceptions: {
SI: 'SHI',
TI: 'CHI',
TU: 'TSU',
HU: 'FU',
},
traps: {
hiraganas: {
//TODO
},
katakanas: {
//TODO
},
},
mappings: [
[ 0, 1 ],
[ 1, 0 ],
[ 0, 2 ],
[ 2, 0 ],
[ 1, 2 ],
[ 2, 1 ],
],
}; };
const utils = { const utils = {
randint: function (min, max) { randint: function (min, max) {
return Math.floor(Math.random() * (max - min)) + min; return Math.floor(Math.random() * (max - min)) + min;
}, },
randindex: function (array, ...toIgnore) { randindex: function (array, ...toIgnore) {
let index; if (array.length === 0 || toIgnore.length >= array.length) {
do { return -1;
index = this.randint(0, array.length); }
} while (this.contains(toIgnore, index)); let index;
return index; do {
}, index = this.randint(0, array.length);
randitem: function (array) { } while (this.contains(toIgnore, index));
return array[this.randindex(array)]; return index;
}, },
randindexes: function (array, number, ...toIgnore) { randitem: function (array) {
const output = []; if (array.length === 0) {
for (let i = 0; i < number; i++) { return undefined;
output.push(this.randindex(array, ...output, ...toIgnore)); }
} return array[this.randindex(array)];
return output; },
}, randindexes: function (array, number, ...toIgnore) {
shuffle: function (array) { if (array.length === 0 || toIgnore.length >= array.length) {
const output = [...array]; return [];
for (let i = 0; i < array.length; i++) { }
const i1 = this.randindex(array); const output = [];
const i2 = this.randindex(array, i1); for (let i = 0; i < number; i++) {
[output[i1], output[i2]] = [output[i2], output[i1]]; output.push(this.randindex(array, ...output, ...toIgnore));
} }
return output; return output;
}, },
contains: function (array, item) { shuffle: function (array) {
return array.indexOf(item) >= 0; const output = [ ...array ];
}, for (let i = 0; i < array.length; i++) {
const i1 = this.randindex(array);
const i2 = this.randindex(array, i1);
[ output[i1], output[i2] ] = [ output[i2], output[i1] ];
}
return output;
},
contains: function (array, item) {
return array.indexOf(item) >= 0;
},
}; };
Array.prototype.shuffle = function () { Array.prototype.shuffle = function () {
return utils.shuffle(this); return utils.shuffle(this);
}; };
Array.prototype.contains = function (item) { Array.prototype.contains = function (item) {
return utils.contains(this, item); return utils.contains(this, item);
}; };
let app = { let app = {
el: "#app", el: '#app',
data: { data: {
title: "Kana Test", title: 'Kana Test',
score: 0, score: 0,
options: { options: {
available: kanas.rows, available: kanas.rows,
selected: kanas.rows, selected: kanas.rows,
rh: true, mappings: [ 0, 1 ],
hr: true, answers: 6,
rk: false, },
kr: false, kanas: [],
hk: false, question: 'あ',
kh: false, answers: [ 'A', 'I', 'U', 'O' ],
answers: 6, wrongAnswers: [],
}, },
kanas: [], watch: {
question: "あ", options: {
answers: ["A", "I", "U", "O"], handler: 'changeOption',
wrongAnswers: [], deep: true,
}, },
watch: {
options: {
handler: "changeOption",
deep: true,
}, },
}, methods: {
methods: { findKana: function(v) {
buildKanas: function () { const self = this;
const self = this; return self.kanas.filter((kana) => {
self.kanas = []; return kana.contains(v);
self.options.selected.forEach((prefix) => { })[0];
const row = kanas.rows.indexOf(prefix); },
if (prefix === "(N)") { buildKanas: function () {
self.kanas.push([ const self = this;
"N", self.kanas = [];
kanas.hiraganas[row][0], self.options.selected.forEach((prefix) => {
kanas.katakanas[row][0], const row = kanas.rows.indexOf(prefix);
]); if (prefix === '(N)') {
} else { self.kanas.push([ 'N', kanas.hiraganas[row][0], kanas.katakanas[row][0] ]);
kanas.columns.forEach((suffix, column) => { } else {
const text = kanas.exceptions[prefix + suffix] kanas.columns.forEach((suffix, column) => {
? kanas.exceptions[prefix + suffix] const text = kanas.exceptions[prefix + suffix]
: prefix + suffix; ? kanas.exceptions[prefix + suffix]
if (kanas.hiraganas[row][column] || kanas.katakanas[row][column]) { : prefix + suffix;
self.kanas.push([ if (kanas.hiraganas[row][column] || kanas.katakanas[row][column]) {
text, self.kanas.push([ text, kanas.hiraganas[row][column], kanas.katakanas[row][column] ]);
kanas.hiraganas[row][column], }
kanas.katakanas[row][column], });
]); }
});
},
findSimilars: function(kanaIndex, mapping) {
const self = this;
const kana = self.kanas[kanaIndex];
const similarIndexes = [];
if (mapping.contains(1) && kanas.traps.hiraganas[kana[1]]) {
const trap = self.findKana(utils.randitem(kanas.traps.hiraganas[kana[1]]));
const trapIndex = self.kanas.indexOf(trap);
similarIndexes.push(trapIndex);
} }
}); if (mapping.contains(2) && kanas.traps.katakanas[kana[2]]) {
} const trap = self.findKana(utils.randitem(kanas.traps.hiraganas[kana[1]]));
}); const trapIndex = self.kanas.indexOf(trap);
if (!similarIndexes.contains(trapIndex)) {
similarIndexes.push(self.kanas.indexOf(trap));
}
}
if (kana[0].length === 1) {
if (kana[0] !== 'N') { // !== (N)
const sameRow = self.kanas.filter((kana2, i) => !similarIndexes.contains(i) && kana2 !== kana && kana2[0].length === 1);
similarIndexes.push(self.kanas.indexOf(utils.randitem(sameRow)));
const sameColumn = self.kanas.filter((kana2, i) => !similarIndexes.contains(i) && kana2 !== kana && kana2[0].substr(-1, 1) === kana[0].substr(-1, 1));
if (sameColumn.length > 0) {
similarIndexes.push(self.kanas.indexOf(utils.randitem(sameColumn)));
}
}
} else {
const sameRow = self.kanas.filter((kana2, i) => !similarIndexes.contains(i) && kana2 !== kana && kana2[0].substr(0, 1) === kana[0].substr(0, 1));
similarIndexes.push(self.kanas.indexOf(utils.randitem(sameRow)));
const sameColumn = self.kanas.filter((kana2, i) => !similarIndexes.contains(i) && kana2 !== kana && kana2[0].substr(-1, 1) === kana[0].substr(-1, 1));
if (sameColumn.length > 0) {
similarIndexes.push(self.kanas.indexOf(utils.randitem(sameColumn)));
}
}
return similarIndexes;
},
generateQuestion: function () {
const self = this;
const mapping = kanas.mappings[utils.randitem(self.options.mappings)];
const questionIndex = utils.randindex(self.kanas);
const similarIndexes = self.findSimilars(questionIndex, mapping);
const otherIndexes = utils.randindexes(self.kanas, Math.max(0, self.options.answers - similarIndexes.length - 1), questionIndex );
self.question = self.kanas[questionIndex][mapping[0]];
self.answers = [ questionIndex ]
.concat(similarIndexes)
.concat(otherIndexes)
.map((index) => self.kanas[index][mapping[1]]);
self.answers = self.answers.shuffle();
self.wrongAnswers = [];
},
answer: function (v) {
const self = this;
const question = self.findKana(self.question);
if (question.contains(v)) {
self.score += 1;
self.generateQuestion();
} else {
self.score = 0;
self.wrongAnswers.push(v);
}
document.activeElement.blur();
},
changeOption: function () {
const self = this;
if (self.options.mappings.length === 0) {
self.options.mappings.push(0);
}
if (self.options.selected.length === 0) {
self.options.selected.push('');
}
self.score = 0;
self.buildKanas();
self.generateQuestion();
},
}, },
generateQuestion: function () { mounted: function () {
const self = this; const self = this;
const questionIndex = utils.randindex(self.kanas); console.log('app mounted');
const answerIndexes = utils.randindexes( setTimeout(() => {
self.kanas, self.$el.setAttribute('style', '');
self.options.answers - 1, });
questionIndex self.buildKanas();
);
//TODO add difficulty
const mappings = [];
if (self.options.rh) { mappings.push([0, 1]); }
if (self.options.hr) { mappings.push([1, 0]); }
if (self.options.rk) { mappings.push([0, 2]); }
if (self.options.kr) { mappings.push([2, 0]); }
if (self.options.hk) { mappings.push([1, 2]); }
if (self.options.kh) { mappings.push([2, 1]); }
const mapping = utils.randitem(mappings);
self.question = self.kanas[questionIndex][mapping[0]];
self.answers = [questionIndex]
.concat(answerIndexes)
.map((index) => self.kanas[index][mapping[1]]);
self.answers = self.answers.shuffle();
self.wrongAnswers = [];
},
answer: function (v) {
const self = this;
const question = self.kanas.filter((kana) => {
return kana.contains(self.question);
})[0];
if (question.contains(v)) {
self.score += 1;
self.generateQuestion(); self.generateQuestion();
} else {
self.score = 0;
self.wrongAnswers.push(v);
}
document.activeElement.blur();
}, },
changeOption: function (v) {
const self = this;
if (!self.options.rh && !self.options.rk && !self.options.hk) {
self.options.rh = true;
}
if (self.options.selected.length === 0) {
self.options.selected.push("");
}
self.score = 0;
self.buildKanas();
self.generateQuestion();
},
},
mounted: function () {
const self = this;
console.log("app mounted");
setTimeout(() => {
self.$el.setAttribute("style", "");
});
self.buildKanas();
self.generateQuestion();
},
}; };
window.onload = () => { window.onload = () => {
app = new Vue(app); app = new Vue(app);
}; };