a3x/kana
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

bugfix when similar groups are selected

Browse source
This commit is contained in:
Antti Pilto 2017-03-18 19:53:16 +02:00
parent c3dea128a2
commit 2dee2a07d2
8 changed files with 72 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -1,10 +1,10 @@
# Kana Quiz 2
Kana Quiz remade with React.js.
Kana Quiz made with React.js.
See live at http://simplemedia.org/kana/
`npm install`
Install deps: `npm install`
Development: `npm start`

5
npm-shrinkwrap.json generated
View file

@ -1918,9 +1918,8 @@
},
"lodash": {
"version": "4.17.4",
"from": "lodash@>=4.2.0 <5.0.0",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
"dev": true
"from": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz"
},
"lodash.camelcase": {
"version": "4.3.0",

2
src/components/App/App.jsx
View file

@ -41,7 +41,7 @@ class App extends Component {
/>
</div>
</div>
<Footer />
{this.state.gameState=='chooseCharacters'?<Footer />:null}
</div>
)
}

19
src/components/Footer/Footer.jsx
View file

@ -6,7 +6,18 @@ class Footer extends Component {
return (
<div className="container footer">
<div className="col-xs-12">
<h4>New version!</h4>
<h4>How to use</h4>
<p>Kana refers to the two syllabic writing systems used in Japanese: <a href="http://en.wikipedia.org/wiki/Kana" title="Read more at wikipedia">Hiragana and Katakana</a>.</p>
<p>There is no "the right way" to use Kana Quiz.
If you are a beginner, you might want to start by choosing the first two groups (a -&gt; ko) of hiragana. Once you manage to pass the last stage, add in one or two more groups. Aim for the perfection - you want to be answering quickly.</p>
<p>Have fun!</p>
<h4>Update - 18 March 2017</h4>
<p>* Bugfix: Fixed unintended behavior when same group was selected from both hiragana &amp; katakana. Thanks for the bug report!</p>
<p>Coders needed! This app is open source, but I'm currently the only one working on it. If you'd like to practice your React.js skills,
feel free to check the issues and fork it on <a href="https://github.com/anzzstuff/kanaquiz">GitHub</a>!</p>
<h4>Launch - 14 Aug 2016</h4>
<p>
Here we are finally with a new version of Kana Quiz.
This app doesn't require flash anymore, and should work great with mobile phones and tablets.
@ -15,12 +26,6 @@ class Footer extends Component {
<a href="https://goo.gl/forms/BwtgpkYjT1iyH8uE3">this form</a>! {' '}
If you for some reason want to use the old version, it's still available <a href="http://simplemedia.org/kana/flash/">here</a>.
</p>
<h4>How to use</h4>
<p>Kana refers to the two syllabic writing systems used in Japanese: <a href="http://en.wikipedia.org/wiki/Kana" title="Read more at wikipedia">Hiragana and Katakana</a>.</p>
<p>There is no "the right way" to use Kana Quiz.
If you are a beginner, you might want to start by choosing the first two groups (a -&gt; ko) of hiragana. Once you manage to pass the last stage, add in one or two more groups. Aim for the perfection - you want to be answering quickly. To learn the characters in the beginning just enter false answers and it'll tell you what the correct answer was.</p>
<p>Have fun!</p>
<div className="copyright">&copy; <a href="http://simplemedia.org/">Antti Pilto</a> 2016</div>
</div>
</div>

4
src/components/Footer/Footer.scss
View file

@ -9,4 +9,8 @@
a {
text-decoration: underline;
}
.copyright {
border-top: 1px #aaa solid;
padding: 10px 0px;
}
}

42
src/components/Game/Question.jsx
View file

@ -22,15 +22,44 @@ class Question extends Component {
}
getRandomKanas(amount, include, exclude) {
// console.log(this.askableKanaKeys);
let randomizedKanas = this.askableKanaKeys.slice();
// console.log(randomizedKanas);
if(exclude && exclude.length > 0) randomizedKanas = removeFromArray(exclude, randomizedKanas);
if(include && include.length > 0) {
if(exclude && exclude.length > 0) {
// we're excluding previous question when deciding a new question
randomizedKanas = removeFromArray(exclude, randomizedKanas);
}
if(include && include.length > 0) {
// we arrive here when we're deciding answer options (included = currentQuestion)
// remove included kana
randomizedKanas = removeFromArray(include, randomizedKanas);
// console.log(randomizedKanas);
shuffle(randomizedKanas);
randomizedKanas = randomizedKanas.slice(0, amount-1);
// cut the size to make looping quicker
randomizedKanas = randomizedKanas.slice(0,20);
// let's remove kanas that have the same answer as included
let searchFor = findRomajisAtKanaKey(include, kanaDictionary)[0];
randomizedKanas = randomizedKanas.filter(function(character) {
return searchFor!=findRomajisAtKanaKey(character, kanaDictionary)[0];
}, this);
// now let's remove "duplicate" kanas (if two kanas have same answers)
let tempRandomizedKanas = randomizedKanas.slice();
randomizedKanas = randomizedKanas.filter(function(r) {
let dupeFound = false;
searchFor = findRomajisAtKanaKey(r, kanaDictionary)[0];
tempRandomizedKanas.shift();
tempRandomizedKanas.map(function(w) {
if(findRomajisAtKanaKey(w, kanaDictionary)[0]==searchFor)
dupeFound = true;
}, this);
return !dupeFound;
}, this);
// alright, let's cut the array and add included to the end
randomizedKanas = randomizedKanas.slice(0, amount-1); // -1 so we have room to add included
randomizedKanas.push(include);
shuffle(randomizedKanas);
}
@ -39,7 +68,6 @@ class Question extends Component {
randomizedKanas = randomizedKanas.slice(0, amount);
}
return randomizedKanas;
//return this.askableKanaKeys[Math.floor(Math.random() * this.askableKanaKeys.length)];
}
setNewQuestion() {

4
src/components/Game/ShowStage.jsx
View file

@ -45,7 +45,7 @@ class ShowStage extends Component {
componentDidMount() {
if(this.props.stage<=4)
this.timeoutID = setTimeout(this.removeStage, 1500); // how soon we start fading out (1500)
this.timeoutID = setTimeout(this.removeStage, 1200); // how soon we start fading out (1500)
this.showStage();
window.scrollTo(0,0);
}
@ -56,7 +56,7 @@ class ShowStage extends Component {
render() {
return (
<ReactCSSTransitionGroup transitionName="stage" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
<ReactCSSTransitionGroup transitionName="stage" transitionEnterTimeout={900} transitionLeaveTimeout={900}>
{this.state.stageContent}
</ReactCSSTransitionGroup>
);

14
src/data/helperFuncs.js
View file

@ -30,6 +30,20 @@ export function findRomajisAtKanaKey(needle, kanaDictionary) {
return romaji;
}
// whichKanaTypeIsThis(character, kanaDictionary) { // in case if needed later
// let type = null;
// Object.keys(kanaDictionary).map(function(whichKana) {
// Object.keys(kanaDictionary[whichKana]).map(function(groupName) {
// Object.keys(kanaDictionary[whichKana][groupName]['characters']).map(function(key) {
// if(key==character) {
// type = whichKana;
// }
// }, this);
// }, this);
// }, this);
// return type;
// }
export function shuffle(array) {
var i = 0
, j = 0