|
|
|
|
# FlashCards
|
|
|
|
|
|
|
|
|
|
**Tier:** 2-Intermediate
|
|
|
|
|
|
|
|
|
|
FlashCards are a time tested technique used by students to review and test
|
|
|
|
|
their knowledge on a particular subject.
|
|
|
|
|
|
|
|
|
|
This app is based on a knowledge base of questions and answers about a
|
|
|
|
|
particular subject and randomly displays a card with the question and multiple
|
|
|
|
|
answers. The objective is for the user to select the correct answer(s).
|
|
|
|
|
|
|
|
|
|
## User Stories
|
|
|
|
|
|
|
|
|
|
- [ ] User can see a single card, randomly picked from the "deck" displayed
|
|
|
|
|
at any point in time
|
|
|
|
|
- [ ] User can see a question on the card and a list of four possible answers,
|
|
|
|
|
each of which is identified by a letter.
|
|
|
|
|
- [ ] User can select an answer by clicking on it
|
|
|
|
|
- [ ] User can see an error displayed when the wrong answer is selected
|
|
|
|
|
- [ ] User can see a congratulations message when the correct answer is
|
|
|
|
|
selected.
|
|
|
|
|
- [ ] User can click a 'Next Question' button to display the next flash card.
|
|
|
|
|
|
|
|
|
|
### Additional Info for the Developer
|
|
|
|
|
|
|
|
|
|
- For this app the knowledge base of questions and answers should be encoded in
|
|
|
|
|
a JavaScript object.
|
|
|
|
|
- The possible answers display on each card should be randomly chosen from
|
|
|
|
|
other flashcards.
|
|
|
|
|
|
|
|
|
|
## Bonus features
|
|
|
|
|
|
|
|
|
|
- [ ] User can click a 'Results' button to display the tallies of
|
|
|
|
|
correct and incorrect answers.
|
|
|
|
|
- [ ] User can click a 'Reset' button to reset the tallies of correct
|
|
|
|
|
and incorrect answers.
|
|
|
|
|
- [ ] User can click a 'Shuffle' button to re-randomize the "deck"
|
|
|
|
|
- [ ] User can click a 'More Info' button to flip the flash card to see
|
|
|
|
|
additional information. For example, detailed information about the subject
|
|
|
|
|
of the question on the front of the card.
|
|
|
|
|
|
|
|
|
|
## Useful links and resources
|
|
|
|
|
|
|
|
|
|
The definitive source for HTML/CSS/Javascript is [MDN](https://developer.mozilla.org/en-US/)
|
|
|
|
|
|
|
|
|
|
Example Javascript questions and answers can be found at
|
|
|
|
|
[Brainscape](https://www.brainscape.com/subjects/javascript).
|
|
|
|
|
|
|
|
|
|
## Example projects
|
|
|
|
|
|
|
|
|
|
[Vintage Multiplication Flash Cards](https://codepen.io/NinoLopezTech/pen/vJBMpZ)
|
