-
Notifications
You must be signed in to change notification settings - Fork 2
/
flashcard-screen.js
122 lines (98 loc) · 3.15 KB
/
flashcard-screen.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
// TODO(you): Modify the class in whatever ways necessary to implement
// the flashcard app behavior.
//
// You may need to do things such as:
// - Changing the constructor parameters
// - Rewriting some of the existing methods, such as changing code in `show()`
// - Adding methods
// - Adding additional fields
class FlashcardScreen {
constructor(containerElement, topic) {
this.containerElement = containerElement;
this.topic = topic;
this.currentCard = 0;
this._onOneCardFinish = this._onOneCardFinish.bind(this);
this._onContinue = this._onContinue.bind(this);
this._onRestart = this._onRestart.bind(this);
document.addEventListener('one-card-finish', this._onOneCardFinish);
document.addEventListener('continue-wrong-cards', this._onContinue);
document.addEventListener('restart', this._onRestart);
// keep track of wrong cards and scores
this.numRight = 0;
this.numWrong = 0;
this._onCardRight = this._onCardRight.bind(this);
this._onCardWrong = this._onCardWrong.bind(this);
document.addEventListener('card-right', this._onCardRight);
document.addEventListener('card-wrong', this._onCardWrong);
this.wrongCards = [];
this.totalCards = Object.keys( FLASHCARD_DECKS[this.topic]['words']).length;
this.review = false;
}
show() {
let cardIndex;
if(this.review){
// redo the cards we got wrong
cardIndex = this.wrongCards.pop();
// todo, check if the array empty
console.log("cardIndex", cardIndex);
console.log("wrong cards", this.wrongCards);
}
else{
cardIndex = this.currentCard;
}
this.containerElement.classList.remove('inactive');
const flashcardContainer = document.querySelector('#flashcard-container');
flashcardContainer.innerHTML = '';
// all the keys
const keys = Object.keys(FLASHCARD_DECKS[this.topic]['words']);
const card = new Flashcard(flashcardContainer,
keys[cardIndex],
FLASHCARD_DECKS[this.topic]['words'][keys[cardIndex]]
);
}
hide() {
this.containerElement.classList.add('inactive');
}
_onOneCardFinish(event){
this.currentCard++;
if (this.review){
if( this.wrongCards.length === 0)
document.dispatchEvent(new CustomEvent('all-cards-finish'));
else
this.show();
}
else{
console.log("current card", this.currentCard);
if (this.currentCard === this.totalCards-1){
document.dispatchEvent(new CustomEvent('all-cards-finish'));
}
else
this.show();
}
}
_onContinue(){
// review the wrong cards
this.numWrong = 0;
this.currentCard = 0;
this.review = true
this.totalCards = this.wrongCards.length;
this.show();
}
_onRestart(){
// restart the same deck
this.numWrong = 0;
this.numRight = 0;
this.currentCard = 0;
this.wrongCards = [];
this.review = false;
this.totalCards = Object.keys( FLASHCARD_DECKS[this.topic]['words']).length;
this.show();
}
_onCardRight(event){
this.numRight = this.numRight+1;
}
_onCardWrong(event){
this.numWrong = this.numWrong + 1;
this.wrongCards.push(this.currentCard);
}
}