albertpatterson / flash-cards

An app for creating interactive flashcards from a list of terms saved in a Google Sheets spreadsheet document, allowing users to create flashcards from public lists or their own private lists

Flash-Cards

An app for creating interactive flashcards from a list of terms saved in a Google Sheets spreadsheet document, allowing users to create flashcards from public lists or their own private lists. App uses Google Login and Google Drive & Sheets APIs to allow users to access their word lists and also uses firebase authentication, storage, and functions to allow users to revisit recently viewed lists.

How to use

1. Find the app at https://easy-flashcards.com hosted via Firebase (staging available at https://flashcards-staging-206fc.firebaseapp.com)
   1. The app is not yet verified (work in progress)
   2. it currently only supports phones in portrait disiplay
   3. Overall the app is very rough but does off the basic functionality described
2. Sign in with Google, which allows the app to locate and read saved word lists
3. optional steps
   1. Create your own lists
      1. Create a Google Sheets spreadsheet document: https://www.google.com/sheets/about/
      2. Add terms
         • one term per row
         • first column: language being studied
         • second column: intermediate representation (eg. pinyin, hiragana, phonetic spelling, etc...)
         • third column: known language
      3. Give each sheet a meaningful name (tabs at the bottom of the page represent sheets). The app will regard each sheet as a different term list. See https://docs.google.com/spreadsheets/d/1af9vsz-qcJooeql9yGn0TjOGGTE3amVIRm-Yu_y4bLU as an example
   2. Consider sharing your term lists
      1. Share the app to allow anyone with the link to view the document
      2. Email the link to the spreadsheet document to [email protected]

How to install and run

1. Clone this repo
2. > npm install
3. Create your own project and setup OAuth 2.0 as described at https://developers.google.com/identity/protocols/OpenIDConnect
4. upadte src/assets/app.js to use your own project information
5. development
   1. build
      • Unix: $> npm run build
      • Windows: > npm run buildw
   2. webpack dev serve: > npm run dev
   • optional: serve using firebase configuration
     1. > npm install -g firebase-tools
     2. > firebase serve

flash-cards's Issues

register domain

Verify App

https://support.google.com/cloud/answer/7454865?hl=en

Save progress

If the window is closed all progress is lost and the user must restart. This makes large lists almost impossible to complete.

enable travic.ci and automatically deploy to staging

Enable the staging environment to interact with its own database

Remove usage of action and nav

this util worked well for very simple actions, but for more complex use cases (such as interaction between touch and mouse events) it is not sufficient

No assumption should be made about the languages being studied

Add setting to show the phonetic reading on either the front or back of the card

Make nav easier

larger buttons or tap to flip and swipe left/right to mark wrong/right

Show counts of complete/incomplete

Allow Subsets of lists

Improve sheet selection

• provide a filter
• make the list scrollable

Alphabetically sort lists

Fix border and button position in low aspect ration screens

• border is only visible in the view port and is broken when scrolling vertically
• buttons can show up on top of inputs