Flipping Flashcards

The idea for Flipping Flashcards was inspired by an online discussion about studying, where the consensus was that flashcards were a brilliant tool for learning anything under the sun and the key to passing exams. This being the 21st century, I was not about to make paper flashcards, but a realistic flipping animation was essential to my vision. At no point did I try any existing flashcard apps; it was no more than a millisecond between “I’d like to try a tool like this” to “I think I can make a tool like this”.

01.
The main features I envisioned for this project were:
– the card should seem to physically flip,
– the user should be able to upload their own content,
– the user should be able to influence which questions get repeated more often.

All of these generated issues that needed solving.

02.
Coding the interface was the most fun part. For the first iteration, I went a bit crazy with a retro neon design before settling on a more toned down colour scheme.

I chose jQuery Flip as the mechanism to handle card movement. However, it required additional work to make the design accessible. (I ended up binding the space key to the flip() function. In the first version, buttons for assigning a rating to each card were positioned outside of the actual flashcard.

A crucial part of the project was allowing the user to indicate how well they knew the answer to each question and translating that input to how often a particular card gets shown. To that end, each card object is assigned a rating of 6 points when created. These ratings indicate how many times the card gets copied into the temporary array out of which the next random card is drawn. This array gets created every time a new card is needed, so the number of cards gets refreshed whenever a rating changes; the user's click on one of the three rating buttons removes 2, 1, or none of the card's points. This system is easy to customise - changing difficulty is as easy as assigning a different rating when the card objects are first created. (Difficulty level was included as an option in the settings.)

05.
There are three sets of cards hard-coded into the .js file, but customising the content is an essential part of the Flipping Flashcard concept. I needed a human-readable format that could also be easily split into strings for use with the card factory function. Researching different methods of importing external data into JavaScript was a process of trial and error. The original idea was to use either local Excel files or Google Sheets. As interesting as it was to learn to access Google Sheets remotely through Node.js, I wasn't happy with how complex the process of parsing the result was. Fixation on spreadsheets led me to learn how to use the Google Sheets API, followed by Google Sheets Reader, veering to SheetsJS for a stab at local spreadsheets, before I finally settled on importing .csv instead, as the simplest, most elegant solution. Later I also included the option to use a .json file.

06.
The single most important decision in the lide of this project was bringing in a test user. His feedback, combined with Jakob Nielsen's article on design heuristics, led me to implement the following changes from version 1.0 to 2.0:
- add a welcome page with a prominent call to action,
- automatically prompt to choose a study subject on load,
- more muted default colour palette, with the option to choose neon colours from settings,
- integrate the rating stars into the back of the flashcard,
- include a status box with information about the current card set, the user’s progress, and current ratings,
- introduce keyboard shortcuts,
- remove detailed user instructions, opting instead to make the interface self-explanatory by employing game-like design solutions.

07.
This project is not completely finished and may never be. I have yet to find the one best format for importing user questions; .csv is a simple, convenient, readable format, but its lack of text formatting features makes it only suitable for simple questions and one-sentence answers. More options are offered by .json, but in both cases the user has to create a file especially for use with Flipping Flashcards.

With accessibility in mind, I made sure the interface includes keyboard shortcuts for rating as well as flipping the card without clicking.

Since this project has changed so much during development, version control was essential; I took advantage of the option to work on different branches without feeling like I needed to give up one approach to try another. However, for the next project I will make sure to follow a design plan in order to stay on track and avoid working on multiple features at once.

Additionally, I will involve user feedback at a much earlier stage. It was essential in order to flesh out Flipping Flashcards 2.0, but those choices could have been made much sooner.

Finally, in an ironic twist, I discovered that studying with flashcards is not my thing after all, and I’ve since gone back to trusted mind-maps and lists.