Submitted by: Peyton Adkins
This web app: This is a continuation of the previous Amphible Quiz project with added features and responsive animations. Some of the features requested in the assignment specifications I had already implemented as bonus features prior.
Time spent: 6 hours spent in total
The following required functionality is completed:
- The user can enter their guess in a box before seeing the flipside of the card
- Clicking on a submit button shows visual feedback about whether the answer was correct or incorrect
- A back button is displayed on the card and can be used to return to the previous card in a set sequence
- A next button is displayed on the card and can be used to navigate to the next card in a set sequence
The following optional features are implemented:
- A shuffle button is used to randomize the order of the cards
- A user's answer may be counted as correct even when it is slightly different from the target answer
- A counter displays the user's current and longest streak of correct responses
- A user can mark a card that they have mastered and have it removed from the pool of answers as well as added to a list of mastered cards
The following additional features are implemented:
- Added a start menu with instructions and the ability to control the size of the batch of cards.
- Added animations to reshuffling cards, getting a card wrong, and getting a card correct.
- Picking a new card (any method) or reshuffling while the answer side is shown will automatically flip the card over.
- Picking a new card (any method) will ensure the same card is not repeated the immediate time before.
- Guessing with a blank answer will result in a notice.
- Guessing incorrectly or revealing the answer prematurely will automattically flip the card to the answer.
The following features that have the potential to be implemented:
- Mobile compatability.
- Additional images or graphics to add more character into the website and to each question.
- A hint system.
- A reward/streak-bonus system.
Here's a walkthrough of implemented user stories:
GIF created with ...
Kap for macOS
A lot of the small things (automatic card flipping, seqeuncing animations, ensuring no duplicates, etc) added to the total time of making this simple app. I wanted to give the best user experience possible, and thus dedicated much of my time to that. I had originally wanted to add more flavor to each question with a unique in-house graphic, but that would have potentially doubled the total development time. Also, there were many bugs with mobile variants of this app in the previous iteration that were not apparent when 'replicated' with a desktop browser (Google Chrome, Safari, and FireFox).